Table Of ContentConheça mais da Caelum.
Cursos Online
www.caelum.com.br/online
Casa do Código
Livros para o programador
www.casadocodigo.com.br
Blog Caelum
blog.caelum.com.br
Newsletter
www.caelum.com.br/newsletter
Facebook
www.facebook.com/caelumbr
Twitter
twitter.com/caelum
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
determinadasfasesdoaprendizado.
A Caelum espera que você aproveite esse material. Todos os comentários, críticas e sugestões serão muito
bem-vindos.
EssaapostilaéconstantementeatualizadaedisponibilizadanositedaCaelum. Sempreconsulteositepara
novasversõese,aoinvésdeanexaroPDFparaenviaraumamigo,indiqueositeparaqueelepossasempre
baixarasúltimasversões. Vocêpodeconferirocódigodeversãodaapostilalogonofinaldoíndice.
Baixesempreaversãomaisnovaem: www.caelum.com.br/apostilas
EssematerialéparteintegrantedotreinamentoDesenvolvimentoWebcomHTML,CSSeJavaScriptedis-
tribuí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
comercialdestematerial,porfavor,consulteaCaelumpreviamente.
www.caelum.com.br
1
Sumário
1 Sobreocurso-ocomplexomundodofront-end 1
1.1 Ocursoeosexercícios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Oprojetodee-commerce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Tirandodúvidascominstrutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.4 TirandodúvidasonlinenoGUJ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.5 Bibliografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.6 Paraondeirdepois? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 IntroduçãoaHTMLeCSS 4
2.1 ExibindoinformaçõesnaWeb. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2 SintaxedoHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3 EstruturadeumdocumentoHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.4 TagsHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.5 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.6 Aestruturadosarquivosdeumprojeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.7 EditoreseIDEs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.8 Primeirapágina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.9 Exercício: primeirospassoscomHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.10 EstilizandocomCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.11 SintaxeeinclusãodeCSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.12 Propriedadestipográficasefontes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.13 Alinhamentoedecoraçãodetexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.14 Imagemdefundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.15 Bordas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.16 Exercício: primeirospassoscomCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.17 CoresnaWeb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.18 ListasHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.19 Espaçamentoemargem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.20 Exercícios: listasemargens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.21 LinksHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.22 Exercícios: links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.23 Elementosestruturais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.24 CSS:SeletoresdeIDefilho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.25 Fluxododocumentoefloat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.26 Exercícios: seletoresCSSeflutuaçãodeelementos . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.27 OfuturoepresentedaWebcomoHTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3 HTMLsemânticoeposicionamentonoCSS 37
3.1 Oprocessodedesenvolvimentodeumatela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
i
3.2 OprojetoMirrorFashion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.3 AnalisandooLayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.4 HTMLsemântico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.5 Pensandonoheader. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
3.6 Estilizaçãocomclasses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
3.7 Exercícios: headersemântico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
3.8 CSSReset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.9 BlockvsInline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
3.10 Exercícios: resetedisplay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
3.11 Position: static,relative,absolute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.12 Exercícios: posicionamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.13 Parasabermais: suporteHTML5noInternetExplorerantigo . . . . . . . . . . . . . . . . . . . 54
3.14 Exercíciosopcionais. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
4 MaisHTMLeCSS 56
4.1 Analisandoomiolodapágina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.2 Formulários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.3 Posicionamentocomfloateclear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4.4 DecoraçãodetextocomCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.5 CascataeherançanoCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
4.6 Parasabermais: ovalorinherit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
4.7 Exercícios: menuedestaque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
4.8 Displayinline-block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
4.9 Exercícios: painéisflutuantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
4.10 SeletoresdeatributodoCSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
4.11 Rodapé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
4.12 SubstituiçãoporImagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
4.13 Estilizaçãoeposicionamentodorodapé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
4.14 Exercícios: rodapé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
4.15 Exercíciosopcionais. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
5 CSSAvançado 75
5.1 Seletoresavançados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
5.2 Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
5.3 Pseudoelementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
5.4 Exercícios: seletoresepseudo-classes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
5.5 Exercíciosopcionais. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
5.6 CSS3: border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
5.7 CSS3: text-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
5.8 CSS3: box-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
5.9 OpacidadeeRGBA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
5.10 Prefixos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
5.11 CSS3: Gradientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
ii
5.12 ProgressiveEnhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
5.13 Exercícios: visualCSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
5.14 CSS3Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
5.15 CSS3Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
5.16 Exercícios: CSS3transformetransition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
5.17 Parasabermais: especificidadedeseletoresCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
6 Webparadispositivosmóveis 108
6.1 Sitemobileoumesmosite? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
6.2 CSSmediatypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
6.3 CSS3mediaqueries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
6.4 Viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
6.5 Exercícios: adaptaçõesparamobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
6.6 ResponsiveWebDesign . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
6.7 Mobile-first . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
6.8 Exercíciosopcionais: versãotablet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
7 IntroduçãoaPHP 121
7.1 LibertandooHTMLdesuaslimitações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
7.2 ComofuncionaumservidorHTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
7.3 ComofuncionaoPHPnoservidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
7.4 Parasabermais: instalaçãodoPHPemcasa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
7.5 Exercícios: executandooPHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
7.6 Reaproveitamentodecódigocominclude . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
7.7 Exercícios: include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
7.8 Parasabermais: aindamaisflexibilidadecomvariáveis . . . . . . . . . . . . . . . . . . . . . . . 127
7.9 Exercíciosopcionais: variáveisemPHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
8 Progressiveenhancementemobile-first 130
8.1 Formuláriodecompra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
8.2 Exercício: formuláriodapáginadeproduto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
8.3 Designmobile-first . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
8.4 Progressiveenhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
8.5 Boxmodelebox-sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
8.6 Exercícios: páginadeproduto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
8.7 Evoluindoodesignparadesktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
8.8 Mediaqueriesdeconteúdo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
8.9 Exercícios: responsivedesign . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
8.10 HTML5Inputrange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
8.11 Exercícios: seletordetamanho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
8.12 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
8.13 Exercícios: detalhes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
8.14 Exercíciosopcionais: fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
iii
8.15 Discussãoemaula: importânciadoProgressiveEnhancementnaWebatual . . . . . . . . . . . 151
9 PHP:parâmetrosepáginasdinâmicas 152
9.1 Submissãodoformulário . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
9.2 ParâmetroscomPHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
9.3 ListasdedefiniçãonoHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
9.4 Exercícios: checkoutdacompra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
10 BootstrapeformuláriosHTML5 156
10.1 BootstrapeframeworksdeCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
10.2 Estiloecomponentesbase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
10.3 ApáginadecheckoutdaMirrorFashion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
10.4 Exercícioopcional: iníciodocheckoutsemPHP . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
10.5 Exercícios: páginadecheckout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
10.6 Formuláriosafundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
10.7 NovoscomponentesdoHTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
10.8 NovosatributosHTML5emelementosdeformulário . . . . . . . . . . . . . . . . . . . . . . . . 171
10.9 Íconescomglyphicons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
10.10 Exercícios: formulários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
10.11 ValidaçãoHTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
10.12 Parasabermais: controlandoasvalidaçõesHTML5 . . . . . . . . . . . . . . . . . . . . . . . . . 177
10.13 Exercícios: validaçãocomHTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
10.14 GridresponsivodoBootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
10.15 Exercícios: grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
10.16 Parasabermais: componentesJSdoBootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
10.17 Exercíciosopcionais: navbareJavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
10.18 Parasabermais: outrosframeworksCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
10.19 Discussãoemaula: osproblemasdoBootstrapequandonãousá-lo . . . . . . . . . . . . . . . 187
11 JavaScripteinteratividadenaWeb 188
11.1 Característicasdalinguagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
11.2 Atagscript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
11.3 Consoledonavegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
11.4 Sintaxebásica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
11.5 Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
11.6 Tiposdedados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
11.7 Exercíciosopcionais: fixaçãodesintaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
11.8 Exercícios: formatandoumnúmero . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
11.9 Comparações. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
11.10 Blocoscondicionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
11.11 Funções . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
11.12 Exercícios: tornandonossoformatadorreutilizável . . . . . . . . . . . . . . . . . . . . . . . . . 202
11.13 InteratividadenaWeb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
iv
11.14 Exercício: Calculandoototaldacompra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
11.15 Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
11.16 BlocosdeRepetição . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
11.17 Funçõestemporais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
11.18 Exercícioopcional: bannerrotativo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
11.19 Parasabermais: várioscallbacksnomesmoelemento . . . . . . . . . . . . . . . . . . . . . . . . 214
12 jQuery 215
12.1 jQuery-Afunção$ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
12.2 jQuerySelectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
12.3 FiltroscustomizadoseporDOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
12.4 UtilitáriodeiteraçãodojQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
12.5 Característicasdeexecução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
12.6 Maisprodutosnahome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
12.7 Exercícios: jQuerynahome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
12.8 OelementooutputdoHTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
12.9 Exercícios: mostrandotamanhodoprodutocomjQuery . . . . . . . . . . . . . . . . . . . . . . 223
12.10 PluginsjQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
12.11 Exercícios: plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
12.12 Exercíciosopcionais. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
13 IntegraçõescomserviçosWeb 226
13.1 Web2.0eintegrações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
13.2 iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
13.3 VídeoembutidocomYouTube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
13.4 Exercícios: iframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
13.5 Exercícioopcional: GoogleMaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
13.6 Fontescustomizadascom@font-face. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
13.7 Serviçosdewebfonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
13.8 Exercícios: GoogleWebFonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
14 Apêndice-Otimizaçõesdefront-end 230
14.1 HTMLeHTTP-ComofuncionaaWorldWideWeb? . . . . . . . . . . . . . . . . . . . . . . . 231
14.2 Princípiosdeprogramaçãodistribuída . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
14.3 Ferramentasdediagnóstico-YSlowePageSpeed . . . . . . . . . . . . . . . . . . . . . . . . . . 233
14.4 CompressãoeminificaçãodeCSSeJavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
14.5 Compressãodeimagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
14.6 Diminuironúmeroderequests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
14.7 JuntararquivosCSSeJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
14.8 ImageSprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
14.9 Parasabermais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
14.10 Exercícios: otimizaçõesWeb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
v
15 Apêndice-LESS 244
15.1 Variáveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
15.2 Contas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
15.3 Hierarquia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
15.4 Funçõesdecoresepalhetasautomáticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
15.5 Reaproveitamentocommixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
15.6 ExecutandooLESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
15.7 Parasabermais: recursosavançadosealternativas . . . . . . . . . . . . . . . . . . . . . . . . . . 249
15.8 Exercícios: LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
16 Apêndice-PHP:BancodedadoseSQL 253
16.1 MySQLephpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
16.2 Parasabermais: instalaçãodoMySQLemcasa . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
16.3 BuscasnoMySQLcomPHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
16.4 RefinandoasbuscascomWHERE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
16.5 Exercícios: phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
16.6 Exercícios: PHPcomMySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
16.7 Buscademuitosresultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
16.8 Ordenaçãodosresultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
16.9 Exercícios: maisbuscascomPHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
16.10 Exercíciosopcionais. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
17 Apêndice-Subindosuaaplicaçãonocloud 262
17.1 Comoescolherumprovedor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
17.2 OJelasticCloudLocaweb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
17.3 Criandoaconta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
17.4 ImportandodadosnoMySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
17.5 Preparandooprojeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
17.6 Enviandooprojetoeinicializandoservidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
18 Apêndice-MaisintegraçõescomserviçosWeb 267
18.1 BotãodecurtirdoFacebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
18.2 Exercícios: Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
18.3 Parasabermais: Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
18.4 Parasabermais: Google+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
18.5 Exercíciosopcionais: TwittereGoogle+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
ÍndiceRemissivo 270
Versão: 19.1.3
vi
Capítulo1
Sobre o curso - o complexo mundo do front-end
“Açãoéachavefundamentalparatodosucesso”
–PabloPicasso
VivemoshojenumaeraemqueaInternetocupaumespaçocadavezmaisimportanteemnossasvidaspesso-
aiseprofissionais. OsurgimentoconstantedeAplicaçõesWeb,paraasmaisdiversasfinalidades,éumsinal
claro de que esse mercado está em franca expansão e traz muitas oportunidades. Aplicações corporativas,
comércioeletrônico,redessociais,filmes,músicas,notíciasetantasoutrasáreasestãopresentesnaInternet,
fazendodonavegador(obrowser)osoftwaremaisutilizadodenossoscomputadores.
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
econhecendoafundosuascaracterísticastécnicas. Discutiremosasimplementaçõesdessastecnologiasnos
diferentesnavegadores,aadoçãodeframeworksquefacilitameaceleramnossotrabalho,alémdedicastéc-
nicasquedestacamumprofissionalnomercado. HTML,CSSeJavaScriptserãovistosemprofundidade.
Além do acesso por meio do navegador de nossos computadores, hoje o acesso à Internet a partir de dis-
positivos 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 conhe-
cer 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
novidadesdasversõesHTML5eCSS3. Depois,éabordadaalinguagemdeprogramaçãoJavaScript,paraen-
riquecernossaspáginascominteraçõeseefeitos,tantocomJavaScriptpuroquantocomabibliotecajQuery,
hojepadrãodemercado.
Description:Sumário. Sobre o curso - o complexo mundo do front-end . O curso e os exercícios Para saber mais: suporte HTML no Internet Explorer antigo .
