caelum - html - css - javascript - php

caelum - html - css - javascript - php

(Parte 1 de 5)

Conheça mais da Caelum.

Cursos Online w.caelum.com.br/online

Blog Caelum blog.caelum.com.br

Newsletter w.caelum.com.br/newsletter

Facebook w.facebook.com/caelumbr

Twitter twitter.com/caelum

Casa do Código

Livros para o programador w.casadocodigo.com.br

Sobre esta apostila

EstaapostiladaCaelumvisaensinardeumamaneiraelegante,mostrandoapenasoqueénecessárioequando é necessário, no momento certo, poupando o leitor de assuntos que não costumam ser de seu interesse em determinadas fases do aprendizado.

A Caelum espera que você aproveite esse material. Todos os comentários, críticas e sugestões serão muito bem-vindos.

Essa apostila é constantemente atualizada e disponibilizada no site da Caelum. Sempre consulte o site para novas versões e, ao invés de anexar o PDF para enviar a um amigo, indique o site para que ele possa sempre baixar as últimas versões. Você pode conferir o código de versão da apostila logo no nal do índice.

Baixe sempre a versão mais nova em: w.caelum.com.br/apostilas

Esse material é parte integrante do treinamento Desenvolvimento Web com HTML, CSS e JavaScript e distribuído gratuitamente exclusivamente pelo site da Caelum. Todos os direitos são reservados à Caelum. A distribuição, cópia, revenda e utilização para ministrar treinamentos são absolutamente vedadas. Para uso comercial deste material, por favor, consulte a Caelum previamente.

w.caelum.com.br

Sumário

1.1 O curso e os exercícios1
1.2 O projeto de e-commerce2
1.3 Tirando dúvidas com instrutor2
1.4 Tirando dúvidas online no GUJ2
1.5 Bibliograa3
1.6 Para onde ir depois?3

1 Sobre o curso - o complexo mundo do front-end 1

2.1 Exibindo informações na Web4
2.2 Sintaxe do HTML7
2.3 Estrutura de um documento HTML7
2.4 Tags HTML9
2.5 Imagens10
2.6 A estrutura dos arquivos de um projeto1
2.7 Editores e IDEs1
2.8 Primeira página1
2.9 Exercício: primeiros passos com HTML14
2.10 Estilizando com CSS16
2.1 Sintaxe e inclusão de CSS17
2.12 Propriedades tipográcas e fontes19
2.13 Alinhamento e decoração de texto20
2.14 Imagem de fundo21
2.15 Bordas21
2.16 Exercício: primeiros passos com CSS21
2.17 Cores na Web23
2.18 Listas HTML24
2.19 Espaçamento e margem26
2.20 Exercícios: listas e margens28
2.21 Links HTML29
2.2 Exercícios: links30
2.23 Elementos estruturais31
2.24 CSS: Seletores de ID e lho31
2.25 Fluxo do documento e žoat32
2.26 Exercícios: seletores CSS e žutuação de elementos3
2.27 O futuro e presente da Web com o HTML535

2 Introdução a HTML e CSS 4

3.1 O processo de desenvolvimento de uma tela37

3 HTML semântico e posicionamento no CSS 37 i

3.3 Analisando o Layout40
3.4 HTML semântico42
3.5 Pensando no header43
3.6 Estilização com classes4
3.7 Exercícios: header semântico46
3.8 CSS Reset48
3.9 Block vs Inline49
3.10 Exercícios: reset e display50
3.1 Position: static, relative, absolute51
3.12 Exercícios: posicionamento54
3.13 Exercícios opcionais54
4.1 Analisando o miolo da página5
4.2 Formulários5
4.3 Posicionamento com žoat e clear56
4.4 Decoração de texto com CSS57
4.5 Cascata e herança no CSS58
4.6 Para saber mais: o valor inherit59
4.7 Exercícios: menu e destaque60
4.8 Display inline-block63
4.9 Exercícios: painéis žutuantes64
4.10 Seletores de atributo do CSS367
4.1 Rodapé68
4.12 Substituição por Imagem69
4.13 Estilização e posicionamento do rodapé69
4.14 Exercícios: rodapé71
4.15 Para saber mais: suporte HTML5 no Internet Explorer antigo73
4.16 Exercícios opcionais73

