© 2013, 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

Sobre mim

Escreviminha primeira linha de código com �� anos em ���� e ela foi emHTML.Daípra CSS e JavaScript foi um pulo. Em seguida, me aventurei em SSI e PHP, incluindobancos de dados. Em ����, iniciei meu curso de Ciência da Computação na USP enadei em águas mais profundas desde então — Java, C, Python. Cresci bastante emprogramação backend.

Mas eu sempre fui apaixonado por front-end.Com o renascimento daWeb através do HTML� nos últimos anos, voltei a focar

na minha paixão. Respiro front-end o dia todo. Leio muito, estudo muito, escrevomuito e programo muito — desde que envolva bastante HTML, CSS e JavaScript.

E, de algum tempo pra cá, resolvi focar emmobile. Meu primeiro site mobile euescrevi há quase uma década usando WML pra redes WAP (se você é novo, talvezprecise daWikipedia pra entender a frase anterior). Imagine minha animação entãonessa nova era dos smartphones e o que signi�cam para a Web. Acredito muito naWeb única como plataforma democrática e universal.

Já trabalhei em algumas empresas, programando em várias linguagens (já até

i

Casa do Código

ganhei dinheiro com opensource). Desde ����, trabalho naCaelum como instrutore desenvolvedor. Foi onde minha carreira decolou e onde mais aprendi, e aprendotodo dia. É onde pretendo passar ainda muitos e muitos anos.

Ensinar e escrever são uma paixão desde o colégio — lembro a decepção da mi-nha professora de português quando ela descobriu que eu seguiria carreira em exatas.Dar aulas, escrever artigos, blogar e palestrar são minha maneira de misturar essashabilidades.

Esse livro é ponto alto em toda essa trajetória. Espero que seja divertido pra vocêler tanto quanto foi, para mim, escrever. Obrigado por acreditar nele e comprá-lo.

Você pode me encontrar também escrevendo por aí na Web:

• Meu blog pessoal onde escrevo bastante sobre Web, mobile, front-end em ge-ral: http://sergiolopes.org

• O blog da Caelum, onde sempre publico artigos sobre front-end: http://blog.caelum.com.br

• Meu Twitter e meu Facebook onde posto muitos links pra coisas baca-nas de front-end e mobile: https://twitter.com/sergio_caelum e https://www.facebook.com/sergio.caelum

• E também participo de vários fóruns, grupos e listas de discussão de Web,onde a gente pode se encontrar. Meu favorito é o novo GUJ: http://www.guj.com.br/perguntas

E, se nos toparmos um dia em algum evento, não deixe de me chamar pra bater-mos um papo.

— Sérgio Lopes, ����

ii

Casa do Código Sumário

Sumário

� AWebMobile �

Estratégia mobile �

� Os caminhos de uma estratégia mobile �

� App ouWeb? Comparativo de possibilidades ��

� HTML � é diferente de HTML �: o caso das packaged apps ��

� Design Responsivo por umaWeb única ��

� Mobile-�rst ��

� Mercado, Browsers, suporte e testes ��

Programando aWeb moderna ��

� Flexibilidade naWeb com layouts �uídos ��

� Media queries: as melhores companheiras de um layout �uído ��

�� Tudo que você queria saber sobre viewport ��

�� A saga dos � pixels e as telas de alta resolução e retina ��

�� Não remova o zoom dos seus usuários ��

iii

Sumário Casa do Código

�� Use sempre media queries baseadas no conteúdo da sua página ��

�� Media queries mobile �rst ou desktop �rst? ��

�� As media queries para resoluções diferentes e retina ���

�� Media queries também ajudam na acessibilidade ���

AWeb adaptativa ���

�� Progressive enhancement e feature detection ���

�� RESS—Design responsivos com componentes no lado do servidor ���

�� O complicado cenário das imagens responsivas ���

�� Design adaptativo e carregamento condicional ���

Gestos e entrada de dados ���

�� Gestos naWeb ���

�� Implementando gestos com JavaScript ���

�� Desa�os de UX em interfaces touch ���

�� Use os novos input types semânticos do HTML � ���

�� Revisitando os antigos componentes de formulários ���

�� Usabilidade de formulários mobile ���

Conclusão ���Versão: ��.�.�

iv