8

© 2012, Casa do Código - Amazon S3 · O Web Design Responsivo é a chave para essa nova Web. É pensar em páginas que se adaptem a todo tipo de dispositivo e contexto de uso. É

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

© 2012, Casa do CódigoTodos os direitos reservados e protegidos pela Lei nº9.610, de 10/02/1998.Nenhuma parte deste livro poderá ser reproduzida, nem transmitida, sem auto-rização prévia por escrito da editora, sejam quais forem os meios: fotográficos,eletrônicos, mecânicos, gravação ou quaisquer outros.

Casa do CódigoLivros para o programadorRua Vergueiro, 3185 - 8º andar04101-300 – Vila Mariana – São Paulo – SP – Brasil

Casa do Código

Prefácio

A era pós-PC da computação pessoal chegou com tudo. Nos tablets e smartphones,aWeb, �nalmente, tem a chance de se tornar verdadeiramente ubíqua e onipresente.Ainda estamos no começo dessa nova fase da tecnologia, mas o futuro é inegavel-mente da Web móvel e dos mais diversos aparelhos de navegação.

Essa nova perspectiva traz desa�os importantes. Até ontem,Web signi�cava umnavegador instalado num Desktop controlado por mouse e teclado numa tela de ta-manho confortável. Nossos sites foram construídos pensando nesse cenário. Mas,agora, temos telas pequenas, touch screen, redes móveis e muitas outras diferenças.Precisamos de uma nova Web. Uma Web que suporte essa explosão de dispositivose, mais ainda, esteja preparada para o futuro de dispositivos que ainda nem conse-guimos antever.

O Web Design Responsivo é a chave para essa nova Web. É pensar em páginasque se adaptem a todo tipo de dispositivo e contexto de uso. É sair das limitaçõesde um browser Desktop e seu tamanho previsível, e pensar em páginas com �exi-bilidade que suportem todo tamanho de tela, qualquer tipo de resolução, interfacescom touch ou mouse. Pensar responsivamente é repensar a Web para o futuro.

E este livro é a ferramenta que você precisa pra entender os desa�os doWeb De-sign Responsivo. O Tárcio mostra os pilares de uma interface responsiva, explora osaspectos técnicos do HTML e CSS, e mostra ideias para uma interface móvel usá-vel. É um livro que recomendo para todo desenvolvedor Web que queira participarativamente da nova Web. Espero que você aproveite a leitura como eu aproveitei.

Sérgio Lopes - @sergio_caelumInstrutor e desenvolvedor na Caelum

i

Casa do Código Sumário

Sumário

� Introdução ��.� Estatísticas do mundo mobile . . . . . . . . . . . . . . . . . . . . . . . ���.� Uma questão de conceito . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Mas meu site já está bom para Android e iPhone! . . . . . . . . . . . . ���.� Para quem é este livro? . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Para aproveitar melhor este livro . . . . . . . . . . . . . . . . . . . . . . ��

� Princípios de um web design responsivo ���.� Como surgiu o web design responsivo . . . . . . . . . . . . . . . . . . ���.� A trinca tecnológica do web design responsivo . . . . . . . . . . . . . ���.� Resoluções de tela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

� layout �uído ���.� Tipos de medida em CSS . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� A fórmula mágica do web design responsivo . . . . . . . . . . . . . . . ���.� Exemplo de um layout �xo . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Metatag viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Convertendo um layout �xo em layout �uído . . . . . . . . . . . . . . ��

� Imagens e recursos �exíveis ���.� CSS para imagens �exíveis . . . . . . . . . . . . . . . . . . . . . . . . . ���.� CSS para outros recursos �exíveis . . . . . . . . . . . . . . . . . . . . . ���.� O problema de imagens em layouts �uídos . . . . . . . . . . . . . . . . ���.� Técnicas para imagens �exíveis em web designs responsivos . . . . . ���.� Imagens em alta resolução . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Tipos de imagem para web . . . . . . . . . . . . . . . . . . . . . . . . . ��

iii

Sumário Casa do Código

� Media Queries ���.� Primeiro, os Media Types . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Parâmetros para trabalhar comMedia Queries . . . . . . . . . . . . . ���.� Operadores Lógicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Vá quebrando seu design em breakpoints bem pensados . . . . . . . . ���.� Gerenciamento de erros . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Uso consciente de Media Queries . . . . . . . . . . . . . . . . . . . . . ���.� Media Queries na prática . . . . . . . . . . . . . . . . . . . . . . . . . . ���

� Tópicos de Web Mobile ����.� O que é Mobile First? . . . . . . . . . . . . . . . . . . . . . . . . . . . . ����.� Por que Mobile First? . . . . . . . . . . . . . . . . . . . . . . . . . . . . ����.� Notas gerais sobre Mobile First . . . . . . . . . . . . . . . . . . . . . . ����.� Como as pessoas usam dispositivos móveis? . . . . . . . . . . . . . . . ����.� O conteúdo é o rei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ����.� Padrões de navegação mobile . . . . . . . . . . . . . . . . . . . . . . . ����.� �� princípios de design para interfaces mobile . . . . . . . . . . . . . . ���

� Continuando seus estudos ����.� Artigos/Tutoriais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ����.� Bookmarklets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ����.� Esboço e planejamento . . . . . . . . . . . . . . . . . . . . . . . . . . . ����.� Ferramentas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ����.� Inspiração . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ����.� JavaScript puro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ����.� Plugins jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ����.� Testes de responsividade . . . . . . . . . . . . . . . . . . . . . . . . . . ����.� Templates e Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . ����.�� Palavras �nais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���

Índice Remissivo ���

Bibliogra�a ���Versão: ��.�.��

iv