4 MaisHTMLeCSS 5

5.1 Introdução ao JavaScript75
5.2 Console do navegador76
5.3 Sintaxe básica76
5.4 Exercícios opcionais: xação de sintaxe78
5.5 Interatividade na Web78
5.6 Exercício: validação na busca com JS81
5.7 Funções temporais83
5.8 Exercício: banner rotativo84
5.9 Para saber mais: sugestão para o desao de pause/play84
5.10 Para saber mais: vários callbacks no mesmo elemento86

5 JavaScript e interatividade na Web 75 i

6.1 Seletores avançados87
6.2 Pseudo-classes90
6.3 Pseudo elementos93
6.4 Exercícios: seletores e pseudo-classes95
6.5 Exercícios opcionais97
6.6 CSS3: border-radius98
6.7 CSS3: text-shadow100
6.8 CSS3: box-shadow100
6.9 Opacidade e RGBA102
6.10 Prexos104
6.1 CSS3: Gradientes105
6.12 Progressive Enhancement107
6.13 Exercícios: visual CSS3108
6.14 CSS3 Transitions110
6.15 CSS3 Transforms112
6.16 Exercícios: CSS3 transform e transition114
6.17 Para saber mais: especicidade de seletores CSS117

6 CSS Avançado 87

7.1 Site mobile ou mesmo site?120
7.2 CSS media types122
7.3 CSS3 media queries123
7.4 Viewport124
7.5 Exercícios: adaptações para mobile126
7.6 Responsive Web Design130
7.7 Mobile-rst130
7.8 Exercícios opcionais: versão tablet131

7 Web para dispositivos móveis 120

8.1 Libertando o HTML de suas limitações133
8.2 Como funciona um servidor HTTP134
8.3 Como funciona o PHP no servidor134
8.4 Para saber mais: instalação do PHP em casa135
8.5 Exercícios: executando o PHP136
8.6 Reaproveitamento de código com include137
8.7 Exercícios: include137
8.8 Para saber mais: ainda mais žexibilidade com variáveis139
8.9 Exercícios opcionais: variáveis em PHP140

8 Introdução a PHP 133

9.1 Formulário de compra143
9.2 Exercício: formulário da página de produto145

9 Progressive enhancement e mobile- rst 142 i

9.4 Progressive enhancement147
9.5 Box model e box-sizing148
9.6 Exercícios: página de produto149
9.7 Evoluindo o design para desktop153
9.8 Media queries de conteúdo153
9.9 Exercícios: responsive design154
9.10 HTML5 Input range156
9.1 Exercícios: seletor de tamanho157
9.12 Tabelas157
9.13 Exercícios: detalhes159
9.14 Exercícios opcionais: fundo161
9.15 Discussão em aula: importância do Progressive Enhancement na Web atual162
10.1 Submissão do formulário163
10.2 Parâmetros com PHP164
10.3 Listas de denição no HTML164
10.4 Exercícios: checkout da compra165
10.5 Exercícios opcionais166
10.6 Banco de dados e SQL167
10.7 MySQL e phpMyAdmin168
10.8 Para saber mais: instalação do MySQL em casa168
10.9 Buscas no MySQL com PHP168
10.10 Renando as buscas com WHERE169
10.1 Exercícios: phpMyAdmin170
10.12 Exercícios: PHP com MySQL171
10.13 Busca de muitos resultados173
10.14 Ordenação dos resultados173
10.15 Exercícios: mais buscas com PHP173
10.16 Exercícios opcionais175

10 PHP: parâmetros e bancos de dados 163

1.1 Bootstrap e frameworks de CSS176
1.2 Estilo e componentes base177
1.3 A página de checkout da Mirror Fashion177
1.4 Exercício opcional: início do checkout sem PHP179
1.5 Exercícios: página de checkout179
1.6 Formulários a fundo182
1.7 Novos componentes do HTML5187
1.8 Novos atributos HTML5 em elementos de formulário191
1.9 Ícones com glyphicons192
1.10 Exercícios: formulários193

