Su Mario

© 2012, Casa do Código Todos os direitos reservados e protegidos pela Lei nº9.610, de 10/02/1998. Nenhuma parte deste livro poderá ser reproduzida, nem transmitida, sem autorizaçã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ódigo Livros para o programador Rua Vergueiro, 3185 - 8º andar 04101-300 – Vila Mariana – São Paulo – SP – Brasil

Agradecimentos “Nothing of me is original. I am the combined e�ort of everybody I’ve ever known.” – Chuck Palahniuk, Invisible Monsters (����) Tive a ajuda de muitas pessoas durante a criação deste livro, e sou extremamente grato a elas pela sua participação durante os meses em que trabalhei nele: Ao Adriano Almeida e ao Paulo Silveira pela oportunidade única de escrever este livro, e a ajuda de todos da Casa do Código e da Caelum. A minha família e a minha namorada, pela paciência e ajuda durante estes meses, por todas as noites e �nais de semana dedicados a este projeto. A incrível equipe da Plataformatec, que é muito boa no que faz. Por todos os projetos, apresentações, cafés e chopps compartilhados até então - que muitos outros venham no futuro! A todos os meus colegas e amigos de projetos e empresas passadas - devo muito a todos pelo conhecimento compartilhado ao longo dos anos, que sem dúvida foi muito importante para eu chegar até aqui. E a você, leitor, que está prestes a ler o meu livro. Muito obrigado por dedicar o seu tempo e a sua atenção a ele. Espero contribuir para que você crie ótimos projetos e faça a sua parte para criar uma web melhor.

Sumário �

�

�

O desenvolvimento web hoje �.� Por quê você deve aprender HTML e CSS �.� O estado dos navegadores . . . . . . . . . �.� A complicação dos pre�xos proprietários �.� A longa e sinuosa estrada deste livro . . . Os primeiros passos com o nosso site �.� Escrevendo HTML, de dentro para fora �.� Adicionando formatações básicas . . . . �.� Bordas e margens . . . . . . . . . . . . . �.� Um pouco de cor sempre é bom . . . . . �.� Primeiro contato com imagens . . . . . . �.� Adicionando elementos secundários . . �.� Faça para sua cidade também! . . . . . . HTML�: o que mudou? �.� Escrevendo menos e fazendo mais . �.� Atributos personalizados . . . . . . �.� Tags novas para elementos antigos �.� Refatoração da página de São Paulo �.� Seja pragmático . . . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

� O que todo desenvolvedor precisa saber sobre CSS �.� A incompatibilidade dos browsers e a razão dos resets de CSS �.� Compreendendo o Box model . . . . . . . . . . . . . . . . . . . �.� Utilizando pseudo elementos . . . . . . . . . . . . . . . . . . . . �.� Desenhando uma faixa com “before” e “a�er” . . . . . . . . . . �.� Decorando mensagens . . . . . . . . . . . . . . . . . . . . . . .

. . . .

. . . . . . .

. . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . . .

. . . .

. . . . . . .

. . . . .

. . . . .

. . . .

� � � � �

. . . . . . .

� � �� �� �� �� �� ��

. . . . .

�� �� �� �� �� ��

. . . . .

�� �� �� �� �� ��

Casa do Código

Sumário

�

�.�

Criando conteúdo através de CSS . . . . . . . . . . . . . . . . . . . . . ��

�.�

Arquitete o seu CSS para o futuro . . . . . . . . . . . . . . . . . . . . . ��

�.�

Gere relatórios inteligentes e simples com os estilos de impressão . . ��

O que você consegue fazer com CSS � �.�

A regra @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

�.�

Como utilizar serviços de distribuição de fontes . . . . . . . . . . . . . ��

�.�

Substituição de ícones por fontes . . . . . . . . . . . . . . . . . . . . . ��

�.�

Explore novas possibilidades com bordas . . . . . . . . . . . . . . . . ��

