Sumário

INTRODUÇÃO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Sobre Este Livro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Penso que…. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Ícones Usados Neste Livro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Além Deste Livro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
De Lá para Cá, Daqui para Lá. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
PARTE 1: COMEÇANDO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
CAPÍTULO 1: O que É Codificação?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Definindo o que São Códigos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Seguindo instruções. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Codificando com Angry Birds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Descubra o que a Codificação Pode Fazer por Você . . . . . . . . . . . . . 10
Devorando o mundo com softwares. . . . . . . . . . . . . . . . . . . . . . . . 10
Codificação no trabalho. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Faça por conta própria (e fique rico e famoso). . . . . . . . . . . . . . . 13
Examinando os Tipos de Linguagem de Programação . . . . . . . . . . . 13
Comparando linguagens de programação de baixo e
alto níveis. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Código compilado contrastante e código interpretado. . . . . . . . 16
Programando para a web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Percorrendo um Aplicativo da Web Construído com Código. . . . . . 16
Definindo o propósito e o escopo do aplicativo. . . . . . . . . . . . . . 17
Apoiando-se nos ombros de gigantes. . . . . . . . . . . . . . . . . . . . . . . 17
CAPÍTULO 2: Programação para a Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Exibindo Páginas da Web em Seu Desktop ou Dispositivo Móvel. . 20
Pirateando seu site de notícias favorito. . . . . . . . . . . . . . . . . . . . . 20
Entendendo como a World Wide
Web funciona . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Observando seu front-end e back-end. . . . . . . . . . . . . . . . . . . . . . 24
Definindo aplicativos web e móveis. . . . . . . . . . . . . . . . . . . . . . . . . 25
Codificação de Aplicativos Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Começando com HTML, CSS e JavaScript. . . . . . . . . . . . . . . . . . . . 27
Adicionando lógica com Python, Ruby ou PHP. . . . . . . . . . . . . . . 27
Codificação de Aplicativos Móveis. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Construindo aplicativos móveis. . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Construindo aplicativos nativos móveis. . . . . . . . . . . . . . . . . . . . . 30
CAPÍTULO 3: Tornando-se Programador. . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Escrevendo Códigos com um Método. . . . . . . . . . . . . . . . . . . . . . . . . . 34
Pesquisar o que deseja construir. . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Sumário xiii
RASCUNHO
Projetar seu app. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Codificando seu app. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Depurando seu código. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Escolhendo Ferramentas para Trabalhar. . . . . . . . . . . . . . . . . . . . . . . 39
Trabalhando offline. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Trabalhando online com a Codecademy.com. . . . . . . . . . . . . . . . 40
PARTE 2: CONSTRUINDO PÁGINAS SILENCIOSAS
E INTERATIVAS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
CAPÍTULO 4: Explorando o HTML Básico. . . . . . . . . . . . . . . . . . . . . . . . . . . 45
O que o HTML Faz?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Entendendo a Estrutura do HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Identificando elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Apresentando seu melhor atributo. . . . . . . . . . . . . . . . . . . . . . . . . 48
Mantendo cabeçalho, título e corpo de texto acima de tudo. . . 50
Familiarizando-se com Tarefas e Tags HTML Comuns . . . . . . . . . . . 51
Escrevendo títulos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Organizando textos em parágrafos. . . . . . . . . . . . . . . . . . . . . . . . . 54
Vinculando seu conteúdo (a seu gosto). . . . . . . . . . . . . . . . . . . . . 54
Adicionando imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Formate-me Bem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Destacando com negritos, itálicos, sublinhados e riscados . . . . 57
Aumentando e diminuindo textos com sobrescrito
e subscrito. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Construindo Seu Primeiro Site com HTML. . . . . . . . . . . . . . . . . . . . . . 59
CAPÍTULO 5: Conheça Melhor o HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Organizando o Conteúdo na Página. . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Listando Dados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Crie listas ordenadas e não ordenadas . . . . . . . . . . . . . . . . . . . . . 66
Aninhando listas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Colocando Dados em Tabelas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Estruturação básica de tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Expandindo colunas e linhas da tabela. . . . . . . . . . . . . . . . . . . . . . 70
Alinhando tabelas e células. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Preenchendo Formulários. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Entenda como formulários funcionam. . . . . . . . . . . . . . . . . . . . . . 74
Criando formulários básicos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Praticando Mais o HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
CAPÍTULO 6: Formatando com CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
O que o CSS Faz?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Estrutura CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Escolhendo o elemento a formatar. . . . . . . . . . . . . . . . . . . . . . . . . 81
Minha propriedade tem valor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Pirateando seu site favorito com CSS. . . . . . . . . . . . . . . . . . . . . . . 84
xiv Codificação Para Leigos
RASCUNHO
Tarefas e Seletores Comuns do CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Ginástica da fonte: Tamanho, cor, estilo, família e decoração. . 86
Personalizando links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Adicionando imagens de segundo plano e formatando as
do primeiro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Formate-me Bem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Adicione CSS a seu HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Construa sua primeira página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
CAPÍTULO 7: Próximos Passos com CSS. . . . . . . . . . . . . . . . . . . . . . . . . . 101
Formatando (Mais) Elementos em Sua Página. . . . . . . . . . . . . . . . . . 102
Formatando listas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Desenhando tabelas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Selecionando Elementos para Aplicar Estilo . . . . . . . . . . . . . . . . . . . 108
Aplicando estilo a elementos específicos. . . . . . . . . . . . . . . . . . . 108
Nomeando elementos HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Alinhando e Organizando Seus Elementos. . . . . . . . . . . . . . . . . . . . .114
Organizando dados na página. . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Modelando a div. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Entendendo o modelo de caixas. . . . . . . . . . . . . . . . . . . . . . . . . . 117
Posicionando as caixas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Escrevendo CSS Mais Avançado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
CAPÍTULO 8: Trabalhando Mais Rápido com o
Twitter Bootstrap. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Descobrindo o que o Bootstrap Faz . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Instalando o Bootstrap. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Entendendo as Opções de Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Alinhando no sistema de grade. . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Arrastando e soltando para um site. . . . . . . . . . . . . . . . . . . . . . . 129
Usando templates predefinidos. . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Adaptando layout para dispositivos móveis, tablets
e desktops. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Codificando Elementos Básicos de uma Página . . . . . . . . . . . . . . . . 133
Desenhando botões. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Navegando com barras de ferramentas. . . . . . . . . . . . . . . . . . . . 135
Adicionando ícones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .137
Construindo a Página Inicial do Airbnb. . . . . . . . . . . . . . . . . . . . . . . . 138
CAPÍTULO 9: Incluindo JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
O que o JavaScript Faz? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Entendendo a Estrutura do JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . 142
Usando Ponto e vírgula, Aspas, Parênteses e Chaves . . . . . . . . . . . 142
Codificando Tarefas JavaScript Comuns. . . . . . . . . . . . . . . . . . . . . . . 143
Armazenando dados com variáveis. . . . . . . . . . . . . . . . . . . . . . . . 143
Tomando decisões com sentenças if-else. . . . . . . . . . . . . . . . . . 144
Trabalhando com métodos de string e números. . . . . . . . . . . . 148
Alertando e solicitando inserções de usuários. . . . . . . . . . . . . . 150
Sumário xv
RASCUNHO
Nomeando código com funções . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Adicionando JavaScript às páginas. . . . . . . . . . . . . . . . . . . . . . . . . 152
Escrevendo Seu Primeiro Programa de JavaScript. . . . . . . . . . . . . . 153
Trabalhando com APIs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
O que as APIs fazem?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Raspagem de dados sem API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Buscando e escolhendo uma API. . . . . . . . . . . . . . . . . . . . . . . . . . 158
Usando as Bibliotecas JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
D3.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Procurando Vídeos com a API do YouTube. . . . . . . . . . . . . . . . . . . . 160
PARTE 3: CRIANDO UM APLICATIVO WEB . . . . . . . . . . . . . . . . . 163
CAPÍTULO 10: Construindo Seu App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Criando um Aplicativo de Ofertas Baseadas na Localização. . . . . . 166
Entendendo a situação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Traçando os próximos passos. . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Seguindo o Processo de Desenvolvimento de um App. . . . . . . . . . 167
Planejando Seu Primeiro Aplicativo. . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Explorando o Processo Geral. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Conheça as Pessoas que Dão Vida aos App Web. . . . . . . . . . . . . . . 171
Criando com designers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Codificando com desenvolvedores de front-end e back-end. . 173
Gestão com gerentes de produto. . . . . . . . . . . . . . . . . . . . . . . . . 174
Teste com garantia de qualidade. . . . . . . . . . . . . . . . . . . . . . . . . . 175
CAPÍTULO 11: Pesquisando Seu Primeiro Aplicativo Web. . . . . 177
Dividindo o App em Etapas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Encontrando a funcionalidade de seu app . . . . . . . . . . . . . . . . . 178
Encontrando a funcionalidade de seu app: Minha versão . . . . 179
Encontrando o formato de seu app . . . . . . . . . . . . . . . . . . . . . . . 180
Encontrando o formato de seu app: O design do app
de ofertas do McDuck’s. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Identificando Fontes de Pesquisa. . . . . . . . . . . . . . . . . . . . . . . . . . . . .186
Pesquisando as Etapas para o App de Ofertas do McDuck’s. . . . . 188
Escolha uma Solução para Cada Etapa. . . . . . . . . . . . . . . . . . . . . . . . 190
CAPÍTULO 12: Codificando e Depurando Seu Primeiro
App Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
A Preparação. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Codificando Seu Primeiro App Web. . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Ambiente de desenvolvimento. . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Código pré-escrito . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Etapas de codificação para você seguir . . . . . . . . . . . . . . . . . . . . 198
Depurando Seu App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
xvi Codificação Para Leigos
RASCUNHO
PARTE 4: AMPLIANDO SUAS HABILIDADES. . . . . . . . . . . . . . . . 203
CAPÍTULO 13: Familiarizando-se com Ruby. . . . . . . . . . . . . . . . . . . . . . . 205
O que o Ruby Faz?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Definindo a Estrutura do Ruby. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Entendendo os princípios do Ruby. . . . . . . . . . . . . . . . . . . . . . . . 207
Estilo e espaçamento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Codificando Tarefas e Comandos Ruby Básicos. . . . . . . . . . . . . . . . 209
Definindo tipos de dados e variáveis. . . . . . . . . . . . . . . . . . . . . . . 210
Computação matemática simples e avançada . . . . . . . . . . . . . . 210
Usando strings e caracteres especiais. . . . . . . . . . . . . . . . . . . . . 211
Decidindo com condicionais: if, elsif, else. . . . . . . . . . . . . . . . . . . 212
Inserções e saídas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Formatando Suas Strings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Métodos de string: upcase, downcase e strip. . . . . . . . . . . . . . . 215
Inserindo variáveis em strings com #. . . . . . . . . . . . . . . . . . . . . . 216
Construindo um Processador Simples de Texto com Ruby . . . . . . 217
CAPÍTULO 14: Mergulhando no Python. . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
O que o Python Faz?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Definindo a Estrutura do Python. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Entendendo o Zen do Python. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Formatação e espaçamento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Codificando Tarefas e Comandos de Python Comuns. . . . . . . . . . . 223
Definindo tipos de dados e variáveis. . . . . . . . . . . . . . . . . . . . . . . 224
Computação matemática simples e avançada . . . . . . . . . . . . . . 225
Usando strings e caracteres especiais. . . . . . . . . . . . . . . . . . . . . 226
Decidindo com condicionais: if, elif, else. . . . . . . . . . . . . . . . . . . . 227
Inserções e saídas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Formatando Suas Strings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Notação de ponto com upper(), lower(), capitalize()
e strip(). . . 230
Formatando strings com %. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Construindo uma Calculadora Simples com Python. . . . . . . . . . . . . 231
PARTE 5: A PARTE DOS DEZ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
CAPÍTULO 15: Dez Recursos Gratuitos para Codificadores. . . . 235
Sites que Ensinam a Codificar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Codecademy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Coursera e Udacity. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Hackdesign.org. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Code.org. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Sites de Referência para Codificação. . . . . . . . . . . . . . . . . . . . . . . . . . 238
W3Schools. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Mozilla Developer Network. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Stack Overflow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Sumário xvii
RASCUNHO
Sites de Notícias de Tecnologia e Comunidades. . . . . . . . . . . . . . . . 240
TechCrunch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Hacker News . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Meetup. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
CAPÍTULO 16: Dez Dicas para os Novatos. . . . . . . . . . . . . . . . . . . . . . . . . 243
Escolha uma Linguagem, Qualquer uma . . . . . . . . . . . . . . . . . . . . . . 243
Defina um Objetivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Divida Seu Objetivo em Pequenos Pedaços. . . . . . . . . . . . . . . . . . . . 245
Diferencie o Bolo da Cereja. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
O Google É Seu Melhor Amigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Corrija Aqueles Bugs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Envie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Colete Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Itere Seu Código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Compartilhe Seus Sucessos e Falhas. . . . . . . . . . . . . . . . . . . . . . . . . . 250
ÍNDICE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251