1 Bootstrap e formulários HTML5 176 iv

1.12 Para saber mais: controlando as validações HTML5197
1.13 Exercícios: validação com HTML5199
1.14 Grid responsivo do Bootstrap200
1.15 Exercícios: grids202
1.16 Para saber mais: componentes JS do Bootstrap204
1.17 Exercícios opcionais: navbar e JavaScript204
1.18 Para saber mais: outros frameworks CSS207
1.19 Discussão em aula: os problemas do Bootstrap e quando não usá-lo207
12.1 jQuery - A função $208
12.2 jQuery Selectors209
12.3 Filtros customizados e por DOM210
12.4 Utilitário de iteração do jQuery211
12.5 Características de execução211
12.6 Mais produtos na home212
12.7 Exercícios: jQuery na home213
12.8 O elemento output do HTML5216
12.9 Exercícios: mostrando tamanho do produto com jQuery216
12.10 Plugins jQuery217
12.1 Exercícios: plugin218
12.12 Exercícios opcionais218
13.1 Web 2.0 e integrações219
13.2 iframes219
13.3 Vídeo embutido com YouTube220
13.4 Exercícios: iframe220
13.5 Exercício opcional: Google Maps220
13.6 Botão de curtir do Facebook221
13.7 Exercícios: Facebook2
13.8 Para saber mais: Twitter2
13.9 Para saber mais: Google+223
13.10 Exercícios opcionais: Twitter e Google+224
13.1 Fontes customizadas com @font-face224
13.12 Serviços de web fonts225
13.13 Exercícios: Google Web Fonts225

13 Integrações com serviços Web 219

14.1 HTML e HTTP - Como funciona a World Wide Web?228
14.2 Princípios de programação distribuída230
14.3 Ferramentas de diagnóstico - YSlow e PageSpeed230

14 Apêndice - Otimizações de front-end 227 v

14.5 Compressão de imagens233
14.6 Diminuir o número de requests235
14.7 Juntar arquivos CSS e JS236
14.8 Image Sprites236
14.9 Para saber mais239
14.10 Exercícios: otimizações Web239
15.1 Variáveis241
15.2 Contas242
15.3 Hierarquia243
15.4 Funções de cores e palhetas automáticas244
15.5 Reaproveitamento com mixins244
15.6 Executando o LESS245
15.7 Para saber mais: recursos avançados e alternativas246
15.8 Exercícios: LESS246
16.1 Como escolher um provedor250
16.2 O Jelastic Cloud Locaweb250
16.3 Criando a conta251
16.4 Importando dados no MySQL251
16.5 Preparando o projeto252
16.6 Enviando o projeto e inicializando servidor253

16 Apêndice - Subindo sua aplicação no cloud 250

Índice Remissivo 254 Versão: 17.0.6

Capítulo 1 Sobre o curso - o complexo mundo do front-end

“Ação é a chave fundamental para todo sucesso” – Pablo Picasso

VivemoshojenumaeraemqueaInternetocupaumespaçocadavezmaisimportanteemnossasvidaspessoais e pro ssionais. O surgimento constante de Aplicações Web, para as mais diversas nalidades, é um sinal claro de que esse mercado está em franca expansão e traz muitas oportunidades. Aplicações corporativas, comércio eletrônico, redes sociais, lmes, músicas, notícias e tantas outras áreas estão presentes na Internet, fazendo do navegador (o browser) o so ware mais utilizado de nossos computadores.

Esse curso pretende abordar o desenvolvimento de front-end (interfaces) para Aplicações Web e Sites que acessamos por meio do navegador de nossos computadores, utilizando padrões atuais de desenvolvimento e conhecendo a fundo suas características técnicas. Discutiremos as implementações dessas tecnologias nos diferentes navegadores, a adoção de frameworks que facilitam e aceleram nosso trabalho, além de dicas técnicas que destacam um pro ssional no mercado. HTML, CSS e JavaScript serão vistos em profundidade.