�.�

Manipulação de cores com rgba e gradientes . . . . . . . . . . . . . . . ��

�.�

Trabalhe com sombras e crie menus elegantes . . . . . . . . . . . . . . ��

�.�

Combinando tudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

� Tomando controle da estrutura visual

�

iv

��

��

�.�

A propriedade ‘display’ . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

�.�

Flutue elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

�.�

O clear�x, uma classe obrigatória em seus projetos . . . . . . . . . . . ���

�.�

Compreenda o uso de position . . . . . . . . . . . . . . . . . . . . . . . ���

�.�

Crie a sua própria janela modal . . . . . . . . . . . . . . . . . . . . . . ���

�.�

Como escolher os métodos para posicionar os seus elementos . . . . ���

�.�

Grids - um padrão de estrutura para as suas páginas . . . . . . . . . . ���

�.�

Posicionando elementos com CSS � . . . . . . . . . . . . . . . . . . . . ���

Melhorando os seus formulários

���

�.�

O que temos no HTML � . . . . . . . . . . . . . . . . . . . . . . . . . . ���

�.�

Formulários HTML � nos dispositivos móveis . . . . . . . . . . . . . . ���

�.�

Criação do primeiro formulário . . . . . . . . . . . . . . . . . . . . . . ���

�.�

Alinhamento e estilos visuais nos campos e formulários . . . . . . . . ���

�.�

Exibição de mensagens de ajuda . . . . . . . . . . . . . . . . . . . . . . ���

�.�

Mostre mensagens de erro . . . . . . . . . . . . . . . . . . . . . . . . . ���

�.�

Levando o usuário direto ao que importa com o autofocus . . . . . . ���

�.�

A �exibilidade do atributo placeholder . . . . . . . . . . . . . . . . . . ���

�.�

Aplicando CSS� em botões . . . . . . . . . . . . . . . . . . . . . . . . . ���

Casa do Código

�

Sumário

Efeitos ���: Trabalhando com animações e transições �.� Transformando elementos . . . . . . . . . . . . . . . . . . . . . . �.� Os efeitos rotate, scale, skew e translate em uma galeria de fotos �.� Transições de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . �.� Transições na galeria de fotos . . . . . . . . . . . . . . . . . . . . �.� Um detalhe importante sobre transições e JavaScript . . . . . . . �.� Transformações em �D . . . . . . . . . . . . . . . . . . . . . . . . �.� Girar formulários com apenas um clique . . . . . . . . . . . . . . �.� Utilizando animações . . . . . . . . . . . . . . . . . . . . . . . . . �.� Começando com keyframes . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

� O universo fora dos desktops e notebooks �.� O que é “Responsive Web Design” e porquê você deve se preocupar �.� O funcionamento dos media queries . . . . . . . . . . . . . . . . . . �.� Não é uma questão de aparelhos . . . . . . . . . . . . . . . . . . . . . �.� Por um futuro melhor . . . . . . . . . . . . . . . . . . . . . . . . . . . �� Ferramentas - Frameworks, Plugins e Pré-processadores ��.� Twitter Bootstrap . . . . . . . . . . . . . . . . . . . . . ��.� HTML� Boilerplate . . . . . . . . . . . . . . . . . . . . ��.� Plugins em JavaScript . . . . . . . . . . . . . . . . . . . ��.� Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . ��.� Poly�lls . . . . . . . . . . . . . . . . . . . . . . . . . . . ��.� Pré-processadores . . . . . . . . . . . . . . . . . . . . . ��.� É tudo CSS e HTML . . . . . . . . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . . . .

��� ��� ��� ��� ��� ��� ��� ��� ��� ���

. . . .

��� ��� ��� ��� ���

. . . . . . .

��� ��� ��� ��� ��� ��� ��� ���

�� Não pare por aqui

���

Índice Remissivo

���

Bibliogra�a

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

v