Caelum HTML Css Javascript PHP

WEB SITE
WD-43
Desenvolvimento Web com
HTML, CSS e JavaScript
www.caelum.com.br
SCRIPTS HTML StyleSheet
Conhea mais da Caelum.
Cursos Online
www.caelum.com.br/online
Blog Caelum
blog.caelum.com.br
Newsletter
www.caelum.com.br/newsletter
Facebook
www.facebook.com/caelumbr
Twitter
twitter.com/caelum
Casa do Cdigo
Livros para o programador
www.casadocodigo.com.br
Sobre esta apostila
Esta apostila da Caelumvisa ensinar de uma maneira elegante, mostrando apenas o que necessrio e quando
necessrio, no momento certo, poupando o leitor de assuntos que no costumam ser de seu interesse em
determinadas fases do aprendizado.
A Caelum espera que voc aproveite esse material. Todos os comentrios, crticas e sugestes sero muito
bem-vindos.
Essa apostila constantemente atualizada e disponibilizada no site da Caelum. Sempre consulte o site para
novas verses e, ao invs de anexar o PDF para enviar a um amigo, indique o site para que ele possa sempre
baixar as ltimas verses. Voc pode conferir o cdigo de verso da apostila logo no fnal do ndice.
Baixe sempre a verso mais nova em: www.caelum.com.br/apostilas
Esse material parte integrante do treinamento Desenvolvimento Web com HTML, CSS e JavaScript e dis-
tribudo gratuitamente exclusivamente pelo site da Caelum. Todos os direitos so reservados Caelum. A
distribuio, cpia, revenda e utilizao para ministrar treinamentos so absolutamente vedadas. Para uso
comercial deste material, por favor, consulte a Caelum previamente.
www.caelum.com.br
Sumrio
Sobre o curso - o complexo mundo do front-end
. O curso e os exerccios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. O projeto de e-commerce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Tirando dvidas com instrutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Tirando dvidas online no GUJ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Bibliografa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para onde ir depois? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Introduo a HTML e CSS
. Exibindo informaes na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Sintaxe do HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Estrutura de um documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Tags HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. A estrutura dos arquivos de um projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Editores e IDEs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Primeira pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccio: primeiros passos com HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Estilizando com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Sintaxe e incluso de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Propriedades tipogrfcas e fontes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Alinhamento e decorao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Imagem de fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Bordas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccio: primeiros passos com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Cores na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Listas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Espaamento e margem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: listas e margens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Links HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Elementos estruturais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. CSS: Seletores de ID e flho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: seletores CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Fluxo do documento e foat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: futuao de elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. O futuro e presente da Web com o HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML semntico e posicionamento no CSS
i
. O processo de desenvolvimento de uma tela . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. O projeto Mirror Fashion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Analisando o Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. HTML semntico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Pensando no header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Estilizao com classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: header semntico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. CSS Reset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Block vs Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: reset e display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Position: static, relative, absolute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: posicionamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mais HTML e CSS
. Analisando o miolo da pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Posicionamento com foat e clear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Decorao de texto com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Cascata e herana no CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: o valor inherit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: menu e destaque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Display inline-block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: painis futuantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Seletores de atributo do CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Rodap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Substituio por Imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Estilizao e posicionamento do rodap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: rodap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: suporte HTML no Internet Explorer antigo . . . . . . . . . . . . . . . . . . .
JavaScript e interatividade na Web
. Introduo ao JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Console do navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Sintaxe bsica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios opcionais: fxao de sintaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Interatividade na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccio: validao na busca com JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Funes temporais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccio: banner rotativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: sugesto para o desafo de pause/play . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: vrios callbacks no mesmo elemento . . . . . . . . . . . . . . . . . . . . . . . .
ii
CSS Avanado
. Seletores avanados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Pseudo elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: seletores e pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. CSS: border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. CSS: text-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. CSS: box-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Opacidade e RGBA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Prefxos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. CSS: Gradientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Progressive Enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: visual CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. CSS Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. CSS Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: CSS transform e transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: especifcidade de seletores CSS . . . . . . . . . . . . . . . . . . . . . . . . . . .
Web para dispositivos mveis
. Site mobile ou mesmo site? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. CSS media types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. CSS media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: mobile site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Mobile-frst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Introduo a PHP
. Libertando o HTML de suas limitaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Como funciona um servidor HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Como funciona o PHP no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: instalao do PHP em casa . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: executando o PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Reaproveitamento de cdigo com include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: ainda mais fexibilidade com variveis . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios opcionais: variveis em PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Progressive enhancement e mobile-frst
. Formulrio de compra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccio: formulrio da pgina de produto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
iii
. Design mobile-frst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Progressive enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Box model e box-sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: pgina de produto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Evoluindo o design para desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Media queries de contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: responsive design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. HTML Input range . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: seletor de tamanho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: detalhes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios opcionais: fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
PHP: parmetros e bancos de dados
. Submisso do formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Parmetros com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Listas de defnio no HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: checkout da compra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Banco de dados e SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. MySQL e phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: instalao do MySQL em casa . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Buscas no MySQL com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Refnando as buscas com WHERE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: PHP com MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Busca de muitos resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Ordenao dos resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: mais buscas com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Bootstrap e formulrios HTML
. Bootstrap e frameworks de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Estilo e componentes base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. A pgina de checkout da Mirror Fashion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccio opcional: incio do checkout sem PHP . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: pgina de checkout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Formulrios a fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Novos componentes do HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Novos atributos HTML em elementos de formulrio . . . . . . . . . . . . . . . . . . . . . . . .
. cones com glyphicons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: outros frameworks CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
iv
Componentes complexos do Bootstrap e mais HTML
. Grid responsivo do Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Validao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: controlando as validaes HTML . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: validao com HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Componentes JavaScript do Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: navbar e JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: modal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: envio de emails com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios opcionais: email de confrmao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Discusso em aula: os problemas do Bootstrap e quando no us-lo . . . . . . . . . . . . . . .
jQuery
. jQuery - A funo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. jQuery Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Filtros customizados e por DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Utilitrio de iterao do jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Caractersticas de execuo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Mais produtos na home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: jQuery na home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. O elemento output do HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: mostrando tamanho do produto com jQuery . . . . . . . . . . . . . . . . . . . . . .
. Formulrios dinmicos com jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: javascript no checkout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Plugins jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Integraes com servios Web
. Web . e integraes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Vdeo embutido com YouTube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: iframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccio opcional: Google Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Boto de curtir do Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: OpenGraph e web semntica . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios opcionais: OpenGraph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: Google+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios opcionais: Twitter e Google+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Fontes customizadas com @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
v
. Servios de web fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: Google Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Otimizaes de front-end
. HTML e HTTP - Como funciona a World Wide Web? . . . . . . . . . . . . . . . . . . . . . . .
. Princpios de programao distribuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Ferramentas de diagnstico - YSlow e PageSpeed . . . . . . . . . . . . . . . . . . . . . . . . . .
. Compresso e minifcao de CSS e JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Compresso de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Diminuir o nmero de requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Juntar arquivos CSS e JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Image Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: otimizaes Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Apndice - LESS
. Variveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Contas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Hierarquia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Funes de cores e palhetas automticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Reaproveitamento com mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Executando o LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Para saber mais: recursos avanados e alternativas . . . . . . . . . . . . . . . . . . . . . . . . . .
. Exerccios: LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Apndice - Subindo sua aplicao no cloud
. Como escolher um provedor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. O Jelastic Cloud Locaweb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Criando a conta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Importando dados no MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Preparando o projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. Enviando o projeto e inicializando servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ndice Remissivo
Verso: ..
vi
C
Sobre o curso - o complexo mundo do front-end
Ao a chave fundamental para todo sucesso
Pablo Picasso
Vivemos hoje numa era emque a Internet ocupa umespao cada vez mais importante emnossas vidas pesso-
ais e profssionais. O surgimento constante de Aplicaes Web, para as mais diversas fnalidades, um sinal
claro de que esse mercado est em franca expanso e traz muitas oportunidades. Aplicaes corporativas,
comrcio eletrnico, redes sociais, flmes, msicas, notcias e tantas outras reas esto presentes na Internet,
fazendo do navegador (o browser) o sofware mais utilizado de nossos computadores.
Esse curso pretende abordar o desenvolvimento de front-end (interfaces) para Aplicaes Web e Sites que
acessamos por meio do navegador de nossos computadores, utilizando padres atuais de desenvolvimento
e conhecendo a fundo suas caractersticas tcnicas. Discutiremos as implementaes dessas tecnologias nos
diferentes navegadores, a adoo de frameworks que facilitam e aceleram nosso trabalho, alm de dicas tc-
nicas que destacam um profssional no mercado. HTML, CSS e JavaScript sero vistos em profundidade.
Alm do acesso por meio do navegador de nossos computadores, hoje o acesso Internet a partir de dis-
positivos mveis representa um grande avano da plataforma, mas tambm implica em um pouco mais de
ateno 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 disponveis para atender tambm a essa nova
necessidade.
. Occnso v os vxvncc:os
Esse um curso prtico que comea nos fundamentos de HTML e CSS, incluindo tpicos relacionados s
novidades das verses HTML e CSS. Depois, abordada a linguagem de programao JavaScript, para en-
riquecer nossas pginas com interaes e efeitos, tanto com JavaScript puro quanto com a biblioteca jQuery,
hoje padro de mercado.
Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript
Durante o curso, sero desenvolvidas pginas de um Site de comrcio eletrnico. Os exerccios foram proje-
tados para apresentar gradualmente ao aluno quais so as tcnicas mais recomendadas e utilizadas quando
assumimos o papel do Programador front-end, quais so os desafos mais comuns e quais so as tcnicas
e padres recomendados para atingirmos nosso objetivo, transformando imagens estticas (os layouts) em
cdigo que os navegadores entendem e exibem como pginas da Web.
Os exerccios propostos so fundamentais para o acompanhamento do curso, desde os mais iniciais, j que
so incrementados no decorrer das aulas. Igualmente importante a participao ativa nas discusses e
debates em sala de aula.
. Ovno)v1o ov v-commvncv
Durante o curso, vamos produzir um site para um e-commerce de moda chamado Mirror Fashion. Cons-
truiremos vrias pginas da loja com intuito de aprender os conceitos de HTML, CSS e JS.
Os contedos e o design da loja j foram pr-defnidos. Vamos, aqui, focar na implementao, papel do
programador front-end.
. T:nnNoo ov:ons com:Ns1nc1on
Durante o curso, tire todas as suas dvidas com o instrutor. HTML, CSS e JavaScript, apesar de parecerem
simples e bsicos, tm muitas caractersticas complexas que no podem deixar de ser totalmente compreen-
didas pelo aluno. Os instrutores tambm esto disponveis para tirar as dvidas do aluno aps o trmino do
treinamento, basta entrar emcontato direto como instrutor ou coma Caelum, teremos o prazer emajud-lo.
Se voc est acompanhando essa apostila em casa, pense tambm em fazer o curso presencial na Caelum.
Voc ter contato direto como instrutor para esclarecer suas dvidas, aprender mais tpicos almda apostila,
e trocar experincias.
. T:nnNoo ov:ons oNt:Nv No GUJ
Recomendamos fortemente a busca de recursos e a participao ativa na comunidade por meio das listas de
discusso relacionadas ao contedo do curso.
O GUJ.com.br um site de perguntas e respostas para desenvolvedores de sofware que abrange diversas
reas, sendo que front-end um dos principais focos. A comunidade do GUJ tem mais de mil usurios e
milho e meio de mensagens. o lugar ideal pra voc tirar suas dvidas e encontrar outros desenvolvedores.
http://www.guj.com.br
Captulo - Sobre o curso - o complexo mundo do front-end - O projeto de e-commerce - Pgina
. B:nt:ocnnv:n
Almdo conhecimento disponvel na Internet pela da comunidade, existemmuitos livros interessantes sobre
o assunto. Algumas referncias:
HTML e CSS: Domine a web do futuro - Lucas Mazza, editora Casa do Cdigo;
A Web Mobile: Programe para um mundo de muitos dispositivos - Srgio Lopes, editora Casa do
Cdigo;
A Arte E A Cincia Do CSS - Adams & Cols;
Pro JavaScript Techniques - John Resig;
Te Smashing Book - smashingmagazine.com
. Pnnn oNov :n ovvo:s:
Este curso parte da Formao Web Design da Caelum que engloba tambm o treinamento Programao
com JavaScript e jQuery. Voc pode obter mais informaes 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
Formao Ruby on Rails, a Formao Java e a Formao .NET que abordam trs caminhos possveis para
esse mundo.
Mais informaes em:
http://www.caelum.com.br/cursos-rails/
http://www.caelum.com.br/cursos-java/
http://www.caelum.com.br/cursos-dotnet/
Captulo - Sobre o curso - o complexo mundo do front-end - Bibliografa - Pgina
C
Introduo a HTML e CSS
Quanto mais nos elevamos, menores parecemos aos olhos daqueles que no sabem voar.
Friedrich Wilhelm Nietzsche
. Ex:n:Noo :Nvonmnovs Nn Wvn
Anica linguagemque o navegador consegue interpretar para a exibio de contedo o HTML. Para iniciar
a explorao do HTML, vamos imaginar o seguinte caso: o navegador realizou uma requisio e recebeu
como corpo da resposta o seguinte contedo:
Mirror Fashion.
Bem-vindo Mirror Fashion, sua loja de roupas e acessrios.
Confira nossas promoes.
Receba informaes sobre nossos lanamentos por email.
Navegue por todos nossos produtos em catlogo.
Compre sem sair de casa.
Para conhecer o comportamento dos navegadores quanto ao contedo descrito antes, vamos reproduzir esse
contedo 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.
Parece que obtemos um resultado um pouco diferente do esperado, no? 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 formatao, para facilitar a leitura pelo usurio fnal.
Usando o resultado acima podemos concluir que o navegador por padro:
Pode no exibir caracteres acentuados corretamente;
No exibe quebras de linha.
Para que possamos exibir as informaes desejadas com a formatao, necessrio que cada trecho de texto
tenha uma marcao indicando qual o signifcado dele. Essa marcao tambm infuencia a maneira com
que cada trecho do texto ser exibido. A seguir listado o texto com uma marcao 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 acessrios.</h2>
Captulo - Introduo a HTML e CSS - Exibindo informaes na Web - Pgina
<ul>
<li>Confira nossas promoes.</li>
<li>Receba informaes sobre nossos lanamentos por email.</li>
<li>Navegue por todos nossos produtos em catlogo.</li>
<li>Compre sem sair de casa.</li>
</ul>
</body>
</html>
Reproduza o cdigo anterior em um novo arquivo de texto puro e salve-o como index-.html. No se preo-
cupe com a sintaxe, vamos conhecer detalhadamente cada caracterstica do HTML nos prximos captulos.
Abra o arquivo no navegador.
Agora, o resultado exibido de maneira muito mais agradvel e legvel. Para isso, tivemos que utilizar al-
gumas marcaes do HTML. Essas marcaes so chamadas de tags, e elas basicamente do signifcado ao
texto contido entre sua abertura e fechamento.
Apesar de estaremcorretamente marcadas, as informaes no apresentamnenhumatrativo esttico e, nessa
defcincia do HTML, reside o primeiro e maior desafo do programador front-end.
O HTML foi desenvolvido para exibio de documentos cientfcos. Para termos uma comparao, como
se a Web fosse desenvolvida para exibir monografas redigidas e formatadas pela Metodologia do Trabalho
Captulo - Introduo a HTML e CSS - Exibindo informaes na Web - Pgina
Cientfco da ABNT. Porm, com o tempo e a evoluo da Web e de seu potencial comercial, tornou-se
necessria a exibio de informaes com grande riqueza de elementos grfcos e de interao.
. S:N1nxv oo HTML
O HTML um conjunto de tags responsveis pela marcao do contedo de uma pgina no navegador.
No cdigo que vimos antes, as tags so os elementos a mais que escrevemos usando a sintaxe <nomedatag>.
Diversas tags so disponibilizadas pela linguagem HTML e cada uma possui uma funcionalidade especfca.
No cdigo de antes, vimos por exemplo o uso da tag <h1>. Ela representa o ttulo principal da pgina.
<h1>Mirror Fashion</h1>
Note a sintaxe. Uma tag defnida com caracteres < e >, e seu nome (H no caso). Muitas tags possuem
contedo, como o texto do ttulo (Mirror Fashion). Nesse caso, para determinar onde o contedo acaba,
usamos uma tag de fechamento com a barra antes do nome: </h1>.
Algumas tags podem receber atributos dentro de sua defnio. So parmetros usando a sintaxe de
nome=valor. Para defnir uma imagem, por exemplo, usamos a tag <img> e, para indicar qual imagem carre-
gar, usamos o atributo src:
<img src="../imagens/casa_de_praia.jpg">
Repare que a tag img no possui contedo por si s. Nesses casos, no necessrio usar uma tag de fecha-
mento como antes no h.
. Es1nc1cnn ov cmooccmvN1o HTML
Um documento HTML vlido precisa seguir obrigatoriamente a estrutura composta pelas tags <html>,
<head> e <body> e a instruo <!DOCTYPE>. Vejamos cada uma delas:
A 1nc <n1mt>
Na estrutura do nosso documento, antes de tudo, inserimos uma tag <html>. Dentro dessa tag, necessrio
declarar outras duas tags: <head> e <body>. Essas duas tags soirms, pois estonomesmonvel hierrquico
em relao sua tag pai, que <html>.
<html>
<head></head>
<body></body>
</html>
Captulo - Introduo a HTML e CSS - Sintaxe do HTML - Pgina
A 1nc <nvno>
Atag <head> contminformaes sobre nosso documento que so de interesse somente do navegador, e no
dos visitantes do nosso site. So informaes que no sero exibidas na rea do documento no navegador.
A especifcao obriga a presena da tag de contedo <title> dentro do nosso <head>, permitindo especi-
fcar o ttulo do nosso documento, que normalmente ser exibido na barra de ttulo da janela do navegador
ou na aba do documento.
Outra confgurao muito utilizada, principalmente em documentos cujo contedo escrito em um idioma
como o portugus, que tem caracteres como acentos e cedilha, a confgurao da codifcao de caracteres,
chamado de encoding ou charset.
Podemos confgurar qual codifcao queremos utilizar em nosso documento por meio da confgurao de
charset na tag <meta>. Um dos valores mais comuns usados hoje em dia o UTF-, tambm chamado de
Unicode. H outras possibilidades, como o latin, muito usado antigamente.
O UTF- a recomendao atual para encoding na Web por ser amplamente suportada em navegadores e
editores de cdigo, alm de ser compatvel com praticamente todos os idiomas do mundo. o que usaremos
no curso.
<html>
<head>
</head>
<body></body>
</html>
A 1nc <noov>
Atag <body> contmo corpo do nosso documento, que exibido pelo navegador emsua janela. necessrio
que o <body> tenha ao menos um elemento flho, ou seja, uma ou mais tags HTML dentro dele.
<html>
<head>
</head>
<body>
<h1>A Mirror Fashion</h1>
</body>
</html>
Nesse exemplo, usamos a tag <h1>, que indica um ttulo.
Captulo - Introduo a HTML e CSS - Estrutura de um documento HTML - Pgina
A :Ns1ncXo DOCTYPE
O DOCTYPE no uma tag HTML, mas uma instruo especial. Ela indica para o navegador qual verso
do HTML deve ser utilizada para renderizar a pgina. Utilizaremos <!DOCTYPE html>, que indica para o
navegador a utilizao da verso mais recente do HTML - a verso , atualmente.
H muitos comandos complicados nessa parte de DOCTYPE que eramusados emverses anteriores do HTML
e do XHTML. Hoje em dia, nada disso mais importante. O recomendado sempre usar a ltima verso
do HTML, usando a declarao de DOCTYPE simples:
<!DOCTYPE html>
. Tncs HTML
O HTML composto de diversas tags, cada uma com sua funo e signifcado. O HTML , ento, adicionou
muitas novas tags, que veremos ao longo do curso.
Nesse momento, vamos focar em tags que representam ttulos, pargrafo e nfase.
T1ctos
Quando queremos indicar que um texto um ttulo em nossa pgina, utilizamos as tags de heading em sua
marcao:
<h1>Mirror Fashion.</h1>
<h2>Bem-vindo Mirror Fashion, sua loja de roupas e acessrios.</h2>
As tags de heading so tags de contedo e vo de <h1> a <h6>, seguindo a ordem de importncia, sendo <h1>
o ttulo principal, o mais importante, e <h6> o ttulo de menor importncia.
Utilizamos, por exemplo, a tag <h1> para o nome, ttulo principal da pgina, e a tag <h2> como subttulo ou
como ttulo de sees dentro do documento.
A ordem de importncia, alm de infuenciar no tamanho padro de exibio do texto, tem impacto nas
ferramentas que processam HTML. As ferramentas de indexao de contedo para buscas, como o Google,
Bing ou Yahoo! levamemconsiderao essa ordeme relevncia. Os navegadores especiais para acessibilidade
tambminterpretamo contedo dessas tags de maneira a diferenciar seu contedo e facilitar a navegao do
usurio pelo documento.
Captulo - Introduo a HTML e CSS - Tags HTML - Pgina
PnnKcnnvos
Quando exibimos qualquer texto em nossa pgina, recomendado que ele seja sempre contedo de alguma
tag flha da tag <body>. A marcao mais indicada para textos comuns a tag de pargrafo:
<p>Nenhum item na sacola de compras.</p>
Se voc tiver vrios pargrafos de texto, use vrias dessas tags <p> para separ-los:
<p>Um pargrafo de texto.</p>
<p>Outro pargrafo de texto.</p>
Mnncnovs ov INvnsv
Quando queremos dar uma nfase diferente a um trecho de texto, podemos utilizar as marcaes de nfase.
Podemos deixar um texto mais forte com a tag <strong> ou deixar o texto com uma nfase acentuada
com a tag <em>. Tambm h a tag <small>, que diminui o tamanho do texto.
Por padro, os navegadores renderizaro o texto dentro da tag <strong> em negrito e o texto dentro da tag
<em> em itlico. Existem ainda as tags <b> e <i>, que atingem o mesmo resultado visualmente, mas as tags
<strong> e <em> so mais indicadas por defnirem nossa inteno de signifcado ao contedo, mais do que
uma simples indicao visual. Vamos discutir melhor a questo do signifcado das tags mais adiante.
<p>Compre suas roupas e acessrios na <strong>Mirror Fashion</strong>.</p>
. ImncvNs
A tag <img> defne uma imagem em uma pgina HTML e necessita de dois atributos preenchidos: src e alt.
O primeiro aponta para o local da imagem e o segundo, um texto alternativo para a imagem caso essa no
possa ser carregada ou visualizada.
O HTML introduziu duas novas tags especfcas para imagem: <figure> e <figcaption>. A tag <figure>
defne uma imagem com a conhecida tag <img>. Alm disso, permite adicionar uma legenda para a imagem
por meio da tag <figcaption>.
<figure>
<img src="img/produto1.png" alt="Foto do produto">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
Captulo - Introduo a HTML e CSS - Imagens - Pgina
. A vs1nc1cnn oos nnqc:vos ov cmvno)v1o
Como todo tipo de projeto de sofware, existem algumas recomendaes quanto organizao dos arquivos
de um site. No h nenhum rigor tcnico quanto a essa organizao e, na maioria das vezes, voc vai adaptar
as recomendaes da maneira que for melhor para o seu projeto.
Como umsite umconjunto de pginas Web sobre umassunto, empresa, produto ou qualquer outra coisa,
comumtodos os arquivos de umsite estaremdentro de uma s pasta e, assimcomo umlivro, recomendado
que exista uma capa, uma pgina inicial que possa indicar para o visitante quais so as outras pginas que
fazem parte desse projeto e como ele pode acess-las, como se fosse o ndice do site.
Esse ndice, no por coincidncia, conveno adotada pelos servidores de pginas Web. Se desejamos
que uma determinada pasta seja servida como um site e dentro dessa pasta existe um arquivo chamado
index.html, esse arquivo ser a pgina inicial a menos que alguma confgurao determine outra pgina
para esse fm.
Dentro da pasta do site, no mesmo nvel que o index.html, recomendado que sejam criadas mais algumas
pastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts. Para iniciar um
projeto, teramos uma estrutura de pastas como a demonstrada na imagem a seguir:
Muitas vezes, um site servido por meio de uma aplicao Web e, nesses casos, a estrutura dos arquivos
depende de como a aplicao necessita dos recursos para funcionar corretamente. Porm, no geral, as apli-
caes tambm seguem um padro bem parecido com o que estamos adotando para o nosso projeto.
. Eo:1onvs v IDEs
Existem editores de texto como Gedit (www.gnome.org), Sublime (http://www.sublimetext.com/) e Note-
pad++ (http://notepad-plus-plus.org), que possuem realce de sintaxe e outras ferramentas para facilitar o
desenvolvimento de pginas. H tambm IDEs (Integrated Development Environment), que oferecem re-
cursos como autocompletar e pr-visualizao, como Eclipse e Visual Studio.
. Pn:mv:nn vKc:Nn
A primeira pgina que desenvolveremos para a Mirror Fashion ser a Sobre, que explica detalhes sobre a
empresa, apresenta fotos e a histria.
Captulo - Introduo a HTML e CSS - A estrutura dos arquivos de um projeto - Pgina
Recebemos o design j pronto, assim como os textos. Nosso trabalho, como desenvolvedores de front-end,
codifcar o HTML e CSS necessrios para esse resultado.
Captulo - Introduo a HTML e CSS - Primeira pgina - Pgina
Captulo - Introduo a HTML e CSS - Primeira pgina - Pgina
. Exvncc:o: vn:mv:nos vnssos comHTML
) Ao longo do curso, usaremos diversas imagens que o nosso designer preparou. Nesse ponto, vamos im-
portar todas as imagens dentro do projeto que criamos antes para que possamos us-las nas pginas.
Copie a pasta caelum//mirror-fashion para a rea de trabalho de sua mquina.
Verifque a pasta img, agora cheia de arquivos do design do site. Almdesta pasta, teremos as pastas
js e css, que ainda no usaremos.
Emcnsn
Voc pode baixar um ZIP com todos os arquivos necessrios para o curso aqui: http://
mirrorfashion.net/caelum-arquivos-curso-web.zip
) Dentro da pasta mirror-fashion, vamos criar o arquivo sobre.html com a estrutura bsica contendo o
DOCTYPE e as tags html, head e body:
<!DOCTYPE html>
<html>
<head>
<title>Sobre a Mirror Fashion</title>
</head>
<body>
</body>
</html>
) A pgina deve ter uma imagem com o logo da empresa, um ttulo e um texto falando sobre ela. Use a tag
<img> para o logo, <h1> para ttulo, <h2> para subttulo e <p> para pargrafo:
<img src="img/logo.png">
<h1>A Mirror Fashion</h1>
<p>
A Mirror Fashion a maior empresa de comrcio eletrnico no segmento
de moda em todo o mundo. Fundada em 1932, possui filiais
em 124 pases........
</p>
Dica: o texto para ser colocado na pgina est no arquivo sobre.txt disponvel na pasta Caelum//textos.
So vrios pargrafos que devem ser adaptados com o HTML apropriado.
Aps copiar o texto do arquivo sobre.txt coloque cada umdos pargrafos dentro de uma tag <p>. Coloque
tambm o ttulo Histria dentro de uma tag <h2>.
Captulo - Introduo a HTML e CSS - Exerccio: primeiros passos com HTML - Pgina
) Um texto corrido sem nfases difcil de ler. Use negritos e itlicos para destacar partes importantes.
Use a tag <strong> para a nfase mais forte em negrito, por exemplo para destacar o nome da empresa
no texto do primeiro pargrafo:
<p>A <strong>Mirror Fashion</strong> a maior empresa comrcio eletrnico.......</p>
Use tambm a nfase com <em> que deixar o texto em itlico. Na parte da Histria, coloque os nomes
das pessoas e da famlia em <em>.
) A pgina deve ter duas imagens. A primeira apresenta o centro da Mirror Fashion e deve ser inserida
aps o segundo pargrafo do texto. A outra, uma imagem da Famlia Pelho e deve ser colocada aps
o subttulo da Histria.
As imagens podem ser carregadas com a tag <img>, apontando seu caminho. Alm disso, no HTML,
podemos usar as tags <figure> e <figcaption> para destacar a imagem e colocar uma legenda em cada
uma.
A imagem do centro de distribuio est em img/centro-distribuicao.png:
<figure>
<img src="img/centro-distribuicao.png">
<figcaption>Centro de distribuio da Mirror Fashion</figcaption>
</figure>
A imagem da famlia a img/familia-pelho.jpg e deve ser colocada na parte de Histria:
<figure>
<img src="img/familia-pelho.jpg">
<figcaption>Famlia Pelho</figcaption>
</figure>
Verifque o resultado no navegador. Devemos j ver o contedo e as imagens na sequncia, mas sem um
design muito interessante.
Bon vnK1:cn - INovN1nXo
Uma prtica sempre recomendada, ligada limpeza e utilizada para facilitar a leitura do cdigo,
o uso correto de recuos, ou indentao, no HTML. Costumamos alinhar elementos irmos
na mesma margem e adicionar alguns espaos ou um tab para elementos flhos.
A maioria dos exerccios dessa apostila utiliza um padro recomendado de recuos.
Captulo - Introduo a HTML e CSS - Exerccio: primeiros passos com HTML - Pgina
Bon vnK1:cn - ComvN1Kn:os
Quando iniciamos nosso projeto, utilizamos poucas tags HTML. Mais tarde adicionaremos uma
quantidade razovel de elementos, o que pode gerar uma certa confuso. Para manter o cdigo
mais legvel, recomendada a adio de comentrios antes da abertura e aps o fechamento de
tags estruturais (que contero outras tags). Dessa maneira, ns podemos identifcar claramente
quando um elemento est dentro dessa estrutura ou depois da mesma.

<div id="header">
<p>Esse pargrafo est "dentro" da rea principal.</p>
</div>

<p>Esse pargrafo est "depois" da rea principal.</p>
. Es1:t:znNoo comCSS
Quando escrevemos o HTML, marcamos o contedo da pgina com tags que melhor representam o signi-
fcado daquele contedo. A quando abrimos a pgina no navegador possvel perceber que o navegador
mostra as informaes com estilos diferentes.
Um h, por exemplo, fca em negrito numa fonte maior. Pargrafos de texto so espaados entre si, e assim
por diante. Isso quer dizer que o navegador tem um estilo padro para as tags que usamos. Mas, claro, pra
fazer sites bonites vamos querer customizar o design dos elementos da pgina.
Antigamente, isso era feito no prprio HTML. Se quisesse um ttulo em vermelho, era s fazer:
<h1><font color="red">Mirror Fashion anos 90</font></h1>
Alm da tag font, vrias outras tags de estilo existiam. Mas isso passado. Tags HTML para estilo so m
prtica hoje em dia e jamais devem ser usadas.
Em seu lugar, surgiu o CSS, que uma outra linguagem, separada do HTML, com objetivo nico de cuidar
da estilizao da pgina. A vantagem que o CSS bem mais robusto que o HTML para estilizao, como
veremos. Mas, principalmente, escrever formatao visual misturado com contedo de texto no HTML se
mostrou algo bem impraticvel. O CSS resolve isso separando as coisas; regras de estilo no aparecem mais
no HTML, apenas no CSS.
Captulo - Introduo a HTML e CSS - Estilizando com CSS - Pgina
. S:N1nxv v :NctcsXo ov CSS
A sintaxe do CSS tem estrutura simples: uma declarao de propriedades e valores separados por um sinal
de dois pontos :, e cada propriedade separada por um sinal de ponto e vrgula ; da seguinte maneira:
background-color: yellow;
color: blue;
O elemento que receber essas propriedades ser exibido com o texto na cor azul e com o fundo amarelo.
Essas propriedades podem ser declaradas de trs maneiras diferentes.
A1n:nc1o s1vtv
A primeira delas como um atributo style no prprio elemento:
<p style="color: blue; background-color: yellow;">
O contedo desta tag ser exibido em azul com fundo amarelo no navegador!
</p>
Mas tnhamos acabado de discutir que uma das grandes vantagens do CSS era manter as regras de estilo fora
do HTML. Usando esse atributo style no parece que fzemos isso. Justamente por isso no se recomenda
esse tipo de uso na prtica, mas sim os que veremos a seguir.
A 1nc s1vtv
A outra maneira de se utilizar o CSS declarando suas propriedades dentro de uma tag <style>.
Como estamos declarando as propriedades visuais de um elemento em outro lugar do nosso documento,
precisamos indicar de alguma maneira a qual elemento nos referimos. Fazemos isso utilizando um seletor
CSS. basicamente uma forma de buscar certos elementos dentro da pgina que recebero as regras visuais
que queremos.
No exemplo a seguir, usaremos o seletor que pega todas as tags p e altera sua cor e background:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
Captulo - Introduo a HTML e CSS - Sintaxe e incluso de CSS - Pgina
</style>
</head>
<body>
<p>
O contedo desta tag ser exibido em azul com fundo amarelo!
</p>
<p>
<strong>Tambm</strong> ser exibido em azul com fundo amarelo!
</p>
</body>
</html>
O cdigo anterior da tag <style> indica que estamos alterando a cor e o fundo de todos os elementos com
tag p. Dizemos que selecionamos esses elementos pelo nome de sua tag, e aplicamos certas propriedades CSS
apenas neles.
Anqc:vo vx1vnNo
A terceira maneira de declararmos os estilos do nosso documento com um arquivo externo, geralmente
com a extenso .css. Para que seja possvel declarar nosso CSS em um arquivo parte, precisamos indicar
em nosso documento HTML uma ligao entre ele e a folha de estilo.
Alm da melhor organizao do projeto, a folha de estilo externa traz ainda as vantagens de manter nosso
HTML mais limpo e do reaproveitamento de uma mesma folha de estilos para diversos documentos.
A indicao de uso de uma folha de estilos externa deve ser feita dentro da tag <head> do nosso documento
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>
O contedo desta tag ser exibido em azul com fundo amarelo!
</p>
<p>
<strong>Tambm</strong> ser exibido em azul com fundo amarelo!
</p>
</body>
</html>
Captulo - Introduo a HTML e CSS - Sintaxe e incluso de CSS - Pgina
E dentro do arquivo estilos.css colocamos apenas o contedo do CSS:
p {
color: blue;
}
. Pnovn:vonovs 1:vocnKv:cns v voN1vs
Da mesma maneira que alteramos cores, podemos alterar o texto. Podemos defnir fontes com o uso da
propriedade font-family.
Apropriedade font-family pode receber seuvalor comousemaspas. No primeiro caso, estaremos passando
o nome do arquivo de fonte a ser utilizado, no ltimo, estaremos passando a famlia da fonte.
Por padro, os navegadores mais conhecidos exibem texto em um tipo que conhecemos como serif . As
fontes mais conhecidas (e comumente utilizadas como padro) so Times e Times New Roman, depen-
dendo do sistema operacional. Elas so chamadas de fontes serifadas pelos pequenos ornamentos em suas
terminaes.
Podemos alterar a famlia de fontes que queremos utilizar em nosso documento para a famlia sans-serif
(sem serifas), que contm, por exemplo, as fontes Arial e Helvetica. Podemos tambm declarar que que-
remos utilizar uma famlia de fontes monospace como, por exemplo, a fonte Courier.
h1 {
font-family: serif;
}
h2 {
font-family: sans-serif;
}
p {
font-family: monospace;
}
possvel, e muito comum, declararmos o nome de algumas fontes que gostaramos de verifcar se existem
no computador, permitindo que tenhamos um controle melhor da forma como nosso texto ser exibido.
Normalmente, declaramos as fontes mais comuns, e existe umgrupo de fontes que so consideradas seguras
por serem bem populares.
Em nosso projeto, vemos que as fontes no tm ornamentos. Ento vamos declarar essa propriedade para
todo o documento por meio do seu elemento body:
Captulo - Introduo a HTML e CSS - Propriedades tipogrfcas e fontes - Pgina
body {
font-family: "Arial", "Helvetica", sans-serif;
}
Nesse caso, o navegador verifcar se a fonte Arial est disponvel e a utilizar para renderizar os textos de
todos os elementos do nosso documento que, por cascata, herdaro essa propriedade do elemento body.
Caso a fonte Arial no esteja disponvel, o navegador verifcar a disponibilidade da prxima fonte decla-
rada, no nosso exemplo a Helvetica. Caso o navegador no encontre tambmessa fonte, ele solicita qualquer
fonte que pertena famlia sans-serif , declarada logo a seguir, e a utiliza para exibir o texto, no importa
qual seja ela.
Temos outras propriedades para manipular a fonte, como a propriedade font-style, que defne o estilo da
fonte que pode ser: normal (normal na vertical), italic (inclinada) e oblique (oblqua).
. At:NnnmvN1o v ovconnXo ov 1vx1o
J vimos uma srie de propriedades e subpropriedades que determinamo estilo do tipo (fonte). Agora, vamos
conhecer algumas maneiras de alterarmos as disposies dos textos.
Uma das propriedades mais simples, porm muito utilizada, a que diz respeito ao alinhamento de texto: a
propriedade text-align.
p {
text-align: right;
}
O exemplo acima determina que todos os pargrafos da nossa pgina tero o texto alinhado para a direita.
Tambm possvel determinar que um elemento tenha seu contedo alinhado ao centro ao defnirmos o
valor center para a propriedade text-align, ou ento defnir que o texto deve ocupar toda a largura do
elemento aumentando o espaamento entre as palavras com o valor justify. O padro que o texto seja
alinhado esquerda, com o valor left, porm importante lembrar que essa propriedade propaga-se em
cascata.
possvel confgurar tambm uma srie de espaamentos de texto com o CSS:
p {
line-height: 3px; /* tamanho da altura de cada linha */
letter-spacing: 3px; /* tamanho do espao entre cada letra */
word-spacing: 5px; /* tamanho do espao entre cada palavra */
text-indent: 30px; /* tamanho da margem da primeira linha do texto */
}
Captulo - Introduo a HTML e CSS - Alinhamento e decorao de texto - Pgina
. Imncvmov vcNoo
A propriedade background-image permite indicar um arquivo de imagem para ser exibido ao fundo do
elemento. Por exemplo:
h1 {
background-image: url(sobre-background.jpg);
}
Com essa declarao, o navegador vai requisitar um arquivo sobre-background.jpg, que deve estar na
mesma pasta do arquivo CSS onde consta essa declarao.
. Bonons
As propriedades do CSS para defnirmos as bordas de um elemento nos apresentam uma srie de opes.
Podemos, para cada borda de um elemento, determinar sua cor, seu estilo de exibio e sua largura. Por
exemplo:
body {
border-color: red;
border-style: solid;
border-width: 1px;
}
Para que o efeito da cor sobre a borda surta efeito, necessrio que a propriedade border-style tenha qual-
quer valor diferente do padro none.
Conseguimos fazer tambm comentrios no CSS usando a seguinte sintaxe:
/* deixando o fundo ridculo */
body {
background: gold;
}
Captulo - Introduo a HTML e CSS - Imagem de fundo - Pgina
. Exvncc:o: vn:mv:nos vnssos comCSS
) Aplicaremos um pouco de estilo em nossa pgina usando CSS. Dentro da pasta css, crie um arquivo
sobre.css, que conter nosso cdigo de estilo para essa pgina.
Em primeiro lugar, precisamos carregar o arquivo sobre.css dentro da pgina sobre.html com a tag
<link> dentro da tag <head>:
<link rel="stylesheet" href="css/sobre.css">
Para a tag <body>, altere a sua cor e sua fonte base por meio das propriedades color e font-family:
body {
color: #333333;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
O ttulo principal deve ter um fundo estampado com a imagem img/sobre-background.jpg. Use a pro-
priedade background-image pra isso. Aproveite e coloque uma borda sutil nos subttulos, para ajudar a
separar o contedo.
h1 {
background-image: url(../img/sobre-background.jpg);
}
h2 {
border-bottom: 2px solid #333333;
}
Acerte tambma renderizao das fguras. Coloque umfundo cinza, uma borda sutil, deixe a legenda em
itlico com font-style e alinhe a imagem e a legenda no centro com text-align.
figure {
background-color: #F2EDED;
border: 1px solid #ccc;
text-align: center;
}
figcaption {
font-style: italic;
}
Teste o resultado no navegador. Nossa pgina comea a pegar o estilo da pgina fnal!
Captulo - Introduo a HTML e CSS - Exerccio: primeiros passos com CSS - Pgina
) (opcional) Teste outros estilos de bordas em vez do solid que vimos no exerccio anterior. Algumas
possibilidades: dashed, dotted, double, groove e outros.
Teste tambm outras possibilidades para o text-align, como left, right e justify.
. Convs Nn Wvn
Propriedades como background-color, color, border-color, entre outras aceitam uma cor como valor. Exis-
tem vrias maneiras de defnir cores quando utilizamos o CSS.
A primeira, mais simples e ingnua, usando o nome da cor:
h1 {
color: red;
}
h2 {
background: yellow;
}
O difcil acertar a exata variao de cor que queremos no design. Por isso, bem incomum usarmos cores
com seus nomes. O mais comum defnir a cor com base em sua composio RGB.
Captulo - Introduo a HTML e CSS - Cores na Web - Pgina
RGB um sistema de cor bastante comum aos designers. Ele permite especifcar at milhes de cores
como uma combinao de trs cores base: Vermelho (Red), Verde (Green), Azul (Blue). Podemos escolher
a intensidade de cada um desses trs canais bsicos, numa escala de a .
Um amarelo forte, por exemplo, tem de Red, de Green e de Blue (, , ). Se quiser um laranja,
basta diminuir um pouco o verde (, , ). E assim por diante.
No CSS, podemos escrever as cores tendo como base sua composio RGB. Alis, no CSS - que veremos
melhor depois - h at uma sintaxe bem simples pra isso:
h3 {
color: rgb(255, 200, 0);
}
Essa sintaxe funciona nos browsers mais modernos mas no a mais comum na prtica, por questes de
compatibilidade. O mais comum a notao hexadecimal, que acabamos usando no exerccio anterior ao
escrever FEDED. Essa sintaxe tem suporte universal nos navegadores e mais curta de escrever, apesar
de ser mais enigmtica.
h3 {
background: #F2EDED;
}
No fundo, porm, a mesma coisa. Na notao hexadecimal (que comea com ), temos caracteres. Os
primeiros indicam o canal Red, os dois seguintes, o Green, e os ltimos, Blue. Ou seja, RGB. E usamos a
matemtica pra escrever menos, trocando a base numrica de decimal para hexadecimal.
Na base hexadecimal, os algarismos vo de zero a quinze (ao invs do zero a nove da base decimal comum).
Para representar os algarismos de dez a quinze, usamos letras de A a F. Nessa sintaxe, portanto, podemos
utilizar nmeros de - e letras de A-F.
H uma conta por trs dessas converses, mas seu editor de imagens deve ser capaz de fornecer ambos os
valores para voc sem problemas. Um valor vira FF na notao hexadecimal. A cor FEDED, por
exemplo, equivalente a rgb(, , ), um cinza claro.
Vale aqui uma dica quanto ao uso de cores hexadecimais, toda vez que os caracteres presentes na composio
da base se repetirem, estes podem ser simplifcados. Ento um nmero em hexadecimal FF, pode ser
simplifcado para F.
. L:s1ns HTML
No so raros os casos emque queremos exibir uma listagememnossas pginas. OHTML temalgumas tags
defnidas para que possamos fazer isso de maneira correta. A lista mais comum a lista no-ordenada.
Captulo - Introduo a HTML e CSS - Listas HTML - Pgina
<ul>
<li>Primeiro item da lista</li>
<li>
Segundo item da lista:
<ul>
<li>Primeiro item da lista aninhada</li>
<li>Segundo item da lista aninhada</li>
</ul>
</li>
<li>Terceiro item da lista</li>
</ul>
Note que, para cada itemda lista no-ordenada, utilizamos uma marcao de itemde lista <li>. No exemplo
acima, utilizamos uma estrutura composta na qual o segundo item da lista contm uma nova lista. A mesma
tag de item de lista <li> utilizada quando demarcamos uma lista ordenada.
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
<li>Quarto item da lista</li>
<li>Quinto item da lista</li>
</ol>
As listas ordenadas tambmpodemter sua estrutura composta por outras listas ordenadas como no exemplo
que temos para as listas no-ordenadas. Tambm possvel ter listas ordenadas aninhadas em um item de
uma lista no-ordenada e vice-versa.
Existe um terceiro tipo de lista que devemos utilizar para demarcar um glossrio, quando listamos termos e
seus signifcados. Essa lista a lista de defnio.
<dl>
<dt>HTML</dt>
<dd>
HTML a linguagem de marcao de textos utilizada
para exibir textos como pginas na Internet.
</dd>
<dt>Navegador</dt>
<dd>
Navegador o software que requisita um documento HTML
atravs do protocolo HTTP e exibe seu contedo em uma
janela.
</dd>
</dl>
Captulo - Introduo a HTML e CSS - Listas HTML - Pgina
. EsvnnmvN1o v mnncvm
Utilizamos a propriedade padding para espaamento e margin para margem. Vejamos cada uma e como
elas diferem entre si.
Pnoo:Nc
A propriedade padding utilizada para defnir uma margem interna em alguns elementos (por margem
interna queremos dizer a distncia entre o limite do elemento, sua borda, e seu respectivo contedo) e tem
as subpropriedades listadas a seguir:
padding-top
padding-right
padding-bottom
padding-lef
Essas propriedades aplicamuma distncia entre o limite do elemento e seu contedo acima, direita, abaixo e
esquerda respectivamente. Essa ordem importante para entendermos como funciona a shorthand property
do padding.
Podemos defnir todos os valores para as subpropriedades do padding em uma nica propriedade, chamada
exatamente de padding, e seu comportamento descrito nos exemplos a seguir:
Se passado somente umvalor para a propriedade padding, esse mesmo valor aplicado emtodas as direes.
p {
padding: 10px;
}
Se passados dois valores, o primeiro ser aplicado acima e abaixo (equivalente a passar o mesmo valor para
padding-top e padding-bottom) e o segundo ser aplicado direita e esquerda (equivalente ao mesmo
valor para padding-right e padding-left).
p {
padding: 10px 15px;
}
Se passados trs valores, o primeiro ser aplicado acima (equivalente a padding-top), o segundo ser aplicado
direita e esquerda (equivalente a passar o mesmo valor para padding-right e padding-left) e o terceiro
valor ser aplicado abaixo do elemento (equivalente a padding-bottom)
p {
padding: 10px 20px 15px;
}
Captulo - Introduo a HTML e CSS - Espaamento e margem - Pgina
Se passados quatro valores, sero aplicados respectivamente a padding-top, padding-right,
padding-bottom e padding-left. Para facilitar a memorizao dessa ordem, basta lembrar que os
valores so aplicados em sentido horrio.
p {
padding: 10px 20px 15px 5px;
}
Mnnc:N
A propriedade margin bem parecida com a propriedade padding, exceto que ela adiciona espao aps o
limite do elemento, ou seja, um espaamento alm do elemento em si. Alm das subpropriedades listadas
a seguir, h a shorthand property margin que se comporta da mesma maneira que a shorthand property do
padding vista no tpico anterior.
margin-top
margin-right
margin-bottom
margin-lef
H ainda uma maneira de permitir que o navegador defna qual ser a dimenso da propriedade padding ou
margin conforme o espao disponvel na tela: defnimos o valor auto para a margem ou o espaamento que
quisermos.
No exemplo a seguir, defnimos que um elemento no tem nenhuma margem acima ou abaixo de seu con-
tedo e que o navegador defne uma margem igual para ambos os lados de acordo com o espao disponvel:
p {
margin: 0 auto;
}
D:mvNsovs
possvel determinar as dimenses de um elemento, por exemplo:
p {
background-color: red;
height: 300px;
width: 300px;
}
Todos os pargrafos do nosso HTML ocuparo pixels de largura e de altura, comcor de fundo vermelha.
Captulo - Introduo a HTML e CSS - Espaamento e margem - Pgina
. Exvncc:os: t:s1ns v mnncvNs
) Ainda na pgina sobre.html, crie um subttulo chamado Diferenciais e, logo em seguida, uma lista de
diferenciais. Use <h2> para o subttulo, <ul> para a lista e <li> para os itens da lista.
Dica: voc pode copiar o texto dos diferenciais do arquivo diferenciais.txt.
<h2>Diferenciais</h2>
<ul>
<li>Menor preo do varejo, garantido</li>
<li>Se voc achar uma loja mais barata, leva o produto de graa</li>
....
</ul>
Teste o resultado no navegador.
) Podemos melhorar a apresentao da pgina acertando alguns espaamentos usando vrias propriedades
do CSS, como margin, padding e text-indent.
h1 {
padding: 10px;
}
h2 {
margin-top: 30px;
}
p {
padding: 0 45px;
text-indent: 15px;
}
figure {
padding: 15px;
margin: 30px;
}
figcaption {
margin-top: 10px;
}
Veja o resultado no navegador.
) Para centralizar o body como no design, podemos usar o truque de colocar um tamanho fxo e margens
auto na esquerda de direita:
Captulo - Introduo a HTML e CSS - Exerccios: listas e margens - Pgina
body {
margin-left: auto;
margin-right: auto;
width: 940px;
}
Verifque mais uma vez o resultado.
. L:Ns HTML
Quando precisamos indicar que um trecho de texto se refere a um outro contedo, seja ele no mesmo docu-
mento ou em outro endereo, utilizamos a tag de ncora <a>.
Existem dois diferentes usos para as ncoras. Um deles a defnio de links:
<p>
Visite o site da <a href="http://www.caelum.com.br">Caelum</a>.
</p>
Note que a ncora est demarcando apenas a palavra Caelum de todo o contedo do pargrafo exemplif-
cado. Isso signifca que, ao clicarmos como cursor do mouse na palavra Caelum, o navegador redirecionar
o usurio para o site da Caelum, indicado no atributo href.
Outro uso para a tag de ncora a demarcao de destinos para links dentro do prprio documento, o que
chamamos de bookmark.
<p>Mais informaes <a href="#info">aqui</a>.</p>
<p>Contedo da pgina...</p>
<h2 id="info">Mais informaes sobre o assunto:</h2>
<p>Informaes...</p>
De acordo com o exemplo acima, ao clicarmos sobre a palavra aqui, demarcada com um link, o usurio
ser levado poro da pgina onde o bookmark info visvel. Bookmark o elemento que tem o atributo
id.
Captulo - Introduo a HTML e CSS - Links HTML - Pgina
possvel, com o uso de um link, levar o usurio a um bookmark presente em outra pgina.
<a href="http://www.caelum.com.br/curso/wd43/#contato">
Entre em contato sobre o curso
</a>
O exemplo acima far com que o usurio que clicar no link seja levado poro da pgina indicada no
endereo, especifcamente no ponto onde o bookmark contato seja visvel.
. Exvncc:os: t:Ns
) No primeiro pargrafo do texto, citamos o centro de distribuio na cidade de Jacarezinho, no Paran.
Transforme esse texto em um link externo apontando para o mapa no Google Maps.
Use a tag <a> para criar link para o Google Maps:
<a href="https://maps.google.com.br/?q=Jacarezinho">
Jacarezinho, no Paran
</a>
Teste a pgina no navegador e acesse o link.
) Durante o curso, vamos criar vrias pginas para o site da Mirror Fashion, como uma pgina inicial
(chamada index.html) e uma pgina de contato (chamada contato.html).
Queremos, nessa pgina de Sobre que estamos fazendo, linkar para essas outras. Por isso, vamos cri-
las agora na pasta mirror-fashion com a estrutura bsica e um pargrafo indicando em qual pgina o
usurio est. No se preocupe, elas sero incrementadas em breve.
Crie a pgina index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Ol, sou o index.html!</h1>
</body>
</html>
Crie a pgina contato.html:
<!DOCTYPE html>
<html>
Captulo - Introduo a HTML e CSS - Exerccios: links - Pgina
<head>
</head>
<body>
<h1>Ol, sou o contato.html</h1>
</body>
</html>
Agora adicione links internos na nossa sobre.html apontando para estas outras pginas que acabamos
de criar. O terceiro pargrafo do texto possui diversas referncias a essas outras pginas mas ainda sem
links. Crie links l:
... Acesse <a href="index.html">nossa loja</a> ou entre
em <a href="contato.html">contato</a> se tiver dvidas...
Repare como apenas envolvemos o texto a ser linkado usando a tag <a>.
Veja o resultado.
) Se reparar bem, ainda nesse terceiro pargrafo de texto, h referncias textuais para as outras sees da
nossa pgina, em particular para a Histria e os Diferenciais. Para facilitar a navegao do usurio, pode-
mos transformar essas referncias em ncoras para as respectivas sees no HTML.
Para isso, adicione um id em cada um dos subttulos para identifc-los:
<h2 id="historia">Histria</h2>
...
<h2 id="diferenciais">Diferenciais</h2>
Agora que temos os ids dos subttulos preenchidos, podemos criar uma ncora para eles:
... Conhea tambm nossa <a href="#historia">histria</a> e
nossos <a href="#diferenciais">diferenciais</a>....
Veja o resultado em seu navegador.
. EtvmvN1os vs1nc1cnn:s
J vimos muitas tags para casos especfcos: ttulos com h, pargrafos com p, imagens com img, listas com
ul etc. E ainda vamos ver vrias outras.
Mas claro que no existe uma tag diferente para cada coisa do universo. O conjunto de tags do HTML
bem vasto mas tambm limitado.
Captulo - Introduo a HTML e CSS - Elementos estruturais - Pgina
Invariavelmente voc vai cair algum dia num cenrio onde no consegue achar a tag certa para aquele con-
tedo. Nesse caso, pode usar as tags <div> e <span> que funcionam como coringas. So tags sem nenhum
signifcado especial mas que podemservir para agrupar umcerto contedo, tanto umbloco da pgina quanto
um pedao de texto.
E, como vamos ver a seguir, vamos poder estilizar esses divs e spans com CSS customizado. Por padro, eles
no tm estilo algum.
. CSS: Svtv1onvs ov IDv v:tno
J vimos como selecionar elementos no CSS usando simplesmente o nome da tag:
p {
color: red;
}
Apesar de simples, uma maneira muito limitada de selecionar. s vezes no queremos pegar todos os
pargrafos da pgina, mas apenas algum determinado.
Existem, portanto, maneiras mais avanadas de selecionarmos um ou mais elementos do HTML usando os
seletores CSS. Vamos ver seletores CSS quase que ao longo do curso todo, inclusive alguns bem avanados e
modernos do CSS. Por enquanto, vamos ver mais bsicos alm do seletor por nome de tag.
Svtv1on ov ID
possvel aplicar propriedades visuais a um elemento selecionado pelo valor de seu atributo id. Para isso, o
seletor deve iniciar com o caractere seguido do valor correspondente.
#cabecalho {
color: white;
text-align: center;
}
O seletor acima far com que o elemento do nosso HTML que tem o atributo id com valor cabecalho
tenha seu texto renderizado na cor branca e centralizado. Note que no h nenhuma indicao para qual tag
a propriedade ser aplicada. Pode ser tanto uma <div> quanto um <p>, at mesmo tags sem contedo como
uma <img>, desde que essa tenha o atributo id com o valor cabecalho.
Como o atributo id deve ter valor nico no documento, o seletor deve aplicar suas propriedades declaradas
somente quele nico elemento e, por cascata, a todos os seus elementos flhos.
Captulo - Introduo a HTML e CSS - CSS: Seletores de ID e flho - Pgina
Svtv1on n:vnKnqc:co
Podemos ainda utilizar um seletor hierrquico que permite aplicar estilos aos elementos flhos de um ele-
mento pai:
#rodape img {
margin-right: 35px;
vertical-align: middle;
width: 94px;
}
No exemplo anterior, o elemento pai rodape selecionado pelo seu id. O estilo ser aplicado apenas nos
elementos img flhos do elemento com id=rodape.
. Exvncc:os: svtv1onvs CSS
) Emnossa pgina, temos uma <figure> que aponta para a imagemcentro-distribuicao.png. Queremos
acertar seu tamanho para ser compatvel com a imagem de dentro, alm de centraliz-la na pgina.
Com CSS, podemos confgurar o tamanho com width e colocar as margens laterais como auto para cen-
tralizar. Mas como indicar no CSS que queremos aplicar essas regras somente a um certo elemento?
Usando IDs.
Coloque um id na <figure> para podermos estiliz-la especifcamente via CSS:
<figure id="centro-distribuicao">
....
Adicionando o CSS:
#centro-distribuicao {
margin-left: auto;
margin-right: auto;
width: 550px;
}
Teste no navegador. Compare o resultado coma <figure> de id familia-pelho que no recebeuo mesmo
estilo.
Captulo - Introduo a HTML e CSS - Exerccios: seletores CSS - Pgina
) Crie um rodap para a pgina utilizando uma <div>, que deve ser inserida como ltimo elemento dentro
da tag <body>:
<div id="rodape">
<img src="img/logo.png">
© Copyright Mirror Fashion
</div>
Teste o resultado.
) Assim como fzemos para os ttulos e subttulos, estilize o nosso rodap. Repare no uso do id via CSS
para selecionarmos apenas o elemento especfco que ser estilizado. Repare tambm no uso do seletor de
descendentes para indicar um elemento que est dentro de outro.
#rodape {
color: #777;
margin: 30px 0;
padding: 30px 0;
}
#rodape img {
margin-right: 30px;
width: 94px;
}
Teste o resultado fnal no navegador.
Captulo - Introduo a HTML e CSS - Exerccios: seletores CSS - Pgina
. Ftcxo oo ooccmvN1o v vton1
Suponhamos que, por uma questo de design, a imagem da famlia Pelho deva vir ao lado do pargrafo e
conforme a imagem abaixo:
Isso no acontece por padro. Repare que, observando as tags HTML que usamos at agora, os elementos
da pgina so desenhados um em cima do outro. como se cada elemento fosse uma caixa (box) e o padro
empilhar essas caixas verticalmente. Mais pra frente vamos entender melhor esse algoritmo, mas agora o
importante que ele atrapalha esse nosso design.
Temos um problema: a tag <figure> ocupa toda a largura da pgina e aparece empilhada no fuxo do docu-
mento, no permitindo que outros elementos sejam adicionados ao seu lado.
Este problema pode ser solucionado por meio da propriedade foat. Esta propriedade permite que tiremos
um certo elemento do fuxo vertical do documento o que faz com que o contedo abaixo dele fua ao seu
redor. Na prtica, vai fazer exatamente o layout que queremos.
Em nosso exemplo, o contedo do pargrafo tentar fuir ao redor da nossa imagem com foat. Perceba que
houve uma perturbao do fuxo HTML, pois agora a nossa imagem parece existir fora do fuxo.
. Exvncc:os: vtc1cnXo ov vtvmvN1os
) Queremos que a imagem da Famlia Pelho esteja futuando a direita no texto na seo sobre a Histria da
empresa. Para isso, use a propriedade float no CSS.
Como a <figure> com a imagem da famlia Pelho ainda no possui id, adicione um:
<figure id="familia-pelho">
....
Agora podemos referenciar o elemento atravs de seu id em nosso CSS, indicando a futuao e uma
margem para espaamento:
Captulo - Introduo a HTML e CSS - Fluxo do documento e foat - Pgina
#familia-pelho {
float: right;
margin: 0 0 10px 10px;
}
Teste o resultado. Repare como o texto renderizado ao redor da imagem, bem diferente de antes.
) (opcional) Faa testes com o float: left tambm.
) (opcional) Teste futuar a imagem do centro de distribuio. Como o contedo fuir ao seu redor agora?
o que queramos? Como melhorar?
. Ovc1cno v vnvsvN1v on Wvn como HTML
Nos ltimos anos, muito tem se falado sobre a prxima verso do HTML, o HTML. Esse projeto um
grande esforo do WC e dos principais browsers para atender a uma srie de necessidades do desenvolvi-
mento da Web como plataforma de sistemas distribudos e informao descentralizada. Algumas novidades
so importantes para a marcao de contedo, outras para a estilizao com o CSS nvel (CSS) e outras
novidades so importantes para interao avanada como usurio comnovas funcionalidades do navegador
com JavaScript.
Apesar da especifcao ainda no estar completa e existirem diferenas entre as implementaes adotadas
pelos diferentes navegadores ainda hoje, o mercado est tomando uma posio bem agressiva quanto ado-
o dos novos padres e hoje muitos projetos j so iniciados com os novos padres.
Em alguns casos, os esforos de manuteno de um projeto que adota os novos padres similar ou compa-
rvel com a manuteno de um projeto que prev compatibilidade total com navegadores j obsoletos como
o Internet Explorer e o Firefox .
Em nosso projeto, vamos adotar os padres do HTML e vamos conhecer e utilizar algumas de suas novi-
dades quanto melhoria da semntica de contedo e novas propriedades de CSS que nos permite adicionar
efeitos visuais antes impossveis. Ainda assim, nosso projeto ser parcialmente compatvel com navegadores
obsoletos por conta da tcnica Progressive Enhancement.
Captulo - Introduo a HTML e CSS - O futuro e presente da Web com o HTML - Pgina
C
HTML semntico e posicionamento no CSS
O caos a rima do inaudito.
Zack de la Rocha
. Ovnocvsso ov ovsvNvotv:mvN1o ov cmn 1vtn
Existe hoje no mercado uma grande quantidade de empresas especializadas no desenvolvimento de sites e
aplicaes web, bem como algumas empresas de desenvolvimento de sofware ou agncias de comunicao
que tm pessoas capacitadas para executar esse tipo de projeto.
Quando detectada a necessidade do desenvolvimento de um site ou aplicao web, a empresa que tem essa
necessidade deve passar todas as informaes relevantes ao projeto para a empresa que vai execut-lo. Aem-
presa responsvel pelo seu desenvolvimento deve analisar muito bem essas informaes e utilizar pesquisas
para complementar ou mesmo certifcar-se da validade dessas informaes.
Um projeto de site ou aplicao web envolve muitas disciplinas em sua execuo, pois so diversas caracte-
rsticas a serem analisadas e diversas as possibilidades apresentadas pela plataforma. Por exemplo, devemos
conhecer muito bem as caractersticas do pblico alvo, pois ele defne qual a melhor abordagem para defnir
a navegao, tom lingustico e visual a ser adotado, entre outras. A afnidade do pblico com a Internet e o
computador pode inclusive defnir o tipo e a intensidade das inovaes que podem ser utilizadas.
Por isso, a primeira etapa do desenvolvimento do projeto fca a cargo da rea de User Experience Design(UX)
ou Interaction Design (IxD), normalmente composta de pessoas com formao na rea de comunicao.
Essa equipe, ou pessoa, analisa e enderea uma srie de informaes da caracterstica humana do projeto,
defnindo a quantidade, contedo e localizao de cada informao.
Algumas das motivaes e prticas de Design de Interao e Experincia do Usurio so contedo do curso
Design de Interao, Experincia do Usurio e Usabilidade. O resultado do trabalho dessa equipe uma
srie de defnies sobre a navegao (mapa do site) e umesboo de cada uma das vises, que so as pginas, e
vises parciais como, por exemplo, os dilogos de alerta e confrmao da aplicao. Essas vises no adotam
nenhum padro de design grfco: so utilizadas fontes, cores e imagens neutras, embora as informaes
escritas devam ser defnidas nessa fase do projeto.
Esses esboos das vises so o que chamamos de wireframes e guiam o restante do processo de design.
Com os wireframes em mos, hora de adicionar as imagens, cores, tipos, fundos, bordas e outras caracte-
rsticas visuais. Esse trabalho realizado pelos designers grfcos, que utilizam ferramentas grfcas como
Captulo - HTML semntico e posicionamento no CSS - O processo de desenvolvimento de uma tela - Pgina
Adobe Photoshop, Adobe Fireworks, GIMP, entre outras. Oque resulta desse trabalho que o designer realiza
em cada wireframe o que chamamos de layout. Os layouts so imagens estticas j com o visual completo
a ser implementado. Apesar de os navegadores serem capazes de exibir imagens estticas, exibir uma nica
imagem para o usurio fnal no navegador no a forma ideal de se publicar uma pgina.
Para que as informaes sejam exibidas de forma correta e para possibilitar outras formas de uso e interao
com o contedo, necessrio que a equipe de programao front-end transforme essas imagens em telas
visveis e, principalmente, utilizveis pelos navegadores. Existem diversas tecnologias e ferramentas para
realizar esse tipo de trabalho. Algumas das tecnologias disponveis so: HTML, Adobe Flash, Adobe Flex,
JavaFX e Microsof Silverlight.
De todas as tecnologias disponveis, a mais recomendada certamente o HTML, pois a linguagem que o
navegador entende. Todas as outras tecnologias citadas dependem do HTML para serem exibidas correta-
mente no navegador e, ultimamente, o uso do HTML, em conjunto com o CSS e o JavaScript, tem evoludo
a ponto de podermos substituir algumas dessas outras tecnologias onde tnhamos mais poder e controle em
relao exibio de grfcos, efeitos e interatividade.
. Ovno)v1o M:nnon Fnsn:oN
Durante o curso, vamos produzir algumas pginas de um projeto: um e-commerce de roupas. No captulo
anterior, de introduo, criamos uma pgina simples de Sobre. Vamos comear agora a projetar o restante,
com as pginas mais complexas.
Uma equipe de UXj defniu as pginas, o contedo de cada uma delas e produziu alguns wireframes. Depois
de realizado esse trabalho, a equipe de design j adicionou o visual desejado pelo cliente como resultado fnal
do projeto.
Agora a nossa vez de transformar esse layout emHTML, para que os navegadores possamler e renderizar
o cdigo, exibir a pgina para o usurio fnal.
No captulo anterior, comeamos a codifcar a pgina de Sobre da nossa loja, com o intuito de praticar o
bsico de HTML e CSS.
Nesse momento, vamos focar na construo da parte principal da loja, a Home Page, e seguiremos o layout
ofcial criado pela equipe de design:
Captulo - HTML semntico e posicionamento no CSS - O projeto Mirror Fashion - Pgina
Figura .: Design da Homepage
. ANnt:snNoo o Lnvoc1
Antes de digitar qualquer cdigo, necessria uma anlise do layout. Com essa anlise, defniremos as prin-
cipais reas de nossas pginas. Um fator muito importante a ser considerado quando fazemos essa anlise
do layout o modo como os navegadores interpretam e renderizam o HTML.
O HTML exibido no navegador de acordo com a ordem de leitura do idioma da pgina. Na maioria dos
casos, a leitura feita da esquerda para a direita, de cima para baixo, da mesma maneira que lemos essa
apostila, por exemplo.
Olhe detalhadamente nosso layout e tente imaginar qual a melhor maneira de estruturar nosso HTML para
que possamos codifc-lo.
De acordo com o posicionamento de elementos que foi defnido desde a etapa de criao dos wireframes,
Captulo - HTML semntico e posicionamento no CSS - Analisando o Layout - Pgina
todas as pginas no nosso projeto obedecem a uma estrutura similar.
Es1nc1cnn on vKc:Nn
Note que h um cabealho (uma rea que potencialmente se repetir em mais de uma pgina) que ocupa
uma largura fxa; sendo assim, podemos criar uma seo exclusiva para o cabealho.
Outra rea que tem uma caracterstica semelhante o rodap, pois pode se repetir em mais de uma pgina.
Podemos notar que o fundo do elemento vai de uma ponta outra da pgina, porm seu contedo segue a
mesma largura fxa do restante da pgina.
A rea central, que contm informaes diferentes em cada pgina, no tem nenhum elemento ao fundo.
Porm, notemos que sua largura limitada antes de atingir o incio e o fmda pgina. Notemos que, apesar do
fundo do rodap ir de uma ponta outra, seu contedo tambm limitado pela mesma largura do contedo.
No caso da home page, o miolo da pgina pode ainda ser visto como dois blocos diferentes. H o bloco
principal inicial com o menu de navegao e o banner de destaque. E h outro bloco no fnal com dois
painis com listas de produtos.
Poderamos defnir essas reas da seguinte maneira:
<body>
<header>

</header>
<section id="main">

</section>
<section id="destaques">

</section>
Captulo - HTML semntico e posicionamento no CSS - Analisando o Layout - Pgina
<footer>

</footer>
</body>
Note que utilizamos o atributo id do HTML para identifcar a <section> principal. O atributo id deve ser
nico em cada pgina, ou seja, s pode haver um elemento com o atributo id="main". Mesmo se o outro
elemento for de outra tag, o id no pode se repetir. De acordo com a estrutura acima, ns separamos as
quatro reas principais.
. HTML svmXN1:co
As tags que usamos antes - header, section e footer - so tags novas do HTML. Antigamente, numa
situao parecida comessa, teramos criado apenas trs div, uma para cada parte da pgina, e talvez colocado
ids diferentes pra cada uma.
Qual a diferena entre colocar div e essas novas tags do HTML? Visualmente e funcionalmente, nenhuma
diferena. Anica diferena o nome da tag e o signifcado que elas carregam. Eisso bastante importante.
Dizemos que a funo do HTML fazer a marcao do contedo da pgina, representar sua estrutura da
informao. No papel do HTML, por exemplo, cuidar da apresentao fnal e dos detalhes de design - isso
papel do CSS. O HTML precisa ser claro e limpo, focado em marcar o contedo.
As novas tags do HTML trazem novos signifcados semnticos para usarmos em elementos HTML. Em
vez de simplesmente agrupar os elementos do cabealho emumdiv genrico e semsignifcado, usamos uma
tag header que carrega em si o signifcado de representar um cabealho.
Com isso, temos um HTML com estrutura baseada no signifcado de seu contedo, o que traz uma srie de
benefcios, como a facilidade de manuteno e compreenso do documento.
Provavelmente, o design da sua pgina deixa bastante claro qual parte da sua pgina o cabealho e qual
parte o menu de navegao. Visualmente, so distinguveis para o usurio comum. Mas e se desabilitarmos
o CSS e as regras visuais? Como distinguir esses contedos?
Um HTML semntico carrega signifcado independente da sua apresentao visual. Isso particularmente
importante quando o contedo ser consumido por clientes no visuais. H vrios desses cenrios. Um
usurio cego poderia usar um leitor de tela para ouvir sua pgina. Neste caso, a estrutura semntica do
HTML essencial para ele entender as partes do contedo.
Mais importante ainda, robs de busca como o Google tambm so leitores no visuais da sua pgina. Sem
um HTML semntico, o Google no consegue, por exemplo, saber que aquilo um menu e que deve seguir
seus links. Ou que determinada parte s um rodap informativo, mas no faz parte do contedo principal.
Semntica uma importante tcnica de SEO- SearchEngine Optimization- e crtica para marketing digital.
Captulo - HTML semntico e posicionamento no CSS - HTML semntico - Pgina
Vamos falar bastante de semntica ao longo do curso e esse um ingrediente fundamental das tcnicas
modernas de web design. Veremos mais cenrios onde uma boa semntica essencial.
. PvNsnNoo No nvnovn
J sabemos que o nosso cabealho ser representado pela tag <header> do HTML, semanticamente perfeita
para a situao. Mas e o contedo dele?
Observe apenas o cabealho no layout anterior. Quais blocos de contedo voc identifca nele?
O logo principal com o nome da empresa
Uma mensagem sobre a sacola de compras
Uma lista de links de navegao da loja
Repare como no destacamos a presena do cone da sacola. Ele no faz parte do contedo, meramente
decorativo. O contedo a mensagem sobre os itens na sacola. Que tipo de contedo esse? Qual tag usar?
apenas uma frase informativa, um pargrafo de texto. Podemos usar <p>:
<p>
Nenhum item na sacola de compras
</p>
Mas e a imagem com o cone? Como decorativa, pertence ao CSS, como veremos depois. O HTML no
tem nada a ver com isso.
Continuando no header, nossa lista de links pode ser uma lista - <ul> com<li>s. Dentro de cada item, vamos
usar um link - <a> - para a pgina correspondente. Mas h como melhorar ainda mais: esses links no so
links ordinrios, so essenciais para a navegao do usurio na pgina. Podemos sinalizar isso com a nova
tag <nav> do HTML, que representa blocos de navegao primrios:
<nav>
<ul>
<li><a href="#">Sua Conta</a></li>
<li><a href="#">Lista de Desejos</a></li>
<li><a href="#">Carto Fidelidade</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
</nav>
O ltimo ponto para fecharmos nosso cabealho o logo. Como represent-lo?
Captulo - HTML semntico e posicionamento no CSS - Pensando no header - Pgina
Visualmente, observamos no layout que apenas uma imagem. Podemos usar ento uma tag <img> como
fzemos antes. Mas e semanticamente, o que aquele contedo? E, principalmente, o que signifca aquele
logo para clientes no visuais? Como gostaramos que esse contedo fosse indexado no Google?
muito comum, nesse tipo de situao, usar um <h1> com um texto que represente o ttulo da nossa pgina.
Se pensarmos bem, o que queremos passar com o logo a ideia de que a pgina da Mirror Fashion.
Quando o texto for lido para um cego, queremos essa mensagem lida. Quando o Google indexar, queremos
que ele associe nossa pgina com Mirror Fashion e no com uma imagem qualquer.
fcil obter esse resultado colocando a <img> dentro do <h1>. E para representar o contedo textual da
imagem(o que vai ser usado pelo leitor de tela e pelo Google), usamos o atributo alt da imagem. Esse atributo
indica contedo alternativo, que ser usado quando o cliente no for visual e no conseguir enxergar a
imagem visualmente.
<h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
Repare como a colocao do H e do ALT na imagem no alteram em nada a pgina visualmente. Esto l
por pura importncia semntica. E isso muito bom. OH dar o devido destaque semntico para a o logo,
colocando-o como elemento principal. E o ALT vai designar um contedo textual alternativo imagem.
. Es1:t:znXo comctnssvs
Para podermos estilizar os elementos que criamos, vamos precisar de uma forma de selecionarmos no CSS
cada coisa. J vimos seletor de tag e por ID. Ou seja, pra estilizar nosso menu <nav>, podamos fazer:
nav {
...
}
Mas imagine que podemos ter muitos NAV na pgina e queremos ser mais especfcos. O ID uma soluo:
<nav id="menu-setores">
</nav>
E, no CSS:
#menu-setores {
...
}
Vamos ver uma terceira forma, no uso de classes. O cdigo semelhante mas usa o atributo class no HTML
e o ponto no CSS:
Captulo - HTML semntico e posicionamento no CSS - Estilizao com classes - Pgina
<nav class="menu-setores">
</nav>
E, no CSS:
.menu-setores {
...
}
Mas quando usar ID ou CLASS?
Ambos fariam seu trabalho nesse caso. Mas bom lembrar que ids so mais fortes, devem ser nicos na
pgina, sempre. Embora esse nosso menu seja nico agora, imagine se, no futuro, quisermos ter o mesmo
menu em outro ponto da pgina, mais pra baixo? Usar classes facilita reuso de cdigo e fexibilidade.
Alm disso, um elemento pode ter mais de uma classe ao mesmo tempo, aplicando estilos de vrias regras do
CSS ao mesmo tempo. No caso do ID, no. Cada elemento s tem um id, nico.
Preferimos o uso de classes pra deixar em aberto reaproveitar aquele elemento em mais de um ponto depois.
Vamos fazer isso na sacola tambm:
<p class="sacola">
</p>
Rvc1:t:znNoo cmn ctnssv vnnn o:vvnsos vtvmvN1os
Pode ser interessante criar uma classe que determina a centralizao horizontal de qualquer elemento, sem
interferir em suas margens superior e inferior como no exemplo a seguir:
.container {
margin-right: auto;
margin-left: auto;
}
Agora, s adicionar a class container ao elemento, mesmo que ele j tenha outros valores para esse atri-
buto:
<div class="info container">
<p>Contedo que deve ficar centralizado</p>
</div>
Captulo - HTML semntico e posicionamento no CSS - Estilizao com classes - Pgina
. Exvncc:os: nvnovn svmXN1:co
) J temos o arquivo index.html criado. Vamos apagar seu nico pargrafo, pois adicionaremos contedo
que far sentido.
Crie o arquivo estilos.css na pasta css do nosso projeto, que ser onde escreveremos o CSS visual da nossa
pgina. Adicione tambm a tag <link> apontando para css/estilos.css:
<link rel="stylesheet" href="css/estilos.css">
) Prximo passo: criar o cabealho. Use as tags semnticas que vimos no curso, como <header>, <nav>,
<ul>, <li>, etc. Crie links para as pginas do menu. E use <h1> para representar o ttulo da pgina com
o logo acessvel.
<header>
<h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
<p class="sacola">
</p>
<ul>
<li><a href="#">Carto Fidelidade</a></li>
</ul>
</nav>
</header>
) J podemos at testar no navegador. Repare como a pgina, embora semestilo visual, utilizvel. assim
que os clientes no visuais lero nosso contedo. Qual a importncia de uma marcao semntica?
) Vamos criar a estilizao visual bsica do nosso contedo, sem nos preocuparmos com posicionamento
ainda. Ajuste as cores e alinhamento dos textos. Coloque o cone da sacola com CSS atravs de uma
imagem de fundo do pargrafo:
.sacola {
background: url(../img/sacola.png) no-repeat top right;
font-size: 14px;
padding-right: 35px;
text-align: right;
width: 140px;
}
Captulo - HTML semntico e posicionamento no CSS - Exerccios: header semntico - Pgina
.menu-setores ul {
font-size: 15px;
}
.menu-setores a {
color: #003366;
}
Aproveite e confgure a cor e a fonte base de todos os textos do site, usando um seletor direto na tag
<body>:
body {
color: #333333;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
Teste no navegador e veja como nossa pgina comea a pegar o design.
. CSS Rvsv1
Quando no especifcamos nenhum estilo para nossos elementos do HTML, o navegador utiliza uma srie
de estilos padro, que so diferentes em cada um dos navegadores. Em um momento mais avanado dos
nossos projetos, poderemos enfrentar problemas com coisas que no tnhamos previsto; por exemplo, o
espaamento entre caracteres utilizado em determinado navegador pode fazer com que um texto que, pela
nossa defnio deveria aparecer em linhas, aparea com , quebrando todo o nosso layout.
Para evitar esse tipo de interferncia, alguns desenvolvedores e empresas criaram alguns estilos que chama-
mos de CSS Reset. A inteno setar um valor bsico para todas as caractersticas do CSS, sobrescrevendo
totalmente os estilos padro do navegador.
Captulo - HTML semntico e posicionamento no CSS - CSS Reset - Pgina
Desse jeito podemos comear a estilizar as nossas pginas a partir de um ponto que o mesmo para todos
os casos, o que nos permite ter um resultado muito mais slido em vrios navegadores.
Existem algumas opes para resetar os valores do CSS. Algumas que merecem destaque hoje so as seguin-
tes:
HTML Boilerplate
OHTML Boilerplate umprojeto que pretende fornecer umexcelente ponto de partida para quempretende
desenvolver um novo projeto com HTML. Uma srie de tcnicas para aumentar a compatibilidade da nova
tecnologia com navegadores um pouco mais antigos esto presentes e o cdigo totalmente gratuito. Em
seu arquivo style.css, esto reunidas diversas tcnicas de CSS Reset. Apesar de consistentes, algumas dessas
tcnicas so um pouco complexas, mas um ponto de partida que podemos considerar.
YUI CSS Reset
Criado pelos desenvolvedores front-end do Yahoo!, uma das referncias na rea, esse CSS Reset composto
de arquivos distintos. O primeiro deles, chamado de Reset, simplesmente muda todos os valores possveis
para umvalor padro, onde at mesmo as tags <h1> e <small> passama ser exibidas como mesmo tamanho.
Osegundo arquivo chamado de Base, onde algumas margens e dimenses dos elementos so padronizadas.
Oterceiro chamado de Font, onde o tamanho dos tipos defnido para que tenhamos umvisual consistente
inclusive em diversos dispositivos mveis.
Eric Meyer CSS Reset
H tambmo famoso CSS Reset de Eric Meyer, que pode ser obtido emhttp://meyerweb.com/eric/tools/css/
reset/. apenas um arquivo com tamanho bem reduzido.
. Btoc vs INt:Nv
Os elementos do HTML, quando renderizados no navegador, podem comportar-se basicamente de duas
maneiras diferentes no que diz respeito maneira como eles interferem no documento como um todo: em
bloco (block) ou em linha (inline).
Elementos em bloco so aqueles que ocupam toda a largura do documento, tanto antes quanto depois deles.
Um bom exemplo de elemento em bloco a tag <h1>, que j utilizamos em nosso projeto. Note que no h
nenhumoutro elemento esquerda ou direita do nosso nome da loja, apesar da expresso Mirror Fashion
no ocupar toda a largura do documento.
Entre os elementos em bloco, podemos destacar as tags de heading <h1> a <h6>, os pargrafos <p> e divises
<div>.
Elementos em linha so aqueles que ocupam somente o espao necessrio para que seu prprio contedo
seja exibido, permitindo que outros elementos em linha possam ser renderizados logo na sequncia, seja
antes ou depois, exibindo diversos elementos nessa mesma linha.
Captulo - HTML semntico e posicionamento no CSS - Block vs Inline - Pgina
Entre os elementos em linha, podemos destacar as tags de ncora <a>, as tags de nfase <small>, <strong> e
<em> e a tag de marcao de atributos <span>.
Saber a distino entre esses modos de exibio importante, pois h diferenas na estilizao dos elementos
dependendo do seu tipo.
Pode ser interessante alterarmos esse padro de acordo com nossa necessidade, por isso existe a propriedade
display no CSS, que permite defnir qual estratgia de exibio o elemento utilizar.
Por exemplo, o elemento <li> de uma <ul> tem por padro o valor block para a propriedade display. Se
quisermos os elementos na horizontal, basta alterarmos a propriedade display da <li> para inline:
ul li{
display: inline;
}
. Exvncc:os: nvsv1 v o:svtnv
) Utilizaremos o CSS reset do Eric Meyer. O arquivo reset.css j foi copiado para a pasta css do nosso
projeto quando importamos o projeto no captulo inicial.
Precisamos s referenci-lo no head antes do nosso estilos.css:
<link rel="stylesheet" href="css/reset.css">
Abra novamente a pgina no navegador. Percebe a diferena, principalmente na padronizao dos espa-
amentos.
) Prximo passo: transformar nosso menu em horizontal e ajustar espaamentos bsicos.
Vamos usar a propriedade display para mudar os <li> para inline. Aproveite e j coloque um espaa-
mento entre os links com margin.
Repare tambm como a sacola est desalinhada. O texto est muito pra cima e no alinhado com a base
do cone. Um padding-top deve resolver.
.menu-setores ul li {
display: inline;
margin-left: 20px;
}
.sacola {
padding-top: 8px;
}
Teste a pgina. Est melhorando?
Captulo - HTML semntico e posicionamento no CSS - Exerccios: reset e display - Pgina
) Nosso header ainda est todo esquerda da pgina, sendo que, no layout, ele tem um tamanho fxo e
fca centralizado na pgina. Alis, no s o cabealho que fca assim: o contedo da pgina em si e o
contedo do rodap tambm.
Temos trs tipos de elementos que precisamser centralizados no meio da pgina. Vamos copiar e colar as
instrues CSS nos lugares? No! Criamos uma classe no HTML a ser aplicada em todos esses pontos
e um nico seletor no CSS.
.container {
margin: 0 auto;
width: 940px;
}
Vamos usar essa classe container no HTML tambm. Altere a tag header e passe o class="container"
para ela.
Teste a pgina e veja o contedo centralizado. Agora, falta somente o posicionamento dos elementos do
header.
. Pos:1:oN: s1n1:c, nvtn1:vv, nnsotc1v
Existe um conjunto de propriedades que podemos utilizar para posicionar um elemento na pgina, que so
top, left, bottom e right. Pormessas propriedades, por padro, no so obedecidas por nenhumelemento,
pois elas dependem de uma outra propriedade, a position.
A propriedade position determina qual o modo de posicionamento de um elemento, e ela pode receber
como valor static, relative, absolute ou fxed. Veremos o comportamento de cada um deles, junto com as
propriedades de coordenadas.
O primeiro valor, padro para todos os elementos, o static. Um elemento com posio static permanece
sempre em seu local original no documento, aquele que o navegador entende como sendo sua posio de
renderizao. Se passarmos algum valor para as propriedades de coordenadas, eles no sero respeitados.
Umdos valores para a propriedade position que aceitamcoordenadas o relative. Comele, as coordenadas
que passamos so obedecidas em relao posio original do elemento. Por exemplo:
.logotipo {
position: relative;
top: 20px;
Captulo - HTML semntico e posicionamento no CSS - Position: static, relative, absolute - Pgina
left: 50px;
}
Os elementos em nosso documento que receberem o valor logotipo em seu atributo class tero px
adicionados ao seu topo e px adicionados sua esquerda em relao sua posio original. Note que,
ao defnirmos coordenadas, estamos adicionando pixels de distncia naquela direo, ento o elemento ser
renderizado mais abaixo e direita em comparao sua posio original.
O prximo modo de posicionamento que temos o absolute, e ele um pouco complexo. Existem algumas
regras que alteram seu comportamento em determinadas circunstncias. Por defnio, o elemento que tem
o modo de posicionamento absolute toma como referncia qualquer elemento que seja seu pai na estrutura
do HTML cujo modo de posicionamento seja diferente de static (que o padro), e obedece s coordenadas
de acordo com o tamanho total desse elemento pai.
Quando no h nenhumelemento emtoda a hierarquia daquele que recebe o posicionamento absolute que
seja diferente de static, o elemento vai aplicar as coordenadas tendo como referncia a poro visvel da
pgina no navegador. Por exemplo:
Estrutura HTML
<div class="quadrado"></div>
<div class="quadrado absoluto"></div>
Estilo CSS
.quadrado {
background: green;
height: 200px;
width: 200px;
}
.absoluto {
position: absolute;
top: 20px;
right: 30px;
}
Seguindo o exemplo acima, o segundo elemento <div>, que recebe o valor absoluto em seu atributo class,
no temnenhumelemento como seu pai na hierarquia do documento, portanto ele vai alinhar-se ao topo e
direita do limite visvel da pgina no navegador, adicionando respectivamente px e px nessas direes.
Vamos analisar agora o exemplo a seguir:
Estrutura HTML
<div class="quadrado relativo">
<div class="quadrado absoluto"></div>
</div>
Estilos CSS
.quadrado {
background: green;
height: 200px;
width: 200px;
}
.absoluto {
position: absolute;
top: 20px;
right: 30px;
}
.relativo {
position: relative;
}
Nesse caso, o elemento que recebe o posicionamento absolute flho do elemento que recebe o posici-
onamento relative na estrutura do documento, portanto, o elemento absolute vai usar como ponto de
referncia para suas coordenadas o elemento relative e se posicionar px ao topo e px direita da posi-
o original desse elemento.
O outro modo de posicionamento, fxed, sempre vai tomar como referncia a poro visvel do documento
no navegador, e mantm essa posio inclusive quando h rolagem na tela. uma propriedade til para
avisos importantes que devem ser visveis com certeza.
Umnvscmo ov vos:1:oN
static
Sua posio dada automaticamente pelo fuxo da pgina: por padro ele renderizado logo
aps seus irmos
No aceita um posicionamento manual (lef, right, top, bottom)
O tamanho do seu elemento pai leva em conta o tamanho do elemento static
relative
Por padro o elemento ser renderizado da mesma maneira que o static
Aceita posicionamento manual
O tamanho do seu elemento pai leva em conta o tamanho do elemento relative, porm sem levar
em conta seu posicionamento. O pai no sofreria alteraes mesmo se o elemento fosse static.
fxed
Uma confgurao de posicionamento vertical (lef ou right) e uma horizontal (top ou bottom)
obrigatria
O elemento ser renderizado na pgina na posio indicada: mesmo que ocorra uma rolagem o
elemento permanecer no mesmo lugar
Seu tamanho no conta para calcular o tamanho do elemento pai, como se no fosse elemento
flho
absolute
Uma confgurao de posicionamento vertical (lef ou right) e uma horizontal (top ou bottom)
obrigatria
O elemento ser renderizado na posio indicada, porm relativa ao primeiro elemento pai cujo
position seja diferente de static ou, se no existir este pai, relativa pgina
Seu tamanho no conta para calcular o tamanho do elemento pai
. Exvncc:os: vos:c:oNnmvN1o
) Posicione o menu direita e embaixo no header. Use position: absolute para isso. E no esquea: se
queremos posicion-lo absolutamente com relao ao cabealho, o cabealho precisa estar posicionado.
header {
position: relative;
}
.menu-setores {
position: absolute;
bottom: 0;
right: 0;
}
) A sacola tambm deve estar posicionada a direita e no topo. Use position, top e right para conseguir
esse comportamento. Adicione as regras de posicionamento ao seletor .sacola que j tnhamos:
.sacola {
position: absolute;
top: 0;
right: 0;
}
) Teste a pgina no navegador. Como est nosso cabealho? De acordo com o design original?
Captulo - HTML semntico e posicionamento no CSS - Exerccios: posicionamento - Pgina
. Exvncc:os ovc:oNn:s
) Aplique nosso novo cabealho tambm na pgina sobre.html.
Captulo - HTML semntico e posicionamento no CSS - Exerccios opcionais - Pgina
C
Mais HTML e CSS
O medo o pai da moralidade
Friedrich Wilhelm Nietzsche
. ANnt:snNoo o m:oto on vKc:Nn
Elaboramos o cabealho, mas ainda resta a rea central e o rodap. Focaremos agora nessa rea central.
A rea central possui duas reas distintas: o bloco principal inicial, com o menu de navegao e o banner de
destaque, e o bloco com os painis com destaques de produtos.
Na rea de navegao, teremos um formulrio de busca, permitindo que o usurio busque por produtos.
. FonmctKn:os
Em HTML, temos um elemento chamado <form> criado para esta fnalidade: capturar os dados do usurio
e submet-lo a algum servio da internet.
Os dados so passados para o <form> por meio de tag <input>, que pode uma ter dupla fnalidade: receber
os dados digitados ou submeter o formulrio.
por meio da propriedade type que defnimos essa fnalidade. Em nosso caso, utilizaremos o tipo search
para capturar os dados digitados e o tipo image para submeter o formulrio. Existe tambm o tipo submit,
que possui a mesma fnalidade do image, mas renderizado como um boto.
<form>
<input type="search">
<input type="image" src="img/busca.png" class="lupa">
</form>
. Pos:c:oNnmvN1o comvton1 v ctvnn
Emnosso layout, precisamos colocar o menu abaixo da busca e alinhado esquerda coma imagemprincipal
ao lado de ambos. Como conseguir este resultado? Uma soluo seria utilizar position no menu, mas algo
que quebraria facilmente nosso layout caso a busca aumentasse de tamanho.
Em um dos nossos primeiros exerccios com a pgina sobre.html, colocamos a imagem da famlia Pelho
direita coma propriedade float, fazendo comque o elemento pargrafo a contornasse. Vamos tentar aplicar
float busca e ao menu para que ambos fquem esquerda, fazendo comque a imagemcentral os contorne:
.busca,
.menu-departamentos {
float: left;
}
O resultado no foi o esperado. Para resolvermos este problema, precisaremos recorrer propriedade clear.
A vnovn:vonov ctvnn
Existe uma propriedade que determina qual vai ser o comportamento de outros elementos que vmao redor
daquele que a recebe e esto futuando, e essa propriedade a clear. A propriedade clear quer dizer limpe
o fuxo do documento ao meu lado e pode receber os valores left, right ou both.
Ovalor left impede que elementos futuantes fquem esquerda do elemento que recebe essa propriedade, o
valor right impede que elementos futuem direita desse, e o valor both impede que elementos futuem em
Captulo - Mais HTML e CSS - Posicionamento com foat e clear - Pgina
ambos os lados do elemento. importante sabermos que a propriedade clear de um elemento s interfere
no layout da pgina caso outros elementos sua volta estiverem futuando.
Ao aplicarmos clear:left em nosso menu, ele no fcar ao lado da nossa busca com propriedade float e
ser renderizado na linha seguinte:
.busca,
float: left;
}
clear: left;
}
. DvconnXo ov 1vx1o comCSS
O CSS permite ainda transformaes e decoraes de texto.
TnnNsvonmnXo ov 1vx1o
A propriedade text-transform permite realizar transformaes em textos e seus possveis valores so:
uppercase - Todas as letras em maisculo;
lowercase - Todas as letras em minsculo;
Captulo - Mais HTML e CSS - Decorao de texto com CSS - Pgina
capitalize - S as primeiras letras das palavras em maisculo.
Se quisermos colocar o texto em caixa alta:
text-transform: uppercase;
}
DvconnXo ov 1vx1o
Existe uma srie de decoraes que o navegador adiciona aos textos, dependendo das tags que utilizamos.
A decorao mais comum o sublinhado nos textos de links (tags <a> com valor para o atributo href ).
Existem outros tipos de decorao, como por exemplo, o texto contido na tag <del> (que serve para indicar
um texto que foi removido de uma determinada verso do documento) exibido com uma linha bem no
meio do texto.
muito comum que em alguns casos seja desejvel ocultar a linha inferior nos links, embora seja recomen-
dado que links dentro de textos sejam decorados para destacarem-se do restante, facilitando a usabilidade
e navegabilidade. No caso dos menus, onde temos uma rea especfca e isolada, normalmente estilizada e
decorada o sufciente, normalmente podemos ocultar esse sublinhado, como no exemplo:
.item-menu {
text-decoration: none;
}
Almdo none (nenhuma decorao) ainda poderamos ter confgurado underline (comuma linha embaixo,
o padro dos links), overline (com uma linha em cima do texto), line-through (uma linha no meio do
texto) e blink (o texto fca piscando na tela, o que no muito recomendado).
. Cnscn1n v nvnnNn No CSS
Algumas propriedades de elementos pais, quando alteradas, so aplicadas automaticamente para seus ele-
mentos flhos em cascata. Por exemplo:
<div id="pai">
<h1>Sou um ttulo</h1>
<h2>Sou um subttulo</h2>
</div>
#pai {
color: blue;
}
Captulo - Mais HTML e CSS - Cascata e herana no CSS - Pgina
No exemplo acima, todos os elementos flhos herdaramo valor da propriedade color do elemento pai a qual
eles pertencem.
As propriedades que no so aplicadas em cascata em elementos flhos geralmente so aquelas que afetam
diretamente a caixa (box) do elemento, como width, height, margin e padding.
h1 {
padding-left: 40px;
}
#pai {
color: blue;
padding-left: 0;
}
Perceba que o padding do elemento <h1> no foi sobrescrito pelo valor do elemento pai <div>, ou seja, o
valor 40px foi mantido.
. Pnnn snnvn mn:s: o vnton :Nnvn:1
Imagine que temos a seguinte diviso com uma imagem:
<div>
<img src="box-model.png" alt="box model">
</div>
div {
border: 2px solid;
border-color: red;
width: 30px;
height: 30px;
}
Queremos que a imagem preencha todo o espao da <div>, mas as propriedades width e height no so
aplicadas em cascata, sendo assim, somos obrigados a defnir o tamanho da imagem manualmente:
img {
width: 30px;
height: 30px;
}
Esta no uma soluo elegante, porque, se alterarmos o tamanho da <div>, teremos que lembrar de alterar
tambm o tamanho da imagem. Uma forma de resolver este problema utilizado o valor inherit para as
propriedades width e height da imagem:
Captulo - Mais HTML e CSS - Para saber mais: o valor inherit - Pgina
img {
width: inherit;
height: inherit;
}
O valor inherit indica para o elemento flho que ele deve utilizar o mesmo valor presente no elemento pai,
sendo assim, toda vez que o tamanho do elemento pai for alterado, automaticamente o elemento flho herdar
o novo valor, facilitando assim, a manuteno do cdigo.
Lembre-se de que o inherit tambm afeta propriedades que no so aplicadas em cascata.
. Exvncc:os: mvNc v ovs1nqcv
) Vamos criar um elemento destaque e, dentro dele, uma section para busca e outra para o menu:
<div class="container destaque">
<section class="busca">
<h2>Busca</h2>
<form>
<input type="search">
<input type="image" src="img/busca.png">
</form>
</section>
<section class="menu-departamentos">
<h2>Departamentos</h2>
<nav>
<ul>
<li><a href="#">Blusas e Camisas</a></li>
<li><a href="#">Calas</a></li>
<li><a href="#">Saias</a></li>
<li><a href="#">Vestidos</a></li>
<li><a href="#">Sapatos</a></li>
<li><a href="#">Bolsas e Carteiras</a></li>
<li><a href="#">Acessrios</a></li>
</ul>
</nav>
</section>
<img src="img/destaque-home.png" alt="Promoo: Big City Night">
</div>
Captulo - Mais HTML e CSS - Exerccios: menu e destaque - Pgina
Repare como j usamos diversas classes no HTML para depois selecionarmos os elementos via CSS.
) Aplique o estilo visual do design com CSS. Queremos um fundo cinza nas caixas de busca e no menu
de departamentos. Alm disso, o texto deve estar em negrito e apresentado em maisculas. Aplicaremos
tambm algumas regras de tamanhos e margens.
.busca,
background-color: #dcdcdc;
font-weight: bold;
margin-right: 10px;
width: 230px;
}
.busca h2,
.busca form,
.menu-departamentos h2 {
margin: 10px;
}
.menu-departamentos ul li {
background-color: white;
margin-bottom: 1px;
padding: 5px 10px;
}
.menu-departamentos ul li a {
color: #333333;
}
) Na busca, use a propriedade vertical-align para alinhar o campo de texto imagemda lupa pelo centro.
Aproveite e coloque o tamanho do campo de texto para melhor encaixar no design e use seletores de
atributo do CSS para isso. No se preocupe, este tipo de seletor ser explicado mais a frente.
.busca input {
}
.busca input[type=search] {
width: 170px;
}
Teste a pgina no navegador e veja como o design est quase pronto, apenas o posicionamento dos ele-
mentos precisa ser acertado.
) Para que o menu de departamentos e a busca estejam esquerda na pgina, iremos futuar esses elementos
com float:left.
Mas s isso far com que o menu fque a direita da busca (faa o teste). Precisamos indicar ao
menu-departamentos que ele deve futuar esquerda mas no ao lado de outro elemento. Conseguimos
isso com a propriedade clear.
.busca,
float: left;
}
clear: left;
}
Observe novamente a pgina no navegador e veja como o posicionamento est correto.
Repare que o CSS usado foi bastante curto e simples. Mas o conceito do float e do clear difcil e
complexo. Esteja certo de ter compreendido o porqu do uso dessas propriedades no exerccio antes de
prosseguir o curso!
) Mais acertos de design. Acerte as margens e posicionamentos no menu lateral e no topo:
.destaque {
margin-top: 10px;
}
margin-top: 10px;
padding-bottom: 10px;
}
Teste o resultado.
. D:svtnv :Nt:Nv-ntoc
Precisamos criar umpainel comuma lista de novidades, onde cada produto ser representado por uma <li>.
J sabemos que por padro uma <li> possui a propriedade display:block, mas queremos os produtos lado
a lado. Podemos trocar este comportamento mudando a propriedade display dos elementos para inline.
Tambm ser necessrio alterar as propriedades width, margin e padding das <li>, mas agora os elementos
<li> so inline e este modo de exibio ignora alteraes que afetamas propriedades da box. Como resolver
este problema?
Os navegadores mais modernos introduzem um modelo de exibio que a mistura dos dois, o
inline-block. Os elementos que recebem o valor inline-block para a propriedade display obedecem s
especifcaes de dimenso das propriedades height (altura) e width (largura) e ainda permitem que outros
elementos sejam exibidos ao seu lado como elementos inline.
.painel li {
display: inline-block;
vertical-align: top;
width: 140px;
margin: 2px;
}
Como o inline-block faz os elementos se alinharem como numa linha de texto, podemos controlar o alinha-
mento vertical dessa linha da mesma forma que fzemos antes com linhas de texto e imagens simples. Isto ,
usando a propriedade vertical-align que, nesse caso, recebeu valor top.
Isso indica que, se tivermos vrios produtos de tamanhos diferentes, eles vo se alinhar pelo topo.
Captulo - Mais HTML e CSS - Display inline-block - Pgina
. Exvncc:os: vn:Nv:s vtc1cnN1vs
) Vamos criar agora nosso painel de novidades. Crie um elemento <div> para conter os dois painis de
produtos. Ele deve receber a classe container, para se alinhar ao meio da tela, e a classe paineis que
usaremos depois no CSS.
<div class="container paineis">

</div>
) Dentro da div criada acima, criaremos uma nova <section> para cada painel. A primeira, receber as
classes painel e novidades. Ela conter o ttulo em um <h2> e uma lista ordenada (<ol>) de produtos.
Cada produto deve ser representado como um item na lista (<li>) com um link para o produto e sua
imagem (representado por figure, figcaption e img).
Veja o exemplo com um produto. Ele deve ser includo dentro da section que voc acabou de criar:
<section class="painel novidades">
<h2>Novidades</h2>
<ol>

<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura1.png">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>

</ol>
</section>
Crie o HTML desse painel e o preencha com vrios produtos ( um bom nmero). Lembre-se de que
cada produto est na sua prpria li com link e imagem prprios. Na pasta img/produtos do seu projeto,
voc encontra vrias imagens miniaturaX.png que podem ser usados para criar produtos diferentes.
) Crie um segundo painel, para representar os produtos mais vendidos. Esse painel deve fcar aps o fe-
chamento do painel anterior, mas ainda dentro da section paineis.
O novo painel deve receber as classes painel e mais-vendidos. Sua estrutura idntica ao do exerccio
anterior (dica: copie o cdigo para evitar refazer tudo de novo).
Captulo - Mais HTML e CSS - Exerccios: painis futuantes - Pgina
<section class="painel mais-vendidos">
<h2>Mais Vendidos</h2>
<ol>

</ol>
</section>
Nosso HTML j est fcando grande e complexo, como uma pgina real cheia de contedo. Cuidado para
no se confundir na posio das tags. Recapitulando essa parte dos painis, a estrutura deve estar assim:
div: container paineis
section: painel novidades
* h: ttulo Novidades
* ol: lista de produtos
vrios lis com produtos (e links e imagens dentro de cada um)
section: painel mais-vendidos
* h: ttulo Mais Vendidos
* ol: lista de produtos
vrios lis com produtos (e links e imagens dentro de cada um)
) Vamos posicionar nossos painis para fcarem de acordo com o design.
O painel de novidades deve futuar esquerda e o mais-vendidos, direita. Cada um deve ocupar 445px
(pouco menos da metade dos px), assim um fcar ao lado do outro:
.painel {
margin: 10px 0;
padding: 10px;
width: 445px;
}
.novidades {
float: left;
}
.mais-vendidos {
float: right;
}
Prximo passo: os itens dos produtos dentro da lista de cada painel. Queremos que sejam dispos-
tos lado a lado mas com certo tamanho e espaamento para alinhamento. Conseguimos isso co-
locando display:inline-block nos elementos da lista e, para alinhar os produtos pelo topo, com
vertical-align:top.
.painel li {
width: 140px;
margin: 2px;
}
O posicionamento em si deve estar certo. Mas falta umas regras para estilo, como tamanho dos ttulos e
cores de texto e fundo.
.painel h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.painel a {
color: #333;
font-size: 14px;
text-align: center;
}
.novidades {
background-color: #f5dcdc;
}
.mais-vendidos {
background-color: #dcdcf5;
}
Teste a pgina no navegador e veja o resultado fnal!
. Svtv1onvs ov n1n:nc1o oo CSS
Alm dos seletores de tag, classe e id que observamos anteriormente, existe mais uma srie de seletores
avanados do CSS.
Um dos seletores CSS mais versteis o seletor de atributo, com ele podemos verifcar a presena ou valor
de um atributo para selecion-lo. Por exemplo:
input[value] {
color: #cc0000;
}
O seletor acima age em todos os elementos da tag <input> que tm o atributo value. Tambm possvel
verifcar se o atributo tem um valor especfco:
input[type="text"] {
border-radius: 4px;
}
Alm de verifcar um valor integralmente, possvel utilizar alguns operadores para selecionar valores em
determinadas condies, como por exemplo o seletor de atributo com prefxo:
div[class|="menu"] {
border-radius: 4px;
}
O seletor acima vai agir em todas as tags <div> cujo atributo class comece com a palavra menu seguida de
um hfen e qualquer outro valor na sequncia, como por exemplo menu-principal, menu-departamentos
e menu-teste.
Tambm possvel buscar por uma palavra especfca no valor, no importando o valor completo do atributo.
Por exemplo:
Captulo - Mais HTML e CSS - Seletores de atributo do CSS - Pgina
input[value~="problema"] {
color: #cc0000;
}
O seletor acima agir sobre todos os elementos da tag <input> que contiverem a palavra problema em seu
contedo.
Como CSS possvel utilizar novos operadores comsinais que se assemelhamaos das expresses regulares:
/* busca por inputs com valor de "name" iniciando em "usuario" */
input[name^="usuario"] {
color: 99ffcc;
}
/* busca por inputs com valor de "name" terminando em "teste" */
input[name$="teste"] {
background-color: #ccff00;
}
/* busca por inputs com valor de "nome" contendo "tela" em qualquer posio */
input[name*="tela"] {
color: #666666;
}
Os seletores de atributo tm o mesmo valor de especifcidade dos seletores de classe.
. Roonvv
Para fnalizarmos a pgina, precisamos desenvolver o rodap. Visualmente, ele bastante simples. Mas h
algumas questes importantes a serem salientadas.
SvmXN1:cn
No HTML, a tag apropriada para rodaps a <footer>, que vamos usar no exerccio. Alm disso, nosso
rodap ainda tem mais contedos: o logo em negativo do lado esquerdo e cones de acesso a redes sociais
do lado direito. Que elementos usar?
O logo no lado esquerdo uma simples imagem:
<img src="img/logo-rodape.png" alt="Logo Mirror Fashion">
J a lista de cones das redes sociais, na verdade, uma lista de links. Os cones so meramente ilustrativos.
Em um leitor de tela, vamos querer que um link seja lido para o usurio, independentemente do seu cone
grfco.
Captulo - Mais HTML e CSS - Rodap - Pgina
Podemos usar ento uma simples lista com <a>:
<ul class="social">
<li><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
<li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
<li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
</ul>
Esse um ponto importante para entendermos a diferena entre marcao semntica e apresentao visual.
Repare que criamos uma estrutura no HTML com contedo completamente diferente do resultado fnal
visual. Vamos cuidar do visual depois no CSS.
. Scns1:1c:Xo von Imncvm
Um truque muito usado em CSS o chamado Image Replacement -- ou substituio por imagem. Serve
para, usando tcnicas de CSS, exibir uma imagem em algum elemento que originalmente foi feito com texto.
Perfeito para nosso caso dos cones das redes sociais.
A ideia bsica :
Acertar o tamanho do elemento para fcar igual ao da imagem;
Colocar a imagem como background do elemento;
Esconder o texto.
Para esconder o texto, comum usar a ttica de colocar um text-indent negativo bastante alto. Isso, na
prtica, faz o texto ser renderizado fora da tela.
.facebook {
/* tamanho do elemento = imagem */
height: 55px;
width: 85px;
/* imagem como fundo */
background-image: url(../img/facebook.png);
/* retirando o texto da frente */
text-indent: -9999px;
}
. Es1:t:znXo v vos:c:oNnmvN1o oo noonvv
Captulo - Mais HTML e CSS - Substituio por Imagem - Pgina
CoN1n:Nvn :N1vnNo
Repare que o rodap, diferentemente de todos os elementos do layout, ocupa da largura da pgina. Ele
no restrito ao tamanho de px do miolo do nosso site. Isso porque o rodap tem um background que
se repete at os cantos.
Mas repare que o contedo dele limitado aos px e centralizado junto com o resto da pgina -- onde
estvamos usando a class container.
O que precisamos fazer ento ter o <footer> com alm de uma tag interna pra o contedo do rodap
em si, e essa tag ser o container:
<footer>
<div class="container">
....
</div>
</footer>
Pos:c:oNnmvN1o
Ao colocar o rodap, voc perceber que ele subir na pgina ao invs de fcar em baixo. Isso porque os
elementos anteriores a ele, os painis de destaque, esto futuando na pgina e, portanto, saram do fuxo de
renderizao. Para corrigir isso, basta usar a propriedade clear: both no footer.
Dentro do rodap em si, queremos que a lista de cones seja colocada direita. Podemos acertar
isso com posicionamento absoluto, desde que o container do rodap esteja posicionado (basta dar um
position:relative a ele).
J os itens dentro da lista (os links), devem ser futuados lado a lado (e no um em cima do outro). fcil
fazer com float:left no li.
Es1:t:znXo
O rodap em si ter um background-image com o fundo preto estampado repetido infnitamente.
Os elementos internos so todos cones a serem substitudos por imagens via CSS com image replacement.
E, para saber qual cone atribuir a qual link da lista de mdias sociais, podemos usar seletores de atributo do
CSS:
.social a[href*="facebook.com"] {
}
Captulo - Mais HTML e CSS - Estilizao e posicionamento do rodap - Pgina
. Exvncc:os: noonvv
) Vamos fnalizar nossa pgina com o rodap do layout. Crie uma estrutura semntica no HTML usando
a tag <footer> e tags <img>, <ul>, <li> e <a> para o contedo.
Ateno especial para a necessidade de um elemento container dentro do rodap para alinhar seu con-
tedo com o restante da pgina.
<footer>
<ul class="social">
</ul>
</div>
</footer>
Teste no seu navegador e veja o resultado sem estilo, mas utilizvel.
) Vamos estilizar o contedo visual. Coloque o background preto no rodap e faa as substituies de
imagens. Use seletores de atributo do CSS para identifcar os cones de cada rede social.
footer {
background-image: url(../img/fundo-rodape.png);
}
.social li a {
/* tamanho da imagem */
height: 32px;
width: 32px;
/* image replacement */
display: block;
text-indent: -9999px;
}
.social a[href*="facebook.com"] {
Captulo - Mais HTML e CSS - Exerccios: rodap - Pgina
}
.social a[href*="twitter.com"] {
background-image: url(../img/twitter.png);
}
.social a[href*="plus.google.com"] {
background-image: url(../img/googleplus.png);
}
Teste no navegador. O que aconteceu?
Orodap subiu na pgina porque os elementos anteriores (os painis de destaque) esto futuando. fcil
arrumar, basta adicionar a regra de clear no footer:
footer {
clear: both;
}
Teste novamente. O rodap voltou para o lugar certo?
) ltimo passo: posicionar os elementos internos do rodap apropriadamente.
Vamos posicionar os cones sociais absolutamente direita com position:absolute. Para isso, o contai-
ner do nosso rodap precisa estar posicionado. Aproveite tambm e coloque um espaamento interno:
footer {
padding: 20px 0;
}
footer .container {
position: relative;
}
.social {
position: absolute;
top: 12px;
right: 0;
}
Por fm, precisamos fazer os cones das redes sociais futurarem lado a lado horizontalmente:
.social li {
float: left;
margin-left: 25px;
}
Teste no navegador. Como est o resultado fnal? De acordo com o que o designer queria?
Captulo - Mais HTML e CSS - Exerccios: rodap - Pgina
. Pnnn snnvn mn:s: scvon1v HTML No IN1vnNv1 Exvtonvn
nN1:co
A partir do IE, h um bom suporte a HTML, at para elementos avanados como os de multimdia. En-
tretanto, at o IE (incluindo as verses e ), as tags do HTML no so reconhecidas.
Se voc abrir nossa pgina no IE, ver o design todo quebrado pois as tags de header, footer, nav, section
etc so ignoradas. Mas possvel corrigir o suporte a esses novos elementos semnticos.
A soluo envolve um hack descoberto no IE e chamado de htmlshiv. H um projeto opensource com o
cdigo disponvel para download:
http://code.google.com/p/htmlshiv/
Para incluir a correo na nossa pgina, basta adicionar no header:

Repare que isso carrega um JavaScript que acionar o hack. Mas a tag script est dentro de um bloco com
uma espcie de if dentro de um comentrio!
Esse recurso do IE chamado de comentrios condicionais e nos permite adicionar cdigo que somente
ser lido pelo IE -- uma excelente soluo para resolver seus bugs e inconsistncias sem estragar a pgina
nos demais navegadores.
Nesse caso, estamos dizendo que o tal script com o hack s deve ser carregado pelas verses anteriores ao
IE; j que, a partir desta verso, h suporte nativo a HTML e no precisa de hacks.
IE v IE
Ao testar nesses navegadores muito antigos, voc ver que apenas o HTMLshiv no sufciente.
Na verdade, vrios recursos e tcnicas que usamos nonossoCSS noeramsuportados nas verses
antigas.
Felizmente, o uso de IE e IE no Brasil bastante baixo e cai cada vez mais - hoje j menos de
dos usurios. Na Caelum, j no suportamos mais essas verses em nosso curso e nem em
nossos sites.
Captulo - Mais HTML e CSS - Para saber mais: suporte HTML no Internet Explorer antigo - Pgina
) Porte nosso rodap para a pgina Sobre do captulo anterior.
) Nossa pgina Sobre foi construda sem muita preocupao semntica. No HTML, h novas tags com
objetivo especfco de lidar com contedos textuais divididos em partes, com subttulos etc.
Podem ser artigos de um jornal, um livro online ou mesmo um texto descrevendo nossa empresa - como
nossa pgina Sobre faz.
Podemos representar o texto todo com <article> e suas sees com <section>. Use essas novas tags na
sobre.html para termos uma marcao mais semntica.
) Adicione suporte ao IE na nossa pgina usando o HTMLshiv.
Captulo - Mais HTML e CSS - Exerccios opcionais - Pgina
C
JavaScript e interatividade na Web
Design no s como uma coisa aparenta, como ela funciona.
Steve Jobs
JavaScript a linguagem de programao mais popular no desenvolvimento Web. Suportada por todos os
navegadores, a linguagem responsvel por praticamente qualquer tipo de dinamismo que queiramos em
nossas pginas.
Se usarmos todo o poder que ela tempara oferecer, podemos chegar a resultados impressionantes. Excelentes
exemplos disso so aplicaes Web complexas como Gmail, Google Maps e Google Docs.
. IN1noocXo no JnvnScn:v1
Para rodar JavaScript emuma pgina Web, precisamos ter emmente que a execuo do cdigo instantnea.
Para inserirmos um cdigo JavaScript em uma pgina, necessrio utilizar a tag <script>:
<script>
alert("Ol, Mundo!");
</script>
O exemplo acima um hello world em JavaScript utilizando uma funo do navegador, a funo alert.
possvel adicionar essa tag em qualquer local do documento que a sua renderizao fcar suspensa at o
trmino dessa execuo.
Experimente criando essa tag em um HTML e reposicionando-a, verifque os elementos que j foram ren-
derizados na pgina antes do aparecimento da caixa de dilogo e o que acontece aps clicar em OK.
Tambm possvel executar cdigo que est em um arquivo externo, por exemplo:
No arquivo HTML
<script src="scripts/hello.js"></script>
Arquivo externo script/hello.js
alert("Ol, Mundo!");
Com a separao do script em arquivo externo possvel reaproveitar alguma funcionalidade em mais de
uma pgina.
. CoNsotv oo Nnvvcnoon
Alguns navegadores do suporte a entrada de comandos pelo console. Por exemplo, no Google Chrome o
console pode ser acessado por meio do atalho Control + Shif + C; no Firefox, pelo atalho Control + Shif
+ K.
Experimente executar um alert no console e veja o resultado:
alert("interagindo com o console!");
. S:N1nxv nKs:cn
Ovvnnovs mn1vmK1:cns
Teste algumas contas digitando diretamente no console:
> 12 + 13
25
> 14 * 3
42
> 10 - 4
6
> 25 / 5
5
> 23 % 2
1
Captulo - JavaScript e interatividade na Web - Console do navegador - Pgina
Vnn:Kvv:s
Para armazenarmos um valor para uso posterior, podemos criar uma varivel:
var curso = "WD-43";
alert(curso);
No exemplo acima, guardamos o valor WD-43 na varivel curso. A partir desse ponto, possvel utilizar a
varivel para obter o valor que guardamos nela. No JavaScript, tambm possvel alterar o valor da varivel
a qualquer momento, inclusive por valores de tipos diferentes (por exemplo, um nmero) sem problemas,
coisa que no possvel de se fazer em algumas outras linguagens de programao.
Teste no console:
> var contador = 0;
undefined
> contador++
0
> contador
1
> contador++
1
> contador
2
T:vos
O JavaScript d suporte aos tipos String (letras e palavras), Number (nmeros inteiros, decimais), Boolean
(verdadeiro ou falso) entre outros.
var texto = "Uma String deve ser envolvida em aspas simples ou duplas.";
var numero = 2012;
var verdade = true;
Outro tipo de informao que considerado um tipo no JavaScript o Array, onde podemos armazenar
uma srie de informaes de tipos diferentes:
var pessoas = ["Joo", "Jos", "Maria", "Sebastio", "Antnio"];
Quando utilizamos o JavaScript para interagir com os elementos da pgina muito comum obtermos cole-
es. Para fazer alguma coisa com cada elemento de uma coleo necessrio efetuar uma iterao. A mais
comum utilizando o for:
Captulo - JavaScript e interatividade na Web - Sintaxe bsica - Pgina
for (var i = 0; i < pessoas.length; i++) {
alert(pessoas[i]);
}
Essa sintaxe utilizando os colchetes em pessoas[i] uma maneira de selecionarmos um elemento de um
Array, no caso o valor de i um nmero para cada um dos elementos da coleo. Para explorar o compor-
tamento do Array voc pode realizar alguns testes com essa seleo:
alert(pessoas[0]);
alert(pessoas[1]);
alert(pessoas[4]);
. Exvncc:os ovc:oNn:s: v:xnXo ov s:N1nxv
Os prximos exerccios so opcionais e mostram mais aspectos de lgica de programao com algoritmos
usando JavaScript.
) Escreva um cdigo que mostre os nmeros mpares entre e .
) Escreva um cdigo que calcule a soma de at . (obs: a resposta )
) Crie um Array igual ao abaixo e mostre apenas os nomes das pessoas que tenham letras.
Dica: use o atributo length das Strings.
. IN1vnn1:v:onov Nn Wvn
Ouso do JavaScript como a principal linguagemde programao da Web s possvel por conta da integrao
que o navegador oferece para o programador, a maneira com que conseguimos encontrar um elemento da
pgina e alterar alguma caracterstica dele pelo cdigo JavaScript:
var titulo = document.querySelector.getElementById("titulo");
titulo.textContent = "Agora o texto do elemento mudou!";
No exemplo anterior, ns selecionamos um elemento do documento e alteramos sua propriedade textCon-
tent. Existem diversas maneiras de selecionarmos elementos de um documento e de alterarmos suas propri-
edades. Inclusive possvel selecionar elementos de maneira similar ao CSS, atravs de seletores CSS:
Captulo - JavaScript e interatividade na Web - Exerccios opcionais: fxao de sintaxe - Pgina
var painelNovidades = document.querySelector("section#main .painel#novidades");
painelNovidades.style.color = "red"
qcvnvSvtvc1on vs qcvnvSvtvc1onAtt
A funo querySelector sempre retorna um elemento, mesmo que o seletor potencialmente
traga mais de um elemento, neste caso, apenas o primeiro elemento da seleo ser retornado.
A funo querySelectorAll retorna uma lista de elementos compatveis com o seletor CSS pas-
sado como argumento. Sendo assim, para acessarmos cada elemento retornado, precisaremos
passar o seu ndice conforme o exemplo abaixo:
var paragrafos = document.querySelectorAll("div p");
paragrafos[o].textContent = "Primeiro pargrafo da seleo";
paragrafos[1].textContent = "Segundo pargrafo da seleo";
Apesar de ser interessante a possibilidade de alterar o documento todo por meio do JavaScript, existe um
problema com a caracterstica de execuo imediata do cdigo. O mais comum que as alteraes sejam
feitas quando o usurio executa alguma ao, como por exemplo, clicar em um elemento.
Para suprir essa necessidade, necessrio utilizar de dois recursos do JavaScript no navegador. O primeiro
a a criao de funes:
function mostraAlerta() {
alert("Funciona!");
}
Ao criarmos uma funo, a execuo do cdigo simplesmente guarda o que estiver dentro da funo, e esse
cdigo guardado s ser executado quando chamarmos a funo. Para exemplifcar a necessidade citada
acima, vamos utilizar o segundo recurso, os eventos:
// obtendo um elemento atravs de um seletor de ID
var titulo = document.querySelector("#titulo");
titulo.onclick = mostraAlerta;
Note que primeiramente necessrio selecionar umelemento do documento e depois defnir o onclick desse
elemento como sendo a funo.
De acordo com os dois cdigos acima, primeiramente guardamos um comportamento em uma funo. Ao
contrrio do cdigo fora de uma funo, o comportamento no executado imediatamente, e sim guardado
Captulo - JavaScript e interatividade na Web - Interatividade na Web - Pgina
para quando quisermos cham-lo. Depois informamos que um elemento deve executar aquele comporta-
mento em determinado momento, no caso em um evento click.
Tambm possvel chamar uma funo em um momento sem a necessidade de um evento, s utilizar o
nome da funo abrindo e fechando parnteses, indicando que estamos executando a funo que foi defnida
anteriormente:
function mostraAlerta() {
alert("Funciona!");
}
// Chamando a funo:
mostraAlerta();
Tambm possvel determinar, por meio de seus argumentos, que a funo vai ter algum valor varivel que
vamos defnir quando quisermos execut-la:
function mostraAlerta(texto) {
// Dentro da funo "texto" conter o valor passado na execuo.
alert(texto);
}
// Ao chamar a funo necessrio definir o valor do "texto"
mostraAlerta("Funciona com argumento!");
Existemdiversos eventos que podemser utilizados para que a interao do usurio coma pgina seja o ponto
de disparo de funes que alteram os elementos da prpria pgina:
onclick: clica com o mouse
ondblclick: clica duas vezes com o mouse
onmousemove: mexe o mouse
onmousedown: aperta o boto do mouse
onmouseup: solta o boto do mouse (til com os dois acima para gerenciar dragndrop)
onkeypress: ao pressionar e soltar uma tecla
onkeydown: ao pressionar uma tecla.
onkeyup: ao soltar uma tecla. Mesmo acima.
onblur: quando um elemento perde foco
onfocus: quando um elemento ganha foco
Captulo - JavaScript e interatividade na Web - Interatividade na Web - Pgina
onchange: quando um input, select ou textarea tem seu valor alterado
onload: quando a pgina carregada
onunload: quando a pgina fechada
onsubmit: disparado antes de submeter o formulrio. til para realizar validaes
Existem tambm uma srie de outros eventos mais avanados que permitem a criao de interaes para
drag-and-drop, e at mesmo a criao de eventos customizados.
No prximo exerccio, vamos usar funes JavaScript com eventos para lidar com a validao do campo de
busca da nossa home page. A ideia verifcar se o campo foi preenchido ou se est vazio, quando o usurio
clicar em buscar.
. Exvncc:o: vnt:onXo Nn ncscn comJS
) Para testarmos o nosso formulrio de busca, vamos usar o Google como mecanismo de busca apenas
como ilustrao. Para isso, basta fazer o formulrio submeter a busca para a pgina do Google.
No <form>, acrescente um atributo action= apontando para a pgina do Google:
<form action="http://www.google.com.br/search" id="form-busca">
Repare que colocamos tambm um id. Ele ser til para depois manipularmos esse elemento via JavaS-
cript.
Almdisso, o <input> como texto a ser buscado deve ter o nome de q para ser compatvel como Google.
Basta fazer:
<input type="search" name="q" id="q">
Teste a pgina e submeta uma busca simples para o Google com o nosso formulrio.
) Queremos fazer uma validao: quando o usurio clicar em submeter, verifcar se o valor foi preenchido.
Se estiver em branco, queremos mostrar uma mensagem de erro em um alert.
A validao ser escrita em JavaScript. Portanto, comece criando um arquivo home.js na pasta js/ do
projeto. l que vamos escrever nossos scripts.
Referencie esse arquivo no index.html usando a tag <script> no fnal da pgina, logo antes de fechar o
</body>:
<script src="js/home.js"></script>
) A validao em si ser feita por uma funo JavaScript a ser acionada no momento que o usurio tentar
submeter o formulrio.
Captulo - JavaScript e interatividade na Web - Exerccio: validao na busca com JS - Pgina
A funo deve ser defnida dentro do arquivo home.js criado antes. Seu papel verifcar se o elemento
com id=q (o campo de busca) est vazio. Se estiver, mostramos um alert e abortamos a submisso do
formulrio com return false:
function validaBusca() {
if (document.querySelector('#q').value == '') {
alert('No podia ter deixado em branco a busca!');
return false;
}
}
Uma funo um bloco de cdigo JavaScript que executa algum cdigo quando algum chamar essa
funo.
) Ns podemos chamar a funo explicitamente ou, melhor ainda, deixar que o navegador chame pra gente
quando acontecer algum evento.
No nosso caso, queremos indicar que a funo anterior deve ser executada quando o usurio disparar o
evento de enviar o formulrio (onsubmit).
// fazendo a associao da funo com o evento
document.querySelector('#form-busca').onsubmit = validaBusca;
o cdigo acima que faz a associao da funo validaBusca com o evento onsubmit do formulrio.
) Teste a pgina e observe seu comportamento. Tente submeter com o campo vazio e com o campo preen-
chido.
) (opcional) Mostrar uma janela de erro considerado por muitos uma ao muito agressiva contra o usu-
rio. Talvez um feedback mais sutil seja pintar o fundo do formulrio de vermelho, indicando um erro.
Na funo de validao, remova a linha do alerta e emseu lugar pinte o fundo do formulrio de vermelho
em caso de erro. Cdigo da funo dever fcar assim:
function validaBusca() {
document.querySelector('#form-busca').style.background = 'red';
return false;
}
}
Captulo - JavaScript e interatividade na Web - Exerccio: validao na busca com JS - Pgina
) (opcional avanado) No exerccio criamos uma funo JavaScript com nome validaBusca e a referenci-
amos no onsubmit do formulrio. Mas repare que o nico uso dessa funo nessa situao, nunca mais
a chamamos.
Nesses casos, podemos usar um recurso do JavaScript chamado de funes annimas que nos permite
defnir a funo diretamente na defnio do onsubmit. Troque nosso JavaScript para usar essa sintaxe.
document.querySelector('#form-busca').onsubmit = function() {
document.querySelector('#form-busca').style.background = 'red';
return false;
}
};
Vnt:on1:oN API HTML
Mais pra frente, veremos as novidades do HTML para validao de formulrios de maneira mais
simples, e at sem necessidade de JavaScript.
. FcNovs 1vmvonn:s
Em JavaScript, podemos criar um timer para executar um trecho de cdigo aps um certo tempo, ou ainda
executar algo de tempos em tempos.
A funo setTimeout permite que agendemos alguma funo para execuo no futuro e recebe o nome da
funo a ser executada e o nmero de milissegundos a esperar:
// executa a minhaFuncao daqui um segundo
setTimeout(minhaFuncao, 1000);
Se for um cdigo recorrente, podemos usar o setInterval que recebe os mesmos argumentos mas executa
a funo indefnidamente de tempos em tempos:
// executa a minhaFuncao de um em um segundo
setInterval(minhaFuncao, 1000);
uma funo til para, por exemplo, implementar um banner rotativo, como faremos no exerccio a seguir.
Captulo - JavaScript e interatividade na Web - Funes temporais - Pgina
ctvnnIN1vnvnt
As funes temporais devolvemumobjeto que representa o agendamento que foi feito. possvel
us-lo para cancelar a execuo no futuro. especialmente interessante para o caso do interval
que pode ser cancelado de sua execuo infnita:
// agenda uma execuo qualquer
var timer = setInterval(minhaFuncao, 1000);
// cancela execuo
clearInterval(timer);
. Exvncc:o: nnNNvn no1n1:vo
) Implemente um banner rotativo na home page da Mirror Fashion usando Javascript.
Temos duas imagens, a destaque-home.png e a destaque-home-.png que queremos trocar a cada
segundos; use o setInterval para isso.
H vrias formas de implementar essa troca de imagens. Uma sugesto manter umarray comos valores
possveis para a imagem e um inteiro que guarda qual o banner atual.
var banners = ["img/destaque-home.png", "img/destaque-home-2.png"];
var bannerAtual = 0;
function trocaBanner() {
bannerAtual = (bannerAtual + 1) % 2;
document.querySelector('.destaque img').src = banners[bannerAtual];
}
setInterval(trocaBanner, 4000);
) (opcional, avanado) Faa um boto de pause que pare a troca do banner.
Dica: use o clearInterval para interromper a execuo.
) (opcional, avanado) Faa um boto de play para reativar a troca dos banners.
Captulo - JavaScript e interatividade na Web - Exerccio: banner rotativo - Pgina
. Pnnn snnvn mn:s: sccvs1Xo vnnn o ovsnv:o ov vncsv/vtnv
Podemos criar no HTML um novo link para controlar a animao:
<a href="#" class="pause"></a>
O JavaScript deve chamar clearInterval para pausar ou novamente o setInterval para continuar a ani-
mao.
Precisamos editar o cdigo anterior que chamava o setInterval para pegar o seu retorno. Ser um objeto
que controla aquele interval e nos permitir deslig-lo depois:
var timer = setInterval(trocaBanner, 4000);
Com isso, nosso cdigo que controla o pause e play fcaria assim:
var controle = document.querySelector('.pause');
controle.onclick = function() {
if (this.className == 'pause') {
clearInterval(timer);
controle.className = 'play';
} else {
timer = setInterval(trocaBanner, 4000);
controle.className = 'pause';
}
return false;
};
Por fm, podemos estilizar o boto como pause ou play apenas trabalhando com bordas no CSS:
.destaque {
position: relative;
}
.pause,
.play {
display: block;
position: absolute;
right: 15px;
top: 15px;
}
.pause {
border-left: 10px solid #900;
Captulo - JavaScript e interatividade na Web - Para saber mais: sugesto para o desafo de pause/play - Pgina
border-right: 10px solid #900;
height: 30px;
width: 5px;
}
.play {
border-left: 25px solid #900;
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;
}
. Pnnn snnvn mn:s: vKn:os cnttnncs No mvsmo vtvmvN1o
Nos exerccios que trabalhamos com eventos, usamos o onclick e o onsubmit diretamente no elemento que
estvamos manipulando:
document.querySelector('#destaque').onclick = function() {
// tratamento do evento
};
uma forma fcil e portvel de se tratar eventos, mas no muito comum na prtica. O maior problema do
cdigo acima que s podemos atrelar uma nica funo ao evento. Se tentarmos, emoutra parte do cdigo,
colocar uma segunda funo para executar no mesmo evento, ela sobrescrever a anterior.
A maneira mais recomendada de se associar uma funo a eventos com o uso de addEventListener:
document.querySelector('#destaque').addEventListener('click', function() {
});
Dessa maneira, conseguimos adicionar vrios listeners ao mesmo evento, deixando o cdigo mais fexvel. S
h umporm: embora seja o modo ofcial de se trabalhar comeventos, o addEventListener no suportado
do IE pra baixo.
Para atender os IEs velhos, usamos a funo attachEvent, semelhante:
Captulo - JavaScript e interatividade na Web - Para saber mais: vrios callbacks no mesmo elemento - Pgina
document.querySelector('#destaque').attachEvent('onclick', function() {
});
Oproblema ter que fazer sempre as duas coisas para garantir a portabilidade da nossa pgina. Essa questo
resolvida pelos famosos frameworks JavaScript, como o jQuery, que veremos mais adiante no curso.
Captulo - JavaScript e interatividade na Web - Para saber mais: vrios callbacks no mesmo elemento - Pgina
C
CSS Avanado
Com o conhecimento nossas dvidas aumentam
Johann Goethe
Desde o surgimento do CSS, os desenvolvedores front-end utilizam diversas tcnicas para alterar a exibi-
o dos elementos no navegador. Mesmo assim algumas coisas eram impossveis de se conseguir utilizando
somente CSS. Conhecendo o comportamento dos navegadores ao exibir um elemento (ou um conjunto de
elementos) e como as propriedade do CSS agem ao modifcar um elemento possvel obter resultados im-
pressionantes.
O CSS agora permite coisas antes impossveis como elementos com cor ou fundo gradiente, sombras e
cantos arredondados. Antes s era possvel atingir esses resultados com o uso de imagens e s vezes at com
um pouco de JavaScript.
Areduo do uso de imagens traz grandes vantagens quanto performance e quantidade de trfego de dados
necessria para a exibio de uma pgina.
. Svtv1onvs nvnNnoos
Os seletores CSS mais comuns e tradicionais so os que j vimos: por ID, por classes e por descendncia.
No entanto, h muitos outros seletores novos que vo entrando na especifcao e que so bastante teis. J
vimos alguns, como os seletores de atributo que usamos anteriormente. Vejamos outros.
Svtv1on ov :nmXos
Veja o seguinte HTML, que simula um texto com vrios pargrafos e ttulos e subttulos no meio do docu-
mento:
<article>
<h1>Ttulo</h1>
<p>Incio</p>
<h2>Subttulo</h2>
<p>Texto</p>
<p>Mais texto</p>
</article>
Como faremos se quisermos estilizar de uma certa maneira todos os pargrafos aps o subttulo?
O seletor de irmos (siblings) (~) serve pra isso! Ele vem do CSS e funciona em todos os navegadores
modernos (e no IE pra frente).
h2 ~ p {
font-style: italic;
}
Isso indica que queremos selecionar todos os p que foram precedidos por algum h2 e so irmos do subttulo
(ou seja, esto sob a mesma tag pai). No HTML anterior, sero selecionados os dois ltimos pargrafos (Texto
e Mais texto).
Svtv1on ov :nmXo no)ncvN1vs
Ainda como HTML anterior, o que fazer se quisermos selecionar apenas o pargrafo imediatamente seguinte
ao subttulo? Ou seja, um p irmo do h2 mas que aparece logo na sequncia.
Fazemos isso com o seletor de irmo adjacentes - adjacent sibling:
h2 + p {
font-variant: small-caps;
}
Nesse caso, apenas o pargrafo Texto ser selecionado. umirmo de <h> e aparece logo depois do mesmo.
Esse seletor faz parte da especifcao CSS . e tem bom suporte nos navegadores modernos, incluindo o
IE.
Svtv1on ov v:tno o:nv1o
Se tivermos o seguinte HTML com ttulos e sees de um artigo:
<article>
<h1>Ttulo principal</h1>
Captulo - CSS Avanado - Seletores avanados - Pgina
<section>
<h1>Ttulo da seo</h1>
</section>
</article>
Queremos deixar o ttulo principal de outra cor. Como fazer? O seletor de nome de tag simples no vai
resolver:
/* vai pegar todos os h1 da pgina */
h1 {
color: blue;
}
Tentar o seletor de hierarquia tambm no vai ajudar:
/* vai pegar todos os h1 do article, incluindo de dentro da section */
article h1 {
color: blue;
}
Entra a o seletor de flho direto (>) do CSS . e suportado desde o IE tambm.
/* vai pegar s o h1 principal, filho direto de article e no os netos */
article > h1 {
color: blue;
}
NvcnXo
Imagine o seguinte o HTML com vrios pargrafos simples:
<p>Texto</p>
<p>Outro texto</p>
<p>Texto especial</p>
<p>Mais texto</p>
Queremos fazer todos os pargrafos de cor cinza, exceto o que tem o texto especial. Precisamos destac-lo
de alguma forma no HTML para depois selecion-lo no CSS. Uma classe ou ID resolve:
<p>Texto</p>
<p>Outro texto</p>
<p class="especial">Texto especial</p>
<p>Mais texto</p>
Captulo - CSS Avanado - Seletores avanados - Pgina
Mas como escrever o CSS? Queremos mudar a cor dos pargrafos que no tm a classe especial. Um jeito
seria mudar a cor de todos e sobrescrever o especial depois:
p {
color: gray;
}
p.especial {
color: black; /* restaura cor do especial */
}
No CSS, h uma outra forma, usando o seletor de negao. Ele nos permite escrever um seletor que pega
elementos que no batem naquela regra.
p:not(.especial) {
color: gray;
}
Isso diz que queremos todos os pargrafos que no tm a classe especial. A sintaxe do :not() recebe como
argumento algum outro seletor simples (como classes, IDs ou tags).
Essa propriedade do CSS possui suporte mais limitado no IE, somente a partir da verso (nos outros
navegadores no h problemas).
. Psvcoo-ctnssvs
Pegue o seguinte HTML de uma lista de elementos:
<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ul>
E se quisermos estilizar elementos especfcos dessa lista? Por exemplo, o primeiro elemento deve ter cor
vermelha e o ltimo, azul. Com esse HTML simples, usando apenas os seletors que vimos at agora, ser
bem difcil.
A soluo mais comum seria adicionar classes ou IDs no HTML para selecion-los depois no CSS:
<ul>
<li class="primeiro">Primeiro item</li>
Captulo - CSS Avanado - Pseudo-classes - Pgina
<li class="ultimo">Quarto item</li>
</ul>
fcil agora usar cores diferentes para o primeiro e ltimo itens da lista.
Mas essa tcnica exigiu alterao no HTML e exige que lembremos de colocar a classe correta, no ponto
correto, toda vez que fzermos mudanas nos itens da lista.
O CSS tem um recurso chamado de pseudo-classes que so como classes CSS j pr-defnidas para ns.
como se o navegador j colocasse certas classes por padro em certos elementos, cobrindo situaes comuns
como essa de selecionar o primeiro ou o ltimo elemento.
H duas pseudo-classes do CSS que representamexatamente o primeiro elemento flho de outro (frst-child)
e o ltimo elemento flho (last-child). Essas classes j esto defnidas, no precisamos aplic-las em nosso
HTML e podemos voltar para o HTML inicial:
<ul>
<li>Primeiro item</li>
<li>Quarto item</li>
</ul>
No CSS, podemos usar pseudo-classes quase da mesma forma que usaramos nossas classes normais. Repare
que para diferenciar um tipo do outro, mudou-se o operador de ponto para dois pontos:
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
O suporte a esses seletores completo nos navegadores modernos. O first-child vem desde o IE, Firefox
e Chrome . E (estranhamente), o last-child s a partir do IE mas desde o Firefox e Chrome .
N1n-cn:to
Um seletor ainda mais genrico do CSS o :nth-child() que nos permite passar o ndice do
elemento. Por exemplo, podemos pegar o terceiro item com:
li:nth-child(3) { color: yellow; }
Porm, o mais interessante que o nth-child pode receber uma expresso aritmtica para in-
dicar quais ndices selecionar. fcil fazer uma lista zebrada, com itens mpares de uma cor e
pares de outra:
li:nth-child(2n) { color: green; } /* elementos pares */
li:nth-child(2n+1) { color: blue; } /* elementos impares */
O suporte existe a partir do IE, Firefox . e Chrome .
Psvcoo ctnssvs ov vs1noo
Queremos mudar a cor de um link quando o usurio passa o mouse por cima. Ou seja, queremos mudar seu
visual a partir de um evento do usurio (no caso, passar o mouse em cima).
Uma soluo ingnua seria criar um cdigo JavaScript que adiciona uma classe nos links quando o evento
de mouseover acontece (e remove a classe no mouseout).
Entretanto, o CSS possui excelentes pseudo-classes que representamestados dos elementos e, em especial,
uma que representa o momento que o usurio est com o mouse em cima do elemento, a :hover.
como se o navegador aplicasse uma classe chamada hover automaticamente quando o usurio passa o
mouse em cima do elemento e depois retirasse a classe quando ele sai. Tudo sem precisarmos controlar isso
com JavaScript.
/* seleciona o link no exato momento em que passamos o mouse por cima dele */
a:hover {
background-color:#FF00FF;
}
Podemos usar hover em todo tipo de elemento, no apenas links. Mas os links ainda tm outras pseudo-
classes que podem ser teis:
/* seleciona todas as ncoras que tm o atributo "href", ou seja, links */
a:link {
background-color:#FF0000;
}
/* seleciona todos os links cujo valor de "href" um endereo j visitado */
a:visited {
background-color:#00FF00;
}
/* seleciona o link no exato momento em que clicamos nele */
a:active {
background-color:#0000FF;
}
. Psvcoo vtvmvN1os
Pseudo classes nos ajudam a selecionar elementos com certas caractersticas sem termos que colocar uma
classe manualmente neles. Porm, o que fazer quando precisamos selecionar certo tipo de contedo que nem
elemento tem?
Exemplo: temos um texto num pargrafo:
<p>A Caelum tem os melhores cursos!</p>
Queremos dar um estilo de revista ao nosso texto e estilizar apenas a primeira letra da frase com uma fonte
maior. Como fazer para selecionar essa letra? Asoluo ingnua seria colocar umelemento ao redor da letra
para podermos selecion-la no CSS:
<p><span>A</span> Caelum tem os melhores cursos!</p>
HTML confuso e difcil de manter.
O CSS apresenta ento a ideia de pseudo-elementos. So elementos que no existem no documento mas
podem ser selecionados pelo CSS. como se houvesse um elemento l!
Podemos voltar o HTML inicial:
<p>A Caelum tem os melhores cursos!</p>
E no CSS:
p:first-letter {
font-size: 200%;
}
Captulo - CSS Avanado - Pseudo elementos - Pgina
Temos ainda outro pseudo-elemento para selecionar a primeira linha apenas em um texto grande:
p:first-line {
font-style: italic;
}
Novos coN1voos
H ainda um outro tipo de pseudo-elemento mais poderoso que nos permite gerar contedo novo via CSS.
Imagine uma lista de links que queremos, visualmente, colocar entre colchetes:
[ Link 1 ]
[ Link 2 ]
[ Link 3 ]
Podemos, claro, apenas escrever os tais colchetes noHTML. Mas ser que ocontedo semntico? Queremos
que esses colchetes sejam indexados pelo Google? Queremos que sejam lidos como parte do texto pelos
leitores de tela?
Talvez no. Pode ser um contedo apenas visual. Podemos ger-lo com CSS usando os pseudo elementos
afer e before.
O HTML seria simples:
<a href="...">Link1</a>
E no CSS:
a:before {
content: '[ ';
}
a:after {
content: ' ]';
}
Ou ainda, imagine que queremos colocar a mensagem(externo) ao lado de todos os links externos da nossa
pgina. Usando pseudo-elementos e seletores de atributo, conseguimos:
a[href^=http://]:after {
content: ' (externo)';
}
Isso pega todos os elementos que a que comeam com http:// e coloca a palavra externo depois.
Captulo - CSS Avanado - Pseudo elementos - Pgina
. Exvncc:os: svtv1onvs v vsvcoo-ctnssvs
) Vamos alterar nossa pgina de Sobre, a sobre.html. Queremos que as primeiras letras dos pargrafos
fquem em negrito.
Altere o arquivo sobre.css e use a pseudo-classe :first-letter pra isso.
p:first-letter {
font-weight: bold;
}
Teste a pgina!
) Repare que os pargrafos nessa pgina Sobre tm uma indentao no incio. Agora queremos remover
apenas a identao do primeiro pargrafo da pgina.
Poderamos colocar uma classe no HTML. Ou, melhor ainda, sabendo que esse o primeiro pargrafo
(<p>) depois do ttulo (<h1>), usar o seletor de irmos adjacentes.
Acrescente ao sobre.css:
h1 + p {
text-indent: 0;
}
Teste novamente.
) Podemos ainda usar o pseudo-elemento :first-line para alterar o visual da primeira linha do texto. Por
exemplo, transformando-a em small-caps usando a propriedade font-variant:
p:first-line {
}
Teste de novo.
) Vamos voltar a mexer na Home principal do site agora.
Temos o menu superior (.menu-setores) que uma lista de links. Podemos melhorar sua usabilidade
alterando seus estados quando o usurio passar o mouse (:hover) e quando clicar no item (:active).
Adicione ao arquivo estilos.css:
.menu-setores a:hover {
color: #007dc6;
Captulo - CSS Avanado - Exerccios: seletores e pseudo-classes - Pgina
}
.menu-setores a:active {
color: #867dc6;
}
Teste o menu passando o mouse e clicando nas opes (segure um pouco o clique para ver melhor o
efeito).
) O hover til em vrios cenrios. Um interessante fazer um menu que abre e fecha em puro CSS.
Temos j o nosso .menu-departamentos na esquerda da pgina com vrias categorias de produtos. Que-
remos adicionar subcategorias que aparecem apenas quando o usurio passar o mouse.
Hoje, o menu um simples <ul> com vrios itens (<li>) com links dentro:
<li><a href="#">Blusas e Camisas</a></li>
Vamos adicionar no index.html uma sublista de opes dentro do <li> de Blusas e Camisas, dessa forma:
<li>
<a href="#">Blusas e Camisas</a>
<ul>
<li><a href="#">Manga curta</a></li>
<li><a href="#">Manga comprida</a></li>
<li><a href="#">Camisa social</a></li>
<li><a href="#">Camisa casual</a></li>
</ul>
</li>
Por padro, queremos que essa sublista esteja escondida (display:none). Quando o usurio passar o
mouse (:hover), queremos exibi-la (display: block).
Altere o arquivo estilos.css com essa lgica.
.menu-departamentos ul li ul {
display: none;
}
.menu-departamentos ul li:hover ul {
Captulo - CSS Avanado - Exerccios: seletores e pseudo-classes - Pgina
display: block;
}
.menu-departamentos ul li ul li {
background-color: #dcdcdc;
}
Teste a pgina e a funcionalidade do menu.
) Para ajudar a diferenciar os links dos submenus, queremos colocar um trao na frente. Podemos alterar
o HTML colocando os traos - algo visual e no semntico -, ou podemos gerar esse trao via CSS com
pseudo elementos.
Use o :before para injetar um contedo novo via propriedade content no CSS:
.menu-departamentos li li a:before {
content: '- ';
}
Teste a pgina.
(Veja os opcionais a seguir para outras possibilidades.)
) A propriedade content tem muitas variaes. Uma variao simples, mas til, usar caracteres unicode
para injetar smbolos mais interessantes.
Faa os testes:
.menu-departamentos li li a:before {
content: '\272A';
padding-right: 3px;
}
.painel h2:before {
content: '\2756';
padding-right: 5px;
opacity: 0.4;
}
Repare que usamos tambm a propriedade opacity para deixar esse elemento mais transparente e sutil.
Captulo - CSS Avanado - Exerccios opcionais - Pgina
Mn:s ovovs oo UN:coov
Consulte em uma tabela Unicode outros caracteres e seu cdigo hex correspondente.
http://www.alanwood.net/unicode/dingbats.html
http://www.alanwood.net/unicode/links
) (avanado) Volte pgina Sobre, abra-a no navegador.
Em um exerccio anterior, colocamos as primeiras linhas em small-caps usando o seletor p:frst-line.
Repare que todos os pargrafos foram afetados.
E se quisssemos que apenas pargrafos de incio de seo fossem afetados? Podemos pensar assim: que-
remos alterar todos os pargrafos que no esto no meio do texto, ou seja, no so precedidos por outro
pargrafo (mas sim precedidos por ttulos, fguras etc).
Com o seletor :not() do CSS, conseguimos:
:not(p) + p:first-line {
}
Isso signifca: selecione as primeiras linhas dos pargrafos que no so precedidos por outros par-
grafos.
. CSS: nonovn-nno:cs
Uma das novidades mais celebradas do CSS foi a adio de bordas arredondadas via CSS. At ento, a
nica forma de obter esse efeito era usando imagens, o que deixava a pgina mais carregada e difcultava a
manuteno.
Com o CSS h o suporte a propriedade border-radius que recebe o tamanho do raio de arredondamento
das bordas. Por exemplo:
div {
border-radius: 5px;
}
Captulo - CSS Avanado - CSS: border-radius - Pgina
Podemos tambm passar valores diferentes para cantos diferentes do elemento:
.a{
/*todas as bordas arredondadas com um raio de 15px*/
border-radius: 15px;
}
.b{
/*borda superior esquerda e inferior direita com 5px
borda superior direita e inferior esquerda com 20px*/
border-radius: 5px 20px;
}
.c{
/*borda superior direita com 5px
borda superior direita e inferior esquerda com 20px
borda inferior direita com 50px */
border-radius: 5px 20px 50px;
}
.d{
/*borda superior direita com 5px
borda superior direita com 20px
borda inferior direita com 50px
bordar inferior esquerda com 100px */
border-radius: 5px 20px 50px 100px;
}
Captulo - CSS Avanado - CSS: border-radius - Pgina
. CSS: 1vx1-snnoow
Outro efeito do CSS o suporte a sombras em textos com text-shadow. Sua sintaxe recebe o deslocamento
da sombra e sua cor:
p {
text-shadow: 10px 10px red;
}
Ou ainda receber um grau de espalhamento (blur):
p {
text-shadow: 10px 10px 5px red;
}
possvel at passar mais de uma sombra ao mesmo tempo para o mesmo elemento:
text-shadow: 10px 10px 5px red, -5px -5px 4px red;
. CSS: nox-snnoow
Alm de sombras em texto, podemos colocar sombras em qualquer elemento com box-shadow. A sintaxe
parecida com a do text-shadow:
box-shadow: 20px 20px black;
Captulo - CSS Avanado - CSS: text-shadow - Pgina
Podemos ainda passar um terceiro valor com o blur:
box-shadow: 20px 20px 20px black;
Diferentemente do text-shadow, o box-shadow suporta ainda mais um valor que faz a sombra aumentar ou
diminuir:
box-shadow: 20px 20px 20px 30px black;
Captulo - CSS Avanado - CSS: box-shadow - Pgina
Por fm, possvel usar a keyword inset para uma borda interna ao elemento:
box-shadow: inset 0 0 40px black;
. Ovnc:onov v RGBA
Desde o CSS possvel mudar a opacidade de um elemento para que ele seja mais transparente com o uso
da propriedade opacity.
Veja esse exemplo com um pargrafo por cima de uma imagem:
Colocamos um fundo preto e cor branca no texto. E se quisermos um efeito legal de transparncia para
deixar a imagem mostrar mais?
Captulo - CSS Avanado - Opacidade e RGBA - Pgina
simples com a opacity que recebe um valor decimal entre e :
p {
opacity: 0.3;
}
Repare como todo o elemento fca transparente, o fundo e o texto. E se quisssemos o texto embranco opaco
e o fundo comtransparncia? No CSS, podemos usar outra tcnica, a de defnir uma cor de fundo comvalor
de opacidade especfca.
No CSS, almdas cores hex normais (FFFFFF pro branco), podemos criar cores a partir de seu valor RGB,
passando o valor de cada canal (Red, Green, Blue) separadamente (valor entre e ):
/* todos equivalentes */
color: #FFFFFF;
color: white;
color: rgb(255, 255, 255);
Porm, existe uma funo chamada RGBA que recebe um quarto argumento, o chamado canal Alpha. Na
prtica, seria como o opacity daquela cor (um valor entre e ):
/* branco com 80% de opacidade */
color: rgba(255,255,255, 0.8);
No exemplo da foto, queramos apenas o fundo do texto em preto transluzente (o texto no). Em vez do
opacity, podemos fazer ento:
Captulo - CSS Avanado - Opacidade e RGBA - Pgina
p {
background: rgba(0,0,0,0.3);
color: white;
}
. Pnvv:xos
Muitos recursos do HTML e do CSS ainda so experimentais. Isso quer dizer que foram includos no
rascunho da especifcao mas ainda no so ofciais. As especifcaes ainda esto em aberto e vai
demorar algum tempo at elas serem fechadas.
Existem recursos mais estveis e menos estveis. Alguns j esto bastante maduros e h bastante tempo na
spec, e no so esperadas mais mudanas. Por outro lado, alguns so bemrecentes e talvez ainda possa haver
mudana at a aprovao fnal da especifcao.
Os navegadores desejam implementar os novos recursos antes mesmo da especifcao terminar, para que
os desenvolvedores possam comear a usar as novas propriedades e experiment-las na prtica. Entretanto,
como a sintaxe fnal depois de aprovada pode ser diferente, os navegadores implementam as novas proprie-
dades instveis usando nomes provisrios.
Aboa prtica pegar o nome da propriedade e colocar umprefxo especfco do fabricante na frente. Quando
a especifcao fcar estvel, tira-se esse prefxo e suporta-se a sintaxe ofcial.
As bordas arredondadas, por exemplo, hoje so suportadas emtodos os navegadores modernos como nome
normal da propriedade a border-radius. Mas at o Firefox ., por exemplo, o suporte da Mozilla era expe-
rimental e a propriedade era chamada de -moz-border-radius nesse navegador. No Chrome at a verso ,
precisvamos usar o prefxo deles com -webkit-border-radius.
Captulo - CSS Avanado - Prefxos - Pgina
Os prefxos dos fabricantes mais famosos so:
-webkit-: navegadores Webkit (Chrome, Safari, iOS, Android)
-moz-: Firefox (Mozilla)
-ms-: Internet Explorer (Microsof)
-o-: Opera
preciso consultar tabelas de compatibilidade para saber qual navegador suporta qual propriedade e se
necessrio usar prefxos para certas verses. Se quisermos o mximo de compatibilidade, precisamos colocar
vrios prefxos ao mesmo tempo:
p {
/* Chrome at verso 3, Safari at verso 4 */
-webkit-border-radius: 5px;
/* Firefox at 3.6 */
-moz-border-radius: 5px;
/* Todas as verses modernas dos navegadores,
incluindo IE e Opera que nunca precisaram de
prefixo pra isso */
border-radius: 5px;
}
Algumas propriedades, como os transforms e transitions que veremos a seguir, at hoje precisam de prefxos
em todos os navegadores. Ser preciso repetir a propriedade vezes, infelizmente. o preo que se paga
para usar recursos to novos e ainda experimentais.
Nos casos de CSS que tratamos at agora (border-radius, text-shadow, box-shadow, rgba), todos os navega-
dores modernos j suportam sem uso de prefxos. Voc s precisar deles se quiser suportar verses antigas
(nesse caso, consulte as documentaes para saber o que necessrio e quando).
. CSS: Gnno:vN1vs
OCSS traz tambmsuporte declarao de gradientes semque precisemos trabalhar comimagens. Almde
ser mais simples, a pgina fca mais leve e a renderizao fca melhor por se adaptar a todo tipo de resoluo.
Existe suporte a gradientes lineares e radiais, inclusive com mltiplas paradas. A sintaxe bsica :
.linear {
background: linear-gradient(white, blue);
}
Captulo - CSS Avanado - CSS: Gradientes - Pgina
.radial {
background: radial-gradient(white, blue);
}
Podemos ainda usar gradientes com angulaes diferentes e diversas paradas de cores:
.gradiente {
background: linear-gradient(45deg, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
}
Pnvv:xos
Aespecifcao de gradientes j est emsua verso fnal e j implementada semprefxos emvrios browsers.
Mas, enquanto a especifcao ainda estava em rascunho, antes de ser fnal, uma sintaxe diferente nos gra-
dientes era usada. Isso quer dizer que verses mais antigas dos navegadores que suportavam gradientes
esperam uma sintaxe diferente.
Como as especifcaes em rascunho so implementadas prefxadas nos navegadores, fcil colocar essas
regras com sintaxe diferente para esses navegadores. O problema que o cdigo fca grande e difcil de
manter.
A verso atual da especifcao suporta um primeiro argumento que indica a direo do gradiente:
.linear {
background: linear-gradient(to bottom, white, blue);
}
O cdigo anterior indica um gradiente do branco para o azul vindo de cima para baixo. Mas na verso
suportada antes do rascunho dos gradientes, o mesmo cdigo era escrito com top ao invs de to bottom:
.linear {
background: -webkit-linear-gradient(top, white, blue);
background: -moz-linear-gradient(top, white, blue);
background: -o-linear-gradient(top, white, blue);
}
Pra piorar, verses bem mais antigas do WebKit - notadamente o Chrome at verso e o Safari at verso
-, usavam uma sintaxe ainda mais antiga e complicada:
.linear {
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(100%, blue));
}
Se quiser o mximo de compatibilidade, voc ter que incluir todas essas variantes no cdigo CSS.
Captulo - CSS Avanado - CSS: Gradientes - Pgina
Gnmn:nnnns vno IE nN1:co
O IE s suporta gradientes CSS a partir da verso , mas desde o IE era possvel fazer gradientes simples
usando um CSS proprietrio da Microsof:
.linear {
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#FFFFFF', endColorstr='#0000FF',GradientType=0);
}
O CSS acima faz um gradiente linear do topo para baixo, como nos outros exemplos, funcionar no IE at
IE. O IE j no aceita mais essa gambiarra e exige que voc use a sintaxe ofcial do CSS que vimos no
incio.
GvnnXo ov cnno:vN1vs
comum tambm a confgurao de um background simples e slido antes do gradiente, a ser usado pelos
navegadores mais antigos. Como eles no entendem gradientes, usaro a cor slida e tero um design ade-
quado e usvel. Os navegadores mais novos vo ler a regra do gradiente e ignorar a cor slida (progressive
enhancement):
.gradiente {
background: #cbebff;
background: linear-gradient(45deg, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
}
Uma ferramenta bastante til e recomendada o Ultimate CSS Gradient Generator da ColorZilla. Ela nos
permite criar gradientes CSS visualmente como num editor de imagens. Alm disso, j implementa todos
os hacks e prefxos para navegadores diferentes. H at uma opo que permite que enviemos uma imagem
com o design de um gradiente e ele identifca as cores e gera o cdigo correto.
http://www.colorzilla.com/gradient-editor/
Recomendamos fortemente o uso dessa ferramenta para gerar gradientes CSS.
. Pnocnvss:vv ENnnNcvmvN1
Nesse ponto, voc pode estar pensando nos navegadores antigos. Bordas redondas, por exemplo, s funcio-
nam no IE a partir da verso . At o IE no h como fazer isso com CSS (nem com prefxos).
O que fazer ento? Muitos usurios no Brasil ainda usam IE e at verses mais antigas como IE e talvez
IE.
Captulo - CSS Avanado - Progressive Enhancement - Pgina
O melhor no usar esses recursos modernos por causa dos usurios de navegadores antigos? No!
No vamos sacrifcar a experincia da maioria dos usurios de navegadores modernos por causa do cada vez
menor nmero de pessoas usando navegadores antigos, mas tambm no queremos esquecer os usurios de
navegadores antigos e deix-los sem suporte.
Pnocnvss:vv vNnnNcvmvN1 v cnncvvct ovcnnon1:oN
A ideia fazer seu site funcionar em qualquer navegador, sem prejudicar os navegadores mais antigos e
sem deixar de usar os novos recursos em navegadores novos. Graceful degradation foi o nome da primeira
tcnica a pregar isso; o objetivo era montar seu site voltado aos navegadores modernos e fazer com que ele
degradasse graciosamente, removendo funcionalidades no suportadas.
A abordagem mais recente, chamada progressive enhancement tem uma ideia parecida mas ao contrrio:
comece desenvolvendo as funcionalidades normalmente e v acrescentando pequenas melhorias mesmo que
s funcionem nos navegadores modernos.
Com CSS, podemos usar progressive enhancement. No possvel ainda ter um site que dependa hoje
totalmente do CSS. Mas possvel desenvolver seu site e acrescentar melhorias progressivamente usando
CSS.
Ou seja, faa um layout que fque usvel com bordas quadradas mas use bordas redondas para deix-lo
melhor, mais bonito, nos navegadores mais modernos.
Saiba mais no blog da Caelum:
http://blog.caelum.com.br/css-e-progressive-enhancement/
. Exvncc:os: v:scnt CSS
) Vamos dar um ar mais atual pra nossa home colocando uns efeitos nos painis.
Use border-radius e box-shadow no painel em si para destac-lo mais. E use um text-shadow sutil para
deixar o ttulo do painel mais destacado.
.painel {
border-radius: 4px;
box-shadow: 1px 1px 4px #999;
}
.painel h2 {
text-shadow: 3px 3px 2px #FFF;
}
Veja o resultado no navegador.
Captulo - CSS Avanado - Exerccios: visual CSS - Pgina
) O box-shadow tambm aceita a criao de bordas internas aos elementos alm da borda externa. Basta
usar a opo inset:
box-shadow: inset 1px 1px 4px #999;
Teste na sombra dos painis que fzemos antes.
) O border-radius pode tambm ser confgurado para bordas especfcas apenas e at de tamanhos dife-
rentes se quisermos.
.busca {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
) No CSS, podemos usar cores com canal Alpha para translucncia usando a sintaxe do RGBA. Faa a
sombra do ttulo do painel um branco com de opacidade.
.painel h2 {
text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}
) Use gradientes nos painis de produtos na Home. O painel novidade, por exemplo, poderia ter:
.novidades {
background-color: #f5dcdc;
background: linear-gradient(#f5dcdc, #f4bebe);
}
E o painel de mais vendidos:
.mais-vendidos {
background: #dcdcf5;
background: linear-gradient(#dcdcf5, #bebef4);
}
Captulo - CSS Avanado - Exerccios: visual CSS - Pgina
Pnvv:xos No vxvncc:o
Usamos no exerccio a verso ofcial da especifcao sem prefxos que funciona nas ltimas
verses do Firefox, Chrome, Opera, Safari e Internet Explorer.
Note que no estamos suportando verses antigas desses navegadores de propsito. Se quiser,
voc pode adicionar as outras variantes de prefxos para suport-los. Ou usar uma ferramenta
como o Collorzilla Gradient Generator para automatizar:
http://www.colorzilla.com/gradient-editor/
Consulte o suporte nos browsers aqui: http://caniuse.com/css-gradients
. CSS TnnNs:1:oNs
Com as transitions, conseguimos animar o processo de mudana de algum valor do CSS.
Por exemplo: temos um elemento na posio top:10px e, quando passarmos o mouse em cima (hover),
queremos que o elemento v para top:30px. O CSS bsico :
#teste {
position: relative;
top: 0;
}
#teste:hover {
top: 30px;
}
Isso funciona, mas o elemento deslocado de uma vez quando passamos o mouse. E se quisermos algo
mais sutil? Uma animao desse valor mudando lentamente, mostrando o elemento se deslocando na tela?
Usamos CSS Transitions.
Sua sintaxe possui vrios recursos mas seu uso mais simples, para esse nosso caso, seria apenas:
#teste:hover {
transition: top 2s;
}
Isso indica que queremos animar a propriedade top durante segundos.
Por padro, a animao linear, mas temos outros tipos para animaes mais suaves:
linear - velocidade constante na animao;
ease - reduo gradual na velocidade da animao;
Captulo - CSS Avanado - CSS Transitions - Pgina
ease-in - aumento gradual na velocidade da animao;
ease-in-out - aumento gradual, depois reduo gradual na velocidade da animao;
cubic-bezier(x1,y1,x2,y2) - curva de velocidade para animao customizada (avanado);
#teste:hover {
transition: top 2s ease;
}
Para explorar o comportamento dos tipos de animaes disponveis, e como criar uma curva de velocidade
customizada para sua animao, existe uma ferramenta que auxilia a criao do cubic-bezier: http://www.
roblaplaca.com/examples/bezierBuilder/
Podemos ainda usar mais de uma propriedade ao mesmo tempo, incluindo cores!
#teste {
position: relative;
top: 0;
color: white;
}
#teste:hover {
top: 30px;
color: red;
transition: top 2s, color 1s ease;
}
Se quisermos a mesma animao, mesmo tempo, mesmo efeito para todas as propriedades, podemos usar o
atalho all (que j o valor padro, inclusive):
#teste:hover {
transition: all 2s ease;
}
Essa especifcao, ainda em estgio inicial, suportada em todos os navegadores modernos, incluindo o IE
. Mas precisamos de prefxos em vrios browsers.
#teste:hover {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
Captulo - CSS Avanado - CSS Transitions - Pgina
. CSS TnnNsvonms
Com essa nova especifcao, agora possvel alterar propriedades visuais dos elementos antes impossveis.
Por exemplo, agora podemos alterar o ngulo de um elemento, mostr-lo em uma escala maior ou menor
que seu tamanho padro ou alterar a posio do elemento sem sofrer interferncia de sua estrutura.
TnnNstn1v
.header {
/* Move o elemento no eixo horizontal */
transform: translateX(50px);
}
#main {
/* Move o elemento no eixo vertical */
transform: translateY(-20px);
}
footer {
/* Move o elemento nos dois eixos (X, Y) */
transform: translate(40px, -20px);
}
Ro1n1v
#menu-departamentos {
transform: rotate(-10deg);
}
Captulo - CSS Avanado - CSS Transforms - Pgina
Scntv
#novidades li {
/* Alterar a escala total do elemento */
transform: scale(1.2);
}
#mais-vendidos li {
/* Alterar a escala vertical e horizontal do elemento */
transform: scale(1, 0.6);
}
Svw
footer {
/* Distorcer o elemento no eixo horizontal */
transform: skewX(10deg);
}
#social {
/* Distorcer o elemento no eixo vertical */
transform: skewY(10deg);
}
Captulo - CSS Avanado - CSS Transforms - Pgina
possvel combinar vrias transformaes no mesmo elemento, basta declarar uma depois da outra:
html {
transform: rotate(-30deg) scale(0.4);
}
Essa especifcao, ainda em estgio inicial, suportada em todos os navegadores modernos, incluindo o IE
, mas todas as implementaes exigem o uso dos respectivos prefxos.
#teste {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
. Exvncc:os: CSS 1nnNsvonmv 1nnNs:1:oN
Pnvv:xos Nos vxvncc:os
No exerccio, optamos por usar sintaxes que funcionam em todos os browsers mas apenas em
suas ltimas verses. Isso quer dizer que acrescentamos os prefxos necessrios apenas hoje em
dia. Se quiser suportar verses mais antigas, adicione mais prefxos.
Consulte a compatibilidade e prefxos aqui:
http://caniuse.com/css-transitions http://caniuse.com/transformsd
) Quando o usurio passar o mouse em algum produto dos painis de destaque, mostre uma sombra por
trs com box-shadow. Use tambm uma transio com transition para que essa sombra aparea suave-
mente:
Captulo - CSS Avanado - Exerccios: CSS transform e transition - Pgina
.painel li:hover {
box-shadow: 0 0 5px #333;
-webkit-transition: box-shadow 0.7s;
transition: box-shadow 0.7s;
}
Teste em navegadores modernos e veja o resultado.
) Altere a regra anterior para tambm colocar agora um fundo branco no elemento. Anime esse fundo
tambm, fazendo um efeito tipo fade.
Na regra transition de antes, podemos indicar que todas as propriedades devemser animadas; para isso,
podemos usar a keyword all ou simplesmente omitir esse argumento.
.painel li:hover {
background-color: rgba(255,255,255,0.8);
box-shadow: 0 0 5px #333;
-webkit-transition: 0.7s;
transition: 0.7s;
}
) Mais coisas de CSS! Ainda quando passar o mouse em cima do item do painel, queremos aumentar o
elemento em , dando uma espcie de zoom.
Use CSS transform pra isso, com scale. Adicione na regra anterior (sem remover o que j tnhamos):
.painel li:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
Teste e repare como o scale tambm animado suavemente. Isso porque nossa transio estava comall.
) Altere a regra anterior do transform pra tambm fazer o elemento rotacionar suavemente em graus no
sentido anti-horrio:
.painel li:hover {
-webkit-transform: scale(1.2) rotate(-5deg);
transform: scale(1.2) rotate(-5deg);
}
) (opcional) Faa os elementos mpares girarem em sentido anti-horrio e os pares no sentido horrio!
No exerccio anterior, fzemos todos giraremanti-horrio. Vamos sobrescrever essa regra para os elemen-
tos pares usando o seletor :nth-child:
.painel li:nth-child(2n):hover {
-webkit-transform: scale(1.2) rotate(5deg);
transform: scale(1.2) rotate(5deg);
}
) (opcional) Repare como a animao ocorre apenas quando passamos o mouse em cima, mas quando
tiramos, a volta do efeito no animada.
Podemos habilitar a animao na volta do elemento para o estado normal movendo as regras de transio
para o li em si (e no s no :hover).
.painel li {
-webkit-transition: 0.7s;
transition: 0.7s;
}
) (opcional) Umterceiro argumento para a funo de transio a funo de animao, que controla como
o efeito executa de acordo com o tempo.
Por padro, os efeitos so lineares, mas podemos obter resultados mais interessantes com outras opes
como ease, ease-in, ease-out (e at o avanado cubic-bezier()).
Por exemplo:
.painel li:hover {
-webkit-transition: 0.7s ease-in;
transition: 0.7s ease-in;
}
.painel li {
-webkit-transition: 0.7s ease-out;
transition: 0.7s ease-out;
}
. Pnnn snnvn mn:s: vsvvc:v:c:onov ov svtv1onvs CSS
Quando declaramos uma srie de seletores CSS, bem possvel que nos deparemos com situaes em que
mais de um seletor esteja aplicando propriedades visuais ao mesmo elemento do HTML. Nesse caso ne-
cessrio saber qual seletor tem precedncia sobre os outros, a fm de resolver confitos e garantir que as
propriedades desejadas estejam sendo aplicadas aos elementos corretos.
O comportamento padro dos seletores CSS, quando no h confitos entre propriedades, que as proprie-
dades de mais de um seletor para um mesmo elemento sejam acumuladas. Veja no exemplo a seguir:
Estrutura HTML
<p>Texto do pargrafo em destaque</p>
<p>Texto de um pargrafo comum</p>
Seletores CSS
p {
color: navy;
}
p {
font-size: 16px;
}
No exemplo anterior, utilizamos o mesmo seletor duas vezes no CSS. Isso faz comque as propriedades sejam
acumuladas emtodos os elementos selecionados. No caso, todos os elementos da tag p emnosso documento
sero exibidos da cor navy (azul marinho) e com a fonte no tamanho px.
Quando h confito entre propriedades de seletores equivalentes, ou at mesmo em um mesmo seletor,
aplicada a propriedade declarada depois, como no exemplo a seguir:
p {
color: navy;
font-size: 12px;
}
p {
font-size: 16px;
}
Captulo - CSS Avanado - Para saber mais: especifcidade de seletores CSS - Pgina
Nesse caso, h confito entre as propriedades font-size declaradas nos seletores. Como os seletores so
equivalentes, os pargrafos sero exibidos com a fonte no tamanho pt. A declarao anterior, com valor
de pt sobrescrita pela nova propriedade declarada mais abaixo no nosso CSS. A cor navy continua
aplicada a todos os pargrafos do documento.
Esvvc:v:c:onov ov Svtv1onvs CSS
Seletores equivalentes tm suas propriedades sobrescritas conforme so declaradas. Mas o que acontece
quando temos diferentes tipos de seletores?
Cada tipo de seletor tem um peso diferente quando o navegador os interpreta e aplica suas propriedades
declaradas aos elementos de um documento. Existe uma maneira bem simples de saber como funcionam
esses pesos porque eles fazem parte da especifcao do CSS. Para fcar um pouco mais fcil s pensarmos
em uma regra simples: quanto mais especfco for o seletor, maior seu valor. Por isso esse peso, ou valor,
que cada seletor tem recebe o nome de especifcidade.
O seletor de tag, por exemplo div {}, bem genrico. As propriedades declaradas nesse seletor sero apli-
cadas a todos os elementos div do nosso documento, no levando em considerao qualquer atributo que
eles possam ter. Por esse motivo, o seletor de tag tem valor baixo de especifcidade.
O seletor de classe, por exemplo .destaque {}, um pouco mais especfco, ns decidimos quais elementos
tm determinado valor para esse atributo nos elementos do HTML, portanto o valor de especifcidade do
seletor de classe maior do que o valor de especifcidade do seletor de tag.
O seletor de id, por exemplo #cabecalho {}, bem especfco, pois s podemos ter um nico elemento com
determinado valor para o atributo id, ento seu valor de especifcidade o maior entre os seletores que vimos
at agora.
E quando temos seletores compostos ou combinados? Como calcular essa especifcidade?
Podemos adicionar um ponto em cada posio do valor de um seletor para chegarmos ao seu valor de es-
pecifcidade. Para isso vamos utilizar uma tabela para nos ajudar a conhecer esses valores, e a seguir vamos
aplicar o calculo a alguns seletores propostos.
Seguindo os valores descritos na tabela acima, podemos calcular o valor de especifcidade para qualquer
seletor CSS, por exemplo:
p { /* valor de especificidade: 001 */
color: blue;
}
.destaque { /* valor de especificidade: 010 */
color: red;
}
#cabecalho { /* valor de especificidade: 100 */
color: green;
}
Nos seletores combinados e compostos, basta somar os valores em suas determinadas posies como nos
exemplos a seguir:
#rodape p { /* valor de especificidade: 101 */
font-size: 11px;
}
#cabecalho .conteudo h1 { /* valor de especificidade 111 */
color: green;
}
.conteudo div p span { /* valor de especificidade: 013 */
font-size: 13px;
}
Quanto maior o valor da especifcidade do seletor, maior a prioridade de seu valor, dessa maneira umseletor
com valor de especifcidade sobrescreve as propriedades confitantes para o mesmo elemento que um
seletor com valor de especifcidade .
Essa uma maneira simples de descobrir qual seletor tem suas propriedades aplicadas com maior priori-
dade. Por enquanto vimos somente esses trs tipos de seletores CSS (tag, classe e id). No decorrer do curso
vamos ver outros tipos mais avanados de seletores, e vamos complementando essa tabela para termos uma
referncia completa para esse clculo.
C
Web para dispositivos mveis
A iniciativa da Internet mvel importante, informaes devem ser igualmente disponveis em qualquer
dispositivo
Tim Berners-Lee
. S:1v mon:tv oc mvsmo s:1v:
O volume de usurios que acessam a Internet por meio de dispositivos mveis cresceu exponencialmente
nos ltimos anos. Usurios de iPhones, iPads e outros smartphones e tablets tm demandas diferentes dos
usurios Desktop. Redes lentas e acessibilidade em dispositivos limitados e multitoque so as principais
diferenas.
Como atender a esses usurios?
Para que suportemos usurios mveis, antes de tudo, precisamos tomar uma deciso: fazer umSite exclusivo
- e diferente - focado em dispositivos mveis ou adaptar nosso Site para funcionar em qualquer dispositivo?
Vrios grandes sites da Internet - como Google, Amazon, UOL, Globo.com etc - adotam a estratgia de ter
um Site diferente voltado para dispositivos mveis. comum usar um subdomnio diferente como m. ou
mobile., como http://m.uol.com.br.
Essa abordagem a que traz maior facilidade na hora de pensar nas capacidades de cada plataforma, Desktop
e mobile, permitindo que entreguemos uma experincia customizada e otimizada para cada situao. Porm,
h diversos problemas envolvidos:
Como atender adequadamente diversos dispositivos to diferentes quanto um smartphone com tela
pequena e um tablet com tela mediana? E se ainda considerarmos os novos televisores como Google
TV? Teramos que montar um Site especfco para cada tipo de plataforma?
Muitas vezes esses Sites mobile so verses limitadas dos Sites de verdade e no apenas ajustes de
usabilidade para o dispositivo diferente. Isso no frustra o usurio que, cada vez mais, usa dispositivos
mveis para completar as mesmas tarefas que antes fazia no Desktop?
Dar manuteno em um Site j bastante trabalhoso, imagine dar manuteno em dois - um mobile e
um normal.
Voc ter contedos duplicados entre Sites diferentes, podendo prejudicar seu SEO se no for feito
com cuidado.
Ter que lidar com redirects entre URLs mveis e normais, dependendo do dispositivo. O usurio
pode receber de um amigo um link para uma pgina vista no Site normal; mas se ele abrir esse email
no celular, ter que ver a verso mobile desse link, sendo redirecionado automaticamente. E mesma
coisa no sentido contrrio, ao mandar um link de volta para o Desktop.
Uma abordagem que vem ganhando bastante destaque a de ter um nico Site, acessvel em todos os dis-
positivos mveis. Adeptos da ideia da Web nica (One Web) consideram que o melhor para o usurio
ter o mesmo Site do Desktop normal tambm acessvel no mundo mvel. o melhor para o desenvolvedor
tambm, que no precisar manter vrios Sites diferentes. E o que garante a compatibilidade com a maior
gama de aparelhos diferentes.
Certamente, a ideia no fazer o usurio mvel acessar a pgina exatamente da mesma maneira que o usurio
Desktop. Usando truques de CSS bem suportados no mercado, podemos usar a mesma base de layout e
marcao porm ajustando o design para cada tipo de dispositivo.
Nossa pgina no Desktop agora mostrada assim:
Queremos que, quando vista em um celular, tenha um layout mais otimizado:
Captulo - Web para dispositivos mveis - Site mobile ou mesmo site? - Pgina
Como ovsvNvotvvn cmS:1v vxctcs:vo vnnn Mon:tv:
A abordagem que trataremos no curso a de fazer adaptaes na mesma pgina para ser com-
patvel com CSS. Como faremos caso queiramos fazer um Site exclusivo para mobile?
Do ponto de vista de cdigo, a abordagem mais simples: basta fazer sua pgina com design
mais enxuto e levando em conta que a tela ser pequena (em geral, usa-se width de para
que se adapte pequenas variaes de tamanhos de telas entre smartphones diferentes).
Uma difculdade estar no servidor para detectar se o usurio est vindo de umdispositivo mvel
ou no, e redirecion-lo para o lugar certo. Isso costuma envolver cdigo no servidor que detecte
o navegador do usurio usando o User-Agent do navegador.
uma boa prtica tambmincluir umlink para a verso normal do Site caso o usurio no queira
a verso mvel.
. CSS mvo:n 1vvvs
Desde a poca do CSS, h uma preocupao como suporte de regras de layout diferentes para cada situao
possvel. Isso feito usando os chamados media types, que podem ser declarados ao se invocar um arquivo
CSS:
Captulo - Web para dispositivos mveis - CSS media types - Pgina
<link rel="stylesheet" href="site.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="stylesheet" href="handheld.css" media="handheld" />
Outra forma de declarar os media types separar as regras dentro do prprio arquivo CSS:
@media screen {
body {
background: blue;
color: white;
}
}
@media print {
body {
background: white;
color: black;
}
}
O media type screen determina a visualizao normal, na tela do Desktop. muito comum tambm termos
umCSS commedia type print comregras de impresso (por exemplo, retirar navegao, formatar cores para
serem mais adequadas para leitura em papel etc).
E havia tambm o media type handheld, voltado para dispositivos mveis. Com ele, conseguamos adaptar
o Site para os pequenos dispositivos como celulares WAP e palmtops.
O problema que esse tipo handheld nasceu em uma poca em que os celulares eram bem mais simples do
que hoje, e, portanto, costumavam ser usados para fazer pginas bem simples. Quando os novos smartpho-
nes touchscreen comearam a surgir - em especial, o iPhone -, eles tinham capacidade para abrir pginas
completas e to complexas quanto as do Desktop. Por isso, o iPhone e outros celulares modernos ignoram
as regras de handheld e se consideram, na verdade, screen.
Almdisso, mesmo que handheld funcionasse nos smartphones, como trataramos os diferentes dispositivos
de hoje em dia como tablets, televises etc?
A soluo veio com o CSS e seus media queries.
. CSS mvo:n qcvn:vs
Todos os smartphones e navegadores modernos suportam uma nova forma de adaptar o CSS baseado nas
propriedades dos dispositivos, as media queries do CSS.
Captulo - Web para dispositivos mveis - CSS media queries - Pgina
Em vez de simplesmente falar que determinado CSS para handheld em geral, ns podemos agora indicar
que determinadas regras do CSS devem ser vinculadas a propriedades do dispositivo como tamanho da tela,
orientao (landscape ou portrait) e at resoluo em dpi.
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="mobile.css" media="(max-width: 480px)">
Outra forma de declarar os media types separar as regras dentro do mesmo arquivo CSS:
@media screen {
body {
font-size: 16px;
}
}
@media (max-width: 480px) {
body {
font-size: 12px;
}
}
Repare como o atributo media agora pode receber expresses complexas. No caso, estamos indicando que
que queremos que as telas com largura mxima de px tenham uma fonte de px.
Voc pode testar isso apenas redimensionando seu prprio navegador Desktop para umtamanho menor que
px.
. V:vwvon1
Mas, se voc tentar rodar nosso exemplo anterior em um iPhone ou Android de verdade, ver que ainda
estamos vendo a verso Desktop da pgina. A regra do max-width parece ser ignorada!
Captulo - Web para dispositivos mveis - Viewport - Pgina
Figura .: Site atual rodando num celular Android
Na verdade, a questo que os smartphones modernos tm telas grandes e resolues altas, justamente para
nos permitir ver sites complexos feitos para Desktop. A tela de um iPhone S por exemplo px por
px. Celulares Android j chegam a px, o mesmo de um Desktop.
Ainda assim, a experincia desses celulares bemdiferente dos Desktops. px emuma tela de polegadas
bemdiferente de px emumnotebook de polegadas. Aresoluo muda. Celulares costumamter uma
resoluo em dpi bem maior que Desktops.
Como arrumar nossa pgina?
Os smartphones sabem que considerar a tela como px no ajudar o usurio a visualizar a pgina otimi-
zada para telas menores. H ento o conceito de device-width que, resumidamente, representa um nmero
em pixels que o fabricante do aparelho considera como mais prximo da sensao que o usurio tem ao
visualizar a tela.
Nos iPhones, por exemplo, o device-width considerado como px, mesmo coma tela tendo uma resoluo
bem mais alta.
Captulo - Web para dispositivos mveis - Viewport - Pgina
Por padro, iPhones, Androids e afns costumam considerar o tamanho da tela visvel, chamada de viewport
como grande o sufciente para comportar os Sites Desktop normais. Por isso a nossa pgina foi mostrada
sem zoom como se estivssemos no Desktop.
A Apple criou ento uma soluo que depois foi copiada pelos outros smartphones, que confgurar o valor
que julgarmos mais adequado para o viewport:
<meta name="viewport" content="width=320">
Isso faz com que a tela seja considerada com largura de px, fazendo com nosso layout mobile fnalmente
funcione e nossas media queries tambm.
Melhor ainda, podemos colocar o viewport com o valor device-width defnido pelo fabricante, dando mais
fexibilidade com dispositivos diferentes com tamanhos diferentes:
<meta name="viewport" content="width=device-width">
. Exvncc:os: mon:tv s:1v
) Vamos adaptar nossa home page (index.html) para mobile.
Captulo - Web para dispositivos mveis - Exerccios: mobile site - Pgina
Comece declarando a meta tag com o viewport dentro do <head> da index.html:
Vamos escrever nosso CSS de adaptao em um novo arquivo, chamado mobile.css. Crie esse arquivo e
o importe no head do index.html. Use media queries para que ele s seja aplicado em resolues de no
mximo px (celulares comuns)
<link rel="stylesheet" href="css/mobile.css" media="(max-width: 320px)">
) Nossa pgina hoje tem o tamanho fxo em px e centralizada (com o uso do seletor .container).
Para deixarmos a pgina mais fexvel nos celulares, precisamos remover esse tamanho absoluto e colocar
algum que faa mais sentido em telas menores, onde queremos ocupar quase que a tela toda (deixando
apenas uma pequena margem). Para isso, edite mobile.css:
.container {
width: 96%;
}
J possvel redimensionar a tela para px e ver que o site comea a se adaptar. Mas ainda h bastante
trabalho pela frente.
) Prximo passo: vamos ajustar os elementos do topo da pgina. Vamos centralizar o logotipo na pgina,
esconder as informaes (secundrias) sobre a Sacola e ajustar o menu para fcar abaixo do logo e no
mais posicionado direita.
header h1 {
text-align: center;
}
header h1 img {
max-width: 50%;
}
.sacola {
display: none;
}
.menu-setores {
position: static;
text-align: center;
}
Lembre-se que, anteriormente, nosso menu estava com position:absolute para fcar a direita do logo.
Agora, queremos deix-lo fuir abaixo do logo; bastou restaurar o position:static.
Teste novamente com o navegador redimensionado. Est melhorando?
) Ajustamos a posio do menu de setores e, automaticamente, os links se posicionaram formando duas
linhas. Mas repare como esto prximos uns dos outros. Ser que o nosso usurio consegue clicar neles
usando seu celular? Vamos aumentar o espao entre eles:
.menu-setores ul li {
margin: 5px;
}
) Agora queremos ajustar a seo de busca, o menu da esquerda e a imagem de destaque. Como eles so
muito grandes, em mobile, melhor renderizarmos um em cima do outro sem elementos a direita (ima-
gem).
Vamos ocupar da tela com o menu e a busca. A imagem de destaque dever ser redimensionada
para ocupar da tela e no estourar o tamanho.
.busca,
.menu-departamentos,
.destaque img {
margin-right: 0;
width: 100%;
}
Teste esse passo no navegador redimensionado.
) Nossa pgina est fcando boa em mobile. Falta apenas ajustarmos os painis de destaques de produtos.
Por hora, eles esto com tamanhos absolutos ocupando metade da tela e mostrando elementos, com
por linha. Vamos manter o painel com elementos por linha, mas vamos fazer os dois painis encaixarem
umemcima do outro. Para isso, basta tirarmos a restrio de largura do painel para ele ocupar a tela toda.
.painel {
width: auto;
}
Com relao aos produtos nos painis. Vamos precisar redimension-los para encaixar em cada linha.
Uma boa maneira colocar cada elemento com do painel, totalizando , e deixando espao para
as margens.
J a imageminterna de cada produto dever ocupar do seu quadrado (o <li> que ajustamos), seno
as imagens vo estourar o layout em certos tamanhos.
.painel li {
width: 30%;
}
.painel img {
width: 100%;
}
Teste a pgina fnal no navegador redimensionado. Temos nossa pgina mobile!
) O que acontece em resolues maiores de px? Nosso design volta ao padro de px e fcamos com
scroll horizontal. A maioria dos smartphones tem px de largura, mas nem todos, e nosso layout no
se ajusta bem a esses outros. At mesmo aqueles com px de largura, ao girar o aparelho em modo
paisagem, a resoluo maior (px num iPhone e mais de px em muitos Androids).
O melhor era que nosso layout adaptvel fosse usado no s em px mas em diversas resolues inter-
medirias antes dos px que estabelecemos para o site Desktop.
Podemos ajustar nossa media query para aplicar o CSS de adaptao a qualquer tamanho de tela menor
que os px do Desktop (ou seja, no mximo, px):
Teste, novamente, redimensionando o navegador para vrias resolues diferentes.
Repare que, como fzemos um layout fuido, baseado em porcentagens, os elementos se ajustam a dife-
rentes resolues sem esforo. uma boa prtica usar porcentagens e, sempre que possvel, evitar o uso
de valores absolutos em pixels.
) (opcional) Se voc fez os exerccios opcionais anteriores do controle de pause/play no banner, precisamos
reposicionar o controle de pause/play:
.pause, .play {
top: auto;
right: auto;
left: 10px;
bottom: 10px;
}
. RvsvoNs:vv Wvn Dvs:cN
Repare o que fzemos nesse captulo. Nossa pgina, como mesmo HTML e pequenos ajustes de CSS, suporta
diversas resolues diferentes, desde a pequena de um celular at um Desktop.
Essa prtica o que o mercado chama de Web Design Responsivo. O termo surgiu num famoso artigo de
Ethan Marcotte e diz exatamente o que acabamos de praticar. So os elementos de um design responsivo:
layout fudo usando medidas fexveis, como porcentagens;
media queries para ajustes de design;
uso de imagens fexveis.
Ns aplicamos os princpios na nossa adaptao da Home pra mobile. Aideia do responsivo que a pgina
se adapte a diferentes condies, em especial a diferentes resolues. E, embora o uso de porcentagens
exista h dcadas na Web, foi a popularizao das media queries que permitiram layouts verdadeiramente
adaptativos.
. Mon:tv-v:ns1
Nosso exerccio seguiu o processo que chamamos de desktop-frst. Isso signifca que tnhamos nossa pgina
codifcada para o layout Desktop e, numsegundo momento, adicionamos as regras para adaptao a mobile.
Captulo - Web para dispositivos mveis - Responsive Web Design - Pgina
Na prtica, isso no muito interessante. Repare como tivemos que desfazer algumas coisas do que tnhamos
feito no nosso layout para desktop: tiramos alguns posicionamentos e desfzemos diversos ajustes na largura
de elementos.
muito mais comum e recomendado o uso da prtica inversa: o Mobile-frst. Isto , comear o desenvolvi-
mento pelo mobile e, depois, adicionar suporte a layouts desktop. No cdigo, no h nenhumsegredo: vamos
apenas usar mais media queries min-width ao invs de max-width, mais comum em cdigos desktop-frst.
Agrande mudana do mobile-frst que ela permite uma abordagemmuito mais simples e evolutiva. Inicia-
se o desenvolvimento pela rea mais simples e limitada, commais restries, o mobile. Ouso da tela pequena
vai nos forar a criar pginas mais simples, focadas e objetivas. Depois, a adaptao pra Desktop com media
queries, apenas uma questo de readaptar o layout.
A abordagem desktop-frst comea pelo ambiente mais livre e vai tentando cortar coisas quando chega no
mobile. Esse tipo de adaptao , na prtica, muito mais trabalhosa.
Ns recomendamos o uso do mobile-frst. E usaremos essa prtica no curso a partir das prximas pginas,
assim voc poder comparar os dois estilos.
) Nosso layout anterior tem dois comportamentos: um layout fxo em px otimizado para Desktops e
outro construdo para telas pequenas, mas que aplicado para qualquer resoluo abaixo de px.
Repare que, em resolues altas (mas menores que px), nosso design mobile no fca to bonito (em-
bora continue funcional!). Podemos usar mais media queries para ajustar outros detalhes do layout con-
forme o tamanho da tela varia entre px e px.
Por exemplo, podemos usar colunas no nosso menu quando chegarmos em px (um iPhone em
paisagem):
@media (min-width: 480px) {
header h1 {
margin: 5px 0;
}
}
.menu-departamentos nav > ul {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
Captulo - Web para dispositivos mveis - Exerccios opcionais - Pgina
Emtelas umpouco maiores, como tablets (umiPad tempx por exemplo), podemos querer fazer outros
ajustes com uma media query:
header h1 {
text-align: left;
}
.menu-setores {
position: absolute;
}
.sacola {
display: block;
}
.painel li {
width: 15%;
}
.busca, .menu-departamentos {
margin-right: 1%;
width: 30%;
}
.menu-departamentos nav > ul {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.destaque img {
width: 69%;
}
}
Teste agora no navegador. Redimensione em diversos tamanhos desde o pequeno px at o Desktop
grande. Veja a responsividade do nosso design, se ajustando a diversos tamanhos de tela.
) Acesse sua pgina mobile no seu smartphone de verdade!
) (trabalhoso) Adapte o layout das outras pginas (Sobre, Contato e Produto) para mobile, tambm. Faa
uma soluo mobile completa!
Captulo - Web para dispositivos mveis - Exerccios opcionais - Pgina
C
Introduo a PHP
Medir progresso de programao em linhas de cdigo como medir o progresso da construo de um avio
por seu peso.
Bill Gates
. L:nvn1nNoo o HTML ov scns t:m:1novs
Apesar de toda evoluo do HTML e dos navegadores atuais, a Web ainda um ambiente bastante restrito.
O browser no executa qualquer tipo de cdigo e coisas que s vezes so simples de escrever em outras
linguagens so bastante complexas de se fazer em HTML ou JavaScript.
Por isso, todo projeto Web srio no apenas de arquivos HTML, CSS e JavaScript, mas envolve uma infra-
estrutura no servidor.
H muitas linguagens e servidores possveis de serem usados. Como linguagem, se usa PHP, Java, Ruby,
Python, C. Servidores temos Apache, Tomcat, JBoss, IIS, nginx e outros.
Usamos uma linguagemno servidor para executar tarefas como gerar pginas dinamicamente comdados de
um banco de dados da aplicao; enviar emails para usurios; processar tarefas complexas; garantir valida-
es de segurana da aplicao; e muito mais.
Aqui no curso, vamos usar umpouco de PHPpara entender como funciona esse processo. E, principalmente,
entender como o front-end (foco do curso) se integra na prtica a solues server-side.
Jnvn vs JnvnScn:v1
Apensar do nome, essas duas linguagens so completamente diferentes. Java um linguagem
voltada mais para servidores, com bastante apelo no mundo corporativo, e mantida pela Oracle.
JavaScript a linguagemda Web para se escrever funcionalidades dinmicas numa pgina. Roda
no browser.
. Como vcNc:oNn cmsvnv:oon HTTP
Se escrevemos um HTML simples num arquivo .html, basta abri-lo no navegador e pronto, j podemos
visualizar a pgina. Mas quando envolvemos um servidor o processo no to simples.
Usamos o protocolo HTTP para servir pginas na Web. por isso que todo endereo na Web comea com
http://. Quando acessamos um endereo desses na Internet, falamos que estamos fazendo uma requisio
ao servidor. Ou seja, pedimos que certo contedo seja exibido.
Por exemplo, ao acessar http://www.caelum.com.br/apostilas estamos conectando via HTTP ao servidor
www.caelum.com.br e requisitando a URL /apostilas.
Do outro lado, existe um servidor HTTP esperando novas requisies que responsvel por servir o que
o usurio est pedindo. Esse servidor um programa que instalamos e fca responsvel por processar as
requisies.
A grande questo que esse servidor no precisa ser algo que simplesmente l o arquivo HTML e envia seu
contedo para o cliente. O servidor pode executar cdigo e gerar HTML na hora pro cliente, dinamica-
mente. esse processamento de lgica dinmica no servidor que queremos fazer com PHP.
. Como vcNc:oNn o PHP No svnv:oon
Ao usar PHP, podemos escolher diversos servidores compatveis. O mais famoso de todos o Apache, que
provavelmente voc ir encontrar em muitas hospedagens na prtica.
Mas uma novidade das ltimas verses do PHP (.+) que ele j vem com um servidor embutido simples
que dispensa a instalao de um servidor adicional. ideal para testes e para usar em desenvolvimento.
Ele muito simples de usar. Basta abrir o terminal, entrar na pasta onde est o projeto e rodar:
php -S localhost:8080
Nesse comando, a opo -S indica que queremos o servidor embutido dele, o endereo localhost indica que
vamos acessar nosso servidor localmente e o valor a porta que o servidor vai rodar.
Captulo - Introduo a PHP - Como funciona um servidor HTTP - Pgina
Depois, basta navegar na URL http://localhost:/ e nosso servidor vai responder normalmente. Como
nosso projeto s tem arquivos .html, veremos as pginas no navegador iguaizinhas como vamos antes, sem
novidades.
Mas no precisa ser assim. Para executar cdigo do lado do servidor com PHP, basta renomear o arquivo
de .html para .php. Por exemplo: sobre.php. Com essa extenso, podemos agora misturar cdigo dinmico
PHP no meio do nosso HTML.
Todo cdigo PHP fca dentro de uma tag especial dele, pra diferenciar do cdigo HTML:
<?php
// cdigo PHP aqui
?>
E podemos misturar isso com HTML normalmente. O que for tag do PHP vai ser executada pelo servidor
PHP. O que no for, vai ser enviado para o browser do jeito que est.
<h1>HTML aqui</h1>
<?php
// cdigo PHP aqui
?>
<p>Mais HTML</p>
Vamos ver muitas coisas com PHP ao longo do curso. Por enquanto, vamos fazer um exerccio que apenas
mostra o ano atual no rodap da pgina de sobre. Para acessar o ano atual, podemos fazer:
<?php
print date('Y');
?>
Chamamos a funo date do PHP passando como argumento o formato que queremos a sada. No caso, Y
indica que queremos o ano apenas. Veja outros formatos em: http://www.php.net/date
A funo date devolve a data mas no mostra na tela. O comando print pega esse valor e mostra na tela.
. Pnnn snnvn mn:s: :Ns1ntnXo oo PHP vmcnsn
O site ofcial do PHP o http://php.net e l voc encontra downloads e cdigo fonte completo.
Captulo - Introduo a PHP - Para saber mais: instalao do PHP em casa - Pgina
W:Noows
Para facilitar a instalao do PHP e dependncias no Windows, existe um pacote famoso chamado WAMP
da BitNami. Ele instala o PHP, o MySQL e o servidor Apache em um clique, alm de vrias dependncias.
Basta fazer o download e executar o instalador: http://bitnami.com/stack/wamp
Depois de instalado, conseguimos acessar o binrio do PHP pela linha de comando atravs de um menu. V
em Iniciar -> BitNami Application Stack -> Use Application Stack.
Mnc v L:Ncx
Costumam vir j com o PHP instalado. Verifque apenas se a vero igual ou superior a ., que precisamos
pro curso. Se for mais antiga, consulte o gerenciador de pacotes do seu sistema para atualizar.
. Exvncc:os: vxvcc1nNoo o PHP
) Nosso primeiro passo executar o servidor local do PHP. Para isso, abra o terminal, entre na pasta do
projeto e execute o servidor do PHP:
$ cd Desktop/mirror-fashion/
$ php -S 0.0.0.0:8080
Os vNovnvos oo svnvvn nc:t1:N oo PHP
O argumento -S habilita o servidor do PHP. Como argumento, ele recebe um IP e uma porta.
Quando passamos ..., estamos habilitando todos os IPs da mquina; isso quer dizer que o
servidor acessvel tanto na prpria mquina quanto via rede. Isso til para testarmos nosso
projeto em dispositivos mveis conectados na rede, por exemplo.
Emcnsn: :Ns1ntnXo oo PHP
Na Caelum, o PHP j est instalado. Para instalar em casa, veja o apndice no fnal da apostila
com guia de instalao.
) Abra o navegador e acesse http://localhost:. Voc dever ver a pgina da Mirror Fashion sendo
servida pelo PHP agora.
Para testarmos nossa instalao do PHP, vamos implementar um funcionalidade bem simples mas muito
til. No rodap que criamos na pgina Sobre, colocamos uma informao de copyright. Queremos colo-
car o ano atual do lado, mas sem precisar atualizar o valor todo ano.
Captulo - Introduo a PHP - Exerccios: executando o PHP - Pgina
Isto , queremos saber o ano atual dinamicamente e inserir esse valor na pgina. Com PHP, isso muito
simples: basta usar a funo date.
) Primeiro renomeie a extenso do arquivo sobre.html para sobre.php. Lembre que umarquivo PHP nada
mais que um HTML com instrues especiais pra rodar no servidor.
) O texto que descreve a Mirror Fashion fala de sua fundao em . Acrescente uma frase dinmica no
texto que indica h quantos anos a empresa foi fundada.
Fundada h <?php print date("Y"); ?> anos,...
) Repare que no lugar de sair a quantidade de anos, estamos exibindo o ano atual. Para resolver isso, vamos
subtrair o ano atual menos a data de fundao da Mirror Fashion:
Fundada h <?php print date("Y") - 1932; ?> anos,...
) (opcional) A funo date recebe como parmetro o formato que desejamos para nossa data. Teste outros
valores, como m ou l.
Consulte outros valores na documentao: http://www.php.net/date
. Rvnvnovv:1nmvN1o ov coo:co com:Nctcov
Umrecurso muito comumde aparecer em todo projeto a criao de umcabealho e umrodap nico para
o site que so aproveitados em todas as pginas. Cada pgina individual s muda o miolo.
O problema que, com HTML puro, a nica soluo fcar copiando e colando o cdigo do cabealho em
todas as pginas. Isso muito ruim. Se um dia precisarmos mudar um item no menu do cabealho, temos
zilhes de arquivos pra mexer.
O HTML no tem recursos pra que deixemos esse cdigo centralizado em um s lugar. Existem algumas
solues que, ou so muito limitadas ou tm problemas srios de suporte nos navegadores. Ento, do ponto
de vista do HTML no h outro jeito: precisamos copiar e colar o cdigo em toda pgina.
Mas, usando uma tecnologia no servidor como PHP, podemos fazer esse copiar e colar dinamicamente.
Criamos um arquivo .php separado que encapsula o cdigo do cabealho. Depois, inclumos esse cdigo
em todas as pginas usando o comando include.
<?php
include("_cabecalho.php");
?>
Repare que o HTML fnal que o browser recebe o mesmo de antes. A incluso do cabealho acontece no
servidor.
Captulo - Introduo a PHP - Reaproveitamento de cdigo com include - Pgina
. Exvncc:os: :Nctcov
) A partir do prximo captulo, vamos desenvolver a pgina de detalhes de produto completa. Mas o pri-
meiro passo nosso criar a estrutura bsica do arquivo. Isto inclui o doctype, tag html, head, body, title.
Crie o arquivo produto.php com uma base parecida com essa:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Repare que j inclumos algumas tags que vimos antes no curso. Em especial, o charset como UTF-, a
tag viewport para nossa pgina funcionar bem em mobile e os arquivos CSS de reset e estilos.
Como todas as pginas fazem parte da Mirror Fashion, muito comum que tenham o mesmo cabealho.
Tnhamos criado umcabealho bacana na index.phpe, para termos o mesmo cabealho no produto.php,
teramos que copiar e colar o cdigo do <header>.
O HTML sozinho no tem recursos muito interessantes para se reaproveitar pedaos de cdigo entre
pginas. Mas no servidor isso bem fcil de resolver. Com PHP, basta usar a funo include.
) Primeiro, crie um arquivo chamado _cabecalho.php (CUIDADO: o arquivo comea com _) e coloque
o contedo do cabealho que temos na home com a tag <header>. Esta uma boa hora para usar o
cortar-e-colar:
<header class="container">
<h1>
<img src="img/logo.png" alt="Mirror Fashion">
</h1>
<p class="sacola">
</p>
<ul>
Captulo - Introduo a PHP - Exerccios: include - Pgina
<li><a href="#">Cartao Fidelidade</a></li>
</ul>
</nav>
</header>
) Na pgina produto.php, inclua _cabecalho.php logo no incio do body:
<body>
<?php include("_cabecalho.php"); ?>
</body>
) Teste a nova pgina acessando http://localhost:/produto.php. O cabealho deve aparecer includo.
Verifque o HTML da pgina pelo navegador.
) Crie o arquivo _rodape.php para fazermos a mesma coisa com o rodap copiando o contedo do
<footer> que havamos criado na Home:
<footer>
<ul class="social">
</ul>
</div>
</footer>
) Na pgina produto.php, inclua _rodape.php logo antes de fechar o body usando o include do PHP:
<body>
<?php include("_cabecalho.php"); ?>
<?php include("_rodape.php"); ?>
</body>
) Oque ganhamos fazendo o include comPHP? Qual o trabalho de editar o logo da empresa, por exemplo,
se tivermos pginas no site?
) (opcional) Aplique o cabealho e o rodap que acabamos de criar tambmna Home e na pgina de Sobre.
Para isso, transforme esses arquivos em PHP renomeando suas extenses e use o include.
Captulo - Introduo a PHP - Exerccios: include - Pgina
. Pnnn snnvn mn:s: n:Non mn:s vtvx:n:t:onov comvnn:Kvv:s
Podemos passar variveis de umarquivo para o outro durante o include. Por exemplo, a pgina do cabealho
pode receber um ttulo para imprimir no <title> ao invs de deixar um valor fxo.
<title><?php print $cabecalho_title; ?> </title>
E na pgina produto.php, defnimos a varivel antes de dar o include:
<?php
$cabecalho_title = "Produto da Mirror Fashion";
?>
. Exvncc:os ovc:oNn:s: vnn:Kvv:s vmPHP
) Edite o arquivo _cabecalho.php para incluir toda a estrutura inicial do arquivo HTML e no s o topo
da pgina. Coloque desde o doctype, abertura da tag html, head, body at o header em si.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header class="container">

</header>
Agora remova esse pedao do doctype, html, head e body de dentro das pginas que fazamos include. A
ideia que todo esse pedao agora reaproveitvel no include e no apenas o header em si.
) Mas algumas partes do HTML que estamos incluindo agora no _cabecalho.php devem ser dinmicas. O
<title> por exemplo no deveria fcar fxo no include, mas deveria ser diferente para cada pgina.
Uma forma de resolver isso passando variveis entre as pginas.
Na produto.php, antes de incluir o cabealho, defna uma varivel com o ttulo:
Captulo - Introduo a PHP - Para saber mais: ainda mais fexibilidade com variveis - Pgina
<?php
$cabecalho_title = "Produto da Mirror Fashion";
?>
E no _cabecalho.php, vamos imprimir essa varivel dentro do <title>:
<title><?php print $cabecalho_title; ?> </title>
Repare como agora o ttulo parametrizvel. Defna um ttulo nas outras pginas que fazem uso do
incinclude tambm (Home, Sobre etc).
) Que outros elementos desse cabealho podemmudar entre pginas diferentes almdo ttulo? Implemente
solues parecidas usando variveis pra resolver outros casos de include dinmico.
Exemplo: cada pgina pode incluir um arquivo CSS prprio, com seu estilo. No vamos querer listar
todos os arquivos CSS no _cabecalho.php. O melhor cada pgina declarar qual arquivo .css adicional
quer incluir alm dos bsicos.
Na produto.php, podemos querer incluir um produto.css. Vamos usar uma varivel pra isso:
<?php $cabecalho_css = '<link rel="stylesheet" href="css/produto.css">'; ?>
E no _cabecalho.php podemos incluir essa varivel no meio do nosso head:
<?php print $cabecalho_css; ?>
) Nem todas as pginas precisam de um arquivo .css extra. Do jeito que fzemos, se a varivel
$cabecalho_css no for defnida, um erro acontecer. Isso ruim.
Uma forma de evitar tentar imprimir a varivel apenas se ela existir, e ignorar isso caso ela no esteja
defnida. Ou seja, a varivel opcional.
Podemos fazer isso no PHP indicando que o erro de varivel no encontrada pode ser ignorado. Para
isso, usamos o @ na frente da varivel:
<?php print @$cabecalho_css; ?>
Captulo - Introduo a PHP - Exerccios opcionais: variveis em PHP - Pgina
C
Progressive enhancement e mobile-frst
Qualquer tolo consegue escrever cdigo que um computador consiga entender. Bons programadores escrevem
cdigo que humanos conseguem entender.
Martin Fowler
Vamos criar a prxima pgina da nossa loja, que ser uma pgina para mostrar os detalhes de um produto
aps o usurio clicar em um produto na lista da home. Essa pgina vai mostrar uma foto grande, mostrar
opes de cores e preo, exibir a descrio do produto e permitir que o usurio faa a compra.
Nosso designer criou um design para essa pgina, com estilo mais minimalista e focado no contedo a ser
exibido.
Eis nosso design aplicado na tela do iPhone para visualizarmos:
. FonmctKn:o ov comvnn
Um dos aspectos fundamentais dessa pgina permitir que o usurio escolha a variao correta do produto
para ele. Repare que ele pode escolher a cor e o tamanho e depois comprar o produto especfco que escolheu.
Quando clicar nesse boto de comprar, as escolhas do usurio precisamser enviadas para o servidor processar
a compra em si. So, claro, parmetros que o usurio pode escolher.
Esquea por um instante o design que vimos antes e pense na funcionalidade que estamos tentando im-
plementar. Queremos uma maneira do usurio escolher entre diversas opes e enviar sua escolha para o
servidor. Falando assim, quase bvio que estamos descrevendo um <form>.
Mais: se queremos escolher, por exemplo, a cor da roupa dentre opes possveis, temos componentes
especfcos de formulrio para isso. Podemos fazer um combobox com <select> ou implementar com
radio buttons. Vamos fazer esse ltimo.
<form>
<input type="radio" name="cor"> Verde
<input type="radio" name="cor"> Rosa
<input type="radio" name="cor"> Azul
</form>
Muito simples e funciona. Mas tem vrias falhas de acessibilidade e HTML semntico. O texto que descreve
cada opo, por exemplo, no deve fcar solto na pgina. Devemos usar o elemento <label> para representar
Captulo - Progressive enhancement e mobile-frst - Formulrio de compra - Pgina
isso. E associar com o respectivo input.
<form>
<input type="radio" name="cor" id="verde">
<label for="verde">Verde</label>
<input type="radio" name="cor" id="rosa">
<label for="rosa">Rosa</label>
<input type="radio" name="cor" id="azul">
<label for="azul">Azul</label>
</form>
Mais ainda, repare que temos que explicar para o usurio o que ele est escolhendo com esses radio buttons.
a frase "Escolha a cor que vemos no design. Como escrev-la no HTML? Um simples <p>? No.
Semanticamente, esses inputs representam a mesma coisa e devem ser agrupados em um <fieldset> que,
por sua vez, recebe um <legend> com a legenda em texto apropriada.
<form>
<fieldset>
<legend>Escolha a cor</legend>
<label for="verde">Verde</label>
<label for="rosa">Rosa</label>
<label for="azul">Azul</label>
</fieldset>
<input type="submit" class="comprar" value="Comprar">
</form>
Aproveitamos e colocamos o boto de submit para enviar a escolha da compra.
Podemos ainda melhorar mais. Em vez de mostrar s o nome da cor (Verde) no label, podemos colocar a
foto de verdade da roupa naquela cor. Uma imagem vale mais que mil palavras. Mas, claro, isso para quem
enxerga. Para leitores de tela e outros browsers no visuais, vamos usar o atributo alt= na imagem para
manter sua acessibilidade.
<form>
<fieldset>
Captulo - Progressive enhancement e mobile-frst - Formulrio de compra - Pgina
<legend>Escolha a cor</legend>
<label for="verde">
<img src="produto-verde.png" alt="Produto na cor verde">
</label>
<label for="rosa">
<img src="produto-rosa.png" alt="Produto na cor rosa">
</label>
<label for="azul">
<img src="produto-azul.png" alt="Produto na cor azul">
</label>
</fieldset>
</form>
Se implementarmos esse cdigo, sem visual nenhum, e testarmos no browser, teremos uma funcionalidade
completa, funcional e acessvel. Isso fantstico. Resolvemos o visual depois.
. Exvncc:o: vonmctKn:o on vKc:Nn ov vnooc1o
Vamos implementar nossa pgina de produto. O primeiro passo a construo de um HTML semntico.
) Edite a pgina produto.php e entre os includes do cabealho e do rodap adicione um formulrio com
radios e labels para a escolha da cor. Tambm usaremos o atributo alt por questes de acessibilidade:
<div class="produto">
<h1>Fuzzy Cardigan</h1>
<h2>por apenas R$ 129,00</h2>
<form>
<fieldset class="cores">
<legend>Escolha a cor:</legend>
<input type="radio" name="cor" value="verde" id="verde" checked>
<label for="verde">
<img src="img/produtos/foto2-verde.png"
alt="verde">
</label>
Captulo - Progressive enhancement e mobile-frst - Exerccio: formulrio da pgina de produto - Pgina
<input type="radio" name="cor" value="rosa" id="rosa">
<label for="rosa">
<img src="img/produtos/foto2-rosa.png"
alt="rosa">
</label>
<input type="radio" name="cor" value="azul" id="azul">
<label for="azul">
<img src="img/produtos/foto2-azul.png"
alt="azul">
</label>
</fieldset>
</form>
</div>
) Teste oHTMLdoexerccioanterior. Veja seufuncionamentoseminterferncia doCSS e doJS que faremos
depois.
. Dvs:cN mon:tv-v:ns1
Quando criamos a home page do projeto no sabamos ainda otimizar nosso site para dispositivos mveis.
Vimos o design e codifcamos originalmente pensando nos browsers do desktop. Mais tarde, aplicamos os
conceitos de media queries e viewport para ajustar o projeto para telas menores.
Esse tipo de fuxo de desenvolvimento muito comum. Desenvolver para desktopprimeiro, que so a maioria
dos usurios, e depois ajustar o design para mobile. Mas isso no o melhor, nem o mais fcil.
Muita gente argumenta a favor de uma tcnica inversa, mobile-frst. Isso signifca fazer o design mobile
primeiro, implementar o cdigo para mobile primeiro e, depois, ajustar para o desktop. O resultado fnal
deve ser um site que funciona tanto no desktop quanto no mobile, como antes, s mudamos a ordem do
fuxo de desenvolvimento.
Na prtica, o que muita gente descobriu que criar pensando no ambiente mais restritivo (o mobile) e depois
adaptar para o ambiente mais poderoso (desktop) mais fcil que fazer o contrrio. desktop-frst acaba sendo
difcil por colocar o mobile, que complicado, s no fnal do projeto.
Um exemplo prtico que passamos na nossa home page. Fizemos antes um menu com CSS usando hover
para abrir subcategorias. Isso algo super comum e funciona muito bem no desktop. Mas um desastre no
mobile, onde no existe hover. Podemos agora repensar nossa home para ser compatvel com mobile. Mas
se tivssemos, desde o incio, pensando em mobile, talvez nem crissemos o menu hover.
Captulo - Progressive enhancement e mobile-frst - Design mobile-frst - Pgina
Outro exemplo: os links do menu so bastante inacessveis emmobile. As opes esto muito prximas uma
das outras e tocar na opo certa com o dedo (gordo!) muito difcil. No desktop no h esse problema pois
usamos mouse, por isso no pensamos nisso antes.
Se tivssemos comeado pelo mobile, j teramos feito os links maiores e mais espaados pensando nos dedos
gordos (costuma-se recomendar um valor mdio de px para cada item clicvel).
E, fazendo tudo maior e mais espaado, assim como evitando o hover, o site funciona bem no mobile mas,
no s isso, funciona muito bem no desktop. Um site bem feito para mobile funciona perfeito no desktop
mas o contrrio nem sempre verdade. Por isso o mobile-frst.
Repare que o designer j mandou a pgina de produtos para ns pensando em mobile-frst: pouca informa-
o, s o essencial, prioritrio. Botes grandes e espaados. Nenhum efeito de hover. Tudo numa coluna s
de informaes para dar scroll, j que a tela pequena.
Nem sabemos ainda como ser a verso desktop, e no interessa por enquanto.
Mn:s sonnv mon:tv-v:ns1
No vamos nos estender no assunto aqui no curso mas, se interessar, existe um livro s sobre o
tema, chamado Mobile-frst de Luke Wroblewski. Em portugus, voc pode ler mais no livro A
Web Mobile do instrutor da Caelum Srgio Lopes.
. Pnocnvss:vv vNnnNcvmvN1
No exerccio vamos ver como usar CSS para estilizar aquele formulrio anterior em algo parecido com o de-
signdesejado. Mas o importante perceber como temos uma pgina funcional e acessvel antes de pensarmos
em visual.
O papel do HTML esse. Estruturar o contedo da pgina de maneira semntica e acessvel, provendo uma
base de funcionalidades para a pgina sem relao imediata com visual.
O CSS e o visual dele so uma segunda camada, que vem em cima do HTML semntico e bem construdo.
Depois, vamos ver at que um pouco de JavaScript necessrio para implementar outro recurso da pgina.
Mas ele opcional. S o HTML, sozinho, seria sufciente para uma experincia completa e funcional da
pgina.
Esse tipo de pensamento o progressive enhancement novamente. Construir uma base slida, simples,
portvel e acessvel e, depois, progressivamente, incrementar a pgina com recursos mais avanados tanto
de estilo com CSS quanto de comportamento com JavaScript.
Hoje no mercado h muita falta de profssionais com experincia e completo entendimento das implicaes
de progressive enhancement. Amadores focamemolhar o design do Photoshop e copiar na pgina. Profssi-
onais focamemexperincias Web acessveis, semnticas e portveis, onde o design temumpapel decorativo.
Captulo - Progressive enhancement e mobile-frst - Progressive enhancement - Pgina
. Box moovt v nox-s:z:Nc
O Box Moovt vnonXo oo WC
Quando alteramos as propriedades de elementos dentro de uma pgina, precisamos estar cientes de como
essas alteraes se comportaro na presena de outros elementos. Uma forma de entender o impacto causado
pela mudana pensar no box model ou modelo em caixa em portugus.
Obox model constitudo de quatro reas retangulares: contedo (content), espaamento (padding), bordas
(borders) e margens (margin) conforme a fgura abaixo:
Essas reas se desenvolvem de dentro para fora, na ordem listada abaixo:
contedo (content): aquilo que ser exibido;
espaamento (padding): distncia entre a borda e o contedo;
borda (borders): quatro linhas que envolvem a caixa (box);
margem (margin): distncia que separa um box de outro.
Tendo em mente o box model, precisamos ter ateno na alterao de propriedades de um elemento visua-
lizando o impacto em sua apresentao ao lidar com as propriedades listadas acima.
Box-s:z:Nc
Os primeiros a perceberem que o box model do CSS era esquisito foi a Microsof. J no IE em quirks mode
eles trocaram o box model para que o width signifcasse o tamanho total at a borda. A ideia era boa mas
o problema foi eles atropelarem a especifcao da poca, o que acabou criando boa parte dos problemas de
incompatibilidade entre navegadores. O IE em standards mode usa o box model ofcial e esse o padro a
partir do IE.
Mas como a ideia, no fm, era boa, isso acabou se transformando no box-sizing do CSS, que nos permite
trocar o box model que queremos usar.
Por padro, todos os elementos tm o valor box-sizing: content-box o que indica que o tamanho dele
defnido pelo seu contedo apenas -- em outras palavras, o tal box model padro que vimos antes. Mas
Captulo - Progressive enhancement e mobile-frst - Box model e box-sizing - Pgina
podemos trocar por box-sizing: border-box que indica que o tamanho agora levar emconta at a borda
ou seja, o width ser a soma do contedo com a borda e o padding.
. Exvncc:os: vKc:Nn ov vnooc1o
Vamos estruturar nosso CSS para implementar a funcionalidade de troca de cores. A cada passo, teste no
browser para ir acompanhando o resultado.
) Crie um novo arquivo produto.css na pasta css/.
) Em produto.php, importe o produto.css aps todos os outros csss:
<link rel="stylesheet" href="css/produto.css">
) Primeiro, vamos desenhar as bolinhas coloridas com pseudo-elementos do CSS usando um truque com
bordas redondas infnitas:
.cores label:after {
content: '';
display: block;
border-radius: 50%;
width: 50px;
height: 50px;
}
label[for=verde]:after {
background-color: #33CC66;
}
label[for=rosa]:after {
background-color: #FF6666;
}
label[for=azul]:after {
background-color: #6666FF;
}
Prximo passo estilizar a bolinha atualmente selecionada usando pseudo-classe :checked:
.cores input:checked + label:after {
border: 6px solid rgba(0,0,0,0.3);
}
Repare como a borda da bolinha selecionada aumenta o tamanho total da bolinha por causa do box model
padro. Uma soluo trocar o box model com a propriedade box-sizing:
Captulo - Progressive enhancement e mobile-frst - Exerccios: pgina de produto - Pgina
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Agora que temos as bolinhas coloridas visuais confguradas, a bolinha do input radio desnecessria.
Esconda-a:
.cores input[type=radio] {
display: none;
}
Para fechar a funcionalidade de escolha das cores, falta apenas exibir apenas a imagem atualmente seleci-
onada. Outra forma de falar isso que devemos esconder as imagens dos radios no selecionados. Podemos
usar um seletor avanado para isso:
.cores input:not(:checked) + label img {
display: none;
}
Refita sobre esse ltimo seletor. O que ele faz exatamente? Esteja certo de ter entendido cada parte dele
antes de prosseguir.
) Teste a pgina. A troca de imagens deve estar funcionando, apesar das coisas no estarem ainda posicio-
nadas corretamente.
) Com a troca de imagens funcionando, vamos implementar o posicionamento correto das bolinhas lado a
lado. Para isso, use position:absolute j que seus tamanhos so conhecidos:
position: absolute;
}
As bolinhas vo ser posicionadas com relao ao feldset cores, ento ele precisa estar posicionado. O
padding superior para abrir espao para as bolinhas:
.cores {
position: relative;
padding-top: 80px;
}
Cada bolinha um label:after, basta posicion-las absolutamente:
position: absolute;
top: 30px;
}
As bolinhas fcaramsobrepostas na esquerda. Para corrigir, basta colocar uma coordenada left diferente
para cada uma:
label[for=verde]:after {
left: 0;
}
label[for=rosa]:after {
left: 60px;
}
label[for=azul]:after {
left: 120px;
}
Teste o resultado. Um ponto importante de uma soluo responsiva que as imagens se adaptem reso-
luo. s vezes usamos imagens maiores e, quando a tela pequena, a imagem fca vazando para fora
do elemento pai.
) Uma forma de corrigir o problema anterior garantir que ela nunca passe o tamanho do pai com
max-width:
.cores label img {
display: block;
max-width: 100%;
}
Bcc No F:nvvox
Nosso max-width: no vai funcionar no Firefox. Neste navegador, o elemento fieldset
no respeita o comportamento correto de largura de um elemento e, assim, a largura da imagem
tambm fca incorreta (o bug j est registrado em https://bugzilla.mozilla.org/show_bug.cgi?
id=).
Para contornar o bug, podemos colocar a propriedade display com o valor table-column no
feldset:
fieldset {
display: table-column;
}
No entanto, ao fazer isso, quebraremos o nosso layout no Internet Explorer . Asoluo aplicar
essa regra somente no Firefox. Para isso, podemos colocar essa regra dentro de uma media query
que s vai funcionar nesse navegador. Por exemplo:
@media (min--moz-device-pixel-ratio:0) {
fieldset {
display: table-column;
}
}
) Comtoda a parte funcional e de posicionamento pronta, vamos estilizar alguns detalhes visuais da pgina.
Primeiro, detalhes de tipografa e espaamento para toda pgina de produtos:
.produto {
color: #333;
line-height: 1.3;
margin-top: 2em;
}
O nome do produto e seu preo tambm ganham estilo:
.produto h1 {
font-size: 1.8em;
font-weight: bold;
}
.produto h2 {
font-size: 1.2em;
font-style: italic;
margin-bottom: 1em;
}
O <legend> ganha um destaque:
.produto legend {
display: block;
font: bold 0.9em/2.5 Arial;
}
E por fm, o boto de comprar deve fcar em evidncia:
.comprar {
background: #91bd3c;
border: none;
color: #333;
font-size: 1.4em;
box-shadow: 0 1px 3px #777;
display: block;
padding: 0.5em 1em;
margin: 1em 0;
}
Teste e observe o estilo simples da pgina.
) (Opcional) - Quando selecionamos a bolinha, uma borda escura aparece. Use transition para fazer a
borda aparecer suavemente, como um fadein.
Adicione o seletor no incio de produto.css:
border: 6px solid rgba(0,0,0,0);
transition: 1s;
}
E podemos adicionar tambm um estilo para quando passar o mouse em cima da bolinha, como mostrar
uma borda mais leve, tambm no incio de produto.css:
.cores label:hover:after {
border: 6px solid rgba(0,0,0,0.1);
}
. Evotc:Noo o ovs:cN vnnn ovs1ov
Feito o design mobile-frst, hora de expandir o site para as verses maiores. Do ponto de vista de design,
signifca ajustar os elementos para melhor aproveitar o espao maior das telas de tablets e desktops. Do ponto
de vista de cdigo, usar media queries para implementar essas mudanas.
Um exemplo: imagine que, em telas maiores que px, queremos futuar uma imagem a esquerda:
img {
float: left;
}
}
Ao desenvolver mobile-frst, usamos muitas media queries do tipo min-width para implementar as mudan-
as para o tablet/desktop.
. Mvo:n qcvn:vs ov coN1voo
Ao escrever medias queries, voc precisa escolher algum valor para colocar l. o que chamamos de bre-
akpoints, os pontos onde seu layout vai ser ajustado por causa de uma resoluo diferente. E escrever bons
breakpoints essencial para um design responsivo de qualidade.
Eo que mais aparece de pergunta de quemest comeando comdesign responsivo : quais os valores padres
de se colocar nas media queries? E logo surge uma lista parecida de tamanhos comuns: px, px, px,
px, px, px. O pessoal chama essa prtica de device-driven breakpoints, pois so valores gerados
a partir de tamanhos de dispositivos.
Mas evite esse tipo de breakpoint. Essa lista pensa em meia dzia de tipos de dispositivos, mas obviamente
no atende todos (e os px de um Galaxy S?). Usar esses valores de media queries no garante que seu
design funcionar em todos os dispositivos, mas apenas nos dispositivos padres -- seja l o que for isso.
Prefra breakpoints com valores baseados no seu contedo. Ou seja, achar suas media queries a partir do seu
contedo e do seu design. Fica bem mais fcil garantir que sua pgina funciona em todos os dispositivos.
Na prtica, faa seu design mobile-frst, abra no navegador pequeno, v redimensionando a janela at achar
um ponto que o design quebra ou fca feio; anote o tamanho da janela e crie um breakpoint l. No precisa
ser um valor bonitinho como px. s vezes sua pgina vai quebrar justo em px. No tem problema.
. Exvncc:os: nvsvoNs:vv ovs:cN
Nosso layout anterior foi feito com mobile em mente, mobile-frst. A parte boa que, quando abrimos no
desktop, tudo funciona muito bem. Mas o espao maior no bem aproveitado.
Captulo - Progressive enhancement e mobile-frst - Evoluindo o design para desktop - Pgina
Se voc redimensionar a janela para um tamanho grande, notar que nosso contedo no est centralizado
na pgina como o restante. Lembre que criamos uma classe container para isso. Podemos us-la novamente.
) Na pgina produto.php, crie uma nova <div class="container"> ao redor do contedo da pgina. Isto
, ser uma div pai da div com class produto:

.........
</div>
</div>
Vamos usar media queries para ajustar o design para um estilo duas colunas.
Todo o CSS dos exerccios seguintes estar dentro de uma media query que s vai disparar em telas mai-
ores.
) Edite produto.css e adicione a media query em seu fnal:
}
Na verso desktop, queremos reposicionar as coisas emduas colunas. Vamos colocar a foto do produtos
esquerda posicionada emrelao ao .produto. Isso vai afetar o posicionamento das bolinhas ento vamos
trocar para posicion-las com float simples.
O cdigo curto mas cheio de detalhes. Acompanhe os comentrios para entender o papel de cada item.
) Dentro da media query anterior, acrescente: (no precisa copiar os comentrios):
.produto {
/* a foto vai se posicionar absolutamente com relao
a esse elemento, por isso preciso estar posicionado
*/
position: relative;
/* deixo 40% de espao em branco na esquerda para foto ocupar */
padding-left: 40%;
}
.cores {
/* eu era relative antes; reinicio para static para evitar
que a foto se posicione com relao a mim
*/
position: static;
Captulo - Progressive enhancement e mobile-frst - Exerccios: responsive design - Pgina
/* reinicio meu padding-top que tinha antes e no preciso mais */
padding: 0;
}
.cores label img {
/* imagem se posiciona absolutamente esquerda com relao ao .produto */
position: absolute;
top: 0;
left: 0;
}
/* as bolinhas coloridas tinham posio absoluta.
no precisamos mais, basta flutuar uma do lado da outra */
position: static;
float: left;
}
Teste a pgina e veja que a imagem deixa a desejar, pois ainda no est posicionada corretamente. Apesar
disso, o restante j comea a fcar no lugar.
) As prximas regras devemser adicionadas dentro da media query anterior. Voc pode at escrever apenas
as propriedades dentro dos seletores existentes.
Primeiro, para evitar que a imagem vaze para fora do espao que lhe foi determinado, vamos usar as
propriedades max-width e max-height:
.cores label img {
max-width: 35%;
max-height: 100%;
}
Podemos aumentar um pouco o tamanho das fontes usadas no produto. Como usamos em antes, basta
aumentar a fonte do elemento pai, o produto e tudo escala proporcionalmente.
.produto {
font-size: 1.2em;
}
ltimo ajuste uma pequena margem entre as bolinhas coloridas:
margin-right: 10px;
}
Captulo - Progressive enhancement e mobile-frst - Exerccios: responsive design - Pgina
. HTML INvc1 nnNcv
No design original, havia a previso de se criar uma maneira de selecionar tambmo tamanho da roupa alm
de sua cor. O tamanho algo simples em nossa loja. Temos valores possveis , , , , e .
E h muitas formas corretas e semnticas de implementar isso no formulrio. Pode ser um <select> com
esses valores, radio buttons ou, como vamos ver, o novo input range do HTML.
O <input type="range"> um componente novo do HTML com bom suporte j nos navegadores que
representa um slider numrico. Ele recebe atributos min e max com o intervalo numrico possvel. Op-
cionalmente, h o atributo step que indica de quanto em quanto o nmero deve pular (algo bem til para
tamanho de roupa, que s tem nmeros pares).
<input type="range" min="36" max="46" value="42" step="2" name="tamanho">
O legal de componentes HTML que eles so nativos dos browsers. Isso signifca que no precisamos de
trabalho para us-los ou estiliz-los. Eles j vm com estilo padro do navegador em questo o que bem
interessante. A interface padro familiar para o usurio.
Veja o range no Safari do iPhone:
E veja o mesmo componente no IE do Windows :
Visuais totalmente diferentes mas totalmente adaptados plataforma em questo.
Scvon1v no :Nvc1 nnNcv
Todos os browsers modernos suportam o input range. Voc ter problemas porm em verses
mais antigas. O IE s suporta a partir do , o Android a partir do ., e o Firefox no .
http://caniuse.com/input-range
Lembre que aqui no curso estamos estudando novas ideias. Se voc precisar suportar os na-
vegadores antigos nesse exerccio, sempre poder substituir por um <select> simples ou um
conjunto de radio buttons. Funcionalmente tero o mesmo resultado.
Captulo - Progressive enhancement e mobile-frst - HTML Input range - Pgina
. Exvncc:os: svtv1on ov 1nmnNno
) Implemente a funcionalidade de escolher o tamanho da roupa usando um input range do HTML, colo-
cando o cdigo a seguir logo abaixo do nosso primeiro feldset:
<fieldset class="tamanhos">
<legend>Escolha o tamanho:</legend>
<input type="range" min="36" max="46" value="42" step="2" name="tamanho" id="tamanho">
</fieldset>
Teste seu funcionamento nos browsers modernos.
) Temos dois feldsets, umpara escolher cor e outro, tamanho. No mobile, eles fcamumemcima do outro.
No desktop, podemos posicion-los lado a lado.
Dentro da media query anterior, acrescente:
fieldset {
margin: 1em 0;
min-width: 250px;
width: 45%;
}
. Tnnvtns
O uso de tabelas era muito comum h alguns anos para a defnio de reas. Seu uso para essa fnalidade
acabou se tornando prejudicial pela complexidade da marcao, o que difculta bastante a manuteno das
pginas. Alm disso havia uma implicao direta na defnio de relevncia do contedo das tabelas para os
indexadores de contedo por mecanismos de busca.
Ainda assim, hoje, quando queremos exibir uma srie de dados tabulares, indicado o uso da tag de tabela
<table>.
<table>
<tr>
<th>Ttulo da primeira coluna</th>
<th>Ttulo da segunda coluna</th>
</tr>
<tr>
<td>Linha 1, coluna 1.</td>
Captulo - Progressive enhancement e mobile-frst - Exerccios: seletor de tamanho - Pgina
</tr>
<tr>
</tr>
</table>
Note que na primeira linha <tr> da tabela, as clulas so indicadas coma tag <th>, o que til para diferenciar
seu contedo das clulas de dados.
Existemdiversas maneiras de se alterar uma estrutura de uma tabela, como por exemplo indicamos que uma
clula <td> ou <th> ocupa mais de uma linha de altura por meio do atributo rowspan, ou ento que ela ocupa
mais de uma coluna de largura com o uso do atributo colspan.
Podemos adicionar um ttulo nossa tabela com a tag <caption>.
Ainda existem as tags <thead>, <tfoot> e <tbody>, que servem para agrupar linhas de nossa tabela. Vale
ressaltar que dentro do grupo <thead> devemos ter apenas linhas contendo a tag <th> como clula.
Outra tag de agrupamento que temos na tabela a que permite que sejam defnidas as colunas, a tag
<colgroup>. Dentro dessa tag defnimos uma tag <col> para cada coluna, e dessa maneira podemos adi-
cionar alguns atributos que infuenciaro todas as clulas daquela coluna.
A seguir um exemplo completo de como utilizar essas tags dentro de uma tabela.
<table>
<caption>Quantidade e preo de camisetas.</caption>
<colgroup>
<col width="10%">
<col width="40%">
<col width="30%">
<col width="20%">
</colgroup>
<thead>
<tr>
<th rowspan="2">
<th colspan="2">Quantidade de Camisetas</th>
<th rowspan="2">Preo</th>
</tr>
<tr>
<th>Amarela</th>
<th>Vermelha</th>
</tr>
</thead>
<tfoot>
<tr>
Captulo - Progressive enhancement e mobile-frst - Tabelas - Pgina
<td>
<td>Total de camisetas amarelas: 35</td>
<td>Total de camisetas vermelhas: 34</td>
<td>Valor total: $45.00</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Polo</td>
<td>12</td>
<td>5</td>
<td>$30.00</td>
</tr>
<tr>
<td>Regata</td>
<td>23</td>
<td>29</td>
<td>$15.00</td>
</tr>
</tbody>
</table>
. Exvncc:os: ov1ntnvs
) Crie a seo de detalhes logo abaixo da div.produto, mas ainda dentro do container:
<div class="detalhes">
<h2>Detalhes do produto</h2>
<p>Esse o melhor casaco de Cardig que voc j viu. Excelente
material italiano com estampa desenhada pelos artesos da
comunidade de Krotor nas ilhas gregas. Compre j e receba hoje
mesmo pela nossa entrega a jato.</p>
</div>
) O estilo bastante simples, apenas para deixar o texto mais bonito:
.detalhes {
margin: 2em 0;
}
.detalhes h2 {
font-size: 1.5em;
line-height: 2;
}
.detalhes p {
Captulo - Progressive enhancement e mobile-frst - Exerccios: detalhes - Pgina
margin: 1em 0;
font-size: 1em;
line-height: 1.5;
max-width: 36em;
}
.detalhes {
font-size: 1.2em;
}
}
) Crie uma tabela com caractersticas do produto contendo informaes tcnicas. Adicione dentro da div
detalhes:
<table>
<thead>
<tr>
<th>Caracterstica</th>
<th>Detalhe</th>
</tr>
</thead>
<tbody>
<tr>
<td>Modelo</td>
<td>Cardig 7845</td>
</tr>
<tr>
<td>Material</td>
<td>Algodo e poliester</td>
</tr>
<tr>
<td>Cores</td>
<td>Azul, Rosa e Verde</td>
</tr>
<tr>
<td>Lavagem</td>
<td>Lavar a mo</td>
</tr>
</tbody>
</table>
) Estilize a tabela para deix-la mais agradvel. Use o seletor de flhos mltiplos para um estilo zebrado.
table {
border-spacing: 0.2em;
border-collapse: separate;
Captulo - Progressive enhancement e mobile-frst - Exerccios: detalhes - Pgina
}
thead {
background-color: #999;
}
thead th {
font-weight: bold;
padding: 0.3em 1em;
text-align: center;
}
td {
padding: 0.3em;
}
tr:nth-child(2n) {
background-color: #ccc;
}
td:first-child {
font-style: italic;
}
. Exvncc:os ovc:oNn:s: vcNoo
) Para implementarmos o fundo cinza em tela cheia, vamos precisar de um novo elemento pai para conter
todos os elementos da pgina. Crie um <div class="produto-back"> ao redor do div container que
tnhamos antes.
Apenas para referncia, nesse momento, seu HTML deve estar mais ou menos assim:
<div class="produto-back">
...
</div>
<div class="detalhes">
...
</div>
</div>
</div>
) O estilo bastante simples, apenas usando uma cor e bordas sutis para criar um efeito mais elegante:
.produto-back {
background-color: #F2F2F2;
margin-top: 1em;
border-top: 2px solid #ccc;
}
Captulo - Progressive enhancement e mobile-frst - Exerccios opcionais: fundo - Pgina
.cores label img {
border: 2px solid #ccc;
}
Captulo - Progressive enhancement e mobile-frst - Exerccios opcionais: fundo - Pgina
C
PHP: parmetros e bancos de dados
Antes do sofware ser reusvel, ele precisa ser usvel.
Ralph Johnson
. Scnm:ssXo oo vonmctKn:o
Todo formulrio criado no HTML temseus dados enviados para o servidor quando submetido. Cada campo
do formulrio enviado como parmetro na requisio feita ao servidor.
No formulrio, podemos indicar que pgina (URL) vai receber os dados preenchidos. s especifcar o atri-
buto action. No nosso exemplo, temos um formulrio na pgina produto.php e vamos criar uma prxima
pgina, checkout.php, que vai receber o produto escolhido e deixar o usurio proceder com a compra.
No formulrio de produto ento fazemos:
<form action="checkout.php">
H ainda umoutro atributo do formque indica a maneira como os dados so enviados. o atributo method que
pode receber dois valores: GET ou POST. Ambos os mtodos enviam os dados do formulrio ao servidor,
mas o GET faz isso via parmetros na URL enquanto o POST envia os dados no corpo da requisio (e,
portanto, no visvel na barra de endereos).
<form action="checkout.php" method="POST">
. PnnXmv1nos comPHP
Os dados enviados no formulrio so recebidos no PHP e podemos acess-los atravs de variveis do prprio
PHP: $_GET e _POST, dependendo de qual foi o mtodo do formulrio.
Para acessar o valor de umcerto campo preenchido, precisamos saber o nome dele. No HTMLdo formulrio,
sempre que criamos um componente, damos um name a ele:
<input type="text" name="mensagem">
No PHP, podemos acessar cada parmetro individualmente usando uma sintaxe de arrays:
<? = $_GET["mensagem"] ?>
ou
<? = $_POST["mensagem"] ?>
Imvn:m:Noo vnn:Kvvt comPHP
At o captulo anterior, quando queramos imprimir algo na tela usamos a construo:
<?php print $dado; ?>
Mas o PHP permite uma sintaxe mais curta para declarar um bloco de cdigo quando a nica
ao imprimir algo e no h vrias linhas de cdigo.
<?= $dado ?>
uma sintaxe mais curta que a primeira e tem exatamente o mesmo efeito.
No prximo exerccio, vamos criar uma pgina simples de checkout que, por enquanto, apenas mostra uma
mensagem de confrmao para o usurio seguida dos parmetros que foram submetidos no formulrio.
. L:s1ns ov ovv:N:Xo No HTML
Quando falamos de listas em HTML, sempre lembramos da <ul> e da <ol>. Essas so listas mais clssicas,
mudando apenas que uma no tem ordem e a outra tem.
Mas existe uma terceira lista, que semanticamente serve para defnir itens. uma lista de termos e suas
respectivas defnies. Se quisssemos criar uma lista das siglas de cursos da Caelum e seu respectivo nome,
podemos fazer assim:
Captulo - PHP: parmetros e bancos de dados - Parmetros com PHP - Pgina
<dl>
<dt>WD-43</dt>
<dd>Desenvolvimento Web com HTML, CSS e JavaScript</dd>
<dt>WD-47</dt>
<dd>Programao front end avanada com JavaScript e jQuery</dd>
</dl>
A lista a DL e cada termos representado por um DT seguindo por sua defnio em um DD.
. Exvncc:os: cnvcoc1 on comvnn
) Crie o arquivo checkout.php com uma estrutura bsica.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Checkout Mirror Fashion</title>
</head>
<body>
<h1>tima escolha!</h1>
<p>Obrigado por comprar na Mirror Fashion!
Preencha seus dados para efetivar a compra.</p>
</body>
</html>
No vamos usar o menu da Mirror Fashion nessa pgina, para criar uma experincia de checkout mais
imersiva.
) O formulrio na pgina de produto precisa enviar os dados escolhidos para a pgina de checkout. Para
isso, nosso formulrio deve indicar para onde ser submetido.
Altere a tag <form> no arquivo produto.php para apontar para nossa nova pgina adicionando o atributo
action:
<form action="checkout.php">
Abra a pgina de produto no navegador e teste o submit. Repare como a pgina de checkout chamada
e os parmetros escolhidos na pgina anterior vo junto na URL.
) Os parmetros enviados no captulo anterior aparecemna URL. Isso porque nosso formulrio, por padro,
do tipo GET. Podemos trocar para o tipo POST e, assim, os parmetros sero enviados mas no estaro
Captulo - PHP: parmetros e bancos de dados - Exerccios: checkout da compra - Pgina
visveis na URL.
Altere a tag <form> no arquivo produto.php para enviar via POST adicionando o atributo method:
<form action="checkout.php" method="POST">
Na pgina checkout.php podemos pegar os valores submetidos atravs de variveis do PHP e exibir esses
valores na tela. Adicione na pgina de checkout as informaes de cor e tamanho escolhidos. Use uma
lista de defnies DL com DT/DD pra isso:
<h2>Sua compra</h2>
<dl>
<dt>Cor</dt>
<dd><?= $_POST["cor"] ?> </dd>
<dt>Tamanho</dt>
<dd><?= $_POST["tamanho"] ?> </dd>
</dl>
Teste acessando um produto e clicando em comprar. Os valores escolhidos devem aparecer na pgina de
checkout, atravs dos parmetros escolhidos.
Teste vrias vezes, com escolhas diferentes, pra ver como nossa pgina de checkout dinamicamente
construda com os parmetros enviados.
) Imagine que vamos ter vrios produtos diferentes na loja, todas enviando as compras pra nossa pgina de
checkout. E l queremos saber qual o nome do produto est sendo comprado (almda cor e do tamanho).
Podemos passar mais um parmetro para a pgina de checkout com o nome do produto. Use um input
hidden pra passar essa informao. Na pgina produto.php, adicione dentro do form um input hidden:
<input type="hidden" name="nome" value="Fuzzy Cardigan">
Por fm, na pgina checkout.php, adicione a impresso do parmetro nome dentro da lista de defnies
que fzemos antes:
<dt>Produto</dt>
<dd><?= $_POST["nome"] ?> </dd>
Teste o funcionamento do hidden fazendo uma nova compra de produto.
) Na pgina produto.php, mude o action do formulrio para GETao invs do POSTque temos hoje. Teste
tudo de novo. O que muda? Qual a diferena? O que precisa ser alterado no checkout?
) Alm do nome do produto, passe tambm o preo do produto escolhido atravs de um input hidden.
Imprima essa informao na DL da pgina de checkout.
Captulo - PHP: parmetros e bancos de dados - Exerccios opcionais - Pgina
Crie ainda um outro input hidden pra passar o ID.
. BnNco ov onoos v SQL
Na maioria dos sistemas Web, os dados do negcio fcam separados em um banco de dados ao invs de fcar
escritos diretamente no HTML. Em uma loja virtual como a nossa, os produtos seriam cadastrados nesse
banco de dados externo e depois seus dados so exibidos na pgina produto.php.
Um banco de dados como uma grande planilha do Excel que possui vrias tabelas dentro. Cada tabela tem
colunas com campos especfcos e muitas linhas com os dados cadastrados. Podem existir relaes entre as
tabelas.
Figura .: Exemplo de uma tabela com produtos da loja virtual
Para manipular os dados dessa tabela, usamos uma linguagem separada conhecida como SQL. Seu papel
permitir que faamos buscas nas tabelas por certos tipos de dados e que possamos inserir, remover e atualizar
dados.
uma linguagem a mais pra aprender, mas bem diferente das que vimos at agora como PHP ou JavaScript.
O SQL serve apenas para acessar bancos de dados e bem mais simples.
Por exemplo, se queremos acessar todas as informaes da tabela com nome produtos, fazemos:
SELECT * FROM produtos
O comando SELECT indica que estamos selecionamos dados. O asterisco indica que queremos todos os
dados. E o FROM produtos aponta o nome da tabela.
Podemos selecionar apenas um dado especfco. Por exemplo, apenas os nomes dos produtos:
SELECT nome FROM produtos
Captulo - PHP: parmetros e bancos de dados - Banco de dados e SQL - Pgina
Vamos ver outros recursos do SQL mais pra frente. Mas no foco do curso. Para se aprofundar no tema,
recomendamos esse curso online do Alura:
http://www.alura.com.br/cursos-online-introducao/banco-de-dados-sql
. MvSQL v vnvMvAom:N
Existem muitos bancos de dados no mercado, como MySQL, Oracle, SQL Server, DB, Postgre, SQLite.
Todos eles aceitam comandos SQL que vimos antes, com pequenas variaes apenas.
No curso, usaremos o MySQL que um dos bancos mais usados no mundo e bastante usado por programa-
dores PHP. quase uma escolha natural.
http://www.mysql.com
Para ajudar a visualizar e administrar o MySQL podemos instalar alguma interface grfca compatvel. O
prprio MySQL tem um produto chamado Workbench que um programa Desktop pra isso. Mas uma
opo muito comum de encontrar no mercado e em empresas de hosting o phpMyAdmin.
Ele um administrador de MySQL escrito em PHP para Web e que roda num servidor normal e pode ser
acessado direto no navegador. Isso faz dele uma ferramenta verstil e til para acessar bancos de dados
remotos.
Vamos usar o phpMyAdmin no curso. Basta baixar o zip no site deles e subir um servidor php na pasta dele,
como fzemos na pasta do nosso prprio projeto.
http://www.phpmyadmin.net/
. Pnnn snnvn mn:s: :Ns1ntnXo oo MvSQL vmcnsn
O MySQL pode ser baixado em https://dev.mysql.com/downloads/mysql/
L, escolha seu sistema operacional (Windows, Mac, Linux) e baixe o pacote correto. Basta execut-lo que a
instalao acontecer.
Importante: Se voc instalou o WAMP no primeiro captulo de PHP da apostila, no precisa instalar o
MySQL agora.
. Bcscns No MvSQL comPHP
Sabendo usar um banco de dados e a escrever SELECTs para extrair dados dele, o prximo passo aprender
a fazer isso de dentro da nossa pgina PHP. Isto , queremos pegar dados no banco de dados e imprimir na
tela usando PHP.
Captulo - PHP: parmetros e bancos de dados - MySQL e phpMyAdmin - Pgina
Precisamos ver como conectar no MySQL e disparar comando SQL usando PHP.
CoNvxXo
A conexo com o banco de dados pode ser feita com a funo mysqli_connect:
$conexao = mysqli_connect("localhost", "root", "", "wd43");
Essa funo recebe onde de conectar (localhost), o usurio (root), a senha (em branco) e o nome do banco
de dados disponvel (wd). Ela abre a conexo se tudo der certo e devolve uma varivel $conexao que
representa a conexo aberta.
A ncscn
Prximo passo mandar o MySQL processar um certo comando SQL, como nossa busca SELECT de antes.
Pra isso, usamos a funo mysqli_query que recebe a conexo (que abrimos antes) e o SQL da busca:
$dados = mysqli_query($conexao, "SELECT * FROM produtos");
Essa funo devolve uma varivel $dados com o retorno que a busca der.
Dnoos No PHP
ltimo passo transformar os dados da tabela em algo usvel no PHP. Uma maneira comum transformar
os dados num array com mysqli_fetch_array:
$produto = mysqli_fetch_array($dados);
A varivel $produto um array PHP com os dados do primeiro produto da busca indexados pelo nome da
coluna no banco de dados. Isso quer dizer que podemos acessar, por exemplo, o preo do produto fazendo
$produto["preco"] e assim por diante para cada coluna.
. Rvv:NnNoo ns ncscns comWHERE
H muitas opes possveis no SQL para refnarmos a busca. O SELECT * que fzemos antes retorna todos os
dados da tabela inteira, o que pode ser muita coisa. Imagine que estamos interessados nos dados apenas de
um produto especfco, de uma certa linha.
Podemos indicar ao SELECTque queremos os dados do produto de umcerto ID, que uma coluna numrica
que temos no banco de dados para identifcar o cdigo individual de cada produto. Fazemos isso no SQL
com a clusula WHERE.
Captulo - PHP: parmetros e bancos de dados - Refnando as buscas com WHERE - Pgina
SELECT * FROM produtos WHERE id = 4
Esse cdigo devolve todas as colunas do produto cujo id for , e apenas ele.
. Exvncc:os: vnvMvAom:N
) V no terminal e encontre a pasta do phpmyadmin:
$ cd /caelum/cursos/43/phpmyadmin
Dentro dela, rode um servidor PHP em uma porta diferente:
$ php -S 0.0.0.0:8000
V no navegador e acesse: http://localhost:
Voc dever ver o phpMyAdmin. Coloque usurio root e deixe a senha em branco para entrar.
) A primeira tela do phpMyAdmin pode ser assustadora de tantas opes. Ele tem muitos recursos.
Na parte esquerda fcam os bancos de dados disponveis na mquina. Localize e clique no banco WD
que corresponde aos dados do nosso curso.
Captulo - PHP: parmetros e bancos de dados - Exerccios: phpMyAdmin - Pgina
Podemos importar os dados do curso pra esse banco. Eles esto no arquivo dados.sql na pasta do curso.
Para importar, v no menu Import no topo do phpMyAdmin. Clique emBrowse para selecionar o arquivo
no seu computador e depois clique em Go.
Aps a importao, selecione a tabela produtos dentro de WD no menu da esquerda. Ele deve mostrar
os dados que esto dentro da tabela, suas colunas e linhas.
Observe o comando SELECT que o phpMyAdmin gerou para obter os dados:
SELECT *
FROM produtos
LIMIT 0 , 30
. Exvncc:os: PHP comMvSQL
) No topo do arquivo produto.php abra a conexo com o banco de dados e selecione os dados do produto:
<?php
$conexao = mysqli_connect("127.0.0.1", "root", "", "WD43");
Captulo - PHP: parmetros e bancos de dados - Exerccios: PHP com MySQL - Pgina
$produto = mysqli_fetch_array($dados);
?>
Repare que criamos uma varivel $produto no PHP que contm os dados do produto. Ela um array e
podemos acessar as diferentes colunas atravs do nome.
Altere os ttulos na pgina para usar os dados dinmicos do banco:
<h1><?= $produto["nome"] ?> </h1>
<h2>por apenas <?= $produto["preco"] ?> </h2>
Altere tambm, no fnal da pgina, o local onde mostramos a descrio do produto:
<p><?= $produto["descricao"] ?> </p>
Teste nossa pgina de produtononavegador e repare que os dados vmdinamicamente dobanco. Observe
o cdigo fonte HTML fnal gerado, como idntico ao que tnhamos antes.
) Queremos que nossa pgina seja capaz de exibir os dados de qualquer produto do banco. Para escolher
qual produto mostrar, vamos usar um parmetro na URL com o cdigo do produto, o ID.
Altere o cdigo da busca que fzemos antes para incluir a clusula WHERE no fnal baseada no id do
produto passado como parmetro:
"SELECT * FROM produtos WHERE id = $_GET[id]"
Teste a pgina no navegador passando ids diferentes com parmetro na URL: produto.php?id=.
) A imagem do produto tambm diferente para cada produto. Abra a pasta img/produtos/ e repare nas
vrias imagens que esto l. Elas seguem um padro. O nome contm o cdigo do produto e as trs
variaes de cor. Podemos gerar o endereo das imagens no HTML usando o ID que vem do PHP.
Altere os caminhos das imagens na pgina de produto pra passar o ID dinamicamente no endereo da
foto:
<img src="img/produtos/foto<?= $produto["id"] ?>-verde.png">
Teste a pgina no navegador passando ids diferentes com parmetro na URL: produto.php?id=.
) (opcional) O <title> da pgina um fator muito importante para motores de busca (SEO). O ideal ter
ttulos descritivos e nicos em cada pgina. Numa loja virtual como a nossa, o nome do produto deve
fazer parte do ttulo da pgina.
Altere o ttulo da pgina pra puxar o nome do produto do banco de dados dinamicamente.
) (opcional) Mude os input hidden que fzemos no captulo anterior com nome/preo pra pegar valores
dinmicos do banco de dados usando PHP.
Captulo - PHP: parmetros e bancos de dados - Exerccios: PHP com MySQL - Pgina
. Bcscn ov mc:1os nvsct1noos
Podemos fazer uma busca de muitos resultados removendo o WHERE e fazendo o SELECTsimples de antes:
SELECT * FROM produtos
Mas tambm podemos restringir o nmero de resultados. Imagine que a tabela imensa, de milhares de
registros, mas queremos apenas os primeiros agora. No MySQL, isso pode ser feito com o comando
LIMIT na busca:
SELECT * FROM produtos LIMIT 0, 10
Isso signifca que queremos resultados contando a partir do primeiro (). Podemos trocar o primeiro
nmero pra acessar informaes em outras partes do banco.
. OnovNnXo oos nvsct1noos
Outro recurso interessante do banco de dados devolver as informaes ordenadas de acordo com certo
critrio. Se quisermos os produtos em ordem alfabtica pelo nome dele:
SELECT * FROM produtos ORDER BY nome
Podemos ainda escolher o sentido da ordenao comASC(ascendente) e DESC(decrescente). Por exemplo,
para ordenar os produtos no sentido do mais recente para o mais antigo:
SELECT * FROM produtos ORDER BY data DESC
E, por fm, misturar tudo isso num SQL complexo:
SELECT * FROM produtos ORDER BY data DESC LIMIT 0, 10
. Exvncc:os: mn:s ncscns comPHP
) A nossa home page lista os produtos mas, do jeito que fzemos, est tudo esttico com dados de mentira.
Vamos alterar para fazer uma busca no banco de dados e retornar os produtos a serem exibidos. muito
parecido com o que fzemos na pgina de produto; a diferena que vamos listar vrios produtos de uma
vez ao invs de um s.
Em primeiro lugar, precisamos transformar nossa pgina num arquivo PHP, para poder usar o banco de
dados nela. Renomeie o arquivo index.html para index.php.
Captulo - PHP: parmetros e bancos de dados - Busca de muitos resultados - Pgina
No index.php, localize o painel novidades e apague todos os <li> que listam produtos com dados est-
ticos.
No lugar, escreva um cdigo PHP que faz a busca dos produtos no banco de dados e percorre essa lista
com um lao while:
<ol>
<?php
$conexao = mysqli_connect("127.0.0.1", "root", "", "WD43");
while($produto = mysqli_fetch_array($dados)):
?>
<li>
<a href="produto.php?id=<? = $produto["id"] ?> ">
<figure>
<img src="img/produtos/miniatura<? = $produto["id"] ?> .png"
alt="<? = $produto["nome"] ?> ">
<figcaption><? = $produto["nome"] ?> por <? = $produto["preco"] ?> </figcaption>
</figure>
</a>
</li>
<?php endwhile; ?>
</ol>
Repare como refzemos o <li> de antes mas usando todos os dados dinmicos do banco de dados.
Teste a home no navegador e veja a busca dinmica acontecendo. Confra o cdigo fonte HTML gerado,
igual ao que tnhamos antes.
) Abusca que fzemos antes como SELECT traz todos os dados da tabela. Isso potencialmente bemgrande
numa loja de verdade. O ideal restringir a busca apenas pelos dados necessrios. Pra isso, no MySQL,
podemos usar o comando LIMIT passando o mximo de resultados que estamos interessados.
Altere o cdigo anterior para incluir o LIMIT no SQL da busca:
SELECT * FROM produtos LIMIT 0, 6
Teste novamente a home.
) Repare que a ordemque os produtos vmno a ordemque gostaramos. No painel novidades, queramos
que viessem ordenados pelo produto mais recente ao mais antigo.
Podemos fazer isso adicionando uma clusula de ordem no SQL com ORDER BY.
Altere a busca anterior para incluir uma ordenao com base no campo data de maneira decrescente:
SELECT * FROM produtos ORDER BY data DESC LIMIT 0, 6
Captulo - PHP: parmetros e bancos de dados - Exerccios: mais buscas com PHP - Pgina
Teste novamente a home e veja o resultado.
) (opcional) Implemente o mesmo recurso de busca dinmica no outro painel, o de produtos mais vendidos.
A nica diferena que queremos ordenar os elementos a partir da quantidade de vendas. Use o campo
vendas no ORDER BY pra isso.
) (opcional) Teste outros valores para o LIMITnas buscas. Oprimeiro nmero indica ofset, ou seja a partir
de qual item estamos interessados. Usar , indica que queremos os itens do terceiro ao nono.
Teste tambm outras ordenaes. Alm do DESC, temos o ASC.
) Emvez de passar os dados do produto para o checkout via input hidden, a soluo mais comumna prtica
s passar o ID do produto sendo comprado. E a pgina de checkout, para obter os dados (nome, preo,
etc), faz novamente uma busca no banco de dados.
Essa soluo mais segura pois impede que o usurio altere os dados no HTML (como o preo). S o ID
passado como parmetro e os dados sempre vm do banco de dados.
Implemente essa soluo no seu projeto.
Captulo - PHP: parmetros e bancos de dados - Exerccios opcionais - Pgina
C
Bootstrap e formulrios HTML
O trabalho a melhor das regularidades e a pior das intermitncias
Victor Marie Hugo
. Boo1s1nnv v vnnmvwons ov CSS
Uma tendncia em alta no mundo front-end o uso de frameworks CSS com estilos base para nossa pgina.
Ao invs de comear todo projeto do zero, criando todo estilo na mo, existem frameworks que j trazem
toda uma base construda de onde partiremos nossa aplicao.
Existem muitas opes mas o Twitter Bootstrap talvez seja o de maior notoriedade. Ele foi criado pelo
pessoal do Twitter a partir de cdigo que eles j usavam internamente. Foi liberado como opensource e
ganhou muitos adeptos. O projeto cresceu bastante em maturidade e importncia no mercado a ponto de se
desvincular do Twitter e ser apenas o Bootstrap.
http://getbootstrap.com
O Bootstrap traz uma srie de recursos pra gente:
Reset CSS
Estilo visual base pra maioria das tags
cones
Grids prontos pra uso
Componentes CSS
Plugins JavaScript
Tudo responsivo e mobile-frst
Como o prprio nome diz, uma forma de comear o projeto logo com um design e recursos base sem
perder tempo com design no incio.
. Es1:to v comvoNvN1vs nnsv
Para usar o Bootstrap, apenas inclumos seu CSS na pgina:
<link rel="stylesheet" href="css/bootstrap.css">
S isso j nos traz uma srie de benefcios. Umreset aplicado, e nossas tags ganhamestilo e tipografa base.
Isso quer dizer que podemos usar tags como um H ou um P agora e elas tero um estilo caracterstico do
Bootstrap.
Alm disso, ganhamos muitas classes com componentes adicionais que podemos aplicar na pgina. So
vrias opes. Por exemplo, pra criar umttulo comuma frase de abertura emdestaque, usamos o jumbotron:
<div class="jumbotron">
<p>Obrigado por comprar na Mirror Fashion.</p>
</div>
</div>
No exerccio a seguir vamos usar vrios outros componentes.
. A vKc:Nn ov cnvcoc1 on M:nnon Fnsn:oN
Neste captulo, vamos desenvolver a pgina de checkout da Mirror Fashion. Aps escolher o produto dese-
jado, o usurio cai nessa pgina para efetivar a compra.
Nossa loja foi otimizada pra compra direta, sem carrinho de compras. O cliente escolhe o produto e compra
direto, com um clique. S precisamos coletar os dados de dele, do pagamento e da entrega.
O foco dessa nova pgina ento a coleta de informaes para efetivao da compra. Um grande formul-
rio complexo com os campos necessrios. Vamos usar o Bootstrap para desenvolver essa pgina com mais
facilidade e rapidez.
Captulo - Bootstrap e formulrios HTML - Estilo e componentes base - Pgina
Figura .: Site visto no Desktop
E, como aprendemos antes, vamos desenvolver tudo mobile-frst. Nesse momento, portanto, ainda no
teremos o design Desktop mostrado acima, mas uma verso mobile em uma coluna. Veremos como adaptar
a verso Desktop com Bootstrap depois.
Captulo - Bootstrap e formulrios HTML - A pgina de checkout da Mirror Fashion - Pgina
Figura .: Site visto no Mobile
. Exvncc:o ovc:oNnt: :Nc:o oo cnvcoc1 svmPHP
) Se voc no fez os captulos comPHP, crie agora sua pgina checkout.html comHTML simples pra poder
seguir esse captulo. No h dependncia obrigatria de PHP no curso.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Checkout Mirror Fashion</title>
</head>
<body>
<p>Obrigado por comprar na Mirror Fashion!
Preencha seus dados para efetivar a compra.</p>
<h2>Sua compra</h2>
<dl>
<dt>Produto</dt>
<dd>Fuzzy Cardigan</dd>
<dt>Cor</dt>
Captulo - Bootstrap e formulrios HTML - Exerccio opcional: incio do checkout sem PHP - Pgina
<dd>verde</dd>
<dt>Tamanho</dt>
<dd>40</dd>
<dt>Preo</dt>
<dd>R$ 129,00</dd>
</dl>
</body>
</html>
Teste a pgina simples no navegador.
. Exvncc:os: vKc:Nn ov cnvcoc1
) Abra a pgina de checkout no navegador e veja que est com o estilo padro do navegador.
O primeiro passo incluirmos o arquivo CSS do bootstrap na nossa pgina. Voc vai ver uma mudana
sutil no estilo da pgina, principalmente nos aspectos tipogrfcos.
Coloque no <head> da pgina de checkout o CSS do bootstrap:
<link rel="stylesheet" href="css/bootstrap.css">
Teste novamente a pgina.
) O primeiro componente pronto do bootstrap que vamos usar o jumbotron. basicamente a abertura
do site, contendo sua chamada principal. Para us-lo basta criar um div com a classe jumbotron.
Envolva as chamadas de abertura que j tnhamos com H e P em dois DIV. O primeiro div contm
class="jumbotron" e o segundo, class="container".
<div class="jumbotron">

<p>Obrigado....</p>
</div>
</div>
Abra a pgina e note que um estilo diferente aparece. Teste redimensionar o navegador e veja que o ta-
manho da fonte e espaamento do componente se ajustam automaticamente. O Bootstrap usa responsive
design automaticamente em seus componentes.
Captulo - Bootstrap e formulrios HTML - Exerccios: pgina de checkout - Pgina
Para saber mais do jumbotron: http://getbootstrap.com/components/jumbotron
) Use um outro componente do Bootstrap, o panel para organizar a seo que mostramos as informaes
da compra do cliente. Cuidado com o exerccio, com os nomes das classes, que confundem bastante.
Adapte o HTML do H Sua compra e do DL que temos para se adequar ao componente de panel:
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Sua compra</h2>
</div>
<div class="panel-body">

</div>
</div>
Repare como os nomes das classes, apesar de seremmuitos, fazemsentido para isolar cada parte do painel.
Teste novamente a pgina no navegador e veja o resultado. Temos um painel arredondado com ttulo em
destaque no topo.
Para saber mais sobre painis do Bootstrap: http://getbootstrap.com/components/panels
) Repare no exerccio anterior do jumbotron que o div container responsvel por centralizar e dar espa-
amento na tela. Muito parecido alis com o container que havamos criado antes em nosso projeto, mas
agora uma classe do Bootstrap.
Crie um outro div container pra conter o panel que acabamos de criar e veja como ele fca melhor posi-
cionado no centro da tela.

</div>
) Dentro do panel-body, logo no topo, acima da lista de defnies DL, vamos colocar uma foto do produto
escolhido e na cor escolhida.
O segredo gerar o endereo da imagem levando em conta os parmetros do ID e da cor:
img/produtos/foto<?= $_POST["id"] ?>-<?= $_POST["cor"] ?>.png
Com Bootstrap, podemos ainda acrescentar algumas classes nessa imagem para obter resultados interes-
santes. A classe img-responsive faz a imagem fcar fexvel e nunca estourar o tamanho do pai. E a classe
img-thumbnail faz a imagem fcar centralizada com uma borda de destaque.
Adicione a imagem do produto logo acima da lista <dl> dentro do div panel-body:
<img src="img/produtos/foto<?= $_POST["id"] ?>-<?= $_POST["cor"] ?> .png"
alt="<?= $produto["nome"] ?> "
class="img-thumbnail img-responsive">
Teste novamente a pgina.
ImncvmsvmPHP
Para o exerccio de Bootstrap em si, voc pode usar uma imagem esttica sem envolver o PHP
para gerar o endereo:
<img src="img/produtos/foto1-verde.png" alt="Fuzzy Cardigan"
class="img-thumbnail img-responsive">
) (opcional) No painel, troque a classe
. FonmctKn:os n vcNoo
Quando solicitamos que o usurio informe seu nome, seu endereo de email, se ele quer receber uma news-
letter, qualquer informao, precisamos utilizar os elementos corretos. Para isso, vamos conhecer os formu-
lrios HTML: a tag <form>.
J usamos alguns antes. Agora vamos ver a fundo seus desdobramentos.
A1n:nc1os oo Fonm
<form action="/efetivar.php" method="POST">
</form>
O formulrio exemplifcado anteriormente apresenta o atributo obrigatrio action. O valor desse atributo
o endereo para onde as informaes do formulrio sero enviadas, e esse valor depende inteiramente de
como feita a aplicao que receber essas informaes no lado do servidor.
O segundo atributo, method, especifca o mtodo do HTTP pelo qual essa informao ser transmitida. O
valor post, de maneira simplista, signifca que queremos inserir as informaes desse formulrio, salv-la de
alguma maneira. Outro valor possvel para esse atributo, o get, utilizado quando queremos obter alguma
coisa a partir das informaes que estamos transmitindo, por exemplo, um formulrio de busca.
ComvoNvN1vs
Porm, neste exemplo, no temos nenhum elemento para capturar as informaes. Na verdade, somente a
marcao da tag <form> no mostra nenhum elemento visvel no navegador. Vamos supor que precisemos
de uma informao como o nome do visitante do nosso site para guardar em um banco de dados. Vamos
adicionar alguns elementos ao nosso formulrio anterior:
Captulo - Bootstrap e formulrios HTML - Formulrios a fundo - Pgina
<form action="/efetivar.php" method="POST">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome">
<input type="submit">
</form>
Lnnvt
Adicionamos a marcao do elemento <label>. Esse elemento uma tag de contedo, e seu texto exibido
de maneira comum dentro do nosso formulrio, a nica diferena que essa marcao faz uma ligao com
outro elemento qualquer em nosso formulrio. Note que nosso label tem o atributo for, que recebe o valor
nome.
Quando clicamos com o mouse sobre o texto marcado com a tag label, o elemento que tem o atributo id
com o mesmo valor que o atributo for do label selecionado para que possamos interagir com ele. No
exemplo, esse elemento vinculado ao label um campo de texto que declaramos com a tag input.
Essa marcao <label> de extrema importncia para a usabilidade e acessibilidade dos nossos formulrios.
INvc1
A maioria dos elementos que utilizamos nos formulrios para capturar informaes dos usurios so da tag
<input>. No exemplo anterior, utilizamos duas variaes dessa tag.
Os tipos diferentes de inputs so determinados pelo valor do seu atributo type, e no exemplo ns utilizamos
dois muito comuns. A seguir, vamos detalhar os tipos aceitos para essa tag.
text
<input type="text" name="nome_usuario">
Provavelmente o tipo mais comum de input, o que tem o atributo type="text, utilizado quando queremos
que o usurio envie uma informao textual simples, pois esse elemento no permite a entrada de quebras
de linha.
Ao enviarmos o formulrio, a informao digitada pelo usurio acessvel no lado do servidor por meio
do atributo name, utilizado para identifcar cada informao contida nos parmetros da requisio. Para
ter acesso informao digitada quando tratamos o formulrio com algum tipo de script, para validar o
contedo por exemplo, necessrio obter o contedo da propriedade value do objeto no DOM.
password
O input que recebe o atributo type="password similar ao anterior, do tipo text, com a diferena de que
ele no exibe exatamente o texto digitado pelo usurio, e sim uma srie de smbolos * ou outro, dependendo
do navegador e sistema operacional.
<input type="password" name="senha">
checkbox
O elemento input do tipo checkbox exibe uma caixa para marcao, muito utilizado quando temos uma
opo que pode ser marcada como sim ou no, por exemplo Aceito os termos de contrato do usurio, ou
Manter a sesso ativa em formulrios de login.
Apesar de muito utilizado com o valor true, possvel determinar qualquer valor para o checkbox.
<input id="contrato" name="contrato" type="checkbox" value="sim">
<label for="contrato">Aceito os termos do contrato.</label>
radio
<p>
<input type="radio" name="idade" id="idade5" value="5">
<label for="idade5">Menos de 5 anos</label>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
Quando desejamos que o usurio escolha somente uma entre uma srie de opes, podemos utilizar elemen-
tos input do tipo radio. Quando h mais de um elemento desse tipo com o mesmo valor no atributo name,
somente um pode ser selecionado.
button
<input type="button" name="mostra_dialogo" value="Clique aqui!">
O elemento input com o atributo type="button renderiza um boto dentro do formulrio, mas esse boto
no tem nenhuma funo direta nele e comumente utilizado para disparar eventos para a execuo de
scripts.
O texto do boto determinado pelo valor do atributo value.
submit
<input type="submit" name="enviar" value="Enviar">
O elemento input com o atributo type="submit similar ao boto, mas quando acionado esse elemento
inicia a chamada que envia as informaes do formulrio para o endereo indicado no atributo action do
<form>.
image
<input type="image" name="botao" src="images/enviar.png" width="20" height="18">
possvel substituir o boto de envio do formulrio por uma imagem, possibilitando criar um visual mais
atrativo para o formulrio.
reset
<input type="reset" name="reset" value="Limpar">
O input comtype="reset elimina os valores entrados anteriormente nos elementos de um formulrio, per-
mitindo que o usurio limpe o mesmo.
<:Nvc1> v <nc11oN>
A tag <input> dos tipos button, submit e reset pode ser substituda pela tag <button>. Neste
caso, o texto do boto passa a ser indicado como contedo da tag. Ainda assim necessrio
especifcar o valor do atributo type, inclusive se ele for button:
<button type="button" name="enviar">Clique aqui</button>
fle
<input type="file" name="anexo">
Quando necessrio que o usurio envie um arquivo para a aplicao no lado do servidor necessrio o
uso do input do tipo fle. Para o correto envio dos arquivos, muitas vezes tambm necessrio adicionar o
atributo enctype="multipart/form-data" na tag <form>.
hidden
<input type="hidden" name="codigo" value="abc012xyz789">
Muitas vezes precisamos enviar e receber informaes que no tmutilidade direta para o usurio e, portanto,
no devem ser exibidos no formulrio. Para essa fnalidade, existe o input do tipo hidden, que somente
carrega em si um valor.
Tvx1nnvn
Quando desejamos que o usurio insira uma quantidade grande de informaes textuais, incluindo quebras
de linha, necessrio o uso da tag textarea
<textarea name="texto"></textarea>
Svtvc1, Ov1cnocv v Ov1:oN
Quando desejamos que o usurio selecione entre diversas opes, com a possibilidade de fexibilizar a ma-
neira com que ele interage com o componente do formulrio, podemos utilizar a tag <select>.
<select name="cidades">
<option value="bsb">Braslia</option>
<option value="rj">Rio de Janeiro</option>
<option value="sp">So Paulo</option>
</select>
Em sua confgurao padro, o controle select exibe o que conhecemos como menu drop-down, permi-
tindo que somente uma das opes possa ser selecionada. Caso seja adicionado o atributo multiple, pos-
svel selecionar mais de uma opo da mesma maneira que selecionamos diversos arquivos no explorador
do sistema operacional.
<select multiple name="cidades">
<option value="bsb">Braslia</option>
<option value="rj">Rio de Janeiro</option>
<option value="sp">So Paulo</option>
</select>
Caso necessrio, dependendo do nmero de opes apresentadas ao usurio, pode ser interessante agrup-
las:
<select name="bairro">
<optgroup label="Braslia">
<option value="asan_bsb">Asa Norte</option>
<option value="asas_bsb">Asa Sul</option>
</optgroup>
<optgroup label="So Paulo">
<option value="vlmariana_sp">Vila Mariana</option>
<option value="centro_sp">Centro</option>
</optgroup>
<optgroup label="Rio de Janeiro">
<option value="botafogo_rj">Botafogo</option>
<option value="centro_rj">Centro</option>
</optgroup>
</select>
. Novos comvoNvN1vs oo HTML
Com a nova especifcao do HTML, possvel utilizar uma srie de novos componentes que facilitam bas-
tante o desenvolvimento de formulrios. At o momento em que essa apostila foi escrita, muitos compo-
nentes so incompatveis com os navegadores, mas mostram, na maioria dos casos, um campo de texto
permitindo a entrada de qualquer tipo de informao.
A maioria dos novos tipos de componentes de formulrio foram criados para permitir que o navegador
adapte o mtodo de entrada para o mais adequado em cada um dos casos. Alguns desses componentes j
so compatveis com navegadores de dispositivos mveis.
email
<input type="email" name="email">
Oinput do tipo email permite que os dispositivos mveis, principalmente, exibamumteclado adaptado para
facilitar esse tipo de entrada. Por exemplo, o iPhone exibe um teclado com o caractere @ e com as opes de
domnio .com.
Captulo - Bootstrap e formulrios HTML - Novos componentes do HTML - Pgina
number
<input type="number" max="100" step="5">
O input do tipo number, alm de exibir um teclado numrico em dispositivos mveis, nos navegadores
modernos exibe um controle que permite incrementar ou decrementar o valor do campo clicando em uma
seta para cima ou para baixo.
Alm dessa diferena visual, possvel determinar valores mnimos, mximos e se h uma escala de valores
vlidos. No exemplo anterior, o elemento deve aceitar nmeros mltiplos de com o limite do valor .
url
<input type="url" name="endereco">
Oelemento input comtipo url permite que os dispositivos exibamumteclado como, no exemplo do iPhone,
opes como www e .com.
range
<input type="range" name="volume">
O elemento input do tipo range exibe um controle deslizante nos navegadores modernos, permitindo uma
interao mais agradvel quando precisamos de um valor numrico em escala. O controle guarda um va-
lor numrico em seu atributo value. Assim como o input do tipo number, possvel especifcar um valor
mnimo, mximo e uma escala.
A renderizao mais comum desse controle, em um Chrome:
date, month, week, time, datetime e datetime-local
<input type="date" name="validade">
Os controles de date picker so feitos para coletar uma informao de data ou hora. So vrias as possibili-
dades de formato de data ou hora necessrias. No navegador Opera, quando utilizado esse tipo de controle,
o usurio pode selecionar uma data a partir de umcalendrio. possvel especifcar datas mnima e mxima.
Em geral, os navegadores devem oferecer alguma funcionalidade de escolha de datas para o usurio, como
o Chrome:
Ou o iPhone:
color
<input type="color" name="cor_olhos">
O elemento input do tipo color permite que seja exibido um color picker para o preenchimento do seu
valor. O Chrome no Mac, por exemplo, exibe o color picker padro do sistema:
search
<input type="search" results="10">
O input do tipo search exibe um campo especfco para busca. O atributo results determina quantas lti-
mas buscas sero armazenadas e lembradas, alm de exibir uma lupa dentro do campo (Safari e Chrome).
tel
<input type="tel" name="telefone">
O input do tipo tel foi especifcado para coletar um nmero de telefone.
Em dispositivos com teclados virtuais como smartphones e tablets, comum o teclado ser adaptado para
exibir apenas opes relevantes entrada de nmeros telefnicos, como no iPhone:
. Novos n1n:nc1os HTML vmvtvmvN1os ov vonmctKn:o
Na especifcao do HTML esto defnidos novos atributos pra os elementos de formulrio, visando imple-
mentar algumas necessidades comuns que antes no eram possveis de serem atendidas puramente com a
marcao do formulrio.
autofocus
Captulo - Bootstrap e formulrios HTML - Novos atributos HTML em elementos de formulrio - Pgina
Sua presena indica que aquele campo deve iniciar com foco quando a pgina for carregada. O usurio j
pode comear a digitar algo sem nenhum clique.
<input name="nome" autofocus>
placeholder
<input type="text" name="nome" placeholder="Insira seu nome">
Oatributo placeholder exibe o texto contido emseu valor dentro do elemento do formulrio caso o seu valor
seja vazio.
autocomplete, list e datalist
possvel implementar uma funcionalidade de sugesto de valores com mais facilidade.
<input type="text" list="cidades" autocomplete="on">
<datalist id="cidades">
<option value="Braslia">
<option value="Rio de Janeiro">
<option value="So Paulo">
</datalist>
Aimplementao de autocomplete semo atributo list no campo, ligando-o a umdatalist, vai utilizar os lti-
mos valores utilizados em outros campos ou em outros formulrios, dando prioridade a valores adicionados
em inputs com o mesmo valor no atributo name.
Existem diversas maneiras de utilizar os componentes de formulrios, tanto os novos do HTML como os j
existentes. Mesmo coma oportunidade de inovar e criar uma interao totalmente diferente do usurio com
umformulrio, importante manter o mesmo mtodo que adotamos anteriormente. Amarcao correta do
formulrio facilita muito o uso dele em diversos navegadores e em outros tipos de clientes tambm, como
por exemplo navegadores especiais para defcientes visuais.
. coNvs comctvvn:coNs
O Bootstrap traz um conjunto de cones prontos para uso chamado de Glyphicons. Esses cones so dispo-
nibilizados atravs de uma fonte de texto customizada. Eles desenharam os cones e exportaram como uma
fonte normal.
Para usarmos com Bootstrap bem simples:
<span class="glyphicon glyphicon-thumbs-up"></span>
Captulo - Bootstrap e formulrios HTML - cones com glyphicons - Pgina
So cones no total, das mais diversas razes. Basta olhar o nome da documentao e usar na pgina.
Figura .: Alguns dos cones
http://getbootstrap.com/components/glyphicons
A vantagem de se usar fontes para cones que o desenho fca escalvel, como uma letra. Ele no perde
qualidade em nenhum tamanho ou resoluo por ser vetorial. E, assim como uma letra, podemos aplicar
efeitos de texto como sombras e cores.
Adesvantagem que cada cone s pode ter umpath no desenho e uma nica cor. No possvel usar cones
complexos com fontes.
Captulo - Bootstrap e formulrios HTML - cones com glyphicons - Pgina
. Exvncc:os: vonmctKn:os
) O formulrio de compra possui muitos campos para o usurio preencher sobre si, sobre a entrega, paga-
mento etc. Para simplifcar, vamos organizar em feldsets:
Dados pessoais
Carto de crdito
Endereo de entrega
Endereo de cobrana
Vamos criar o <form> logo depois do panel, e ainda dentro do container. Neste form, crie os feldsets
usando <legend> para identifcar cada um. No fnal, um boto cuidar do envio dos dados (vamos usar
um btn-primary do Bootstrap).
<form>
<fieldset>
<legend>Dados pessoais</legend>
</fieldset>
<fieldset>
<legend>Carto de crdito</legend>
</fieldset>
<fieldset>
<legend>Endereo entrega</legend>
</fieldset>
<fieldset>
<legend>Endereo cobrana</legend>
</fieldset>
<button type="submit" class="btn btn-primary">
Confirmar Pedido
</button>
</form>
) O primeiro feldset, dos Dados Pessoais, deve conter os campos Nome, Email, CPF e um checkbox para
o usurio optar ou no por receber spam.
Implemente os campos dentro do primeiro feldset. Use as classes do Bootstrap para formulrios. Use
tambm um input email do HTML.
Captulo - Bootstrap e formulrios HTML - Exerccios: formulrios - Pgina
<fieldset>
<legend>Dados pessoais</legend>
<div class="form-group">
<label for="nome">Nome completo</label>
<input type="text" class="form-control" id="nome" name="nome">
</div>
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<label for="cpf">CPF</label>
<input type="text" class="form-control" id="cpf" name="cpf">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="sim" name="spam" checked>
Quero receber spam da Mirror Fashion
</label>
</div>
</fieldset>
Repare que cada campo possui um input e um label. Para agrup-los, usamos um div form-group do
Bootstrap. Cada input deve ter uma classe form-control.
Teste a pgina e observe o estilo padro que ganhamos apenas por usar o Bootstrap.
) O feldset de dados do carto tem dois campos apenas: um com cdigo do carto e outro com data de
validade. Neste ltimo, usaremos o input month do HTML.
Implemente os campos do segundo feldset:
<fieldset>
<legend>Carto de crdito</legend>
<label for="numero-cartao">Nmero - CVV</label>
<input type="text" class="form-control"
id="numero-cartao" name="numero-cartao">
</div>
<label for="validade-cartao">Validade</label>
<input type="month" class="form-control"
id="validade-cartao" name="validade-cartao">
</div>
</fieldset>
) No feldset de endereo de entrega, temos campo pra rua, CEP, cidade e estado. Implemente esse feldset:
<fieldset>
<legend>Endereo entrega</legend>
<label for="rua-entrega">Rua, nmero e complemento</label>
<input type="text" class="form-control" id="rua-entrega" name="rua-entrega">
</div>
<label for="cep-entrega">CEP</label>
<input type="text" class="form-control" id="cep-entrega" name="cep-entrega">
</div>
<label for="cidade-entrega">Cidade</label>
id="cidade-entrega" name="cidade-entrega">
</div>
<label for="estado-entrega">Estado</label>
<select name="estado-entrega" id="estado-entrega" class="form-control">
<option value="SP">So Paulo</option>
<option value="RJ">Rio de Janeiro</option>

</select>
</div>
</fieldset>
Ofeldset seguinte, do endereo de cobrana, idntico nos campos, mudando apenas os names e IDs dos
campos. Implemente esse feldset e cuidado com os nomes dos campos que so diferentes do anterior:
<fieldset>
<legend>Endereo cobrana</legend>
<label for="rua-cobranca">Rua, nmero e complemento</label>
<input type="text" class="form-control" id="rua-cobranca" name="rua-cobranca">
</div>
<label for="cep-cobranca">CEP</label>
<input type="text" class="form-control" id="cep-cobranca" name="cep-cobranca">
</div>
<label for="cidade-cobranca">Cidade</label>
id="cidade-cobranca" name="cidade-cobranca">
</div>
<label for="estado-cobranca">Estado</label>
<select name="estado-cobranca" id="estado-cobranca" class="form-control">
<option value="SP">So Paulo</option>
<option value="RJ">Rio de Janeiro</option>
</select>
</div>
</fieldset>
) Adicione o atributo placeholder do HTML nos campos email e CPF com dicas de preenchimento:
<input type="email" class="form-control" id="email" name="email"
placeholder="email@exemplo.com">
...
<input type="text" class="form-control" id="cpf" name="cpf"
placeholder="000.000.000-00">
Adicione o atributo autofocus do HTML no input nome:
<input type="text" class="form-control" id="nome" name="nome" autofocus>
) Vamos incentivar o clique no boto de pedido com um cone alm do texto. Use os glyphicons do Bo-
otstrap pra isso. Dentro do boto, apenas adicione a linha que declara o cone:
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-thumbs-up"></span>
Confirmar Pedido
</button>
Para saber mais sobre os cones do Bootstrap: http://getbootstrap.com/components/glyphicons
) Use outras classes do Bootstrap para ajustar mais detalhes. No boto, adicione a classe btn-lg para deixar
o boto maior.
Ainda no boto, acrescente tambm a classe pull-right para deix-lo alinhado direita.
Veja mais opes de botes com Bootstrap: http://getbootstrap.com/css/buttons
) (opcional) Faa placeholders tambm nos campos CEP e nmero do carto.
) (opcional) O Bootstrap tem outros recursos para formulrios, como os input groups. Teste trocando o
cdigo do campo email para isso:
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
Implemente tambm em outros campos, inclusive usando cones do glyphicons.
Veja mais opes do Bootstrap para formulrios: http://getbootstrap.com/css/forms
. Pnnn snnvn mn:s: oc1nos vnnmvwons CSS
O Bootstrap no o nico framework CSS do mercado. talvez o mais famoso e com mais usurios, mas h
muitas outras opes que s vezes podem ser at melhores para seu caso.
Trs opes famosas:
Foundation: Da Zurb, fortemente baseado em mobile e responsivo. http://foundation.zurb.com/
Semantic UI: tem nomes de classes mais simples e semnticos que os outros. http://semantic-ui.com/
Pure: Do Yahoo, outra alternativa, mais recente. http://purecss.io/
De maneira geral, esses frameworks permitem fazer as mesmas coisas, mas cada um com seu estilo. Um
boto principal por exemplo:

<button class="btn btn-primary btn-lg">Clique aqui</button>

<button class="large button">Clique aqui</button>

<button class="large ui button">Clique aqui</button>

<button class="pure-button pure-button-primary pure-button-large">Clique aqui</button>
Captulo - Bootstrap e formulrios HTML - Para saber mais: outros frameworks CSS - Pgina
C
Componentes complexos do Bootstrap e mais
HTML
Nove pessoas no conseguem fazer um beb em um ms.
Fred Brooks, sobre a adio de mais programadores para um projeto acabar antes
. Gn:o nvsvoNs:vo oo Boo1s1nnv
Umas das difculdades mais comuns de um projeto front-end o posicionamento de elementos, sobretudo
em designs multi coluna. A soluo mais comum uso de grids, uma ideia antiga que veio dos prprios
designers.
Divide-se a tela em colunas e vamos encaixando os elementos dentro desse grid.
Todo framework CSS moderno traz umgrid pronto para utilizao. Todo codigo CSS necessrio para correto
posicionamento j foi escrito e s precisamos usar as classes certas. OBootstrap temumgrid pronto e vrias
classes para usarmos.
O grid o Bootstrap trabalha com a ideia de colunas e podemos escrever nosso cdigo escolhendo quantas
colunas ocupar. Alguns exemplos:
Essas classes de coluna so as que defnem o tamanho de cada elemento na pgina com base nas partes do
grid padro. Em cdigo:
<div class="row">
<div class="col-md-4">
...
</div>
...
</div>
</div>
No cdigo anterior, deixamos o primeiro DIV ocupando / da tela e o outro, /. Repare que, para o grid
funcionar, ao redor das colunas usamos um div com class row. Ele necessrio.
Podemos ainda criar grids dentro de grid, sempre obedecendo a diviso de colunas emcada. Por exemplo:
<div class="row">
...
</div>
<div class="row">
...
</div>
...
</div>
</div>
</div>
</div>
Esse exemplo criou um segundo grid dentro da coluna da direita do primeiro. Nesse segundo grid h duas
colunas ocupando metade cada uma (/). Mas como um grid est dentro do outro, na prtica, ele vai
ocupar metade do tamanho do div que tem / de tamanho.
RvsvoNs:vo
Um dos pontos mais interessantes dos grids que eles so responsivos. Isso quer dizer que podemos aplicar
diferentes layouts de colunas no nosso cdigo ao mesmo tempo e cada umdeles vai valer s emdeterminada
situao.
Captulo - Componentes complexos do Bootstrap e mais HTML - Grid responsivo do Bootstrap - Pgina
Nos cdigos anteriores, por exemplo, usamos classes como col-md-. Omd nessa classe signifca que vamos
ocupar colunas do grid apenas em telas maiores que px de largura. Em telas menores, automaticamente
nosso grid ser de uma coluna s.
E, claro, temos classes pra outros tamanhos de tela tambm. No Bootstrap temos essas famlias de classes de
grids j prontas:
col-xs- : Extra small. < px
col-sm- : Small (tablets). >= px
col-md- : Medium (Desktops). >= px
col-lg- : Large (Desktops). >= px
Podemos aplicar mais de uma classe ao mesmo tempo no mesmo elemento:
<div class="row">
<div class="col-xs-6 col-sm-4">
...
</div>
<div class="col-xs-6 col-sm-8">
...
</div>
</div>
Nesse exemplo, nosso grid divide no meio ( pra cada lado) em telas muito pequenas mas depois divide em
e pra telas um pouco maiores.
. Exvncc:os: cn:os
) Nosso design mobile-frst funciona muito bem em telas pequenas. Mas conforme vamos aumentando o
browser, notamos que tudo fca meio grande. O panel e o form esticam , o que um exagero em
telas maiores.
Vamos usar grids do Bootstrap para transformar nosso design em colunas emtelas maiores. Por padro,
o Bootstrap j traz media queries para adaptao em px. A ideia deixar o panel ocupar / e o form
ocupar /.
So trs alteraes necessrias:
Criar um div com classe row dentro do container;
Criar um div com classe col-sm-4 ao redor do panel;
Aplicar a classe col-sm-8 no formulrio.
Captulo - Componentes complexos do Bootstrap e mais HTML - Exerccios: grids - Pgina
Faa essas alteraes e cuidado com o resultado fnal e os milhes de divs misturados. O cdigo deve
fcar mais ou menos assim:
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">

</div>
</div>
<form class="col-sm-8">

</form>
</div>
</div>
Teste a pgina e redimensione para um tamanho em torno de px pra ver o resultado.
) Repare que o Bootstrap ajusta vrias coisas responsivamente pra gente de maneira automtica. Alm de
aplicar as classes do grid, repare como os tamanhos e fontes aumentam de acordo com a resoluo, sem
precisarmos fazer nada.
Faa os testes.
) Quando aumentamos bastante a tela, tudo ainda se ajusta na proporo de pra que defnimos. Mas o
formulrio fca grande demais. Em telas maiores, talvez seja legal deixar o formulrio em colunas.
Vamos usar outras classes do grid do Bootstrap que se aplicam em layouts maiores que px. Vamos
dividir o formulrio em partes iguais, ou seja / (lembre que o grid do Bootstrap tem partes como
base). Conseguimos isso tudo usando a classe col-md-.
As mudanas necessrias so:
Crie um div com classe row ao redor dos primeiros feldsets;
Crie outro div com classe row ao redor dos ltimos feldsets;
Aplique a classe col-md- em todos os feldsets.
No fnal, a estrutura deve estar parecida com essa:
<form ....>
<div class="row">
<fieldset class="col-md-6">
....
</fieldset>
....
</fieldset>
</div>
<div class="row">
....
</fieldset>
....
</fieldset>
</div>
<button ....>
</form>
Teste a pgina e redimensione para um tamanho em torno de px pra ver o resultado.
) (opcional) possvel usar mais de uma classe de grid ao mesmo tempo no mesmo elemento. Por exemplo:
dividimos a tela em / para o painel e / para o formulrio. Mas se, em telas maiores, voc quiser
mudar essa proporo para / e /, basta adicionar as classes col-lg- e col-lg- em conjunto as que
tnhamos antes.
Implemente essa mudana no projeto.
Exemplo:
<form class="col-sm-8 col-lg-9">
A srie col-lg- aplica em resolues acima de px.
Para saber mais sobre os grids do Bootstrap: http://getbootstrap.com/css/grid
) (opcional) Alm de alterar o grid nas diferentes resolues, o Bootstrap tambm permite esconder/exibir
certos elementos apenas em uma resoluo especfca.
Por exemplo: imagine que, para otimizar o espao pequeno no design para smartphone, vamos esconder
a imagem do produto. Podemos fazer isso adicionando a classe hidden-xs na <img>. Isso vai esconder o
elemento em resolues menores que px.
Para saber mais sobre as classes auxiliares para responsivo do Bootstrap: http://getbootstrap.com/css/
responsive-utilities
. Vnt:onXo HTML
Entre as muitas novidades de formulrios que vimos no HTML, h ainda toda uma parte de validao de
dados com restries expressas diretamente no cdigo HTML.
nvqc:nvo
Podemos indicar na marcao do formulrio quando um campo de preenchimento obrigatrio.
<input type="text" name="nome" required>
Esse atributo permite uma validao fraca no lado do cliente.
vn11vnN
Conseguimos tambm especifcar um formato requerido atravs do atributo pattern, adicionando uma ex-
presso regular como valor:
<input type="text" pattern="^@\w{2,}" name="usuario_twitter">
O atributo pattern tambm permite uma validao fraca do campo.
Vnt:onXo No CSS
Amaioria dos novos componentes de formulrio e os atributos que funcionamcomo validadores de campos
na verdade somente aplicam uma pseudo-classe especfca no campo que no est atendendo ao padro ou
requisito especifcado.
Essa pseudo-classe a :invalid, e pode ser utilizada para dar um retorno visual imediato caso o usurio no
esteja atendendo aos requisitos dos campos do formulrio.
:invalid {
outline: 1px solid #cc0000;
}
Essa validao fraca pois de maneira direta no possvel impedir que o usurio envie as informaes
do formulrio, mesmo que incompletas ou incorretas. possvel porm alterar o boto de submit e deix-
lo desabilitado caso seja possvel selecionar algum elemento por essa pseudo-classe no formulrio. Essa
verifcao e alterao do elemento submit pode ser feita por JavaScript e jQuery de maneira simples.
Captulo - Componentes complexos do Bootstrap e mais HTML - Validao HTML - Pgina
. Pnnn snnvn mn:s: coN1notnNoo ns vnt:onovs HTML
Aideia da nova validao do HTML permitir que os navegadores j possuamuma forma simples de prover
validaes sem que os desenvolvedores precisem recorrer a complicadas bibliotecas JavaScript (algo comum
em muitas pginas).
No entanto, muitas vezes, as opes padro do navegador no so exatamente o que precisamos, e queremos
mudar o comportamento da validao ou executar validaes personalizadas e diferentes.
Podemos, ento, usando JavaScript, desabilitar a validao padro e fazer a nossa prpria:
document.querySelector('form input').oninvalid = function(evt) {
// cancela comportamento padro do browser
evt.preventDefault();
// checa validade e mostra alert
if (!this.validity.valid) {
alert("Nome obrigatrio!");
}
};
Isso nos permite trocar, por exemplo, todo o visual e forma de apresentao dos erros. E, o melhor, caso
o usurio esteja com JavaScript desabilitado, ser executada a validao padro sem problemas. Um timo
fallback. (nas solues tradicionais de validao dom jQuery, por exemplo, tudo se perde quando o usurio
desabilita JavaScript).
Outra forma de desabilitar a validao, afetando o formulrio inteiro, colocando o atributo novalidate na
tag <form>.
Alm de desabilitar completamente a validao do navegador, podemos apenas trocar a mensagem de erro
mas ainda usar o mecanismo e design padro:
document.querySelector('input[type=email]').oninvalid = function() {
// remove mensagens de erro antigas
this.setCustomValidity("");
// reexecuta validao
// se invlido, coloca mensagem de erro
this.setCustomValidity("Email invlido");
}
};
Captulo - Componentes complexos do Bootstrap e mais HTML - Para saber mais: controlando as validaes HTML -
Pgina
Scvon1v Nos Nnvvcnoonvs
A validao HTML est implementada no Chrome, Firefox, Safari, Opera e IE. Dos navega-
dores mveis, temos suporte em Chrome, Firefox, Opera, IE e Blackberry:
http://caniuse.com/form-validation
Se voc quiser suportar navegadores mais antigos, recomendamos o uso de um polyfll:
https://github.com/aFarkas/webshim
. Exvncc:os: vnt:onXo comHTML
) Adicione o atributo required nos campos Nome e CPF.
Teste submeter o formulrio sem preencher esse campos.
) Algumas validaes j so implcitas apenas por usarmos o input type correto. Por exemplo, tente sub-
meter o formulrio preenchendo o Email com um valor invlido (com dois @ por exemplo).
) Podemos estilizar no CSS quando um campo est invlido:
.form-control:invalid {
border: 1px solid #cc0000;
}
) (opcional avanado) Implemente uma mensagem customizada para erro de email de invlido usando a
API JavaScript das validaes HTML.
document.querySelector('input[type=email]').oninvalid = function() {
// remove mensagens de erro antigas
this.setCustomValidity("");
// reexecuta validao
// se invlido, coloca mensagem de erro
this.setCustomValidity("Email invlido");
}
};
Captulo - Componentes complexos do Bootstrap e mais HTML - Exerccios: validao com HTML - Pgina
. ComvoNvN1vs JnvnScn:v1 oo Boo1s1nnv
Alm de componentes CSS puro do Bootstrap como panel e jumbotron, temos outros componentes mais
avanados que envolvem interatividade e JavaScript.
H muita coisa disponvel por padro no Bootstrap, pelo menos os componentes mais comuns como janela
modal, galeria de imagens, dropdowns, menus de navegao e mais.
http://getbootstrap.com/javascript/
No exerccio, vamos usar dois: o menu superior (navbar) e janelas modais.
. Exvncc:os: Nnvnnn v JnvnScn:v1
) Um componente muito famoso do Bootstrap seu menu superior, chamado de navbar. O HTML um
pouco mais complexo pois se trata de um menu completo, mas relativamente fcil.
Implemente um navbar em nossa pgina acima do jumbotron, logo no topo da pgina:
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="/">Mirror Fashion</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">Sobre</a></li>
<li><a href="#">Perguntas frequentes</a></li>
<li><a href="#">Entre em contato</a></li>
</ul>
</nav>
Teste o resultado no navegador.
) Repare que o menu no gruda no jumbotron por ter uma margem por padro. Sem problemas, com um
CSS bem simples podemos customizar o componente.
Remova a margem da navbar adicionando esse CSS:
<style>
.navbar {
margin: 0;
}
</style>
Alm disso, adicione no <nav> a classe navbar-static-top.
Teste novamente.
Captulo - Componentes complexos do Bootstrap e mais HTML - Componentes JavaScript do Bootstrap - Pgina
) Teste o menu em resolues menores. Note que o Bootstrap ajusta automaticamente o navbar em telas
menores. Por padro, o comportamento mudar o menu de horizontal para vertical em mobile.
Veja esse comportamento redimensionando o browser.
) Uma outra soluo para menus em telas pequenas de juntar as opes em uma espcie de dropdown
que s abre quando ativado. Isso , criar um boto para ativar o menu (geralmente com o famoso cone
do sanduche).
bem simples fazer isso com Bootstrap, a funcionalidade est toda pronta.
Para fazer o menu colapsar em telas pequenas, basta adicionar classes no <ul>: a collapse e a navbar-
collapse.
<ul class="nav navbar-nav collapse navbar-collapse">
Se voc testar agora, vai notar que o menu some nas telas menores. Para exibi-lo, precisamos fazer o
prximo passo: criar o cone que ativa o menu.
Dentro do navbar-header, logo abaixo do <a>, crie um boto de ativao. O boto apenas o texto
menu mas possui a classe navbar-toggle. Alm disso, dois outros parmetros confguram seu funcio-
namento com o collapse que usamos antes:
<button class="navbar-toggle" type="button"
data-target=".navbar-collapse" data-toggle="collapse">
menu
</button>
Se testar agora, vai notar que o menu aparece mas no funciona quando clicado. porque essa funciona-
lidade no Bootstrap implementada com JavaScript. A boa notcia que no precisamos escrever uma
linha de cdigo JS sequer, mas para tudo funcionar precisamos adicionar o JavaScript do Bootstrap.
No fm da pgina, logo antes de fechar o </body>, chame o arquivo do Bootstrap e do jQuery:
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
Teste novamente e veja o plugin funcionando. Usamos o JavaScript do Bootstrap implicitamente.
) H muitas opes possveis para o navbar. Por exemplo, podemos inverter as cores e usar um esquema
mais escuro apenas trocando a classe navbar-default pela classe navbar-inverse.
Para saber mais sobre o navbar: http://getbootstrap.com/components/navbar
) Por falar em customizaes, uma grande vantagem do Bootstrap seu imenso suporte na comunidade.
Isso se traduz em muitas ferramentas e complementos desenvolvidos pra ele, como novos temas.
Deixamos no projeto umtema chamado fatly, open source. Para us-lo, basta trocar o bootstrap.css pelo
arquivo dele no head:
<link rel="stylesheet" href="css/bootstrap-flatly.css">
Captulo - Componentes complexos do Bootstrap e mais HTML - Exerccios: navbar e JavaScript - Pgina
) (opcional) Use cones do glyphicons no menu. Basta coloc-los dentro dos itens que quiser. Algumas
sugestes:
<span class="glyphicon glyphicon-home"></span>
<span class="glyphicon glyphicon-question-sign"></span>
<span class="glyphicon glyphicon-list-alt"></span>
<span class="glyphicon glyphicon-bullhorn"></span>
Outra sugesto trocar a palavra menu que usamos no navbar colapsado pelo cone do sanduche:
<span class="glyphicon glyphicon-align-justify"></span>
Se quiser mudar a cor do cone, basta usar CSS e a propriedade color:
.navbar .glyphicon {
color: yellow;
}
Consulte outros na documentao: http://getbootstrap.com/components/glyphicons
) (opcional) Troque a classe navbar-static-top pela navbar-fxed-top. Repare que o menu fca fxo no topo
mesmo com scroll.
Voc talvez queira aplicar um padding no body pro contedo no subir:
body { padding-top: 70px; }
) (opcional) No navbar-header, use um logo da Mirror Fashion em vez de texto.
. Exvncc:os: moont
) Entre os vrios componentes prontos do Bootstrap, temos as janelas modais, recurso bastante usado em
muitos sites. Vamos criar um modal para mostrar perguntas frequentes do cliente. Sua implementao
bastante simples.
Primeiro, defnimos o contedo da janela emumdiv separado comclasse modal. Aestrutura umpouco
complexa, exigindo vrios elementos, mas bastante autoexplicativa.
Coloque o cdigo abaixo logo depois da div com a classe container.
<div class="modal" id="faq">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Perguntas frequentes</h3>
</div>
Captulo - Componentes complexos do Bootstrap e mais HTML - Exerccios: modal - Pgina
<div class="modal-body">
<h4>Posso pagar com boleto?</h4>
<p>Nope.</p>
<h4>Qual o prazo de entrega?</h4>
<p>28 min ou seu dinheiro de volta.</p>
<h4>Por que s posso comprar 1 produto por vez?</h4>
<p>Foco, meu caro, foco.</p>
</div>
</div>
</div>
</div>
O detalhe importante o ID do modal (faq no nosso caso). por ele que identifcaremos como abrir o
modal.
No nosso caso, queremos que o modal abra ao clicarmos no item Perguntas recentes no navbar
superior que criamos antes. Basta alterar o link pra apontar a ncora para o ID do modal e usar
data-toggle="modal":
<a data-toggle="modal" href="#faq">Perguntas frequentes</a>
Teste a funcionalidade do modal.
Para saber mais do modal: http://getbootstrap.com/javascript/modals
) (opcional) Para fechar o modal, a nica opo clicar fora dele. Podemos melhorar a usabilidade criando
um boto no topo do modal que faz seu fechamento.
Dentro do modal-header, adicione logo no incio um boto:
<button type="button" class="close" data-dismiss="modal">×</button>
) (opcional) Podemos trocar o efeito de apario do modal apenas adicionando uma classe simples no div
que tem a classe modal. Adicione a classe fade.
. Pnnn snnvn mn:s: vNv:o ov vmn:ts comPHP
Muitas situaes prticas exigem o envio de um email numa aplicao Web. Pode ser uma mensagem num
formulrio de contato, um email de confrmao de compra, uma notifcao de certa operao executada,
e muito mais.
Com HTML/JS puro no possvel enviar emails em nome da aplicao. preciso do servidor. E isso
muito fcil de fazer com PHP atravs da funo mail.
http://php.net/mail
Captulo - Componentes complexos do Bootstrap e mais HTML - Para saber mais: envio de emails com PHP - Pgina
<?php
mail("contato@caelum.com.br", "Curso bom!",
"Escrevendo pra pedir desconto no prximo!");
?>
O primeiro argumento o TO, o segundo SUBJECT e o terceiro a mensagem.
EN1nvcn ov vmn:t
Enviar o email pelo PHP fcil mas ele chegar efetivamente do outro lado outra histria. Para
combater spams, a maioria dos provedores de email coloca diversas barreiras a quem deseja
enviar emails. preciso usar autenticao de segurana, estar atrs de um IP confvel e muito
mais.
No curso e emcasa, bempossvel que seus testes no funcionem. Muitos provedores domsticos
bloqueiam as portas de envio de email e muitos servidores de email no aceitam mensagens de
IPs dinmicos.
Na prtica, para garantir o envio do email, use um provedor de confana. O cdigo PHP
aquele que vimos sempre, mas execut-lo numa hospedagemconfvel vai garantir que seu email
chegue. Em casa difcil de funcionar.
. Exvncc:os ovc:oNn:s: vmn:t ov coNv:nmnXo
) Crie uma nova pgina efetivar.php que vai ser responsvel por confrmar a compra. Por enquanto, tem
apenas uma frase simples:
<h1>Obrigado por comprar na Mirror Fashion!</h1>
Altere o formulrio da checkout.php pra submeter pra essa pagina nova:
<form action="efetivar.php" method="POST">
) Na efetivar.php, escreva o envio do email usando alguns dos parmetros enviado no formulrio de chec-
kout:
<?php
mail("$_POST[email]", "Compra efetuada na Mirror Fashion",
"$_POST[nome], sua compra foi efetivada. Obrigado");
?>
Teste o envio do email.
) (opcional) Implemente um design bacana pra essa pgina de confrmao de compra.
Captulo - Componentes complexos do Bootstrap e mais HTML - Exerccios opcionais: email de confrmao - Pgina
. D:sccssXovmnctn: os vnontvmns ooBoo1s1nnv v qcnNoo
NXo csK-to
Captulo - Componentes complexos do Bootstrap e mais HTML - Discusso em aula: os problemas do Bootstrap e quando
no us-lo - Pgina
C
jQuery
O primeiro problema para todos, homens e mulheres, no aprender, mas desaprender
Gloria Steinem
Por conta das difculdades enfrentadas pelos programadores JavaScript para pginas Web, foi criada uma
biblioteca que traz diversas funcionalidades voltadas soluo dos problemas mais difceis de serem contor-
nados com o uso do JavaScript puro.
A principal vantagem na adoo de uma biblioteca de JavaScript permitir uma maior compatibilidade de
um mesmo cdigo com diversos navegadores. Uma maneira de se atingir esse objetivo criando funes
que verifcamquaisquer caractersticas necessrias e permitamque o programador escreva umcdigo nico
para todos os navegadores.
Alm dessa vantagem, o jQuery, que hoje a biblioteca padro na programao front-end para Web, traz
uma sintaxe mais fuida nas tarefas mais comuns ao programador que so: selecionar um elemento do
documento e alterar suas caractersticas.
. )Qcvnv - A vcNXo
OjQuery uma grande biblioteca que contmdiversas funes que facilitama vida do programador. Amais
importante delas, que inicia a maioria dos cdigos, a funo .
Com ela possvel selecionar elementos com maior facilidade, maior compatibilidade, e com menos cdigo.
Por exemplo:
// JavaScript "puro"
var cabecalho = document.getElementById("cabecalho");
if (cabecalho.attachEvent) {
cabecalho.attachEvent("onclick", function (event) {
alert("Voc clicou no cabealho, usurio do IE!");
});
} else if (cabecalho.addEventListener) {
cabecalho.addEventListener("click", function (event) {
alert("Voc clicou no cabealho!")
}, false);
}
// jQuery
$("#cabecalho").click(function (event) {
alert("Voc clicou no cabealho!");
});
Note como a sintaxe do jQuery bemmenor, e a biblioteca se encarrega de encontrar o modo mais compatvel
possvel para adicionar o evento ao elemento cujo id cabecalho.
Existem diversas funes que o jQuery permite que utilizemos para alterar os elementos que selecionamos
pela funo , e essas funes podem ser encadeadas, por exemplo:
$("#cabecalho").css({"margin-top": "20px", "color": "#333333"})
.addClass("selecionado");
No cdigo acima, primeiramente chamamos a funo $ e passamos como argumento uma String idntica ao
seletor CSS que utilizaramos para selecionar o elemento de id cabecalho. Na sequncia chamamos a funo
css e passamos um objeto como argumento, essa funo adicionar ou alterar as informaes desse objeto
como propriedades de estilo do elemento que selecionamos com a funo $. Em seguida chamamos mais
uma funo, a addClass, que vai adicionar o valor selecionado ao atributo class do elemento com o id
cabecalho.
Dessa maneira, possvel fazer muito mais com muito menos cdigo, e ainda por cima de uma maneira que
funciona em diversos navegadores.
. )Qcvnv Svtvc1ons
Umdos maiores poderes do jQuery est na sua capacidade de selecionar elementos a partir de seletores CSS.
Como j aprendemos, exitem diversas formas de selecionarmos quais elementos ganharo determinado es-
tilo. Infelizmente muitos desses seletores no funcionam em todos os navegadores. Contudo, no jQuery, os
temos todos nossa disposio.
Por exemplo, se quisermos esconder todas as tags <td> flhas de um <tbody>, basta:
Captulo - jQuery - jQuery Selectors - Pgina
$('tbody td').hide();
Seletores mais comuns:
// pinta o fundo do formulario com id "form" de preto
$('#form').css('background', 'black');
// esconde todos os elementos com o atributo "class" igual a "headline"
$('.headline').hide();
// muda o texto de todos os pargrafos
$('p').text('al :D');
Mais exemplos:
$('div > p:first'); // o primeiro elemento <p> imediatamente filho de um <div>
$('input:hidden'); // todos os inputs invisveis
$('input:selected'); // todas as checkboxes selecionadas
$('input[type=button]'); // todos os inputs com type="button"
$('td, th'); // todas as tds e ths
Lembre-se de que a funo que chamamos aps o seletor aplicada para todos os elementos retornados.
Veja:
// forma ineficiente
alert($('div').text() + $('p').text() + $('ul li').text());
// forma eficiente :D
alert($('div, p, ul li').text());
A funo text() chamada para todos os <div>s, <p>s, e <li>s flhos de <ul>s.
. F:t1nos ccs1om:znoos v von DOM
Existemdiversos seletores herdados do css que servempara selecionar elementos baseados no DOM. Alguns
deles so:
Captulo - jQuery - Filtros customizados e por DOM - Pgina
$('div > p'); // <p>s imediatamente filhos de <div>
$('p + p'); // <p>s imediatamente precedidos por outro <p>
$('div:first-child'); // um elemento <div> que seja o primeiro filho
$('div:last-child'); // um elemento <div> que seja o ltimo filho
$('div > *:first-child'); // um elemento que seja o primeiro filho direto de uma <div>
$('div > *:last-child'); // um elemento que seja o ultimo filho direto de uma <div>
$('div p:nth(0)'); // o primeiro elemento <p> filho de uma <div>
$('div:empty'); // <div>s vazios
. U1:t:1Kn:o ov :1vnnXo oo )Qcvnv
O jQuery traz tambm entre suas diversas funcionalidades, uma funo que facilita a iterao em elementos
de um Array com uma sintaxe mais agradvel:
$("#menu-departamentos li").each(function (index, item) {
alert(item.text());
});
Afuno each chamada logo aps umseletor executa a funo que passamos como argumento para cada um
dos itens encontrados. Essa funo precisa de dois argumentos. Oprimeiro ser o ndice do elemento atual
na coleo ( para o primeiro, para o segundo e assim por diante), e o segundo ser o prprio elemento.
Tambm possvel utilizar a funo each do jQuery com qualquer Array:
var pessoas = ["Joo", "Jos", "Maria", "Antnio"];
$.each(pessoas, function(index, item) {
alert(item);
})
Nesse caso, chamamos a funo each diretamente aps o $, pois essa implementao ummtodo do prprio
objeto $. Passamos dois argumentos, o primeiro o Array que queremos percorrer e o segundo a funo que
desejamos executar para cada um dos itens do Array.
. Cnnnc1vns1:cns ov vxvccXo
Para utilizarmos o jQuery em nossos projetos com maior segurana, devemos tomar alguns cuidados.
Captulo - jQuery - Utilitrio de iterao do jQuery - Pgina
Imvon1nXo
Antes de mais nada necessrio incluir o jQuery em nossa pgina. S assim o navegador executar seu
cdigo para que possamos utilizar suas funcionalidades em nosso cdigo.
Por isso necessrio que a tag <script> do jQuery seja a primeira de todas na ordem de nosso documento:
<script src="scripts/jquery-1.7.js"></script>

<script src="scripts/meuscript.js"></script>
<script src="scripts/meuoutroscript.js"</script>
Exvcc1nn somvN1v nvos cnnnvcnn
Como estamos constantemente selecionando elementos do documento e alterando suas caractersticas,
importante garantir que os elementos que pretendemos utilizar j tenham sido carregados pelo navegador.
A melhor maneira de garantir isso somente executar nosso script aps o trmino do carregamento total da
pgina com a funo $ dessa maneira:
$(function() {
$("#cabecalho").css({"background-color": "#000000"});
})
Essa funo $ que recebe uma funo annima como argumento garante que o cdigo dentro dela s ser
executado ao fm do carregamento de todos os elementos da pgina.
. Mn:s vnooc1os Nn nomv
Uma tcnica comum de se implementar com JavaScript a de permitir mais contedo ser mostrado na tela
a partir de algum clique ou at ao se passar o mouse em cima.
Na nossa pgina, exibimos produtos emcada painel de destaque. Poderamos criar umboto para Mostrar
mais produtos que exiba outros .
Para implementar, a maneira mais simples inserir esses produtos adicionais no HTML e escond-los com
CSS usando display:none. A colocamos o boto de Mostrar Mais e, via JavaScript, exibimos quando o
usurio clicar.
Captulo - jQuery - Mais produtos na home - Pgina
CnnnvcnmvN1o ov coN1voo comA)nx
No nosso exerccio, vamos apenas esconder ou exibir o contedo usando CSS e JavaScript. Em
alguns casos, pode ser interessante baixar contedo novo do servidor no momento do clique.
Esse tipo de pgina usa Ajax para requisitar novos dados ao servidor e inseri-los dinamicamente
na pgina via JavaScript. Ajax e outras tcnicas de JavaScript avanadas so tpicos do curso
WD- da Formao Web da Caelum:
http://www.caelum.com.br/curso/wd
. Exvncc:os: )Qcvnv Nn nomv
) Aumente a quantidade de produtos exibidos nos painis da home para . Para isso, basta alterar o par-
metro na busca (ao lado do LIMIT).
Teste novamente a pgina e veja que so mostrados muitos produtos. Depois, vamos esconder a metade
e mostrar apenas se o usurio quiser ver.
) Crie um <button> no fnal de cada DIV painel, logo aps a lista <ol>. Esse ser o boto responsvel por
exibir os produtos.
<button type="button">Mostra mais</button>
No estilos.css, esconda esse boto por padro. Ele s vai ser exibido quando os produtos adicionais esti-
verem colapsados.
.painel button {
display: none;
}
Repare como ainda no fzemos a funcionalidade em JavaScript para mostrar os produtos. Mas a pgina
usvel e vlida mesmo nesse caso. Aideia que, na falta de JavaScript, todos os produtos sejamexibidos
e o boto esteja escondido.
) Implemente a funcionalidade de compactar o painel de produtos para mostrar apenas os primeiros por
padro. Vamos fazer isso com CSS, atravs de uma nova classe painel-compacto.
So duas coisas: esconder os produtos a mais, e exibir o boto que vai fazer a funcionalidade.
.painel-compacto li:nth-child(n+7) {
display: none;
}
.painel-compacto button {
display: block;
}
Captulo - jQuery - Exerccios: jQuery na home - Pgina
Essa classe, claro, s vai fazer efeito se adicionarmos ela na pgina. Para testar, v no div comclasse painel
e adicione a classe painel-compacto do lado.
) Estamos sem JavaScript ainda na pgina. E, j que adicionamos a classe painel-compacto direto no
HTML, quebramos a experincia do usurio nesse caso. Perceba que os produtos adicionais fcam es-
condidos e boto aparece.
Mas nada funciona! Pssima experincia.
Claro que, nesse caso, porque no implementamos ainda. Mas imagine o cenrio onde, mesmo com
tudo implementado, o JavaScript no carrega, acontece um erro ou o usurio desabilitou.
) Vamos implementar a funcionalidade em JavaScript. O primeiro passo remover a classe
painel-compacto do HTML. Como ela uma classe atrelada a funcionalidade JS, vamos adicion-la com
jQuery, apenas se o JS for executado.
Primeiro, vamos importar o jQuery na home. Inclua a seguinte linha imediatamente antes da importao
do home.js:
Agora, no home.js, faa:
$('.novidades').addClass('painel-compacto');
O resultado visual parece o mesmo. Mas refita sobre as implicaes de progressive enhancement, essen-
cial para um projeto de qualidade.
Ainda no home.js, implemente o evento de clique no boto. Ele deve remover a classe painel-compacto,
fazendo o produto aparecer:
$('.novidades button').click(function() {
$('.novidades').removeClass('painel-compacto');
});
Teste a funcionalidade.
) (opcional) Implemente a mesma funcionalidade para o painel da direita, o mais-vendidos.
) (opcional avanado) Em vez de escrever o cdigo x para suportar os painis, podemos generaliz-lo e
resolver as duas coisas de uma vez.
$('.painel').addClass('painel-compacto');
$('.painel button').click(function() {
$(this).parent().removeClass('painel-compacto');
});
) (opcional trabalhoso) Podemos estilizar o boto de mostrar mais produtos com regras CSS que apren-
demos. Uma sugesto:
.painel button {
/* posicionamento */
float: right;
margin-right: 10px;
padding: 10px;
/* estilo */
border: 0;
border-radius: 4px;
box-shadow: 1px 1px 3px rgba(30,30,30,0.5);
color: white;
font-size: 1em;
text-shadow: 1px 0 1px black;
/* animao*/
transition: 0.3s;
}
.painel button:hover {
box-shadow: 1px 0 20px rgba(200,200,120,0.9);
}
E at mais frescuras, se estiver disposto:
.painel button {
color: white;
position: relative;
}
.painel button:after {
/* elemento vazio */
content: '';
display: block;
height: 0;
width: 0;
/* triangulo */
border-top: 10px solid #333;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
/* posicionamento */
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
/* animao */
transition: 0.3s;
}
.painel button:hover:after {
border-top-color: #393939;
}
. OvtvmvN1o oc1vc1 oo HTML
Na pgina de produto havamos criado um input range para selecionar o tamanho da roupa. O problema
que no h feedback visual de qual valor est selecionado. Podemos ento criar um outro elemento visual na
pgina apenas para mostrar o valor atualmente selecionado no range.
Vamos usar JavaScript pra isso. Na prtica, escutamos o evento onchange do range e toda vez que ele mudar
de valor, pegamos o valor mais atual e copiamos pra esse novo elemento visual exibir.
Mas que tag usar pra representar esse elemento cujo valor resultado do valor escolhido no range?
No HTML, temos uma tag nova comvalor semntico exato pra essa situao: o <output>representa a sada
de algum clculo ou valor simples obtido a partir de um ou mais componentes de um formulrio. Ele
tem um atributo for** que aponta de qual elemento saiu o valor.
<output for="tamanho" name="valortamanho">42</output>
Visualmente, como se fosse um DIV simples. Depois vamos estilizar esse componente do jeito que quiser-
mos com CSS. A grande sacada o valor semntico da tag e o que ela representa.
O valor em si est como estaticamente. O que precisamos atualizar esse valor toda vez que o valor do
input range mudar. Pra isso, precisamos de JavaScript. E vamos implementar com jQuery no exerccio a
seguir.
. Exvncc:os: mos1nnNoo 1nmnNno oo vnooc1o com)Qcvnv
) Na pgina produto.php, adicione o elemento output do HTML logo aps o input range, ainda dentro
do feldset de escolha de tamanho.
<output for="tamanho" name="valortamanho">42</output>
Repare que esse elemento no tem visual especfco e tambm no atualiza seu valor sozinho. Vamos
implementar isso via JavaScript, usando jQuery.
Captulo - jQuery - O elemento output do HTML - Pgina
) A atualizao do valor no output deve ser feita via JS. bastante simples: quando o input range mudar de
valor (evento oninput), pegamos seu valor e jogamos no output.
Para escrever o JS voc pode criar um novo arquivo produto.js e import-lo na pgina. Ou, como o
cdigo bem pequeno, se preferir, pode escrever direto num elemento <script> na pgina.
O importante importar o jQuery antes do nosso cdigo, como fzemos antes:
O nosso cdigo :
$('[name=tamanho]').on('input', function(){
$('[name=valortamanho]').val(this.value);
});
Teste o funcionamento no slider no range, veja se o output atualiza de valor corretamente.
IE
Para suportar o IE, precisamos colocar o evento onchange. O correto no HTML seria usar o
evento oninput, que at funciona melhor nos browsers modernos. Se quiser suportar os dois no
jQuery, podemos atrelar dois eventos mesma funo de uma s vez:
$('[name=tamanho]').on('change input', function(){ ...
Alm disso, como o elemento output no corretamente reconhecido pelo navegador, alterar
a propriedade value dele no vai ter o resultado esperado. Para o nosso cdigo funcionar nele,
precisamos mexer diretamente no texto do elemento:
$('[name=valortamanho]').text(this.value);
) Estilize o output para ter um design mais ajustado a nossa pgina de produto:
.tamanhos output {
height: 44px;
width: 44px;
line-height: 44px;
text-align: center;
Captulo - jQuery - Exerccios: mostrando tamanho do produto com jQuery - Pgina
border: 3px solid #666;
border-radius: 50%;
color: #555;
}
. FonmctKn:os o:NXm:cos com)Qcvnv
muito comum em lojas virtuais que se possa usar o mesmo endereo tanto para entrega quanto para co-
brana, evitando digitar duas vezes o mesmo contedo.
Vamos implementar isso no nosso checkout usando JavaScript para copiar os dados de umformulrio para
o outro.
O segredo criar um boto que, quando clicado, pega os dados dos campos do Endereo de Entrega e joga
nos campos correspondentes no Endereo de Cobrana.
Pra isso, vamos usar no jQuery a funo val() que serve tanto pra ler o valor de um campo quanto para
mudar o valor:
// l o valor do campo
$('#rua-entrega').val();
// muda o valor do campo
$('#cidade-entrega').val('Abacaxi do Norte');
. Exvncc:os: )nvnscn:v1 No cnvcoc1
) Crie um boto que ser responsvel por copiar os dados de um endereo para outro. Esse cdigo deve
estar dentro do elemento <legend> do Endereo de cobrana.
<button class="btn btn-default btn-xs" type="button">Mesmo endereo</button>
Aproveite e adicione um id endereco-cobranca no <fieldset> que contm os campos de cobrana. Va-
mos usar esse id depois no JS.
<fieldset id="endereco-cobranca" class="col-md-6">
Teste e veja o boto no formulrio. Repare o que cada classe do Bootstrap faz.
) Afuncionalidade de copiar os dados consiste emadicionar umevento de clique no boto que criamos no
exerccio anterior. Ao disparar esse evento, pegamos o valor de cada componente do endereo de entrega
e copiamos para o componente correspondente no endereo de cobrana.
Com jQuery, muito simples:
Captulo - jQuery - Formulrios dinmicos com jQuery - Pgina
$('#endereco-cobranca button').click(function(){
$('#rua-cobranca').val($('#rua-entrega').val());
$('#cep-cobranca').val($('#cep-entrega').val());
$('#cidade-cobranca').val($('#cidade-entrega').val());
$('#estado-cobranca').val($('#estado-entrega').val());
});
Teste o funcionamento desse boto. Preencha o endereo de entrega e clique em copiar para o endereo
de cobrana.
) (opcional) Use um cone do glyphicons dentro do boto pra estilizar. Sugesto:
<span class="glyphicon glyphicon-refresh"></span>
) (opcional avanado) Se voc garantir que os campos dos dois formulrios so os mesmos e os nomes
seguem uma regra (ex. rua-entrega"/"rua-cobranca), podemos fazer um cdigo mais genrico que no
precise listar todos os campos um por um.
Estude o cdigo a seguir. Ele troca os valores de todos os campos do form de cobrana a partir do valor
equivalente no form de entrega. Descobrimos o nome do campo pegando seu nome com cobranca e
fazendo replace por entrega.
$('#endereco-cobranca .form-control').val(function(){
var original = $('#' + this.name.replace('cobranca', 'entrega'));
return original.val();
});
) (opcional avanado e trabalhoso) Ainda mais elaborado seria fazer umformulrio que, conforme o usu-
rio digita no campo de entrega, j edita automaticamente o campo correspondente de cobrana.
Usamos os eventos oninput e onchange no JavaScript.
$('#endereco-cobranca .form-control').each(function(){
var original = $('#' + this.name.replace('cobranca', 'entrega'));
var copiado = $(this);
copiado.val(original.val());
original.on('change input', function() {
copiado.val(original.val());
});
});
$('#endereco-cobranca').attr('disabled', 'disabled');
Captulo - jQuery - Exerccios: javascript no checkout - Pgina
B:No:Nc comANcctnn.JS
Esse recurso de atrelar o valor de umcampo a outro muitas vezes chamado de binding. Anossa
soluo nesse exerccio caseira e manual, apesar de funcionar bem.
Existem frameworks completos para se trabalhar com binding em JS. Um deles, bastante usado
e famoso, o Angular.JS que vemos no curso de JavaScript avanado da Caelum.
http://www.caelum.com.br/curso-javascript-jquery/
. Ptcc:Ns )Qcvnv
Alm de usar os componentes JavaScript que vm prontos no Bootstrap, podemos baixar outros prontos.
So plugins feitos para o jQuery ou para o Bootstrap que trazem novas funcionalidades.
A grande riqueza do jQuery justo sua vasta gama de plugins disponveis. H at um diretrio no site deles:
http://plugins.jquery.com/
Cada plugin um arquivo JavaScript que voc inclui na pgina e adiciona uma funcionalidade especfca.
Muitos exigem que escrevamos um pouco de cdigo pra confgurar seu uso; outros so mais plug and play.
Voc vai precisar consultar a documentao do plugin especfco quando for usar.
. Exvncc:os: vtcc:N
) Um plugin que podemos usar na nossa pgina mscaras numricas para digitar em campos como CPF
ou CEP. Isso ajuda bastante o usurio.
Para usar esse plugin, basta invocar seu arquivo JavaScript no fnal da pgina do checkout, logo aps a
chamada do jQuery e do bootstrap.js:
<script src="js/inputmask-plugin.js"></script>
) Cada campo que for usar uma mscara numrica precisa defnir o atributo data-mask com o formato a
ser usado.
No <input> do CPF, adicione o atributo:
data-mask="999.999.999-99"
) Nos campos de CEP, adicione no <input> o atributo:
data-mask="99999-99"
) Nos campos do nmero do carto com cdigo de verifcao, podemos usar:
Captulo - jQuery - Plugins jQuery - Pgina
data-mask="9999 9999 9999 9999 - 999"
) Refaa os exerccios da home da validao da busca e do banner usando jQuery. Tente ver como o cdigo
fca bem menor e mais legvel.
Captulo - jQuery - Exerccios opcionais - Pgina
C
Integraes com servios Web
Pessoas viviam em fazendas, depois foram viver nas cidades. Agora todos ns vamos viver na Internet
Sean Parker
. Wvn . v :N1vcnnovs
Boa parte do grande poder da Web, de estarmos conectados o tempo todo, o de permitir a integrao entre
as pginas. A Web nasceu com esse conceito de tudo interligado, por meio dos links.
Mas a tal Web . trouxe ideias ainda mais complexas. Interligar pginas e servios diferentes, criando novos
resultados a partir de outras pginas.
So mapas do Google Maps espalhados em vrios sites por a. Ou os onipresentes botes de curtir do Face-
book. E muitos outros exemplos.
. :vnnmvs
Uma das formas de se fazer esse tipo de integrao com o uso da tag <iframe>. Ela nos permite embutir o
contedo de uma outra pgina no meio da nossa muito facilmente:
<iframe src="outrapagina.html"></iframe>
Podemos incluir pginas internas ou externas. E quando se trata das externas, fcil usar esse recurso para
incluir componentes reaproveitveis de outros servios. Como mapas.
. Vovo vmnc1:oo comYocTcnv
O YouTube prov uma integrao muito fcil com nossas pginas. Podemos incluir um vdeo qualquer pra
ser tocado diretamente em nossa pgina.
Basta entrar no YouTube e copiar o endereo de um <iframe> que eles disponibilizam para ser embutido na
nossa pgina.
Vamos fazer isso em nosso projeto.
. Exvncc:os: :vnnmv
) Acesse o vdeo institucional da Mirror Fashion: http://youtu.be/TbabHEhY
Vamos embutir o vdeo em nossa pgina Sobre, no meio do texto explicativo. Para obter o cdigo de
embutir no YouTube, localize a opo Share/Compartilhar e v na aba Embed. Ele vai te dar o cdigo
HTML do iframe.
<iframe width="420" height="315" src="//www.youtube.com/embed/Tb06abHE4hY"
frameborder="0" allowfullscreen></iframe>
Copie o cdigo do iframe e cole na pgina Sobre onde achar melhor. Teste a pgina.
. Exvncc:o ovc:oNnt: Gooctv Mnvs
) O Google Maps possui recurso parecido de embutir um mapa completo atravs de um iframe.
Abra o Google Maps no seu navegador e acesse umendereo que usaremos para o site da Mirror Fashion.
Clique em compartilhar e copie o cdigo que aparece na opo HTML ( um iframe).
Captulo - Integraes com servios Web - Vdeo embutido com YouTube - Pgina
) Na pgina sobre.html, adicione o iframe copiado no ponto que achar mais conveniente para exibir pro
usurio:
<iframe width="425" height="350" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.com.br/maps?q=Jacarezinho&output=embed"></iframe>
Abra a pgina e veja o mapa l.
. Bo1Xo ov ccn1:n oo Fncvnoo
Boa parte dos sites atuais possui a funcionalidade de curtir do Facebook. um boto simples mas integrado
com a rede social que permite aos usurios curtirem a pgina atual e compartilhar essa informao em seus
perfs.
uma poderosa ferramenta de marketing, j que permite a recomendao pessoal de produtos e servios de
maneira viral.
Incluir essa funcionalidade no nosso site bastante simples. OFacebook prov umcdigo JavaScript e HTML
para copiarmos na nossa pgina, onde podemos passar diversas confguraes.
O boto representado por um div vazio cheio de parmetros:
<div class="fb-like" data-send="false" data-layout="box_count"
data-width="58" data-show-faces="false"></div>
Mas s esse div vazio, obviamente, no far o boto aparecer. Precisamos tambm importar um arquivo
JavaScript deles e rod-lo:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Captulo - Integraes com servios Web - Boto de curtir do Facebook - Pgina
Esse cdigo colocado uma vez s no fnal da pgina. Podemos ter vrios botes na mesma pgina.
Melhor que digitar esse cdigo usar a documentao no site do Facebook que nos permite customizar o
boto e j d o cdigo pronto para ser copiado:
https://developers.facebook.com/docs/reference/plugins/like/
. Exvncc:os: Fncvnoo
) Confgure o script do Facebook na pgina de Produto. Antes de fechar a tag body, adicione:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
) O boto em si um div que devemos colocar na pgina onde queremos exibi-lo. Para ns, coloque logo
aps os elementos de ttulo e preo do produto.
<div class="fb-like" data-href="http://mirrorfashion.net/loja"
data-send="false" data-layout="box_count"
data-width="58" data-show-faces="false"></div>
Teste a pgina e veja o boto renderizado.
) (opcional) Posicione o boto melhor na pgina usando CSS.
. Pnnn snnvn mn:s: OvvNGnnvn v wvn svmXN1:cn
Na rede social possvel adicionar uma indicao de uma pgina da Web para que todos os seus amigos
possam ver tambm, mas a essncia do compartilhamento no est s em mostrar aos seus amigos o que
voc est vendo agora. Para o Facebook muito importante obter informaes mais precisas sobre o que
aquilo que voc est compartilhando.
Captulo - Integraes com servios Web - Exerccios: Facebook - Pgina
Para garantir que essas informaes sejam mais acessveis, o Facebook criou uma srie de pequenas regras
que permitem uma integrao bem avanada com a rede social, o chamado protocolo OpenGraph.
Alm do benefcio claro de conseguir mostrar mais informaes sobre a pgina que voc quer comparti-
lhar, a rede social ainda se benefcia dessas informaes para compor seu perfl como consumidor. Essas
informaes associam o seu perfl aos assuntos que voc mais compartilha e so utilizadas para campanhas
publicitrias e sugestes de contedo cada vez mais precisas.
Mv1n 1ncs
Para fazer com que sua pgina seja compatvel com essa troca de informaes pelo Facebook necessrio
que algumas tags sejam inseridas na sua pgina. A implementao dessas tags partem do princpio que o
HTML pode ser estendido, como vimos no captulo sobre os fundamentos da Internet e XML.
<meta property="og:title" content="Fuzzy Cardigan">
<meta property="og:type" content="product">
<meta property="og:url"
content="http://mirrorfashion.net/loja/produto.html">
<meta property="og:image"
content="http://mirrorfashion.net/loja/img/produto-detalhe1.png">
<meta property="og:site_name" content="Mirror Fashion">
<meta property="og:description" content="O Fuzzy Cardigan fantstico para a
meia estao, quando o friozinho comea a chegar. Seu estilo parisiense
combina com o charme da estao.">
As tags meta acima demonstram como as informaes sobre determinado produto pode ser disponibilizada
no Facebook. Essas informaes fazem com que o compartilhamento de um usurio possa mostrar infor-
maes para outros que vo lev-los a clicar no contedo e compartilhar tambm.
As informaes requeridas so:
og:title - o ttulo da informao como ela deve ser compartilhada;
og:type - a categoria qual o objeto descrito na pgina deve ser includo;
og:image - o caminho de uma imagem que ser utilizada para exibir o objeto no Facebook;
og:url - o caminho ao qual o usurio ser levado ao clicar em um compartilhamento.
Outras informaes mostradas no exemplo so opcionais.
Para uma lista completa de quais os tipos possveis de categorizao de informaes, acesse http://developers.
facebook.com/docs/opengraph/types
Alm dessas informaes exemplifcadas, tambm possvel indicar um arquivo de udio em mp ou de
vdeo em fash ou mp para ser exibido diretamente no mural dos usurios que compartilham o contedo.
Captulo - Integraes com servios Web - Para saber mais: OpenGraph e web semntica - Pgina
Quando um usurio compartilha uma pgina de um projeto seu, e o projeto tem uma uma aplicao regis-
trada no Facebook, possvel enviar mensagens de update para todas as pessoas que j compartilharam
um link seu. Para isso preciso adicionar o ID da aplicao como meta informao:
<head>

<meta property="fb:app_id" content="0000000000">
</head>
Para facilitar o compartilhamento recomendado adicionar um boto de Like na pgina. Se o endereo
da sua pgina for adicionado ao campo de compartilhamento de status de um usurio do Facebook, o me-
canismo de compartilhamento vai obter essas informaes e mostrar uma prvia ao usurio.
. Exvncc:os ovc:oNn:s: OvvNGnnvn
) Adicione as tags do OpenGraph para customizar a forma como a pgina ser compartilhada no Facebook.
<meta property="og:title" content="Fuzzy Cardigan">
<meta property="og:type" content="product">
<meta property="og:url"
content="http://mirrorfashion.net/loja/produto.html">
<meta property="og:image"
<meta property="og:site_name" content="Mirror Fashion">
<meta property="og:description" content="O Fuzzy Cardigan fantstico para a
meia estao, quando o friozinho comea a chegar. Seu estilo parisiense
combina com o charme da estao.">
Teste novamente o compartilhamento da pgina no Facebook!
. Pnnn snnvn mn:s: Tw:11vn
Voc tambm pode acrescentar o boto de postar tweet. Basta seguir a documentao do Twitter:
https://dev.twitter.com/docs/tweet-button
O boto em si um link que ser transformado pelo script:
<a href="https://twitter.com/share"
class="twitter-share-button" data-count="vertical">Tweet</a>
E o script deve ser colocado no fnal da pgina tambm:
Captulo - Integraes com servios Web - Exerccios opcionais: OpenGraph - Pgina
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src="http://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
. Pnnn snnvn mn:s: Gooctv+
Podemos tambm colocar o boto de + do Google+. Para obter o cdigo, basta ir em:
http://www.google.com/webmasters/+/button/
O boto um div vazio, parecido com o do Facebook:
<div class="g-plusone" data-annotation="inline"></div>
E o script deve ser colocado no fnal da pgina:
<script type="text/javascript">
window.___gcfg = {lang: 'pt-BR'};
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
Alm disso, o Google+ possui metadados prprios diferentes daqueles do OpenGraph:

<html itemscope itemtype="http://schema.org/Product">

Captulo - Integraes com servios Web - Para saber mais: Google+ - Pgina
<meta itemprop="name" content="Fuzzy Cardigan">
<meta itemprop="description" content="O Fuzzy Cardigan fantstico para a
meia estao, quando o friozinho comea a chegar. Seu estilo
parisiense combina com o charme da estao.">
<meta itemprop="image"
. Exvncc:os ovc:oNn:s: Tw:11vn v Gooctv+
) Acrescente o boto do Twitter na pgina. Obtenha o cdigo em: https://dev.twitter.com/docs/
tweet-button
Ou use o boto vertical com:
<a href="https://twitter.com/share"
class="twitter-share-button" data-count="vertical">Tweet</a>
Alm disso, no fnal da pgina, importe o script do Twitter:
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src="http://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
) Coloque tambm o + do Google, cujo cdigo est em:
http://www.google.com/webmasters/+/button/
. FoN1vs ccs1om:znons com@voN1-vncv
Fontes na Web sempre foram um problema. S podemos declarar no font-family fontes que estejam dis-
ponveis na mquina quando o usurio visualizar a pgina, o que restringe bastante as opes.
Porm, desde o CSS . possvel incorporar novas fontes declarando a propriedade @font-face indicando
a URL onde o navegador pode baixar aquela fonte:
@font-face {
font-family: "Minha Fonte";
src: url("minhafonte.ttf");
}
E, surpreendentemente, essa funcionalidade existe desde o Internet Explorer .
Captulo - Integraes com servios Web - Exerccios opcionais: Twitter e Google+ - Pgina
Mas nem tudo so fores. O suporte entre navegadores um imenso problema. Cada um suporta um tipo
de arquivo. Fontes true type, por exemplo, padro entre designers, s suportado a partir do IE. O IE
usava fontes emformato EOT, outros navegadores TTF, o iPhone s SVGe ainda surgiu umterceiro formato
WOFF, que agora faz parte da especifcao.
. Svnv:os ov wvn voN1s
Lidar com essas diferenas entre navegadores um problema, e isso sem contar a difculdade de se obter as
fontes legalmente em vrios formatos e servi-las corretamente e de maneira otimizada.
Ultimamente surgiramservios de web fonts de terceiros, que oferecemtoda a infraestrutura necessria para
usarmos fontes na Web sem problemas e sem precisarmos instalar nada. As fontes so servidas direto dos
servidores do servio em uso da maneira correta e rpida.
Um dos mais famoso o Typekit: http://typekit.com/
um servio pago mas com preos acessveis e planos com todo tipo de fonte. Eles tm um catlogo imenso
com fontes famosas e de altssima qualidade.
E a alternativa gratuita mais famosa o Google Web Fonts: https://www.google.com/fonts
provido pelo Google apenas com fontes abertas e gratuitas. Seu catlogo , portanto, mais limitado, mas
possui excelentes opes e muito fcil de ser integrado a uma pgina Web, bastando importar umCSS deles
e usar a fonte.
. Exvncc:os: Gooctv Wvn FoN1s
) Vamos usar duas fontes do Google Web Fonts na nossa pgina inicial. Uma fonte base PT Sans e outra
para os ttulos dos painis, Bad Script.
Importe as fontes via CSS no topo do nosso Index:
<link href='http://fonts.googleapis.com/css?family=PT+Sans|Bad+Script'
rel='stylesheet'>
Use as fontes no estilos.css referenciando-as pelo nome:
body {
font-family: 'PT Sans', sans-serif;
}
.painel h2 {
font-family: 'Bad Script', sans-serif;
}
Abra a pgina no navegador e veja as mudanas visuais.
Captulo - Integraes com servios Web - Servios de web fonts - Pgina
) (opcional) Navegue no catlogo de fontes do Google emhttps://www.google.com/webfonts e escolha uma
outra fonte para usarmos no ttulo da pgina de produtos.
Captulo - Integraes com servios Web - Exerccios: Google Web Fonts - Pgina
C
Otimizaes de front-end
A esperana...: um sonho feito de despertares
Aristteles
Estudos de diversas empresas ao redor do mundo j provaram que sites rpidos, alm de mais prazerosos de
usar, trazem mais converses, vendas e usurios felizes.
A Amazon, por exemplo, descobriu que cada ms de melhora na velocidade de carregamento da pgina
trazia um crescimento de em seu faturamento.
O Yahoo! provou que cada ms de melhora em sua homepage provoca um aumento de no trfego dos
usurios.
A Mozilla tornou suas pginas .s mais rpidas e, com isso, causou um aumento de nos downloads do
Firefox. So milhes de downloads a mais por ano.
O Google descobriu que aumentar o tempo de carregamento da pgina de busca de .s para .s ao subir o
nmero de resultados de para diminua o trfego em .
At a Caelum j fez experimentos em seu Site. No nosso caso, uma pgina que tinha tempo de carregamento
de s em comparao com uma de s causava uma perda de na taxa de converses.
O1:m:znXo v co:sn ov vnocnnmnoonvs
Um dos maiores erros a se cometer com relao performance pensar que um problema exclusivo da
programao da parte server-side do projeto. Certamente um cdigo ruim no servidor pode causar imensos
gargalos de performance. Uma busca mal feita no banco de dados, um algoritmo pesado de executar etc.
Na esmagadora maioria das situaes, a realidade que o processamento server-side responsvel por menos
de do tempo total de carregamento de uma pgina. A maior parte dos gargalos de performance est em
prticas client-side!
Umestudo que fzemos com Sites de participantes de uma conferncia de tecnologia de alto nvel tcnico
- a QCon SP de - trouxe dados interessantes. Nessa amostra, o tempo mdio de carregamento da pgina
era de s (com casos bem graves, demorando mais de s). Mesmo assim, dos Sites executavam em
menos de ms no servidor. Os outros s so gastos em outros pontos, muito ligados a prticas client-side
que veremos.
. HTML v HTTP - Como vcNc:oNn n Wonto W:ov Wvn:
Apesar de que conhecer profundamente o funcionamento do protocolo HTTP no seja estritamente neces-
srio para a criao de pginas Web, entender como as coisas funcionam internamente nos ajuda a entender
uma srie de tcnicas e conceitos, resultando em maior qualidade na criao de pginas, alm de contribuir
para a confana do programador ao enfrentar um novo desafo.
Aprimeira coisa que devemos levar emconsiderao ao conhecer o ciclo de comunicao entre o navegador
(cliente) e o servidor, que o cliente deve conhecer a localizao da pgina (recurso) que ele deseja obter
e exibir ao usurio fnal. O cliente deve ser informado de qual o endereo do recurso necessrio em deter-
minado momento, normalmente o usurio fnal prov essa informao entrando um endereo na barra de
endereos do navegador, ou clicando em um link.
Esse endereo conhecido como URL (Universal Resource Locator), por exemplo:
http://209.85.227.121:80/index.html
Oendereo exemplifcado composto por partes bsicas. Aprimeira delas o protocolo de comunicao a
ser utilizado para a obteno do recurso. No exemplo acima o protocolo requerido o HTTP. Acomunicao
entre um cliente (geralmente o navegador) e um servidor pode ser feita com o uso de diversos protocolos,
por exemplo o FTP (File Transfer Protocol) para a transferncia de arquivos, ou o protocolo fle, de leitura
direta de arquivo quando desejamos obter um recurso acessvel diretamente pelo computador sem utilizar
uma conexo com um servidor Web.
Hoje em dia, os navegadores no precisam que explicitemos o protocolo HTTP em sua barra de endereos,
sendo ele o padro para as requisies de pginas Web.
A segunda e terceira partes, entre // e /, so o endereo IP do servidor (onde est hospedado o recurso que
queremos) e a porta de comunicao com o servidor. Os servidores Web utilizam a porta por padro,
ento no exemplo poderamos ter omitido essa informao que a comunicao seria feita com sucesso.
O endereo IP um cdigo composto de octetos representados em formato decimal separados por um
ponto, um nmero um tanto difcil de ser memorizado, (a prxima gerao de endereos IP, criada para
evitar o fm dos endereos disponveis formada por grupos de dgitos hexadecimais separados por :,
por exemplo: 2001:0db8:85a3:08d3:1319:8a2e:0370:7344) por isso a Web utiliza servidores de nomeao
de domnios (DNS), para que o usurio fnal possa informar um nome em vez de um nmero e uma porta,
por exemplo www.caelum.com.br.
Captulo - Otimizaes de front-end - HTML e HTTP - Como funciona a World Wide Web? - Pgina
A quarta parte o caminho do recurso que desejamos obter dentro do servidor. No nosso exemplo estamos
solicitando o arquivo index.html, que o nome padro de arquivo para a pgina inicial de um Site, e, nesse
caso, tambm poderia ser omitido. A adoo desses valores padres permite que para obtermos a pgina
inicial do site da Caelum, por exemplo, os usurios fnais digitem somente www.caelum.com.br na barra de
endereos de seu navegador.
Oc:cto HTTP
Conhecemos um pouco sobre URLs, e as utilizaremos quando formos adicionar links e recursos externos
em nossos documentos, mas o que acontece quando clicamos em um link ou digitamos um endereo no na-
vegador e clicamos em ir"? Essas aes disparam uma chamada, dando incio ao ciclo HTTP. Essa chamada
o que chamamos de request (requisio).
Acorreta comunicao entre os dois lados do ciclo depende de uma srie de informaes. UmHTTP request
leva consigo todos os dados necessrios para que o lado do servidor tome a deciso correta sobre o que fazer.
Existem algumas ferramentas que permitem que observemos quais so essas informaes.
O protocolo HTTP pode ser utilizado por uma srie de aplicaes, para uma srie de fnalidades. Nosso
foco no uso do HTTP para pginas da Web que podemos acessar de um navegador. Alguns navegadores
incluem ferramentas de inspeo da pgina em exibio, e a maioria dessas ferramentas consegue nos mos-
trar o contedo da requisio HTTP. Uma dessas ferramentas o complemento Firebug, disponvel para o
navegador Firefox.
Na imagem esto destacadas as informaes mais relevantes da requisio. A primeira delas a palavra
GET. GET um dos mtodos suportados pelo protocolo HTTP para realizar a comunicao, e ele deve ser
utilizado quando queremos obter umrecurso que o servidor temacesso. Caso o servidor encontre o recurso
que queremos, ele retorna para o cliente uma response (resposta) contendo o recurso que desejamos.
Outras informaes importantes so o endereo do recurso que desejamos obter (Host) e o tipo de recurso
que o cliente espera obter (Accept). No exemplo, esperamos encontrar uma pgina HTML pelo endereo
www.caelum.com.br.
Com essas informaes, o servidor processa o pedido e prepara uma response (resposta). Essa resposta
contm uma srie de informaes importantes para que o cliente possa tomar as decises necessrias e, no
caso de sucesso na comunicao, exibir o recurso para o usurio.
Captulo - Otimizaes de front-end - HTML e HTTP - Como funciona a World Wide Web? - Pgina
As informaes mais importantes, no nosso caso, so o cdigo da resposta e o tipo do recurso encontrado
(Content-Type). No nosso exemplo, o cdigo indica que o recurso foi localizado comsucesso e includo
na resposta.
Todas essas informaes que vimos at aqui fazem parte dos cabealhos da requisio e da resposta. So
informaes irrelevantes para o usurio, porm essenciais para o correto tratamento das informaes solici-
tadas. As informaes que sero exibidas no navegador para o usurio esto contidas no corpo da resposta.
No nosso exemplo, assimcomo emtoda requisio solicitando uma pgina Web, o corpo da resposta contm
as informaes marcadas para exibio correta no navegador.
. Pn:Ncv:os ov vnocnnmnXo o:s1n:ncon
Uma pgina Web uma aplicao distribuda. Isso signifca que h uma comunicao via rede entre dois
pontos. No caso, o navegador e o servidor da pgina.
E, como toda aplicao distribuda, h alguns princpios bsicos de performance. Quando h comunicao
remota envolvida, em geral, queremos:
Diminuir o volume de dados trafegados entre as partes.
e
Diminuir o nmero de chamadas remotas.
. FvnnnmvN1ns ov o:ncNos1:co - YStowv PncvSvvvo
O primeiro passo saber o que melhorar. H diversas boas prticas pregadas na literatura de performance
Web. Melhor ainda a existncia ferramentas automatizadas para diagnstico que analisamsua pgina e do
dicas sobre o qu e como melhorar. H at uma nota de a para voc saber o quo bem est nas prticas
de otimizao.
Captulo - Otimizaes de front-end - Princpios de programao distribuda - Pgina
As mais famosas ferramentas so duas extenses, a YSlow feita pelo pessoal do Yahoo! e a PageSpeed feita
pelo Google. Ambas so extenses para o Firefox e para Chrome - mas rodam melhor no Firefox. Para
instal-las, primeiramente, voc vai precisar do Firebug, depois s baix-las nos respectivos sites:
http://developer.yahoo.com/yslow/ http://code.google.com/speed/page-speed/download.html
O PageSpeed tem at uma verso online que analisa suas pginas que j estejam publicadas em algum ende-
reo na internet:
https://developers.google.com/pagespeed/
YStow
Abra o Firebug e clique no YSlow. Ele te mostra uma nota para as otimizaes da pgina e sugestes do que
melhorar.
D uma olhada nas regras. Note que h algumas que envolvem programao no servidor, como confgurar
compresso GZIP ou acertar os headers HTTP. uma boa conversar com os programadores do projeto para
tambm fazerem esses acertos no servidor, alm do que voc j vai fazer no client-side.
Vrias regras dizem respeito a otimizaes que j podemos implementar como comprimir/minifcar nossos
CSS e JavaScript, algo que veremos no tpico seguinte.
PncvSvvvo
Abra o Firebug e v na aba do PageSpeed. Ele lhe mostra uma nota para a pgina e diversas prticas de
otimizao. Aquelas que esto emvermelho so as que voc deveria fazer mas no fez. Amarelos so algumas
sugestes e verdes so as que voc est bem - mas s vezes h mais sugestes at nessas.
Pnnn snnvn mn:s: WvnPncvTvs1.onc
Outra ferramenta interessante e online a WebPageTest.org. Ela tambm nos d notas e sugestes de me-
lhoria. Um diferencial bem interessante que ela executa a pgina em navegadores reais em diversos lugares
do mundo e nos d mtricas de tempo de carregamento, e at umvdeo mostrando a performance de acordo
com o tempo.
Se voc j tem a pgina publicada em algum endereo, bem interessante testar essa ferramenta tambm.
. ComvnvssXo v m:N:v:cnXo ov CSS v JnvnScn:v1
Durante todo o curso, aprendemos diversas boas prticas de codifcao CSS e JavaScript. E, como toda
programao, um ponto importante manter a legibilidade do cdigo.
Dar bons nomes a variveis, escrever bons comentrios, escrever cdigo identado, com bom espaamento
visual etc.
Captulo - Otimizaes de front-end - Compresso e minifcao de CSS e JavaScript - Pgina
Entretanto, nada disso necessrio no momento do navegador renderizar a pgina. Um comentrio no
cdigo completamente intil na hora da execuo. Assim como espaos, identao ou nomes de variveis
legveis.
Mais que isso, todas essas prticas adicionam bytes e mais bytes aos arquivos CSS e JavaScript. Arquivos
esses que vo ser baixados pelos navegadores de todos os nossos usurios com o nico objetivo de execut-
los. Porque ento gastar dados trafegando comentrios e outras coisas inteis?
Uma otimizao muito importante e extremamente fcil de se implementar com as ferramentas atuais o
que chamamos de minifcao dos arquivos CSS e JavaScript.
Rodamos um programa compressor nos nossos arquivos para tirar todos esses bytes desnecessrios para
simples execuo. O resultado so arquivos CSS e JavaScript completamente idnticos em funcionalidade
mas sem bytes de comentrios, espaos etc. At variveis longas so reescritas com nomes mais curtos -
como apenas a, b etc.
Mas repare que no estamos defendendo que voc deva escrever seu cdigo retirando comentrios, identao
etc. A boa prtica continua sendo escrever cdigo legvel e bem documentado. Queremos apenas que, antes
de colocar o site no ar, os arquivos sejam minifcados. E, com as ferramentas automticas de hoje em dia,
muito fcil fazer isso.
YUI Comvnvsson
H diversas ferramentas para compresso de CSS e JavaScript. Uma das mais famosas o YUI Compressor
do Yahoo!. Por ser em Java, multiplataforma e fcil de se usar. Ele comprime tanto cdigo CSS quanto
cdigo JavaScript.
Voc pode baix-lo em http://developer.yahoo.com/yui/compressor/
Ele uma ferramenta de linha de comando, o que torna muito fcil automatizar sua execuo antes do site
ser colocado no ar, por exemplo.
Us-lo bem simples:
java -jar yuicompressor-x.y.z.jar script.js -o script-min.js
Este comando vai ler o arquivo script.js, minifcar seu contedo e gravar o resultado em script-min.js.
O mesmo poderia ser feito com arquivos CSS.
Tvs1nNoo oNt:Nv
Diversos sites oferecem uma interface Web para o YUI - e outros compressores. So teis para
voc testar e ver logo o impacto sem instalar nada, mas so mais chatos para se automatizar.
http://refresh-sf.com/yui/
Captulo - Otimizaes de front-end - Compresso e minifcao de CSS e JavaScript - Pgina
. ComvnvssXo ov :mncvNs
Imagens so tambm fortes candidatas a otimizaes. Quo importante ser fazer isso?
O HTTPArchive.org armazena informaes histricas coletadas mensalmente sobre os mil sites mais
acessados da Internet mundial. Com base nelas, compila alguns grfcos e dados interessantes.
E, com relao a imagens, os estudos mostram que mais de do peso de uma pgina est nelas:
Figura .: Participao de cada tipo de arquivo no tamanho total das pginas
Se conseguir otimizar um pouco as imagens, o resultado fnal ser de grande impacto para a pgina!
O1:m:znovs tossv
Aotimizao mais direta relacionada a isso diminuir a qualidade das imagens. Quando voc salva umJPG,
pode escolher o grau de compresso, obtendo imagens menores mas sacrifcando um pouco a qualidade.
Chamamos esse tipo de otimizao de lossy, pois h perda de qualidade.
preciso avaliar at que ponto se pode sacrifcar a qualidade do design emprol da performance. No entanto,
tenha em mente que muitas otimizaes podem acabar sendo imperceptveis para o olho humano - ainda
mais o olho gil e desatento dos usurios Web que varrem as pginas rapidamente e podem nem perceber
que uma imagem est com menos defnio.
Voc pode otimizar fotos JPG manualmente no seu editor de imagens favorito e chegar a um meio termo
entre qualidade e tamanho fnal. Ou ento, pode tentar o excelente servio online JPEGMini que promete
diminuir o tamanho das suas imagens diminuindo a qualidade de maneira praticamente imperceptvel. Eles
usamumalgoritmo que promete simular as caractersticas da percepo do olho humano, o que lhes permite
piorar a qualidade da imagem apenas em pontos que so pouco percebidos pelo nosso olhar.
http://www.jpegmini.com/
Captulo - Otimizaes de front-end - Compresso de imagens - Pgina
Dvs:cN o1:m:znoo
Outra estratgia boa pensar bem na hora de fazer o design - ou convencer o designer a pensar bem. Ser
que realmente precisamos daquele monte de imagens na pgina? Ser que aquele cone precisa ser truecolor
ou podia ser salvo em grayscale?
Um ponto importante que o crescimento e adoo de CSS tem trazido novas possibilidades de design em
CSS puro que antes s erampossveis comimagens. Bordas redondas, gradientes, sombras, etc. Usando CSS,
conseguimos o mesmo efeito evitando colocar mais imagens na pgina.
Pense bem no seu design e na forma como o codifca. Ele pode ser um fator de peso na performance da sua
pgina.
O1:m:znovs tosstvss
A otimizao mais simples e efcaz com imagens o que chamamos de compresso lossless. diminuir o
tamanho da imagem sem perder absolutamente nada na qualidade.
Isso possvel porque os formatos da Web (JPEG, PNG, GIF) em geral guardam em seus arquivos mais
informaes do que as necessrias para renderizar a imagem. Uma foto JPEG por exemplo tem diversos
metadados embutidos como horrio da foto e at coordenadas de GPS, se a cmera suportar essa funciona-
lidade. Ou ainda PNG exportados pelos editores como Photoshop levam diversos metadados extra e muitas
vezes at uma miniatura da imagem embutida no mesmo arquivo.
Tudo isso pode ser interessante para se organizar os arquivos pessoais, montar seus lbuns etc. Mas so
completamente irrelevantes para a renderizao na pgina.
Podemos usar ferramentas automticas para retirar esses bytes extra de imagens sem perda alguma de qua-
lidade. A ferramenta mais famosa o Smush.it do Yahoo:
http://smush.it
E o prprio JPEGMini j faz isso tambm para nossas fotos JPEG.
E ovvt:Nv:
Usar o Smush.it uma das formas mais simples e efcientes de se otimizar as imagens. Caso voc
queira usar algo direto no computador, recomendamos dois programas com interfaces grfcas
locais:
MAC: http://imageoptim.pornel.net/ Windows: http://luci.criosweb.ro/riot/
Se o objetivo automatizar a otimizao, voc provavelmente vai querer ferramentas de linha
de comando. E h vrias delas disponveis (inclusive as usadas pelo Smush.it). Procure por:
optipng, pngout, pngcrush, advpng, jpegoptim, gifsicle.
Captulo - Otimizaes de front-end - Compresso de imagens - Pgina
. D:m:Nc:n o Nmvno ov nvqcvs1s
Todas as prticas que vimos at agora tinham como objetivo diminuir o tamanho das requisies, o volume
do trfego de dados. H ainda outro ponto que levantamos sobre aplicaes distribudas: diminuir o nmero
total de requests.
No YSlow, na aba Components, voc pode ver todos os componentes de pgina que acabou de fazer. Cada
imagem, arquivo JavaScript, CSS e at vdeos e Flash so requisies feitas ao servidor. Isso sem pensar no
prprio HTML da pgina e em possveis requests extras numa aplicao Ajax.
Cada requisio envolve uma chamada para o servidor o que gera um overhead bastante grande. A maior
parte do tempo de um request gasto em tarefas de rede (DNS, SSL, TCP/IP etc). Se voc j otimizou o
tamanho dos requests, ver que uma pequena parte apenas gasta no download dos bytes.
Fora o prprio gargalo de rede, existe uma limitao no nmero de requisies que um navegador faz simul-
taneamente a um mesmo servidor. Esse nmero varia bastante, mas chega a ser bem baixo em navegadores
antigos (apenas conexes). Hoje, nos navegadores mais modernos, gira emtorno de a conexes. Parece
um nmero alto - e realmente foi uma grande evoluo -, mas se voc comear a contar todos os arquivos
externos que est usando, vai ver que h chances de uma pgina mediana fazer dezenas de requests.
O HTTPArchive reporta uma mdia de mais de requests sendo feitos na pgina:
Figura .: Nmero e volume mdio de requests
Ou seja, mesmo com conexes simultneas, o volume de requests bem maior o que vai atrasar o car-
regamento total da pgina. Em alguns casos (como arquivo JS), o navegador fca travado at que todos os
downloads terminem.
Diminuir o nmero de requisies essencial.
Captulo - Otimizaes de front-end - Diminuir o nmero de requests - Pgina
. JcN1nn nnqc:vos CSS v JS
No caso de arquivos CSS e JavaScript, a boa prtica juntar diversos arquivos em um nmero menor para
minimizar requisies.
Ao usar jQuery, por exemplo, importamos a biblioteca em si e, em geral, criamos um script a mais da nossa
aplicao que vai us-lo. muito comum tambm (como veremos no curso WD-) usarmos diversos plu-
gins como jQuery para fazer vrias tarefas avanadas. So todos requests a mais que vo sobrecarregar nossa
pgina.
Se vamos usar, por exemplo, jQuery com plugins e mais arquivos da aplicao, poderamos simplesmente
juntar todos em ou arquivos. Novamente, a boa prtica no escrever um cdigo todo misturado de uma
vez s em um arquivo de milhares de linhas. Faa seu cdigo com boas prticas e execute alguma rotina que
junte automaticamente esses arquivos pra voc antes de subir no servidor.
Oprprio jQuery faz isso. Usamos umarquivo chamado jquery.js mas se voc for olhar o projeto ofcial, ver
que esse apenas um arquivo gerado a partir de outros arquivos separados, que foram criados de maneira
independente para melhor organizar e encapsular as funcionalidades do projeto.
Amesma dica vale para arquivos CSS. Voc pode organizar seu cdigo emarquivos diferentes (por exemplo,
um com tipografa, outro com estrutura de layout e outro com estilos visuais), porm, na hora de subir a
aplicao no ar, a boa prtica diminuir o nmero de arquivos e juntar quantos puder.
. Imncv Svn:1vs
Juntar arquivos texto como JS e CSS muito fcil, basta copiar os contedos seguidamente. E as imagens? J
vimos que elas costumam ser o componente mais pesado das pginas. Em designs complexos, so respons-
veis tambm por um grande nmero de requisies.
Conseguimos juntar imagens?
possvel, e essa tcnica chamada de sprites, que um processo muito mais complicado. Juntar imagens
consiste em criar um arquivo s e posicionar diversas imagens dentro. Depois, usando CSS, recorta-se os
pedaos da imagem que devem ser mostradas em cada parte da pgina.
Diversos grandes sites usam essa tcnica. O Google por exemplo, tem uma nica imagem em sua home:
Captulo - Otimizaes de front-end - Juntar arquivos CSS e JS - Pgina
Criar a imagem o primeiro passo, e um dos mais chatos. H algumas ferramentas que tentam automa-
tizar (como o sprite.me), mas em geral o processo bastante manual. Abre-se um editor de imagens e se
posicionam as imagens para obter o resultado fnal.
E, principalmente, nesse processo de juntar as imagens no editor, devemos prestar bastante ateno no posi-
cionamento que precisa ser anotado precisamente. A posio (X,Y) de cada imagem dentro da sprite, alm
do tamanho (width, height) de cada uma. Essas informaes sero valiosas para escrever o CSS.
Utilizamos a propriedade background do CSS do elemento como na tcnica de Image Replacement, mas
preciso especifcar a posio da imagem em relao ao ponto inicial do elemento.
Pnnn snnvn mn:s - Dn1n URI
Ainda pensando emminimizar o nmero de requisies para imagens, h uma outra tcnica conhecida como
Data URIs. A ideia que voc pode embutir contedos binrios (como imagens) dentro de arquivos textos
(como pginas HTML ou arquivos CSS). Basta converter os bytes da imagem para uma string comum que
segue o formato de codifcao chamado Base .
Esse processo de converso feito por algumprograma que converta para base ou diretamente no servidor
por meio de cdigo Java, PHP etc. H alguns servios online que ajudam nessa tarefa, tambm.
Imagine que queremos colocar o seguinte logo da Caelum em nossa pgina:
Captulo - Otimizaes de front-end - Image Sprites - Pgina
Com HTML normal, faramos:
<img src="logo-caelum.png">
Isso vai causar uma requisio para o arquivo logo-caelum.png. Usando data URIs, vamos embutir o cdigo
base da imagem direto na tag HTML:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKEAAAAyCAQAAACeqnPQAAA
JAUlEQVRo3u3baZBVxRXA8d8wbAO4oiKKC4pGo7hQYpByCcYF3LXigiAhBgWNWmiMUVFBQEstU4UEIz
GKC6jjluAeDaWJo5aCREARcIuAiCiMghGBYTj58C6P++C9YWAWBDn3w3u3u2/f7v/te/qc032hicEmq
xC1fFSYbLAmNnlpYmKtw0sfEzd9iINrB1XzOD5uibdieayU72N07BnC4Gq1o73rParMx2Z5we16O0Tj
WuxnS93d6sC6QDi5pvCOiKHxeiyLfDI6hMlraUGJa32Ut+5P9VBUS/08Rwhd6wJhjg5svU7wWsRF8V5
UJd9ndGJV0svsVJ2V5vl8NUVw9A8dYaq5e8eYauP7SQyPhbF2EaIKPTwmW2OZ/tppmLx0XfT3mBVJ3i
UbBcLd4rV4P5bEa3HdWvEdGi/FiqieVIGwpdeSGhc4K2+JTt4RvtVqIxmF/SIiYnY0rBLf1nFXVEb1p
SDCYuOSOp/TumDril3myo3kRa7eKOwZ82LdpCDCm5M6f6t+5IegC/eJl2PdpQDCjomeu49NCmFVM/Kl
sTSi9hD+QwhzbL3JIcx/FMfwWF/Ji7BzUvPJ/CgQtohnI2oX4V1CeJIfBcI2MSmithFmjOkLfhQIO8S
ciNpGuH9S+yE/AoTtY1FE7SM8JQmFNdnkEbaKmRF1gfBCIUxZz/YeZpC73Ki7HfLml+isvxF+7ySNqk
BY4md2Xu3atg5Pne3scOzlEnc4x1bZ6452o5udkTijhRGWxFsRdYPwGiE8sZ4In8u2cYGzV8srdoNlq
V7M1KcAwp9bLpyWc/VE4c3s2ShhqkGWJnWV64COyrO1T9K+CoRF8XhEXSHsJ4R31gtgkX8b540kvrRU
21TebonPvcIM48xM+nJHEi7LRdhVrIFweg7C0jWolOtrYU7KLNsWRHhzRN0hPFUIy2oUUN3SQCHclk1
pYqpQ6U7bJSnHmiWEq2uAcIVb7KyNodmo0UeOtqWjTBXC8AIIe0fUJcIDk/scXCMd3szXwuPZ85uFyp
SuK9Ldf4Xwne3XG+Ffsuejkwe/d1ZvLhMm5EW4eyyuW4RFvhDC+esBbjeXeshwPTTylPBKkr6X5cI12
XJHmZD053kH1GAU7pc97yaEZ1Lly4QleRGOjahbhNwrhIfWGeB5FmXb+R/vCP9KcvoIFZqBfT2dlBmv
S4HppHoIK1PKZh8h3J4q//DKvq0G8ISIukd4THK3dQvpn5FV4h9m27sS4UhhPFoZabkQPnRWzrrL+iB
cksrdXQiDUin350XYND6qD4S8KoRPNK82wK18LsxNLLd9vZ+D8FXhJTf4VgjzXJxjE9YnwoER9YPwiO
SOw6qN8HQh9Mue/zwH4X3ZPnxroBZ5rq8fhG3j+/pCyPBkxe6X1UQ4RFhim9Sk9GkK4cXJfDmigM9SH
YTzawHhoxH1h7CRN5L7PpB1nvLJKQaCW4XFtkzlfJRCmDGUXl3j9S2E8Egh3JLK30PUGOGOUVGfCGlt
UnLv2Y7NW6KDV4TQBWcKkXLYDs95kVfO8mNWW7pvrkFehFtZIcxKlX6kFhBeE1G/CGmRNT/CM3pn/Yo
SHV2gNOsRPIotzBU+S7Z07JrgX4Vwa3MS37tbYoq0NMBX9s+LMKP5wjAt0DYxUGqGsCg+qX+ENHCZ+S
llstAM0xKzJJJZu3syVnomLtcUE1QIK3IQcmjijYSFXk6cu9C7AMKuKhNt/LUQlptXQ4THRWwIhJnxc
5t5eX31+S7P8aT7WJLNm+Ci1RCyRdKtVdtLntGhAEIuTkygTNTnGGNriPCJDYcwMxqP8EcvetcCC73h
bpfqYos1yu2tv8fd7dcaa+v0PPPvns41zLNGuMSuqfR9dbffqhgfaOVapR7UR2uc5DjbZ/NOcKJdcuz
S3+ioJJVyvJMyd6jDqWQdEG7UkqwSx2aENUNYuhlhTRHO3oywZgh3iahvhP2zR6cqW3dIjfYWbuvqTGi
+FqSxgxXbI98utBDn1D/CUKZUqdK1+Mhne74G3d5H2KeWEL7pJXNM1yYvwuEbAuFpa6Q1zf4ryrtdqTj
HJGmWd6RUhbBpKqco50xOTrqWFkm5Btoq1iyV11hxCuHbGxphmUHeV+Fvyciba7xJ2qCXMnTwmSt8rVx
PcIDplvhstYX1O80zLWdUr0Q4wIOesswMuyVqZIHFXrGjYtOcAAa4H0PM9aV7NEaxMcr9z1VglHnmJMt
dDY2x0HdGZsIaoc5swioR3pvowm0w3ccOtJ/lOmtisb64yvXoZzo6CaNsY6gPwFRDNXeTuakwwXne1Ng
RylPRnJUIb1HpLC1NNATtLXKUnbxqGO5zN5joV3b1thIlvtINV3hNc+0st6dOXtDQDiochN+ZpK1Dzc8
MhBCxIRC+ZayxxtoZ010OPtADE43IBq1WIdwGnVXIuFrbo3XOKuCj7neYQyzVOQ/CF8Fwo3GlceBSM9D
NHOxgSVZ5/MIyvTEuaVUnLZOXuUfiIo5zHXgqs8K3oRCmX+TpSTR6ur7YV6m5HvHTHIRNk98mzrUguW6
BXtk6pvg0eSj5EI4Fw/wdj7sTmRWcxhopd7Ceydrchd4zyhf64hPdU238g2lGWOxUfOtMcJM3fngI+2X
V+LPmKMqDsKnjhO3QQqXjsnWUGgIOTUW210Q4Fn/1T3C+8kTLXe9hvXC27+yNmfphYrKo2sfu+vvKjhp
Captulo - Otimizaes de front-end - Image Sprites - Pgina
Y4jR8YgB4MKO9K9RBuH+lFPx0J1zuIAc5SOvVEDY0y2G43sd5R2FT21roVi0MsSg1c/czwdZ2tzi12Sg
/wh4WOdYuyjwGunrbXFvhahPQUbgIVxpvR0daaid/9iROSx79KFPspbO5+sJkMbrOEBb8gOxrC8z3pXk
GoCx5ITO/p3jdDO9on5qRv9Ak9Xuybyz1jdNzDJonlfvYOam0dr7QDgOSbfGD3YcG/qTSUm8nkZxGPkj
WtNuZapqnXWO8EiVGKleuHzr60LtGu82LaKXMMpUeyOjswWLPGF0HI3EdP2PMlbXtPSzWZpVdltfyq1q
aF/wcqGXqfyNPprynXD9nu1WhuM0f0xaWZrr6vjoPZvMn3YXkRPe4bG2F/g9S7CNMkQtgRwAAAABJRU5
ErkJggg==">
O resultado assustador e parece at pior com relao a tamanho, mas lembre-se de que estamos economi-
zando os bytes da imagem. E essa string dentro do HTML, aps o GZIP, costuma ter um tamanho muito
prximo ao que seria a imagem binria original.
Voc pode usar essa tcnica tambm em arquivos CSS, dentro de background-image por exemplo.
Omaior problema dessa tcnica que ela no suportada emtodos os navegadores. Todos os mais modernos
suportam, j o IE e IE e mesmo o IE possui algumas limitaes. Alm disso, o processo de gerao dessa
string base costuma exigir um pouco de conhecimento de programao no servidor.
. Pnnn snnvn mn:s
A Caelum tem vrios posts no Blog sobre o assunto, sendo o principal:
http://blog.caelum.com.br/por-uma-web-mais-rapida--tecnicas-de-otimizacao-de-sites/
. Exvncc:os: o1:m:znovs Wvn
) Rode as ferramentas de anlise do PageSpeed Online e do WebPageTest:
https://developers.google.com/pagespeed/
http://webpagetest.org/
Analise o resultado. Veja possveis pontos de melhora.
) Nossos banners principais na home so fotografas imensas, mas esto em PNG. O formato ideal para
eles JPG, que traz uma qualidade satisfatria com muito menos kbytes.
Faa a converso dos banners de PNG para JPG e compare os resultados.
) Comprima as imagens do projeto para economizarmos no tamanho.
Os PNGs e GIFs podem ser comprimidos sem perdas no Smush.it do Yahoo: http://smushit.com
Um servio alternativo o http://kraken.io
Os JPEGs podem ser comprimidos diminuindo sua qualidade e o seu tamanho sem muita perda de qua-
lidade. Uma tima ferramenta pra isso o JPEGMini: http://jpegmini.com
Captulo - Otimizaes de front-end - Para saber mais - Pgina
) Criamos vrios arquivos CSS e JavaScript na nossa home. Podemos junt-los para obter um ganho de
performance.
Nos CSS, temos dois arquivos: estilos.css e mobile.css. Podemos junt-los num nico arquivo. (dica:
o mobile.css importado com media query; para junt-lo no arquivo principal, voc precisar escrever a
media query corretamente dentro do CSS)
Nos JavaScripts, podemos, por exemplo, juntar o jQuery e o jQuery UI num nico arquivo.
) Comprima os arquivos CSS e JavaScript.
) Depois dessas otimizaes, teste novamente no PageSpeed e WebPageTest. Houve alguma melhora?
Captulo - Otimizaes de front-end - Exerccios: otimizaes Web - Pgina
C
Apndice - LESS
No podemos solucionar problemas usando a mesma forma de raciocnio que usamos quando os criamos.
Albert Einstein
LESS uma linguagem baseada em CSS (mesma ideia, sintaxe familiar) com recursos que fazem falta no
CSS em algumas situaes. tambm chamado de pr-processador pois, na verdade, usado para gerar um
arquivo CSS no fnal.
Alguns dos recursos apresentados pela linguagemso variveis, suporte a operaes aritmticas, sintaxe mais
compacta para representar hierarquias e mixins.
. Vnn:Kvv:s
Voc j precisou usar a mesma cor no CSS em vrios pontos diferentes? Um ttulo e um boto com mesma
cor, por exemplo? O CSS tem uma soluo pra evitar copiar e colar, que seria o uso de classes. Mas, muitas
vezes, usar essa mesma classe em tantas tags diferentes no uma boa ideia.
Programadores esto acostumados com variveis pra isso, mas o CSS no tem nada parecido. Mas o LESS
sim!
@corprincipal: #BADA55;
#titulo {
font-size: 2em;
color: @corprincipal;
}
button {
background-color: @corprincipal;
color: white;
}
Repare no uso da @corprincipal que no CSS puro, mas tem uma sintaxe bem parecida e familiar. Depois
de compilado, o LESS vira esse CSS:
#titulo {
font-size: 2em;
color: #BADA55;
}
button {
background-color: #BADA55;
color: white;
}
. CoN1ns
Sabe quando voc tem aquele elemento principal com px mas que precisa de um padding de px e duas
colunas l dentro de tamanhos iguais mas deixando px entre elas? Qual o tamanho de cada coluna mesmo?
px. A voc coloca no CSS:
.container {
padding: 35px;
width: 960px;
}
.coluna {
width: 435px;
}
E quando algum mudar o tamanho do padding, voc torce pra lembrarem de refazer a conta da coluna -
que, alis, seria (px px * px) / =px. No LESS, voc pode fazer a conta direito na propriedade
e o resultado fnal calculado:
.coluna {
width: (960px - 35px * 2 - 20px) / 2;
}
Melhor ainda, junte com as variveis que vimos antes e voc nem copia e cola valores!
@total: 960px;
@respiro: 35px;
@espacamento: 20px;
Captulo - Apndice - LESS - Contas - Pgina
.container {
padding: @respiro;
width: @total;
}
.coluna {
width: (@total - @respiro * 2 - @espacamento) / 2;
}
E d pra fazer contas de tudo que tipo, at com cores!
. H:vnnnqc:n
Voc tem um #topo com um ttulo h dentro e uma lista ul de links. E quer estilizar todos esses elementos.
Algo assim:
#topo {
width: 100%;
}
#topo h1 {
font-size: 2em;
}
#topo ul {
margin-left: 10px;
}
E se voc precisar mudar o id do #topo? Ou troc-lo por um <header> semntico? Tem que mexer em
lugares (e torcer pra ningum ter usado em outro canto). Fora que o cdigo fca desorganizado j que
essas trs regras no necessariamente precisam estar agrupadas no arquivo e podiam estar espalhadas por a,
apesar de serem todos sobre nosso cabealho.
No LESS, podemos escrever regras de maneira hierrquica, uma dentro da outra, e ele gera os seletores de
parent. O mesmo CSS acima podia ser no LESS:
#topo {
width: 100%;
h1 {
font-size: 2em;
}
ul {
margin-left: 10px;
}
}
Captulo - Apndice - LESS - Hierarquia - Pgina
Podemos usar vrios nveis de hierarquia (mas no abuse!), deixando nosso cdigo mais estruturado, fexvel
e legvel.
. FcNovs ov convs v vntnv1ns nc1omK1:cns
Provavelmente voc j viu algum design que tem uma cor base principal e algumas cores secundrias com-
binando. Talvez uma verso mais light dessa cor base usada como fundo e uma cor mais saturada no boto.
Voc ento pega o cdigo de cada cor no Photoshop e coloca no CSS. E, se precisar mudar a cor, deve gerar
as outras secundrias, certo? No LESS, voc pode usar funes pra gerar essas cores:
@corbase: #BADA55;
body {
background: lighten(@corbase, 20%);
}
h1 {
color: @corbase;
}
button {
background: saturate(@corbase, 10%);
}
Vai gerar cores mais lights e mais saturadas:
body {
background:#dceca9;
}
h1 {
color:#bada55;
}
button {
background:#bfe44b;
}
Voc ainda tem: darken, desaturate, fadein, fadeout, spin, mix e at funes matemticas como round.
. Rvnvnovv:1nmvN1o comm:x:Ns
Uma das coisas mais legais do LESS sua capacidade de criar as prprias funes, que ele chama de mixins.
til quando voc tem que repetir a mesma coisa vrias vezes, como nas propriedades CSS que precisam
de prefxos, tipo uma borda redonda.
Captulo - Apndice - LESS - Funes de cores e palhetas automticas - Pgina
Voc pode defnir um mixin recebendo argumento o tamanho da borda e cuspindo as verses pros diversos
navegadores:
.arredonda(@raio: 5px) {
-webkit-border-radius: @raio;
-moz-border-radius: @raio;
border-radius: @raio;
}
Parece uma classe CSS mas ele recebe uma varivel como parmetro (que pode ter umvalor default tambm).
E voc pode usar esse mixin facilmente:
.painel {
.arredonda(10px);
}
.container {
.arredonda;
width: 345px;
}
Isso gera o CSS:
.painel{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.container{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
width:345px;
}
As possibilidades so infnitas! Pense num mixin pra te ajudar a gerar aqueles gradientes CSS chatos ou um
mixin prprio .botaoBonito que gera botes legais s recebendo uma cor base e um tamanho.
. Exvcc1nNoo o LESS
No site do LESS, voc pode baixar a verso standalone dele. Voc pode rod-lo apenas incluindo um JavaS-
cript na pgina que faz o parsing dos arquivos .less quando ela carrega.
Captulo - Apndice - LESS - Executando o LESS - Pgina
<script src="less.js" type="text/javascript"></script>
Com isso, podemos incluir diretamente nosso arquivo .less usando uma tag <link>, colocada antes da tag
que carrega o less.js:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Para melhor performance, o ideal seria gerar o CSS antes usando o compilador. H uma verso em linha de
comando usando Node.JS, mas como JavaScript, voc pode rod-lo em qualquer canto - at no Java com
Rhino.
H tambm programas visuais pra instalar, como o LESS.app e d pra testar cdigo rapidamente online
mesmo no LessTester.com.
No Windows, voc pode usar o WinLESS que um compilador com interface grfca e bem fcil de usar:
http://winless.org/
. Pnnn snnvn mn:s: nvccnsos nvnNnoos v nt1vnNn1:vns
A linguagem LESS tem recursos ainda mais avanados. D pra fazer mixins mais complicados com uma
espcie de if/else por exemplo e at usar pattern matching. Voc encontra todos os detalhes na documentao
ofcial.
Alm do LESS, existem outros pr-processadores CSS no mercado. O Sass (http://sass-lang.com/) muito
famoso no mundo Ruby e temzilhes de funes, tornando-o mais poderoso que o LESS mas mais complexo
tambm. H tambm o Stylus (http://learnboost.github.io/stylus/), que simplifca ainda mais a sintaxe.
. Exvncc:os: LESS
) Atualmente, nosso arquivo estilos.css possui vrias regras que usam o seletor de hierarquia (espao).
Essas regras podemser escritas de forma mais compacta comLESS. Ento vamos usar LESS para escrev-
lo. Neste exerccio, vamos usar a verso Javascript do LESS, que transforma nosso cdigo em CSS dentro
do navegador.
Crie uma nova pasta no seu projeto chamada less e copie o estilos.css para l. Emseguida, renomeie-o
para estilos.less. Por fm, altere o index.html para usar o estilos.less. Troque a linha
por
<link rel="stylesheet/less" href="less/estilos.less">
E inclua a seguinte linha antes de fechar a tag body para carregar o pr-processador LESS:
Captulo - Apndice - LESS - Para saber mais: recursos avanados e alternativas - Pgina
<script src="js/less.js"></script>
Teste a pgina no navegador. Ela deve continuar com a mesma aparncia de antes.
) Vamos comear a migrar nosso cdigo CSS para LESS. Umseletor bastante repetido no cdigo .painel.
Agrupe todas as regras que usamesse seletor numnicoseletor noLESS. Ocdigofnal deve fcar parecido
com este:
.painel {
/* regras que estavam em .painel {...} */
li {
/* regras que estavam em .painel li {...} */
&:hover {
/* regras que estavam em .painel li:hover {...} */
&:nth-child(2n) {
/* regras que estavam em .painel li:nth-child(2n):hover {...} */
}
}
}
h2 {
/* regras que estavam em .painel h2 {...} */
&:before {
/* regras que estavam em .painel h2:before {...} */
}
}
a {
/* regras que estavam em .painel a {...} */
}
.mostra-mais {
/* regras que estavam em .painel .mostra-mais {...} */
}
}
Teste novamente no navegador. A pgina no deve mudar, mas veja que o cdigo fca mais organizado e
curto!
) A cor #333333 (cinza escuro) se repete algumas vezes no nosso estilo. Vamos isol-la numa varivel para
facilitar a manuteno:
@escuro: #333333;
Procure os lugares que usam a cor e use a varivel no lugar. Por exemplo:
Captulo - Apndice - LESS - Exerccios: LESS - Pgina
body {
color: @escuro;
/* outras regras */
}
.mostra-mais {
background: @escuro;
/* outras regras */
}
Experimente trocar o valor da varivel e veja o efeito: para mudar a cor de vrios elementos da pgina
agora basta mexer num nico lugar!
) Vamos deixar o nosso cdigo de transies mais limpo isolando os prefxos num nico lugar. Para isso,
vamos criar um mixin:
.transicao(@propriedades, @tempo) {
-webkit-transition: @propriedades @tempo;
-moz-transition: @propriedades @tempo;
-ms-transition: @propriedades @tempo;
-o-transition: @propriedades @tempo;
transition: @propriedades @tempo;
}
Agora altere o cdigo que escala e rotaciona as fotos dos produtos quando o mouse passa emcima: apague
as declaraes transition e coloque no lugar
.transicao(all, 0.7s);
Faa o mesmo com os gradientes dos painis:
.gradiente(@cor1, @cor2) {
background: @cor1; /* Navegadores antigos */
background: -moz-linear-gradient(top,
@cor1 0%, @cor2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, @cor1),
color-stop(100%, @cor2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,
@cor1 0%, @cor2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,
@cor1 0%, @cor2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, @cor1 0%, @cor2 100%); /* IE10+ */
background: linear-gradient(to bottom, @cor1 0%, @cor2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='@cor1',
endColorstr='@cor2',
GradientType=0 ); /* IE6-9 */
}
.novidades {
.gradiente(#f5dcdc, #f4bebe);
}
.mais-vendidos {
.gradiente(#dcdcf5, #bebef4);
}
Dica: voc pode at usar o gerador de gradientes do ColorZilla (http://www.colorzilla.com/
gradient-editor/) para gerar o cdigo desse mixin.
) (opcional) Podemos melhorar nosso mixin de gradiente fazendo uma verso que s recebe uma cor e
calcula a segunda automaticamente, fazendo ela ser mais escura que a cor dada. Podemos ainda
fazer com que essa nova verso j aproveite o mixin j existente, passando a segunda cor calculada para
ele:
.gradiente-automatico(@cor1) {
.gradiente(@cor1, darken(@cor1, 10%));
}
Faa o teste nos gradientes dos painis: use essa verso do mixin e veja o efeito ser aplicado automatica-
mente.
C
Apndice - Subindo sua aplicao no cloud
Perder tempo em aprender coisas que no interessam, priva-nos de descobrir coisas interessantes
Carlos Drummond de Andrade
. Como vscotnvn cmvnovvoon
Existemmuitos servidores comsuporte a PHP e MySQL no mercado, tanto nacionais quanto internacionais.
Na hora de escolher um provedor de hospedagem, leve em conta preo, qualidade do servio, atendimento,
suporte e reputao da empresa.
H vrios servios disponveis, mas em geral voc deve escolher entre duas opes. H os planos clssicos
de hospedagem onde voc paga um valor fxo por ms e tem direito a usar os recursos de uma mquina
compartilhada com outros usurios. Costumam ter um valor mais baixo mas limitaes tcnicas caso seu
site tenho um pouco mais de acessos.
E h planos de cloud computing onde o objetivo no ter restries tcnicas com relao ao volume de
acessos. Sua aplicao pode comear pequena e crescer indefnidamente sem problemas, em um ambiente
escalvel que cresce elasticamente conforme suas necessidades. Nesse cenrio, voc paga por quanto usar
dos recursos em cada ms, e no uma mensalidade fxa. Costuma ter um valor mais alto que hospedagens
clssicas, mas traz um ambiente bem mais robusto.
. O Jvtns1:c Ctoco Locnwvn
Nesse captulo, vamos usar a plataforma de Cloud da Locaweb, umas das principais empresas de TI do Brasil.
Eles tm um produto chamado Jelastic Cloud que nos permite subir uma mquina com PHP e MySQL em
instantes, e enviar um ZIP com nosso projeto para ser executado.
Saiba mais sobre o produto, inclusive os preos atuais, em:
http://jelasticcloud.com.br/testegratis
H um trial de dias que podemos usar para testar nosso projeto sem limitaes.
. Cn:nNoo n coN1n
Acesse o site do cloud Locaweb e localize a caixa de iniciar trial. Coloque seu email e clique no boto:
Em instantes voc vai receber um email com seu login, senha e uma URL pra iniciar o uso da plataforma.
Abra esse email e clique no link de ativao. Voc deve cair no Painel de Controle principal. Clique no boto
no topo que diz Criar ambiente.
Na janela de criao, selecione a aba PHP e o servidor Apache com o armazenamento MySQL. D tambm
um nome a esse ambiente:
Dentro de alguns instantes seu ambiente ser criado e voc vai receber um email de confrmao. Esse email
importante por conter a senha de acesso ao MySQL.
. Imvon1nNoo onoos No MvSQL
Criado o ambiente, ns teremos acesso a umbanco de dados MySQL vazio. No email que voc recebeu, esto
usurio, senha e endereo do banco de dados.
Captulo - Apndice - Subindo sua aplicao no cloud - Criando a conta - Pgina
Acesse o MySQL pelo endereo dado. Ele do formato https://mysql-[nomeprojeto].jelasticlw.com.br/
Voc vai ter acesso a umphpMyAdmin, igual usamos durante o curso. Coloque o usurio e senha que recebeu
no email sobre o MySQL para acessar.
Dentro do phpMyAdmin, localize a aba superior Importar. Selecione a opo Procurar no computador e
aponte o arquivo dados.sql que usamos no curso. No fm da pgina, clique em Executar.
Tudo dando certo, voc deve ver o banco de dados WD criado na coluna da esquerda, com nossa tabela
produtos populada.
. PnvvnnnNoo o vno)v1o
Volte pro cdigo do seu projeto. Precisamos fazer uma alterao nos cdigos que acessam o banco de dados
no index.php e no produto.php.
Altere a linha que abre a conexo com mysqli_connect e passe a usar o endereo, usurio e senhas providos
no email:
Captulo - Apndice - Subindo sua aplicao no cloud - Preparando o projeto - Pgina
$conexao = mysqli_connect("mysql-[nomeprojeto].jelasticlw.com.br",
"root", "[senha]", "WD43");
Cuidado que o endereo a ser usado no possui http na frente, apenas o nome do servidor. E cuidado com
o ultimo argumento, o nome do banco, pra ser em maiscula.
. ENv:nNoo o vno)v1o v :N:c:nt:znNoo svnv:oon
Entre na pasta do projeto na sua mquina e crie um arquivo ZIP com todo seu contedo (todos os arquivos
e subpastas de imagens, css, js etc). D o nome que quiser a esse arquivo.
De volta ao painel no Jelastic Cloud, localize o Gerenciador de Instalao no meio da pgina e clique em
Upload:
Indique o endereo do ZIP que criou com seu projeto e d um nome a esse upload, como Site da Mirror
Fashion:
Aguarde o upload fnalizar e voc ver a aplicao listada no Gerenciador de Instalao.
Na linha da aplicao, h um cone que permite fazer a instalao do ZIP em algum ambiente criado. Clique
nele e selecione o ambiente que criamos antes:
Uma janela se abre perguntando qual contexto voc quer instalar. Isso quer dizer se queremos criar uma
subpasta no servidor s pra esse projeto. Voc pode deixar em branco pra criar na raiz do servidor mesmo.
Clique em Instalar:
Captulo - Apndice - Subindo sua aplicao no cloud - Enviando o projeto e inicializando servidor - Pgina
Aguarde alguns instantes at a instalao ser completada.
A s acessar a aplicao no navegador usando o endereo cadastrado, que tem o formato:
http://[nomeprojeto].jelasticlw.com.br/
Captulo - Apndice - Subindo sua aplicao no cloud - Enviando o projeto e inicializando servidor - Pgina

Caelum HTML Css Javascript PHP

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Caelum HTML Css Javascript PHP

Uploaded by

Copyright:

Available Formats

WEB SITE

You might also like