Além do acesso por meio do navegador de nossos computadores, hoje o acesso à Internet a partir de dispositivos móveis representa um grande avanço da plataforma, mas também implica em um pouco mais de atenção ao trabalho que um programador front-end tem que realizar. No decorrer do curso, vamos conhecer algumas dessas necessidades e como utilizar os recursos disponíveis para atender também a essa nova necessidade.

1.1 O curso e os exercícios

Esse é um curso prático que começa nos fundamentos de HTML e CSS, incluindo tópicos relacionados às novidades das versões HTML5 e CSS3. Depois, é abordada a linguagem de programação JavaScript, para enriquecer nossas páginas com interações e efeitos, tanto com JavaScript puro quanto com a biblioteca jQuery, hoje padrão de mercado.

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

Durante o curso, serão desenvolvidas páginas de um Site de comércio eletrônico. Os exercícios foram projetados para apresentar gradualmente ao aluno quais são as técnicas mais recomendadas e utilizadas quando assumimos o papel do Programador front-end, quais são os desa os mais comuns e quais são as técnicas e padrões recomendados para atingirmos nosso objetivo, transformando imagens estáticas (os layouts) em código que os navegadores entendem e exibem como páginas da Web.

Os exercícios propostos são fundamentais para o acompanhamento do curso, desde os mais iniciais, já que são incrementados no decorrer das aulas. Igualmente importante é a participação ativa nas discussões e debates em sala de aula.

1.2 O projeto de e-commerce

Durante o curso, vamos produzir um site para um e-commerce de moda chamado Mirror Fashion. Construiremos várias páginas da loja com intuito de aprender os conceitos de HTML, CSS e JS.

Os conteúdos e o design da loja já foram pré-de nidos. Vamos, aqui, focar na implementação, papel do programador front-end.

1.3 Tirandodúvidascominstrutor

Durante o curso, tire todas as suas dúvidas com o instrutor. HTML, CSS e JavaScript, apesar de parecerem simples e básicos, têm muitas características complexas que não podem deixar de ser totalmente compreendidas pelo aluno. Os instrutores também estão disponíveis para tirar as dúvidas do aluno após o término do treinamento, basta entrar em contato direto com o instrutor ou com a Caelum, teremos o prazer em ajudá-lo.

Se você está acompanhando essa apostila em casa, pense também em fazer o curso presencial na Caelum. Vocêterácontatodiretocomoinstrutorparaesclarecersuasdúvidas, aprendermaistópicosalémdaapostila, e trocar experiências.

1.4 TirandodúvidasonlinenoGUJ

Recomendamos fortemente a busca de recursos e a participação ativa na comunidade por meio das listas de discussão relacionadas ao conteúdo do curso.

O GUJ.com.br é um site de perguntas e respostas para desenvolvedores de so ware que abrange diversas áreas, sendo que front-end é um dos principais focos. A comunidade do GUJ tem mais de 150 mil usuários e 1milhãoemeiodemensagens. Éolugaridealpravocêtirarsuasdúvidaseencontraroutrosdesenvolvedores.

http://www.guj.com.br

Capítulo 1 - Sobre o curso - o complexo mundo do front-end - O projeto de e-commerce - Página 2

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

1.5 Bibliografia

AlémdoconhecimentodisponívelnaInternetpeladacomunidade, existemmuitoslivrosinteressantessobre o assunto. Algumas referências:

• HTML5 e CSS3: Domine a web do futuro - Lucas Mazza, editora Casa do Código;

• A Web Mobile: Programe para um mundo de muitos dispositivos - Sérgio Lopes, editora Casa do Código;

• A Arte E A Ciência Do CSS - Adams & Cols;

• Pro JavaScript Techniques - John Resig;

• e Smashing Book - smashingmagazine.com

1.6 Para onde ir depois?

Este curso é parte da Formação Web Design da Caelum que engloba também o treinamento Programação com JavaScript e jQuery. Você pode obter mais informações aqui:

