Post on 21-Nov-2018
© 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