apresentacao responsivo atualizada - Construsite Brasil .2014-11-26  Cria§£o de um layout que

  • View
    213

  • Download
    0

Embed Size (px)

Text of apresentacao responsivo atualizada - Construsite Brasil .2014-11-26  Cria§£o de um...

  • DesenvolvimentoResponsivo

  • Design Responsivo x Adaptativo

    Ponto inicial:

    Crescimento da variedade de dispositivos e verses que suprem as variaes de

    tamanho e resolues de tela disponveis.

    Objetivo de ambos:

    Fornecer ao usurio a melhor experincia de navegao.

  • Ideia central:

    Criao de um layout que se modifique de acordo com o dispositivo do usurio.

    Caractersticas:

    Medidas relativas e grids fluidos;

    Layout se modifica automaticamente de acordo com o dispositivo, utilizando unidades

    de medidas relativas como porcentagem e EM;

    Permite ocultar elementos desnecessrios nos dispositivos menores;

    Imagens flexveis.

    Design Responsivo

  • Vantagens

    Usurio sempre ter um design otimizado, independente da plataforma;

    Reaproveitamento do layout facilita manuteno e diminui o tamanho dos arquivos.

    Desvantagens

    Maior curva de aprendizagem para o desenvolvedor iniciante;

    Maior tempo de produo;

    Dificuldade de implantao em um produto existente ( necessrio reescrever o

    cdigo HTML/CSS).

    Design Responsivo

  • Design Adaptativo

    Ideia central:

    Emular o aspecto visual e a navegao do design responsivo, sem abandonar as

    medidas fixas.

    Caractersticas:

    Medidas fixas;

    Layout se adapta para trs ou quatro larguras de tela, e no pixel a pixel;

    Esqueleto do layout o mesmo, HTML/CSS so desenvolvidos tradicionalmente,

    declarando na folha de estilo primeiramente os estilos para desktop e s depois so

    descritas as adaptaes de dispositivos mves utilizando Media Queries;

    Imagens estticas.

  • Vantagens

    Tempo de produo menor;

    Pode realizar um upgrade em um layout j existente.

    Maior controle de mudanas de design.

    Desvantagens

    No est preparado para acomodar todos os dispositivos do mercado;

    CSS no to bem aproveitado;

    Provvel quebra do layout (breakpoints) em alguns tipos de resolues.

    Design Adaptativo

  • Contexto:

    O site adota funes diferentes dependendo do contexto e da relevncia do contedo.

    Quando e Onde

    Adaptativo

    Aprimorar um site que j existe em

    um curto espao de tempo

    Responsivo

    Garantir a melhor visualizao em

    uma gama maior de aparelhos

  • Quando e Onde

    Contexto:

    Site de Cinema

    Entender o contexto um trabalho que deve ser feito a quatro mos, pelo

    desenvolvedor e pelo designer;

    Acesso em casa

    Ler a resenha do filme,

    trailer e detalhes

    Acesso no carro

    Informaes sobre o horrio

    da sesso

  • EM: Medida tipogrfica. Nas fontes de prensas de metal 1 EM correspondia a largura de

    corpo quadrado da letra M maiscula.

    Caractersticas:

    Unidade de medida relativa, varia proporcionalmente de acordo com o contexto;

    til em CSS, define as margens e espaamentos em um tamanho proporcional;

    Conforme o tamanho da letra aumenta o mesmo acontece com os elementos afiliados

    ao texto;

    1 EM equivale a 16 pixels, ou seja, a medida que o navegador considera como padro

    para textos.

    O que EM mesmo?

  • Ao definir este valor como padro para todo o documento 1em passa a ser equivalente a

    10px, o que torna bem mais fcil calcular os valores a partir de uma base decimal.

    Definir EM

    16 pixels = 100%,

    10 pixels = 62.5%. (16 x 0.625 = 10)

    10 pixels = 1em

    s pegar o seu valor em pixels, andar uma casa para a esquerda e colocar um ponto.

    Um texto de 14px, por exemplo, seria equivalente a 1.4em.

  • Como lidar com o texto

    Ex.: Fonte 16px, entrelinha 24px e 40px de margem.

  • Converter para medidas relativas:

    Ao definir o font-size para 62.5% a medida do texto o mais fcil: 1.6em.

    Importante: Se o contexto muda, o objeto alvo tambm muda.

    Como lidar com o texto

  • Para o font-size 1.6em o espaamento entre as linhas deve ser calculado com base

    neste nmero.

    Como lidar com o textoComo lidar com o texto

    Frmula:

    objeto contexto = resultado

    2.4 1.6 = 1.5em

    Ex.: Fonte 16px, entrelinha 24px

  • Grid: Do fixo ao relativo

  • Grid: Do fixo ao relativo

  • No arredonde o resultado, coloque o ponto duas casas para a direita e acrescente o

    sinal de porcentagem. Ou seja: 31.25%.

    Grid: Do fixo ao relativo

    objeto contexto = resultado

    sidebar wrap = resultado

    Largura da sidebar

    300 960 = 0.3125

  • Grid: Do fixo ao relativo

  • Descobrir o tamanho relativo da div .principal:

    Grid: Do fixo ao relativo

    objeto contexto = resultado

    principal wrap = resultado

    Largura da principal

    660 960 = 0.6875

    Andando duas casas pro lado chegamos em 68.75% - largura da div .principal.

  • Grid: Do fixo ao relativo

  • Como o pargrafo est na medida EM, o padding seguir EM.

    Margins e Paddings

    Ex.: 40px de margem

    objeto contexto = resultado

    40 16 = 2.5em

  • O que so Media Queries?

    Explicao rpida:

    Expresses de CSS utilizadas para mudar o layout em diferentes aparelhos sem mudar o

    contedo.

    Explicao longa:

    No CSS2 existia uma funo chamada Media Type, ela servia para reconhecer um

    determinado tipo de dispositivo.

  • Media Queries

    Ao todo eram 10 diferentes Media Types:

    all todos os dispositivos

    aural sintetizadores de voz

    braille leitores de Braille

    embossed impressoras de Braille

    handheld dispositivos de mo. Por exemplo: celulares com telas pequenas.

    print impressoras convencionais

    projection apresentaes de slides

    screen monitores coloridas

    tty teleimpressores e terminais

    tv televisores

  • Na prtica: Determinava estilos especficos para a impresso, por exemplo em papel.

    Aplicao: Acrescentar um link para uma outra folha de estilos no cabealho do seu

    documento:

    Media Queries

    Ou utilizar um CSS unificado com a funo @media:

  • Funcionou por um tempo, porm no acompanhou a evoluo dos dispositivos.

    CSS3:

    Media Querie (Consulta de Mdia), expresso lgica que verifica o tipo do dispositivo e

    a capacidade dele;

    Complexidade maior com as Media Queries;

    Media Querie pergunta para o navegador (resposta sempre verdadeira ou falsa).

    Vantagem:

    Controle maior sobre o layout; as consultas verificam itens como a altura e a largura do

    navegador, orientao, resoluo, etc.

    Media Queries

  • Os recursos de media:

    Semelhantes as propriedades de CSS;

    Cada uma tem um nome e aceita certos valores.

    Width: Largura da janela do navegador incluindo a barra de rolagem.

    Valor: medidas de comprimento.

    Aceita prefixo min/max: Sim.

    Device-width: Largura da mdia. No caso de uma mdia digital o tamanho da tela.

    No caso de impresso o tamanho da folha.

    Valor: medidas de comprimento.

    Aceita prefixo min/max: Sim.

    Parmetros do Media Queries

  • Device-aspect-ratio: Proporo da tela do dispositivo.

    Aceita prefixo min/max: No.

    Parmetros do Media Queries

  • Operadores:

    Not (no), And (e) e Only (apenas): Controle mais preciso.

    Utilizar o sinal de virgula equivale a um ou.

    Outros parmetros:

    Height

    Orientation

    Aspect-ratio

    Color

    Color-index

    Monochrome

    Resolution

    Scan

    Grid (tipo de dispositivo, no tem relao

    com o grid do design)

    Parmetros do Media Queries

  • Para desenvolver um CSS para um dispositivo especfico necessrio conhecer a

    resoluo de uma tela (altura e largura em pixels);

    Para uma gama maior de aparelhos preciso generalizar para determinar quais so os

    pontos do layout que dever se transformar.

    Larguras:

    320 pixels - Smartphones no modo retrato.

    480 pixels - Smartphones no modo paisagem.

    600 pixels - Tablets pequenos. Ex: Amazon Kindle (600800)

    768 pixels - Tablets maiores em modo retrato. Ex: iPad (7681024)

    1024 pixels - Tablets maiores em modo paisagem, monitores antigos.

    1200 pixels - Monitores wide.

    Resoluo de Tela

  • Ex.: iPhone em modo retrato possui 320px de largura. No CSS para o smartphone da

    Apple basta utilizar o seguinte Media Querie:

    Resoluo de Tela

    como perguntar para o navegador: Hey, o seu dispositivo uma tela e a largura

    mxima 320 pixels?. Se a resposta for sim o navegador aplica os estilos.

    Para mais informaes sobre Media Queries leia a documentao da W3C sobre o assunto.

  • Viewport

    Funo:

    Informa para todos os dispositivos que a escala inicial do layout equivalente ao

    tamanho do dispositivo.

    Utilizao:

    Se no utilizado alguns aparelhos mveis vo redimensionar o layout por conta

    prpria e o design responsivo s vai funcionar no desktop;

    Declarar o Viewport para o site fundamental para o funcionamento dos @media-

    queries.

    @media-querie = max-width: 400px = largura do Viewport

  • Viewport

    O padro:

    Navegadores: Padro sempre a largura da sua janela;

    Dispositivos mveis: Na maioria 980px o padro.

    Isso pode ser alterado atravs da meta-tag Viewport ou do parmetro de CSS

    @viewport.

  • Ao declarar que a largura do Viewport ser a largura do dispositivo (width=device-

    width), estamos dizendo que a poro visvel do site equivale ao tamanho do seu

    aparelho.

    Vi