http://www.caelum.com.br/cursos-web-front-end/

Se o seu desejo é entrar mais a fundo no desenvolvimento Web, incluindo a parte server-side, oferecemos a Formação Ruby on Rails, a Formação Java e a Formação .NET que abordam três caminhos possíveis para esse mundo.

Mais informações em: • http://www.caelum.com.br/cursos-rails/

• http://www.caelum.com.br/cursos-java/

• http://www.caelum.com.br/cursos-dotnet/

Capítulo 1 - Sobre o curso - o complexo mundo do front-end - Bibliogra a - Página 3

Capítulo 2 Introdução a HTML e CSS

“Quanto mais nos elevamos, menores parecemos aos olhos daqueles que não sabem voar.” – Friedrich Wilhelm Nietzsche

2.1 ExibindoinformaçõesnaWeb

AúnicalinguagemqueonavegadorconsegueinterpretarparaaexibiçãodeconteúdoéoHTML.Parainiciar a exploração do HTML, vamos imaginar o seguinte caso: o navegador realizou uma requisição e recebeu como corpo da resposta o seguinte conteúdo:

Mirror Fashion. Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios.

Confira nossas promoções. Receba informações sobre nossos lançamentos por email. Navegue por todos nossos produtos em catálogo. Compre sem sair de casa.

Para conhecer o comportamento dos navegadores quanto ao conteúdo descrito antes, vamos reproduzir esse conteúdo em um arquivo de texto comum, que pode ser criado com qualquer editor de texto puro. Salve o arquivo como index.html e abra-o a partir do navegador à sua escolha.

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

Parece que obtemos um resultado um pouco diferente do esperado, não? Apesar de ser capaz de exibir texto puro em sua área principal, algumas regras devem ser seguidas caso desejemos que esse texto seja exibido com alguma formatação, para facilitar a leitura pelo usuário nal.

Usando o resultado acima podemos concluir que o navegador por padrão: • Pode não exibir caracteres acentuados corretamente;

• Não exibe quebras de linha.

Para que possamos exibir as informações desejadas com a formatação, é necessário que cada trecho de texto tenha uma marcação indicando qual é o signi cado dele. Essa marcação também in uencia a maneira com que cada trecho do texto será exibido. A seguir é listado o texto com uma marcação correta:

<!DOCTYPE html> <html>

<head>

<title>Mirror Fashion</title>

<meta charset="utf-8">

</head>

<body>

<h1>Mirror Fashion.</h1>

<h2>Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios.</h2>

Capítulo 2 - Introdução a HTML e CSS - Exibindo informações na Web - Página 5

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

<ul> <li>Confira nossas promoções.</li>

<li>Receba informações sobre nossos lançamentos por email.</li>

<li>Navegue por todos nossos produtos em catálogo.</li>

<li>Compre sem sair de casa.</li>

</ul>

</body>

</html>

Reproduza o código anterior em um novo arquivo de texto puro e salve-o como index-2.html. Não se preocupe com a sintaxe, vamos conhecer detalhadamente cada característica do HTML nos próximos capítulos. Abra o arquivo no navegador.

Agora, o resultado é exibido de maneira muito mais agradável e legível. Para isso, tivemos que utilizar algumas marcações do HTML. Essas marcações são chamadas de tags, e elas basicamente dão signi cado ao texto contido entre sua abertura e fechamento.

Apesar de estarem corretamente marcadas, as informações não apresentam nenhum atrativo estético e, nessa de ciência do HTML, reside o primeiro e maior desa o do programador front-end.

O HTML foi desenvolvido para exibição de documentos cientí cos. Para termos uma comparação, é como se a Web fosse desenvolvida para exibir monogra as redigidas e formatadas pela Metodologia do Trabalho

Capítulo 2 - Introdução a HTML e CSS - Exibindo informações na Web - Página 6

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

Cientí co da ABNT. Porém, com o tempo e a evolução da Web e de seu potencial comercial, tornou-se necessária a exibição de informações com grande riqueza de elementos grá cos e de interação.

