Casa do Código Livros para o programador Rua Vergueiro, º andar Vila Mariana São Paulo SP Brasil

Transcrição

1

2 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, º andar Vila Mariana São Paulo SP Brasil

3

4

5 Casa do Código Agradecimentos Nothing of me is original. I am the combined eort of everybody I ve ever known. Chuck Palahniuk, Invisible Monsters () Durante a criação deste livro, recebi ajuda de várias pessoas, e sou extremamente grato a elas pela sua participação nos 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. À minha família e à 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. i

6

7 Casa do Código Sumário Sumário O desenvolvimento web hoje. Por que você deve aprender HTML e CSS.... O estado dos navegadores.... A complicação dos prexos 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... iii

8 Sumário Casa do Código. Utilizando pseudo elementos.... Desenhando uma faixa com before e aer.... Decorando mensagens.... 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 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. A propriedade display.... Flutue elementos.... O clearx, 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... iv

9 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. Bootstrap.... HTML Boilerplate.... Plugins em JavaScript.... Modernizr.... Polylls.... Pré-processadores.... É tudo CSS e HTML... Não pare por aqui Índice Remissivo Bibliograa Versão:.. v