2.2 SintaxedoHTML

O HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página no navegador. No código que vimos antes, as tags são os elementos a mais que escrevemos usando a sintaxe <nomedatag>. Diversas tags são disponibilizadas pela linguagem HTML e cada uma possui uma funcionalidade especí ca.

No código de antes, vimos por exemplo o uso da tag <h1>. Ela representa o título principal da página.

<h1>Mirror Fashion</h1>

Note a sintaxe. Uma tag é de nida com caracteres < e >, e seu nome (H1 no caso). Muitas tags possuem conteúdo, como o texto do título ("Mirror Fashion”). Nesse caso, para determinar onde o conteúdo acaba, usamos uma tag de fechamento com a barra antes do nome: </h1>.

Algumas tags podem receber atributos dentro de sua de nição. São parâmetros usando a sintaxe de nome=valor. Para de nir uma imagem, por exemplo, usamos a tag <img> e, para indicar qual imagem carregar, usamos o atributo src:

<img src="../imagens/casa_de_praia.jpg">

Repare que a tag img não possui conteúdo por si só. Nesses casos, não é necessário usar uma tag de fechamento como antes no h1.

2.3 EstruturadeumdocumentoHTML

Um documento HTML válido precisa seguir obrigatoriamente a estrutura composta pelas tags <html>, <head> e <body> e a instrução <!DOCTYPE>. Vejamos cada uma delas:

Atag<html>

Na estrutura do nosso documento, antes de tudo, inserimos uma tag <html>. Dentro dessa tag, é necessário declararoutrasduastags: <head>e<body>. Essasduastagssão“irmãs”,poisestãonomesmonívelhierárquico em relação à sua tag “pai”, que é <html>.

<html> <head></head>

<body></body>

</html>

Capítulo 2 - Introdução a HTML e CSS - Sintaxe do HTML - Página 7

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

Atag<head>

A tag <head> contém informações sobre nosso documento que são de interesse somente do navegador, e não dos visitantes do nosso site. São informações que não serão exibidas na área do documento no navegador.

A especi cação obriga a presença da tag de conteúdo <title> dentro do nosso <head>, permitindo especi- car o título do nosso documento, que normalmente será exibido na barra de título da janela do navegador ou na aba do documento.

Outra con guração muito utilizada, principalmente em documentos cujo conteúdo é escrito em um idioma como o português, que tem caracteres como acentos e cedilha, é a con guração da codi cação de caracteres, chamado de encoding ou charset.

Podemos con gurar qual codi cação queremos utilizar em nosso documento por meio da con guração de charset na tag <meta>. Um dos valores mais comuns usados hoje em dia é o UTF-8, também chamado de Unicode. Há outras possibilidades, como o latin1, muito usado antigamente.

O UTF-8 é a recomendação atual para encoding na Web por ser amplamente suportada em navegadores e editores de código, além de ser compatível com praticamente todos os idiomas do mundo. É o que usaremos no curso.

<html> <head>

<title>Mirror Fashion</title>

<meta charset="utf-8">

</head>

<body>

</body> </html>

Atag<body>

A tag <body> contém o corpo do nosso documento, que é exibido pelo navegador em sua janela. É necessário que o <body> tenha ao menos um elemento “ lho”, ou seja, uma ou mais tags HTML dentro dele.

<html> <head>

<title>Mirror Fashion</title>

<meta charset="utf-8">

</head>

<body>

<h1>A Mirror Fashion</h1>

</body>

</html>

Capítulo 2 - Introdução a HTML e CSS - Estrutura de um documento HTML - Página 8

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

Nesse exemplo, usamos a tag <h1>, que indica um título.

AinstruçãoDOCTYPE

O DOCTYPE não é uma tag HTML, mas uma instrução especial. Ela indica para o navegador qual versão do HTML deve ser utilizada para renderizar a página. Utilizaremos <!DOCTYPE html>, que indica para o navegador a utilização da versão mais recente do HTML - a versão 5, atualmente.

(Parte 1 de 5)

Comentários