HTML, CSS, Javascript e PHP

Download HTML, CSS, Javascript e PHP

Post on 31-Dec-2016

223 views

Category:

Documents

6 download

TRANSCRIPT

Conhea mais da Caelum.Cursos Onlinewww.caelum.com.br/onlineBlog Caelumblog.caelum.com.brNewsletterwww.caelum.com.br/newsletterFacebookwww.facebook.com/caelumbrTwittertwitter.com/caelumCasa do CdigoLivros para o programadorwww.casadocodigo.com.brSobre esta apostilaEsta apostila daCaelumvisa ensinar de umamaneira elegante, mostrando apenas o que necessrio e quando necessrio, no momento certo, poupando o leitor de assuntos que no costumam ser de seu interesse emdeterminadas fases do aprendizado.A Caelum espera que voc aproveite esse material. Todos os comentrios, crticas e sugestes sero muitobem-vindos.Essa apostila constantemente atualizada e disponibilizada no site da Caelum. Sempre consulte o site paranovas verses e, ao invs de anexar o PDF para enviar a um amigo, indique o site para que ele possa semprebaixar as ltimas verses. Voc pode conferir o cdigo de verso da apostila logo no nal do ndice.Baixe sempre a verso mais nova em: www.caelum.com.br/apostilasEsse 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. Adistribuio, cpia, revenda e utilizao para ministrar treinamentos so absolutamente vedadas. Para usocomercial deste material, por favor, consulte a Caelum previamente.www.caelum.com.br1Sumrio1 Sobre o curso - o complexo mundo do front-end 11.1 O curso e os exerccios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 O projeto de e-commerce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.3 Tirando dvidas com instrutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.4 Tirando dvidas online no GUJ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.5 Bibliograa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.6 Para onde ir depois? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Introduo a HTML e CSS 42.1 Exibindo informaes na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2 Sintaxe do HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.3 Estrutura de um documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.4 Tags HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.5 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.6 A estrutura dos arquivos de um projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.7 Editores e IDEs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.8 Primeira pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.9 Exerccio: primeiros passos com HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.10 Estilizando com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162.11 Sintaxe e incluso de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.12 Propriedades tipogrcas e fontes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.13 Alinhamento e decorao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.14 Imagem de fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.15 Bordas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.16 Exerccio: primeiros passos com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.17 Cores na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.18 Listas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242.19 Espaamento e margem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262.20 Exerccios: listas e margens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282.21 Links HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292.22 Exerccios: links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.23 Elementos estruturais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.24 CSS: Seletores de ID e lho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.25 Fluxo do documento e oat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322.26 Exerccios: seletores CSS e utuao de elementos . . . . . . . . . . . . . . . . . . . . . . . . . . 332.27 O futuro e presente da Web com o HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353 HTML semntico e posicionamento no CSS 373.1 O processo de desenvolvimento de uma tela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37i3.2 O projeto Mirror Fashion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393.3 Analisando o Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403.4 HTML semntico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423.5 Pensando no header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433.6 Estilizao com classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443.7 Exerccios: header semntico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463.8 CSS Reset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483.9 Block vs Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493.10 Exerccios: reset e display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503.11 Position: static, relative, absolute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513.12 Exerccios: posicionamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543.13 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 Mais HTML e CSS 554.1 Analisando o miolo da pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554.2 Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554.3 Posicionamento com oat e clear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564.4 Decorao de texto com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574.5 Cascata e herana no CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584.6 Para saber mais: o valor inherit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594.7 Exerccios: menu e destaque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604.8 Display inline-block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634.9 Exerccios: painis utuantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644.10 Seletores de atributo do CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674.11 Rodap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684.12 Substituio por Imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694.13 Estilizao e posicionamento do rodap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694.14 Exerccios: rodap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714.15 Para saber mais: suporte HTML5 no Internet Explorer antigo . . . . . . . . . . . . . . . . . . . 734.16 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735 JavaScript e interatividade naWeb 755.1 Introduo ao JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 755.2 Console do navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765.3 Sintaxe bsica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765.4 Exerccios opcionais: xao de sintaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 785.5 Interatividade na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 785.6 Exerccio: validao na busca com JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 815.7 Funes temporais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 835.8 Exerccio: banner rotativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 845.9 Para saber mais: sugesto para o desao de pause/play . . . . . . . . . . . . . . . . . . . . . . . 845.10 Para saber mais: vrios callbacks no mesmo elemento . . . . . . . . . . . . . . . . . . . . . . . . 86ii6 CSS Avanado 876.1 Seletores avanados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 876.2 Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 906.3 Pseudo elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 936.4 Exerccios: seletores e pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 956.5 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 976.6 CSS3: border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 986.7 CSS3: text-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006.8 CSS3: box-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006.9 Opacidade e RGBA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1026.10 Prexos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1046.11 CSS3: Gradientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1056.12 Progressive Enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1076.13 Exerccios: visual CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1086.14 CSS3 Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1106.15 CSS3 Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1126.16 Exerccios: CSS3 transform e transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1146.17 Para saber mais: especicidade de seletores CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 1177 Web para dispositivos mveis 1207.1 Site mobile ou mesmo site? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1207.2 CSS media types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1227.3 CSS3 media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1237.4 Viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1247.5 Exerccios: adaptaes para mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1267.6 Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1307.7 Mobile-rst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1307.8 Exerccios opcionais: verso tablet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1318 Introduo a PHP 1338.1 Libertando o HTML de suas limitaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1338.2 Como funciona um servidor HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1348.3 Como funciona o PHP no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1348.4 Para saber mais: instalao do PHP em casa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1358.5 Exerccios: executando o PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1368.6 Reaproveitamento de cdigo com include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1378.7 Exerccios: include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1378.8 Para saber mais: ainda mais exibilidade com variveis . . . . . . . . . . . . . . . . . . . . . . . 1398.9 Exerccios opcionais: variveis em PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1409 Progressive enhancement e mobile-rst 1429.1 Formulrio de compra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1439.2 Exerccio: formulrio da pgina de produto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145iii9.3 Design mobile-rst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1469.4 Progressive enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1479.5 Box model e box-sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1489.6 Exerccios: pgina de produto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1499.7 Evoluindo o design para desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1539.8 Media queries de contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1539.9 Exerccios: responsive design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1549.10 HTML5 Input range . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1569.11 Exerccios: seletor de tamanho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1579.12 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1579.13 Exerccios: detalhes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1599.14 Exerccios opcionais: fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1619.15 Discusso em aula: importncia do Progressive Enhancement na Web atual . . . . . . . . . . . 16210 PHP: parmetros e bancos de dados 16310.1 Submisso do formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16310.2 Parmetros com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16410.3 Listas de denio no HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16410.4 Exerccios: checkout da compra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16510.5 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16610.6 Banco de dados e SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16710.7 MySQL e phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16810.8 Para saber mais: instalao do MySQL em casa . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16810.9 Buscas no MySQL com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16810.10 Renando as buscas comWHERE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16910.11 Exerccios: phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17010.12 Exerccios: PHP comMySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17110.13 Busca de muitos resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17310.14 Ordenao dos resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17310.15 Exerccios: mais buscas com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17310.16 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17511 Bootstrap e formulrios HTML5 17611.1 Bootstrap e frameworks de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17611.2 Estilo e componentes base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17711.3 A pgina de checkout da Mirror Fashion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17711.4 Exerccio opcional: incio do checkout sem PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . 17911.5 Exerccios: pgina de checkout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17911.6 Formulrios a fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18211.7 Novos componentes do HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18711.8 Novos atributos HTML5 em elementos de formulrio . . . . . . . . . . . . . . . . . . . . . . . . 19111.9 cones com glyphicons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19211.10 Exerccios: formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193iv11.11 Validao HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19611.12 Para saber mais: controlando as validaes HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . 19711.13 Exerccios: validao com HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19911.14 Grid responsivo do Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20011.15 Exerccios: grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20211.16 Para saber mais: componentes JS do Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20411.17 Exerccios opcionais: navbar e JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20411.18 Para saber mais: outros frameworks CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20711.19 Discusso em aula: os problemas do Bootstrap e quando no us-lo . . . . . . . . . . . . . . . 20712 jQuery 20812.1 jQuery - A funo $ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20812.2 jQuery Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20912.3 Filtros customizados e por DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21012.4 Utilitrio de iterao do jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21112.5 Caractersticas de execuo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21112.6 Mais produtos na home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21212.7 Exerccios: jQuery na home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21312.8 O elemento output do HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21612.9 Exerccios: mostrando tamanho do produto com jQuery . . . . . . . . . . . . . . . . . . . . . . 21612.10 Plugins jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21712.11 Exerccios: plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21812.12 Exerccios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21813 Integraes com servios Web 21913.1 Web 2.0 e integraes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21913.2 iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21913.3 Vdeo embutido com YouTube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22013.4 Exerccios: iframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22013.5 Exerccio opcional: Google Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22013.6 Boto de curtir do Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22113.7 Exerccios: Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22213.8 Para saber mais: Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22213.9 Para saber mais: Google+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22313.10 Exerccios opcionais: Twitter e Google+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22413.11 Fontes customizadas com @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22413.12 Servios de web fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22513.13 Exerccios: Google Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22514 Apndice - Otimizaes de front-end 22714.1 HTML e HTTP - Como funciona a World Wide Web? . . . . . . . . . . . . . . . . . . . . . . . 22814.2 Princpios de programao distribuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23014.3 Ferramentas de diagnstico - YSlow e PageSpeed . . . . . . . . . . . . . . . . . . . . . . . . . . 230v14.4 Compresso e minicao de CSS e JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23114.5 Compresso de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23314.6 Diminuir o nmero de requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23514.7 Juntar arquivos CSS e JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23614.8 Image Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23614.9 Para saber mais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23914.10 Exerccios: otimizaes Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23915 Apndice - LESS 24115.1 Variveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24115.2 Contas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24215.3 Hierarquia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24315.4 Funes de cores e palhetas automticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24415.5 Reaproveitamento com mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24415.6 Executando o LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24515.7 Para saber mais: recursos avanados e alternativas . . . . . . . . . . . . . . . . . . . . . . . . . . 24615.8 Exerccios: LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24616 Apndice - Subindo sua aplicao no cloud 25016.1 Como escolher um provedor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25016.2 O Jelastic Cloud Locaweb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25016.3 Criando a conta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25116.4 Importando dados no MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25116.5 Preparando o projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25216.6 Enviando o projeto e inicializando servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253ndice Remissivo 254Verso: 17.0.6viCaptulo 1Sobre o curso - o complexo mundo do front-endAo a chave fundamental para todo sucesso Pablo PicassoVivemos hoje numa era em que a Internet ocupa um espao cada vezmais importante emnossas vidas pesso-ais e prossionais. O surgimento constante de Aplicaes Web, para as mais diversas nalidades, um sinalclaro de que esse mercado est em franca expanso e traz muitas oportunidades. Aplicaes corporativas,comrcio eletrnico, redes sociais, lmes, msicas, notcias e tantas outras reas esto presentes na Internet,fazendo do navegador (o browser) o soware mais utilizado de nossos computadores.Esse curso pretende abordar o desenvolvimento de front-end (interfaces) para Aplicaes Web e Sites queacessamos por meio do navegador de nossos computadores, utilizando padres atuais de desenvolvimentoe conhecendo a fundo suas caractersticas tcnicas. Discutiremos as implementaes dessas tecnologias nosdiferentes navegadores, a adoo de frameworks que facilitam e aceleram nosso trabalho, alm de dicas tc-nicas que destacam um prossional 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 deateno 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 novanecessidade.1.1 O curso e os exercciosEsse um curso prtico que comea nos fundamentos de HTML e CSS, incluindo tpicos relacionados snovidades das verses HTML5 e CSS3. 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 JavaScriptDurante 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 quandoassumimos o papel do Programador front-end, quais so os desaos mais comuns e quais so as tcnicase padres recomendados para atingirmos nosso objetivo, transformando imagens estticas (os layouts) emcdigo 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 queso incrementados no decorrer das aulas. Igualmente importante a participao ativa nas discusses edebates em sala de aula.1.2 O projeto de e-commerceDurante o curso, vamos produzir um site para um e-commerce de moda chamadoMirror 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-denidos. Vamos, aqui, focar na implementao, papel doprogramador front-end.1.3 Tirando dvidas com instrutorDurante o curso, tire todas as suas dvidas com o instrutor. HTML, CSS e JavaScript, apesar de pareceremsimples 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 dotreinamento, basta entrar em contato direto com o instrutor ou com a Caelum, teremos o prazer em ajud-lo.Se voc est acompanhando essa apostila em casa, pense tambm em fazer o curso presencial na Caelum.Voc ter contato direto como instrutor para esclarecer suas dvidas, aprendermais tpicos almda apostila,e trocar experincias.1.4 Tirando dvidas online noGUJRecomendamos fortemente a busca de recursos e a participao ativa na comunidade por meio das listas dediscusso relacionadas ao contedo do curso.O GUJ.com.br um site de perguntas e respostas para desenvolvedores de soware que abrange diversasreas, sendo que front-end um dos principais focos. A comunidade do GUJ temmais de 150 mil usurios e1milho emeio demensagens. o lugar ideal pra voc tirar suas dvidas e encontrar outros desenvolvedores.http://www.guj.com.brCaptulo 1 - Sobre o curso - o complexo mundo do front-end - O projeto de e-commerce - Pgina 2http://www.guj.com.brMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript1.5 BibliografiaAlm do conhecimento disponvel na Internet pela da comunidade, existemmuitos livros interessantes sobreo assunto. Algumas referncias: HTML5 e CSS3: Domine a web do futuro - Lucas Mazza, editora Casa do Cdigo; AWeb Mobile: Programe para um mundo de muitos dispositivos - Srgio Lopes, editora Casa doCdigo; A Arte E A Cincia Do CSS - Adams & Cols; Pro JavaScript Techniques - John Resig; e Smashing Book - smashingmagazine.com1.6 Para onde ir depois?Este curso parte da FormaoWeb Design da Caelum que engloba tambm o treinamento Programaocom 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 aFormao Ruby on Rails, a Formao Java e a Formao .NET que abordam trs caminhos possveis paraesse 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 1 - Sobre o curso - o complexo mundo do front-end - Bibliograa - Pgina 3http://www.caelum.com.br/cursos-web-front-end/http://www.caelum.com.br/cursos-rails/http://www.caelum.com.br/cursos-java/http://www.caelum.com.br/cursos-dotnet/Captulo 2Introduo a HTML e CSSQuanto mais nos elevamos, menores parecemos aos olhos daqueles que no sabem voar. Friedrich Wilhelm Nietzsche2.1 Exibindo informaes naWebAnica linguagem que o navegador consegue interpretar para a exibio de contedo oHTML. Para iniciara explorao do HTML, vamos imaginar o seguinte caso: o navegador realizou uma requisio e recebeucomo 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 essecontedo em um arquivo de texto comum, que pode ser criado com qualquer editor de texto puro. Salve oarquivo como index.html e abra-o a partir do navegador sua escolha.Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptParece que obtemos um resultado um pouco diferente do esperado, no? Apesar de ser capaz de exibir textopuro em sua rea principal, algumas regras devem ser seguidas caso desejemos que esse texto seja exibidocom alguma formatao, para facilitar a leitura pelo usurio nal.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 textotenha umamarcao indicando qual o signicado dele. Essa marcao tambm inuencia a maneira comque cada trecho do texto ser exibido. A seguir listado o texto com uma marcao correta:Mirror FashionMirror Fashion.Bem-vindo Mirror Fashion, sua loja de roupas e acessrios.Captulo 2 - Introduo a HTML e CSS - Exibindo informaes na Web - Pgina 5Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptConfira nossas promoes.Receba informaes sobre nossos lanamentos por email.Navegue por todos nossos produtos em catlogo.Compre sem sair de casa.Reproduza o cdigo anterior em um novo arquivo de texto puro e salve-o como index-2.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 signicado aotexto contido entre sua abertura e fechamento.Apesar de estarem corretamentemarcadas, as informaes no apresentam nenhum atrativo esttico e, nessadecincia do HTML, reside o primeiro e maior desao do programador front-end.O HTML foi desenvolvido para exibio de documentos cientcos. Para termos uma comparao, comose a Web fosse desenvolvida para exibir monograas redigidas e formatadas pela Metodologia do TrabalhoCaptulo 2 - Introduo a HTML e CSS - Exibindo informaes na Web - Pgina 6Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptCientco da ABNT. Porm, com o tempo e a evoluo da Web e de seu potencial comercial, tornou-senecessria a exibio de informaes com grande riqueza de elementos grcos e de interao.2.2 Sintaxe doHTMLO 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 .Diversas tags so disponibilizadas pela linguagem HTML e cada uma possui uma funcionalidade especca.No cdigo de antes, vimos por exemplo o uso da tag . Ela representa o ttulo principal da pgina.Mirror FashionNote a sintaxe. Uma tag denida com caracteres < e >, e seu nome (H1 no caso). Muitas tags possuemcontedo, 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: .Algumas tags podem receber atributos dentro de sua denio. So parmetros usando a sintaxe denome=valor. Para denir uma imagem, por exemplo, usamos a tag e, para indicar qual imagem carre-gar, usamos o atributo src:Repare que a tag img no possui contedo por si s. Nesses casos, no necessrio usar uma tag de fecha-mento como antes no h1.2.3 Estrutura de um documentoHTMLUm documento HTML vlido precisa seguir obrigatoriamente a estrutura composta pelas tags , e e a instruo . Vejamos cada uma delas:A tag Na estrutura do nosso documento, antes de tudo, inserimos uma tag . Dentro dessa tag, necessriodeclarar outras duas tags: e . Essas duas tags so irms, pois esto nomesmonvel hierrquicoem relao sua tag pai, que .Captulo 2 - Introduo a HTML e CSS - Sintaxe do HTML - Pgina 7Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptA tag A tag contm informaes sobre nosso documento que so de interesse somente do navegador, e nodos visitantes do nosso site. So informaes que no sero exibidas na rea do documento no navegador.A especicao obriga a presena da tag de contedo dentro do nosso , permitindo especi-car o ttulo do nosso documento, que normalmente ser exibido na barra de ttulo da janela do navegadorou na aba do documento.Outra congurao muito utilizada, principalmente em documentos cujo contedo escrito em um idiomacomo o portugus, que tem caracteres como acentos e cedilha, a congurao da codicao de caracteres,chamado de encoding ou charset.Podemos congurar qual codicao queremos utilizar em nosso documento por meio da congurao decharset na tag . Um dos valores mais comuns usados hoje em dia o UTF-8, tambm chamado deUnicode. H outras possibilidades, como o latin1, muito usado antigamente.O UTF-8 a recomendao atual para encoding na Web por ser amplamente suportada em navegadores eeditores de cdigo, alm de ser compatvel com praticamente todos os idiomas do mundo. o que usaremosno curso.Mirror FashionA tag A tag contm o corpo do nosso documento, que exibido pelo navegador em sua janela. necessrioque o tenha ao menos um elemento lho, ou seja, uma ou mais tags HTML dentro dele.Mirror FashionA Mirror FashionCaptulo 2 - Introduo a HTML e CSS - Estrutura de um documento HTML - Pgina 8Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptNesse exemplo, usamos a tag , que indica um ttulo.A instruoDOCTYPEO DOCTYPE no uma tag HTML, mas uma instruo especial. Ela indica para o navegador qual versodo HTML deve ser utilizada para renderizar a pgina. Utilizaremos , que indica para onavegador a utilizao da verso mais recente do HTML - a verso 5, atualmente.Hmuitos comandos complicados nessa parte de DOCTYPE que eram usados em verses anteriores do HTMLe do XHTML. Hoje em dia, nada disso mais importante. O recomendado sempre usar a ltima versodo HTML, usando a declarao de DOCTYPE simples:2.4 TagsHTMLOHTML composto de diversas tags, cada uma com sua funo e signicado. O HTML 5, ento, adicionoumuitas novas tags, que veremos ao longo do curso.Nesse momento, vamos focar em tags que representam ttulos, pargrafo e nfase.TtulosQuando queremos indicar que um texto um ttulo em nossa pgina, utilizamos as tags de heading em suamarcao:Mirror Fashion.Bem-vindo Mirror Fashion, sua loja de roupas e acessrios.As tags de heading so tags de contedo e vo de a , seguindo a ordem de importncia, sendo o ttulo principal, o mais importante, e o ttulo de menor importncia.Utilizamos, por exemplo, a tag para o nome, ttulo principal da pgina, e a tag como subttulo oucomo ttulo de sees dentro do documento.A ordem de importncia, alm de inuenciar no tamanho padro de exibio do texto, tem impacto nasferramentas que processam HTML. As ferramentas de indexao de contedo para buscas, como o Google,Bing ouYahoo! levam emconsiderao essa ordem e relevncia. Os navegadores especiais para acessibilidadetambm interpretam o contedo dessas tags de maneira a diferenciar seu contedo e facilitar a navegao dousurio pelo documento.Captulo 2 - Introduo a HTML e CSS - Tags HTML - Pgina 9Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPargrafosQuando exibimos qualquer texto em nossa pgina, recomendado que ele seja sempre contedo de algumatag lha da tag . A marcao mais indicada para textos comuns a tag de pargrafo:Nenhum item na sacola de compras.Se voc tiver vrios pargrafos de texto, use vrias dessas tags para separ-los:Um pargrafo de texto.Outro pargrafo de texto.Marcaes de nfaseQuando 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 ou deixar o texto com uma nfase acentuadacom a tag . Tambm h a tag , que diminui o tamanho do texto.Por padro, os navegadores renderizaro o texto dentro da tag em negrito e o texto dentro da tag em itlico. Existem ainda as tags e , que atingem o mesmo resultado visualmente, mas as tags e so mais indicadas por denirem nossa inteno de signicado ao contedo, mais do queuma simples indicao visual. Vamos discutir melhor a questo do signicado das tags mais adiante.Compre suas roupas e acessrios na Mirror Fashion.2.5 ImagensA tag dene 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 nopossa ser carregada ou visualizada.O HTML 5 introduziu duas novas tags especcas para imagem: e . A tag dene uma imagem com a conhecida tag . Alm disso, permite adicionar uma legenda para a imagempor meio da tag .Fuzz Cardigan por R$ 129,90Captulo 2 - Introduo a HTML e CSS - Imagens - Pgina 10Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2.6 A estrutura dos arquivos de um projetoComo todo tipo de projeto de soware, existem algumas recomendaes quanto organizao dos arquivosde um site. No h nenhum rigor tcnico quanto a essa organizao e, na maioria das vezes, voc vai adaptaras recomendaes da maneira que for melhor para o seu projeto.Como um site um conjunto de pginasWeb sobre um assunto, empresa, produto ou qualquer outra coisa, comum todos os arquivos de um site estarem dentro de uma s pasta e, assim como um livro, recomendadoque exista uma capa, uma pgina inicial que possa indicar para o visitante quais so as outras pginas quefazem 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 desejamosque uma determinada pasta seja servida como um site e dentro dessa pasta existe um arquivo chamadoindex.html, esse arquivo ser a pgina inicial a menos que alguma congurao determine outra pginapara esse m.Dentro da pasta do site, no mesmo nvel que o index.html, recomendado que sejam criadas mais algumaspastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts. Para iniciar umprojeto, 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 arquivosdepende 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.2.7 Editores e IDEsExistem 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 odesenvolvimento de pginas. H tambm IDEs (Integrated Development Environment), que oferecem re-cursos como autocompletar e pr-visualizao, como Eclipse e Visual Studio.2.8 Primeira pginaA primeira pgina que desenvolveremos para a Mirror Fashion ser a Sobre, que explica detalhes sobre aempresa, apresenta fotos e a histria.Captulo 2 - Introduo a HTML e CSS - A estrutura dos arquivos de um projeto - Pgina 11http://www.sublimetext.com/http://notepad-plus-plus.orgMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptRecebemos o design j pronto, assim como os textos. Nosso trabalho, como desenvolvedores de front-end, codicar o HTML e CSS necessrios para esse resultado.Captulo 2 - Introduo a HTML e CSS - Primeira pgina - Pgina 12Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptCaptulo 2 - Introduo a HTML e CSS - Primeira pgina - Pgina 13Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2.9 Exerccio: primeiros passos comHTML1) 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 pastamirror-fashion de dentro da pasta caelum/cursos/43 para a rea de trabalho de suamquina. Verique a pasta img, agora cheia de arquivos do design do site. Alm desta pasta, teremos as pastasjs e css, que ainda no usaremos.Em casaVoc pode baixar um ZIP com todos os arquivos necessrios para o curso aqui: http://mirrorfashion.net/caelum-arquivos-curso-web.zip2) Dentro da pasta mirror-fashion, vamos criar o arquivo sobre.html com a estrutura bsica contendo oDOCTYPE e as tags html, head e body:Sobre a Mirror Fashion3) A pgina deve ter uma imagem com o logo da empresa, um ttulo e um texto falando sobre ela.O texto para ser colocado na pgina est no arquivo sobre.txt disponvel na pastaCaelum/43/textos. Sovrios 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 . Coloquetambm o ttulo Histria dentro de uma tag .Use a tag para o logo e a tag para o ttulo. Seu HTML deve car assim, no nal:A Mirror FashionA Mirror Fashion a maior empresa de comrcio eletrnico no segmentode moda em todo o mundo. Fundada em 1932, possui filiaisCaptulo 2 - Introduo a HTML e CSS - Exerccio: primeiros passos com HTML - Pgina 14http://mirrorfashion.net/caelum-arquivos-curso-web.ziphttp://mirrorfashion.net/caelum-arquivos-curso-web.zipMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptem 124 pases........4) Um texto corrido sem nfases difcil de ler. Use negritos e itlicos para destacar partes importantes.Use a tag para a nfase mais forte em negrito, por exemplo para destacar o nome da empresano texto do primeiro pargrafo:A Mirror Fashion a maior empresa comrcio eletrnico.......Use tambm a nfase com que deixar o texto em itlico. Na parte da Histria, coloque os nomesdas pessoas e da famlia em .5) A pgina deve ter duas imagens. A primeira apresenta o centro da Mirror Fashion e deve ser inseridaaps o segundo pargrafo do texto. A outra, uma imagem da Famlia Pelho e deve ser colocada apso subttulo daHistria.As imagens podem ser carregadas com a tag , apontando seu caminho. Alm disso, no HTML5,podemos usar as tags e para destacar a imagem e colocar uma legenda em cadauma.A imagem do centro de distribuio est em img/centro-distribuicao.png:Centro de distribuio da Mirror FashionA imagem da famlia a img/familia-pelho.jpg e deve ser colocada na parte de Histria:Famlia PelhoVerique o resultado no navegador. Devemos j ver o contedo e as imagens na sequncia, mas sem umdesign muito interessante.Boa prtica - IndentaoUma 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 irmosna mesma margem e adicionar alguns espaos ou um tab para elementos lhos.A maioria dos exerccios dessa apostila utiliza um padro recomendado de recuos.Captulo 2 - Introduo a HTML e CSS - Exerccio: primeiros passos com HTML - Pgina 15Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptBoa prtica - ComentriosQuando iniciamos nosso projeto, utilizamos poucas tags HTML.Mais tarde adicionaremos umaquantidade razovel de elementos, o que pode gerar uma certa confuso. Para manter o cdigomais legvel, recomendada a adio de comentrios antes da abertura e aps o fechamento detags estruturais (que contero outras tags). Dessa maneira, ns podemos identicar claramentequando um elemento est dentro dessa estrutura ou depois da mesma.Esse pargrafo est "dentro" da rea principal.Esse pargrafo est "depois" da rea principal.2.10 Estilizando com CSSQuando escrevemos o HTML, marcamos o contedo da pgina com tags que melhor representam o signi-cado daquele contedo. A quando abrimos a pgina no navegador possvel perceber que o navegadormostra as informaes com estilos diferentes.Um h1, por exemplo, ca em negrito numa fonte maior. Pargrafos de texto so espaados entre si, e assimpor diante. Isso quer dizer que o navegador tem um estilo padro para as tags que usamos. Mas, claro, prafazer 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:Mirror Fashion anos 90Alm da tag font, vrias outras tags de estilo existiam. Mas isso passado. Tags HTML para estilo so mprtica 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 cuidarda estilizao da pgina. A vantagem que o CSS bem mais robusto que o HTML para estilizao, comoveremos. Mas, principalmente, escrever formatao visual misturado com contedo de texto no HTML semostrou algo bem impraticvel. O CSS resolve isso separando as coisas; regras de estilo no aparecem maisno HTML, apenas no CSS.Captulo 2 - Introduo a HTML e CSS - Estilizando com CSS - Pgina 16Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2.11 Sintaxe e incluso de CSSA sintaxe do CSS tem estrutura simples: uma declarao de propriedades e valores separados por um sinalde 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.Atributo styleA primeira delas como um atributo style no prprio elemento:O contedo desta tag ser exibido em azul com fundo amarelo no navegador!Mas tnhamos acabado de discutir que uma das grandes vantagens do CSS era manter as regras de estilo forado HTML. Usando esse atributo style no parece que zemos isso. Justamente por isso no se recomendaesse tipo de uso na prtica, mas sim os que veremos a seguir.A tag styleA outra maneira de se utilizar o CSS declarando suas propriedades dentro de uma tag .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 seletorCSS. basicamente uma forma de buscar certos elementos dentro da pgina que recebero as regras visuaisque queremos.No exemplo a seguir, usaremos o seletor que pega todas as tags p e altera sua cor e background:Sobre a Mirror Fashionp {background-color: yellow;color: blue;}Captulo 2 - Introduo a HTML e CSS - Sintaxe e incluso de CSS - Pgina 17Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptO contedo desta tag ser exibido em azul com fundo amarelo!Tambm ser exibido em azul com fundo amarelo!O cdigo anterior da tag indica que estamos alterando a cor e o fundo de todos os elementos comtag p. Dizemos que selecionamos esses elementos pelo nome de sua tag, e aplicamos certas propriedades CSSapenas neles.Arquivo externoA terceira maneira de declararmos os estilos do nosso documento com um arquivo externo, geralmentecom a extenso .css. Para que seja possvel declarar nosso CSS em um arquivo parte, precisamos indicarem 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 nossoHTML 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 do nosso documentoHTML:Sobre a Mirror FashionO contedo desta tag ser exibido em azul com fundo amarelo!Tambm ser exibido em azul com fundo amarelo!Captulo 2 - Introduo a HTML e CSS - Sintaxe e incluso de CSS - Pgina 18Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptE dentro do arquivo estilos.css colocamos apenas o contedo do CSS:p {color: blue;background-color: yellow;}2.12 Propriedades tipogrficas e fontesDa mesma maneira que alteramos cores, podemos alterar o texto. Podemos denir fontes com o uso dapropriedade font-family.A propriedade font-family pode receber seu valor comou sem aspas. No primeiro caso, passaremos o nomedo arquivo de fonte a ser utilizado, no ltimo, passaremos a famlia da fonte.Por padro, os navegadores mais conhecidos exibem texto em um tipo que conhecemos como serif . Asfontes 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 suasterminaes.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 vericar se existemno computador, permitindo que tenhamos um controle melhor da forma como nosso texto ser exibido.Normalmente, declaramos as fontesmais comuns, e existe umgrupo de fontes que so consideradas seguraspor serem bem populares.Em nosso projeto, vemos que as fontes no tm ornamentos. Ento vamos declarar essa propriedade paratodo o documento por meio do seu elemento body:Captulo 2 - Introduo a HTML e CSS - Propriedades tipogrcas e fontes - Pgina 19Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptbody {font-family: "Arial", "Helvetica", sans-serif;}Nesse caso, o navegador vericar se a fonte Arial est disponvel e a utilizar para renderizar os textos detodos os elementos do nosso documento que, por cascata, herdaro essa propriedade do elemento body.Caso a fonte Arial no esteja disponvel, o navegador vericar a disponibilidade da prxima fonte decla-rada, no nosso exemplo a Helvetica. Caso o navegador no encontre tambmessa fonte, ele solicita qualquerfonte que pertena famlia sans-serif , declarada logo a seguir, e a utiliza para exibir o texto, no importaqual seja ela.Temos outras propriedades para manipular a fonte, como a propriedade font-style, que dene o estilo dafonte que pode ser: normal (normal na vertical), italic (inclinada) e oblique (oblqua).2.13 Alinhamento e decorao de textoJ vimos uma srie de propriedades e subpropriedades que determinam o estilo do tipo (fonte). Vamosconhecer algumas maneiras de alterarmos as disposies dos textos.Uma das propriedades mais simples, porm muito utilizada, a que diz respeito ao alinhamento de texto: apropriedade text-align.p {text-align: right;}O exemplo anterior determina que todos os pargrafos da nossa pgina tenham o texto alinhado para a di-reita. Tambm possvel determinar que um elemento tenha seu contedo alinhado ao centro ao denirmoso valor center para a propriedade text-align, ou ento denir que o texto deve ocupar toda a largura doelemento aumentando o espaamento entre as palavras com o valor justify. O padro que o texto sejaalinhado esquerda, com o valor left, porm importante lembrar que essa propriedade propaga-se emcascata. possvel congurar 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 2 - Introduo a HTML e CSS - Alinhamento e decorao de texto - Pgina 20Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2.14 Imagem de fundoA propriedade background-image permite indicar um arquivo de imagem para ser exibido ao fundo doelemento. Por exemplo:h1 {background-image: url(sobre-background.jpg);}Com essa declarao, o navegador vai requisitar um arquivo sobre-background.jpg, que deve estar namesma pasta do arquivo CSS onde consta essa declarao.2.15 BordasAs propriedades do CSS para denirmos 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. Porexemplo: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;}2.16 Exerccio: primeiros passos com CSS1) Aplicaremos um pouco de estilo em nossa pgina usando CSS. Dentro da pasta css, crie um arquivosobre.css, que conter nosso cdigo de estilo para essa pgina.Captulo 2 - Introduo a HTML e CSS - Imagem de fundo - Pgina 21Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptEm primeiro lugar, precisamos carregar o arquivo sobre.css dentro da pgina sobre.html com a tag dentro da tag :Para o elemento , 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 aseparar o contedo.h1 {background-image: url(../img/sobre-background.jpg);}h2 {border-bottom: 2px solid #333333;}Acerte tambm a renderizao das guras. Coloque um fundo cinza, uma borda sutil, deixe a legenda emitlico 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 nal!Captulo 2 - Introduo a HTML e CSS - Exerccio: primeiros passos com CSS - Pgina 22Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2) (opcional) Teste outros estilos de bordas em vez do solid que vimos no exerccio anterior. Algumaspossibilidades: dashed, dotted, double, groove e outros.Teste tambm outras possibilidades para o text-align, como left, right e justify.2.17 Cores naWebPropriedades como background-color, color, border-color, entre outras aceitam uma cor como valor. Exis-tem vrias maneiras de denir 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 corescom seus nomes. O mais comum denir a cor com base em sua composio RGB.Captulo 2 - Introduo a HTML e CSS - Cores na Web - Pgina 23Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptRGB um sistema de cor bastante comum aos designers. Ele permite especicar at 16 milhes de corescomo uma combinao de trs cores base: Vermelho (Red), Verde (Green), Azul (Blue). Podemos escolhera intensidade de cada um desses trs canais bsicos, numa escala de 0 a 255.Um amarelo forte, por exemplo, tem 255 de Red, 255 de Green e 0 de Blue (255, 255, 0). Se quiser um laranja,basta diminuir um pouco o verde (255, 200, 0). E assim por diante.No CSS, podemos escrever as cores tendo como base sua composio RGB. Alis, no CSS3 - que veremosmelhor 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 decompatibilidade. O mais comum a notao hexadecimal, que acabamos usando no exerccio anterior aoescrever #F2EDED. Essa sintaxe tem suporte universal nos navegadores e mais curta de escrever, apesarde ser mais enigmtica.h3 {background: #F2EDED;}No fundo, porm, a mesma coisa. Na notao hexadecimal (que comea com #), temos 6 caracteres. Osprimeiros 2 indicam o canal Red, os dois seguintes, o Green, e os dois ltimos, Blue. Ou seja, RGB. E usamosa 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, podemosutilizar nmeros de 0-9 e letras de A-F.H uma conta por trs dessas converses, mas seu editor de imagens deve ser capaz de fornecer ambos osvalores para voc sem problemas. Um valor 255 vira FF na notao hexadecimal. A cor #F2EDED, porexemplo, equivalente a rgb(242, 237, 237), um cinza claro.Vale aqui uma dica quanto ao uso de cores hexadecimais, toda vez que os caracteres presentes na composioda base se repetirem, estes podem ser simplicados. Ento um nmero em hexadecimal 3366FF, pode sersimplicado para 36F.2.18 ListasHTMLNo so raros os casos em que queremos exibir uma listagem em nossas pginas. OHTML tem algumas tagsdenidas para que possamos fazer isso de maneira correta. A lista mais comum a lista no-ordenada.Captulo 2 - Introduo a HTML e CSS - Listas HTML - Pgina 24Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPrimeiro item da listaSegundo item da lista:Primeiro item da lista aninhadaSegundo item da lista aninhadaTerceiro item da listaNote que, para cada item da lista no-ordenada, utilizamos umamarcao de item de lista . No exemploacima, utilizamos uma estrutura composta na qual o segundo item da lista contm uma nova lista. A mesmatag de item de lista utilizada quando demarcamos uma lista ordenada.Primeiro item da listaSegundo item da listaTerceiro item da listaQuarto item da listaQuinto item da listaAs listas ordenadas tambm podem ter sua estrutura composta por outras listas ordenadas como no exemploque temos para as listas no-ordenadas. Tambm possvel ter listas ordenadas aninhadas em um item deuma lista no-ordenada e vice-versa.Existe um terceiro tipo de lista que devemos utilizar para demarcar um glossrio, quando listamos termos eseus signicados. Essa lista a lista de denio.HTMLHTML a linguagem de marcao de textos utilizadapara exibir textos como pginas na Internet.NavegadorNavegador o software que requisita um documento HTMLatravs do protocolo HTTP e exibe seu contedo em umajanela.Captulo 2 - Introduo a HTML e CSS - Listas HTML - Pgina 25Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2.19 Espaamento e margemUtilizamos a propriedade padding para espaamento e margin para margem. Vejamos cada uma e comoelas diferem entre si.PaddingA propriedade padding utilizada para denir uma margem interna em alguns elementos (por margeminterna queremos dizer a distncia entre o limite do elemento, sua borda, e seu respectivo contedo) e temas subpropriedades listadas a seguir: padding-top padding-right padding-bottom padding-leEssas 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 propertydo padding.Podemos denir todos os valores para as subpropriedades do padding em uma nica propriedade, chamadaexatamente de padding, e seu comportamento descrito nos exemplos a seguir:Se passado somente um valor para a propriedade padding, esse mesmo valor aplicado em todas as direes.p {padding: 10px;}Se passados dois valores, o primeiro ser aplicado acima e abaixo (equivalente a passar o mesmo valor parapadding-top e padding-bottom) e o segundo ser aplicado direita e esquerda (equivalente ao mesmovalor 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 terceirovalor ser aplicado abaixo do elemento (equivalente a padding-bottom)p {padding: 10px 20px 15px;}Captulo 2 - Introduo a HTML e CSS - Espaamento e margem - Pgina 26Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptSe 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 osvalores so aplicados em sentido horrio.p {padding: 10px 20px 15px 5px;}MarginA propriedade margin bem parecida com a propriedade padding, exceto que ela adiciona espao aps olimite do elemento, ou seja, um espaamento alm do elemento em si. Alm das subpropriedades listadasa seguir, h a shorthand property margin que se comporta da mesma maneira que a shorthand property dopadding vista no tpico anterior. margin-top margin-right margin-bottom margin-leH ainda umamaneira de permitir que o navegador dena qual ser a dimenso da propriedade padding oumargin conforme o espao disponvel na tela: denimos o valor auto para a margem ou o espaamento quequisermos.No exemplo a seguir, denimos que um elemento no tem nenhuma margem acima ou abaixo de seu con-tedo e que o navegador dene uma margem igual para ambos os lados de acordo com o espao disponvel:p {margin: 0 auto;}Dimenses possvel determinar as dimenses de um elemento, por exemplo:p {background-color: red;height: 300px;width: 300px;}Todos os pargrafos do nosso HTML ocuparo 300 pixels de largura e de altura, com cor de fundo vermelha.Captulo 2 - Introduo a HTML e CSS - Espaamento e margem - Pgina 27Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2.20 Exerccios: listas e margens1) Ainda na pgina sobre.html, crie um subttulo chamado Diferenciais e, logo em seguida, uma lista dediferenciais. Use para o subttulo, para a lista e para os itens da lista.Dica: voc pode copiar o texto dos diferenciais do arquivo diferenciais.txt.DiferenciaisMenor preo do varejo, garantidoSe voc achar uma loja mais barata, leva o produto de graa....Teste o resultado no navegador.2) Podemosmelhorar a apresentao da pgina acertando alguns espaamentos usando vrias propriedadesdo 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.3) Para centralizar o body como no design, podemos usar o truque de colocar um tamanho xo e margensauto na esquerda de direita:Captulo 2 - Introduo a HTML e CSS - Exerccios: listas e margens - Pgina 28Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptbody {margin-left: auto;margin-right: auto;width: 940px;}Verique mais uma vez o resultado.2.21 LinksHTMLQuando 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 .Existem dois diferentes usos para as ncoras. Um deles a denio de links:Visite o site da Caelum.Note que a ncora est demarcando apenas a palavra Caelum de todo o contedo do pargrafo exempli-cado. Isso signica que, ao clicarmos com o cursor domouse na palavra Caelum, o navegador redirecionaro 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 quechamamos de bookmark.Mais informaes aqui.Contedo da pgina...Mais informaes sobre o assunto:Informaes...De acordo com o exemplo acima, ao clicarmos sobre a palavra aqui, demarcada com um link, o usurioser levado poro da pgina onde o bookmark info visvel. Bookmark o elemento que tem o atributoid.Captulo 2 - Introduo a HTML e CSS - Links HTML - Pgina 29Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript possvel, com o uso de um link, levar o usurio a um bookmark presente em outra pgina.Entre em contato sobre o cursoO exemplo acima far com que o usurio que clicar no link seja levado poro da pgina indicada noendereo, especicamente no ponto onde o bookmark contato seja visvel.2.22 Exerccios: links1) 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 para criar link para o Google Maps:Jacarezinho, no ParanTeste a pgina no navegador e acesse o link.2) Durante o curso, vamos criar vrias pginas para o site da Mirror Fashion, como uma pgina inicial(chamada index.html).Queremos, nessa pgina de Sobre que estamos fazendo, linkar para essa pgina. Por isso, vamos cri-la agora na pasta mirror-fashion com a estrutura bsica e um pargrafo indicando em qual pgina ousurio est. No se preocupe, ela ser incrementada em breve.Crie a pgina index.html:Mirror FashionOl, sou o index.html!Adicione um link inteno na nossa sobre.html apontando para esta pgina que acabamos de criar. Oterceiro pargrafo do texto possui referncia a esta pgina mas ainda sem link. Crie link l:... Acesse nossa loja...Captulo 2 - Introduo a HTML e CSS - Exerccios: links - Pgina 30Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptRepare como apenas envolvemos o texto a ser linkado usando a tag .Veja o resultado.3) Se reparar bem, ainda nesse terceiro pargrafo de texto, h referncias textuais para as outras sees danossa pgina, em particular para aHistria 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 identic-los:Histria...DiferenciaisAgora que temos os ids dos subttulos preenchidos, podemos criar uma ncora para eles:... Conhea tambm nossa histria enossos diferenciais....Veja o resultado em seu navegador.2.23 Elementos estruturaisJ vimos muitas tags para casos especcos: ttulos com h1, pargrafos com p, imagens com img, listas comul 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.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 e que funcionam como coringas. So tags sem nenhumsignicado especialmas que podem servir para agrupar um certo contedo, tanto umbloco da pgina quantoum pedao de texto.E, como vamos ver a seguir, vamos poder estilizar esses divs e spans com CSS customizado. Por padro, elesno tm estilo algum.2.24 CSS: Seletores de ID e filhoJ vimos como selecionar elementos no CSS usando simplesmente o nome da tag:p {color: red;}Captulo 2 - Introduo a HTML e CSS - Elementos estruturais - Pgina 31Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptApesar de simples, uma maneira muito limitada de selecionar. s vezes no queremos pegar todos ospargrafos da pgina, mas apenas algum determinado.Existem, portanto, maneiras mais avanadas de selecionarmos um ou mais elementos do HTML usando osseletores CSS. Vamos ver seletores CSS quase que ao longo do curso todo, inclusive alguns bem avanados emodernos do CSS3. Por enquanto, vamos ver mais 2 bsicos alm do seletor por nome de tag.Seletor de ID possvel aplicar propriedades visuais a um elemento selecionado pelo valor de seu atributo id. Para isso, oseletor 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 cabecalhotenha seu texto renderizado na cor branca e centralizado. Note que no h nenhuma indicao para qual taga propriedade ser aplicada. Pode ser tanto uma quanto um , at mesmo tags sem contedo comouma , 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 declaradassomente quele nico elemento e, por cascata, a todos os seus elementos lhos.Seletor hierrquicoPodemos ainda utilizar um seletor hierrquico que permite aplicar estilos aos elementos lhos 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 noselementos img lhos do elemento com id=rodape.2.25 Fluxo do documento e floatSuponhamos que, por uma questo de design, a imagem da famlia Pelho deva vir ao lado do pargrafo econforme a imagem abaixo:Captulo 2 - Introduo a HTML e CSS - Fluxo do documento e oat - Pgina 32Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptIsso no acontece por padro. Repare que, observando as tags HTML que usamos at agora, os elementosda 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 oimportante que ele atrapalha esse nosso design.Temos um problema: a tag ocupa toda a largura da pgina e aparece empilhada no uxo do docu-mento, no permitindo que outros elementos sejam adicionados ao seu lado.Este problema pode ser solucionado por meio da propriedade oat. Esta propriedade permite que tiremosum certo elemento do uxo vertical do documento o que faz com que o contedo abaixo dele ua ao seuredor. Na prtica, vai fazer exatamente o layout que queremos.Em nosso exemplo, o contedo do pargrafo tentar uir ao redor da nossa imagem com oat. Perceba quehouve uma perturbao do uxo HTML, pois agora a nossa imagem parece existir fora do uxo.2.26 Exerccios: seletores CSS e flutuao de elementos1) Temos uma com a imagem do centro de distribuio que queremos centralizar na pgina(margin auto) e acertar o tamanho (width).Para aplicar essas regras apenas a esse figure e no a todos da pgina, vamos usar o ID. Coloque um idna para podermos estiliz-la especicamente via CSS:....Adicionando o CSS:#centro-distribuicao {margin-left: auto;margin-right: auto;width: 550px;}Captulo 2 - Introduo a HTML e CSS - Exerccios: seletores CSS e utuao de elementos - Pgina 33Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptTeste no navegador. Compare o resultado com a outra gura que no recebeu o mesmo estilo.2) Crie um rodap para a pgina utilizando uma , que deve ser inserida como ltimo elemento dentroda tag : Copyright Mirror FashionTeste o resultado.3) Assim como zemos para os ttulos e subttulos, estilize o nosso rodap. Repare no uso do id via CSSpara selecionarmos apenas o elemento especco que ser estilizado. Repare tambm no uso do seletor dedescendentes para indicar um elemento que est dentro de outro.#rodape {color: #777;margin: 30px 0;padding: 30px 0;}#rodape img {margin-right: 30px;vertical-align: middle;width: 94px;}Teste o resultado nal no navegador.Captulo 2 - Introduo a HTML e CSS - Exerccios: seletores CSS e utuao de elementos - Pgina 34Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript4) Queremos que a imagem da Famlia Pelho esteja utuando a direita no texto na seo sobre aHistria daempresa. Para isso, use a propriedade float no CSS.Como a com a imagem da famlia Pelho ainda no possui id, adicione um:....Agora podemos referenciar o elemento atravs de seu id em nosso CSS, indicando a utuao e umamargem para espaamento:#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.5) (opcional) Faa testes com o float: left tambm.6) (opcional) Teste utuar a imagem do centro de distribuio. Como o contedo uir ao seu redor agora? o que queramos? Como melhorar?2.27 O futuro e presente daWeb com oHTML5Nos ltimos anos, muito tem se falado sobre a prxima verso do HTML, o HTML5. Esse projeto umgrande esforo do W3C e dos principais browsers para atender a uma srie de necessidades do desenvolvi-mento daWeb como plataforma de sistemas distribudos e informao descentralizada. Algumas novidadesCaptulo 2 - Introduo a HTML e CSS - O futuro e presente da Web com o HTML5 - Pgina 35Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptso importantes para a marcao de contedo, outras para a estilizao com o CSS nvel 3 (CSS3) e outrasnovidades so importantes para interao avanada com o usurio com novas funcionalidades do navegadorcom JavaScript.Apesar da especicao ainda no estar completa e existirem diferenas entre as implementaes adotadaspelos 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 comoo Internet Explorer 7 e o Firefox 3.Em nosso projeto, vamos adotar os padres do HTML5 e vamos conhecer e utilizar algumas de suas novi-dades quanto melhoria da semntica de contedo e novas propriedades de CSS que nos permite adicionarefeitos visuais antes impossveis. Ainda assim, nosso projeto ser parcialmente compatvel com navegadoresobsoletos por conta da tcnica Progressive Enhancement.Captulo 2 - Introduo a HTML e CSS - O futuro e presente da Web com o HTML5 - Pgina 36Captulo 3HTML semntico e posicionamento no CSSO caos a rima do inaudito. Zack de la Rocha3.1 O processo de desenvolvimento de uma telaExiste hoje no mercado uma grande quantidade de empresas especializadas no desenvolvimento de sites eaplicaes web, bem como algumas empresas de desenvolvimento de soware ou agncias de comunicaoque 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 essanecessidade deve passar todas as informaes relevantes ao projeto para a empresa que vai execut-lo. A em-presa responsvel pelo seu desenvolvimento deve analisar muito bem essas informaes e utilizar pesquisaspara complementar ou mesmo certicar-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, devemosconhecer muito bem as caractersticas do pblico alvo, pois ele dene qual a melhor abordagem para denira navegao, tom lingustico e visual a ser adotado, entre outras. A anidade do pblico com a Internet e ocomputador pode inclusive denir o tipo e a intensidade das inovaes que podem ser utilizadas.Por isso, a primeira etapa do desenvolvimento do projeto ca a cargo da rea deUser ExperienceDesign (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,denindo a quantidade, contedo e localizao de cada informao.Algumas das motivaes e prticas de Design de Interao e Experincia do Usurio so contedo do cursoDesign de Interao, Experincia do Usurio e Usabilidade. O resultado do trabalho dessa equipe umaMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptsrie de denies sobre a navegao (mapa do site) e um esboo de cada uma das vises, que so as pginas, evises parciais como, por exemplo, os dilogos de alerta e conrmao da aplicao. Essas vises no adotamnenhum padro de design grco: so utilizadas fontes, cores e imagens neutras, embora as informaesescritas devam ser denidas 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 grcos, que utilizam ferramentas grcas comoCaptulo 3 - HTML semntico e posicionamento no CSS - O processo de desenvolvimento de uma tela - Pgina 38Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptAdobe Photoshop, Adobe Fireworks, GIMP, entre outras. O que resulta desse trabalho que o designer realizaem cada wireframe o que chamamos de layout. Os layouts so imagens estticas j com o visual completoa ser implementado. Apesar de os navegadores serem capazes de exibir imagens estticas, exibir uma nicaimagem para o usurio nal 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 interaocom o contedo, necessrio que a equipe de programao front-end transforme essas imagens em telasvisveis e, principalmente, utilizveis pelos navegadores. Existem diversas tecnologias e ferramentas pararealizar esse tipo de trabalho. Algumas das tecnologias disponveis so: HTML, Adobe Flash, Adobe Flex,JavaFX e Microso Silverlight.De todas as tecnologias disponveis, a mais recomendada certamente o HTML, pois a linguagem que onavegador 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 evoludoa ponto de podermos substituir algumas dessas outras tecnologias onde tnhamos mais poder e controle emrelao exibio de grcos, efeitos e interatividade.3.2 O projetoMirror FashionDurante o curso, vamos produzir algumas pginas de um projeto: um e-commerce de roupas. No captuloanterior, de introduo, criamos uma pgina simples de Sobre. Vamos comear agora a projetar o restante,com as pginas mais complexas.Uma equipe deUX j deniu as pginas, o contedo de cada uma delas e produziu algunswireframes. Depoisde realizado esse trabalho, a equipe de design j adicionou o visual desejado pelo cliente como resultado naldo projeto.Agora a nossa vez de transformar esse layout emHTML, para que os navegadores possam ler e renderizaro cdigo, exibir a pgina para o usurio nal.No captulo anterior, comeamos a codicar a pgina de Sobre da nossa loja, com o intuito de praticar obsico de HTML e CSS.Nesse momento, vamos focar na construo da parte principal da loja, aHome Page, e seguiremos o layoutocial criado pela equipe de design:Captulo 3 - HTML semntico e posicionamento no CSS - O projeto Mirror Fashion - Pgina 39Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptFigura 3.1: Design da Homepage3.3 Analisando o LayoutAntes de digitar qualquer cdigo, necessria uma anlise do layout. Com essa anlise, deniremos as prin-cipais reas de nossas pginas. Um fator muito importante a ser considerado quando fazemos essa anlisedo 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 doscasos, a leitura feita da esquerda para a direita, de cima para baixo, da mesma maneira que lemos essaapostila, por exemplo.Olhe detalhadamente nosso layout e tente imaginar qual a melhor maneira de estruturar nosso HTML paraque possamos codic-lo.De acordo com o posicionamento de elementos que foi denido desde a etapa de criao dos wireframes,Captulo 3 - HTML semntico e posicionamento no CSS - Analisando o Layout - Pgina 40Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScripttodas as pginas no nosso projeto obedecem a uma estrutura similar.Estrutura da pginaNote que h um cabealho (uma rea que potencialmente se repetir em mais de uma pgina) que ocupauma largura xa; 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 amesma largura xa 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 mda pgina. Notemos que, apesar dofundo 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 blocoprincipal inicial com o menu de navegao e o banner de destaque. E h outro bloco no nal com doispainis com listas de produtos.Poderamos denir essas reas da seguinte maneira:Captulo 3 - HTML semntico e posicionamento no CSS - Analisando o Layout - Pgina 41Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptNote que utilizamos o atributo id do HTML para identicar a principal. O atributo id deve sernico em cada pgina, ou seja, s pode haver um elemento com o atributo id="main". Mesmo se o outroelemento for de outra tag, o id no pode se repetir. De acordo com a estrutura acima, ns separamos asquatro reas principais.3.4 HTML semnticoAs tags que usamos antes - header, section e footer - so tags novas do HTML5. Antigamente, numasituao parecida com essa, teramos criado apenas trs div, uma para cada parte da pgina, e talvez colocadoids diferentes pra cada uma.Qual a diferena entre colocar div e essas novas tags do HTML5? Visualmente e funcionalmente, nenhumadiferena. A nica diferena o nome da tag e o signicado que elas carregam. E isso bastante importante.Dizemos que a funo do HTML fazer a marcao do contedo da pgina, representar sua estrutura dainformao. No papel do HTML, por exemplo, cuidar da apresentao nal 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 HTML5 trazem novos signicados semnticos para usarmos em elementos HTML. Emvez de simplesmente agrupar os elementos do cabealho em um div genrico e sem signicado, usamos umatag header que carrega em si o signicado de representar um cabealho.Com isso, temos um HTML com estrutura baseada no signicado de seu contedo, o que traz uma srie debenefcios, 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 qualparte omenu de navegao. Visualmente, so distinguveis para o usurio comum. Mas e se desabilitarmoso CSS e as regras visuais? Como distinguir esses contedos?Um HTML semntico carrega signicado independente da sua apresentao visual. Isso particularmenteimportante quando o contedo ser consumido por clientes no visuais. H vrios desses cenrios. Umusurio cego poderia usar um leitor de tela para ouvir sua pgina. Neste caso, a estrutura semntica doHTML 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. Semum HTML semntico, o Google no consegue, por exemplo, saber que aquilo um menu e que deve seguirseus links. Ou que determinada parte s um rodap informativo, mas no faz parte do contedo principal.Semntica uma importante tcnica de SEO - SearchEngineOptimization - e crtica paramarketing digital.Captulo 3 - HTML semntico e posicionamento no CSS - HTML semntico - Pgina 42Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptVamos falar bastante de semntica ao longo do curso e esse um ingrediente fundamental das tcnicasmodernas de web design. Veremos mais cenrios onde uma boa semntica essencial.3.5 Pensando no headerJ sabemos que o nosso cabealho ser representado pela tag do HTML5, semanticamente perfeitapara a situao. Mas e o contedo dele?Observe apenas o cabealho no layout anterior. Quais blocos de contedo voc identica nele? O logo principal com o nome da empresa Uma mensagem sobre a sacola de compras Uma lista de links de navegao da lojaRepare como no destacamos a presena do cone da sacola. Ele no faz parte do contedo, meramentedecorativo. 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 :Nenhum item na sacola de comprasMas e a imagem com o cone? Como decorativa, pertence ao CSS, como veremos depois. O HTML notem nada a ver com isso.Continuando no header, nossa lista de links pode ser uma lista - com s. Dentro de cada item, vamosusar um link - - para a pgina correspondente. Mas h como melhorar ainda mais: esses links no solinks ordinrios, so essenciais para a navegao do usurio na pgina. Podemos sinalizar isso com a novatag do HTML5, que representa blocos de navegao primrios:Sua ContaLista de DesejosCarto FidelidadeSobreAjudaO ltimo ponto para fecharmos nosso cabealho o logo. Como represent-lo?Captulo 3 - HTML semntico e posicionamento no CSS - Pensando no header - Pgina 43Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptVisualmente, observamos no layout que apenas uma imagem. Podemos usar ento uma tag comozemos antes. Mas e semanticamente, o que aquele contedo? E, principalmente, o que signica aquelelogo para clientes no visuais? Como gostaramos que esse contedo fosse indexado no Google? muito comum, nesse tipo de situao, usar um 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, queremosque ele associe nossa pgina com Mirror Fashion e no com uma imagem qualquer. fcil obter esse resultado colocando a dentro do . E para representar o contedo textual daimagem (o que vai ser usado pelo leitor de tela e peloGoogle), usamos o atributo alt da imagem. Esse atributoindica contedo alternativo, que ser usado quando o cliente no for visual e no conseguir enxergar aimagem visualmente.Repare como a colocao do H1 e do ALT na imagem no alteram em nada a pgina visualmente. Esto lpor pura importncia semntica. E isso muito bom. OH1 dar o devido destaque semntico para a o logo,colocando-o como elemento principal. E o ALT vai designar um contedo textual alternativo imagem.3.6 Estilizao com classesPara podermos estilizar os elementos que criamos, vamos precisar de uma forma de selecionarmos no CSScada coisa. J vimos seletor de tag e por ID. Ou seja, pra estilizar nosso menu , podamos fazer:nav {...}Mas imagine que podemos ter muitos NAV na pgina e queremos ser mais especcos. O ID uma soluo:E, no CSS:#menu-opcoes {...}Vamos ver uma terceira forma, no uso de classes. O cdigo semelhante mas usa o atributo class no HTMLe o ponto no CSS:Captulo 3 - HTML semntico e posicionamento no CSS - Estilizao com classes - Pgina 44Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptE, no CSS:.menu-opcoes {...}Mas quando usar ID ou CLASS?Ambos fariam seu trabalho nesse caso. Mas bom lembrar que ids so mais fortes, devem ser nicos napgina, sempre. Embora esse nosso menu seja nico agora, imagine se, no futuro, quisermos ter o mesmomenu em outro ponto da pgina, mais pra baixo? Usar classes facilita reuso de cdigo e exibilidade.Alm disso, um elemento pode termais de uma classe ao mesmo tempo, aplicando estilos de vrias regras doCSS ao mesmo tempo:....menu-opcoes {// cdigo de um menu de opcoes// essas regras sero aplicadas ao nav}.menu-cabecalho {// cdigo de um menu no cabealho// essas regras TAMBM sero aplicadas ao nav}No caso do ID, no. Cada elemento s tem um id, nico.Preferimos o uso de classes pra deixar em aberto reaproveitar aquele elemento emmais de um ponto depois.Vamos fazer isso na sacola tambm:Nenhum item na sacola de comprasCaptulo 3 - HTML semntico e posicionamento no CSS - Estilizao com classes - Pgina 45Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptReutilizando uma classe para diversos elementosPode ser interessante criar uma classe que determina a centralizao horizontal de qualquer elemento, seminterferir 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:Contedo que deve ficar centralizado3.7 Exerccios: header semntico1) J temos o arquivo index.html criado. Vamos apagar seu nico pargrafo, pois adicionaremos contedoque far sentido.Crie o arquivo estilos.css na pasta css do projeto, que ser onde escreveremos o CSS visual da pgina.Adicione tambm a tag apontando para css/estilos.css:2) Prximo passo: criar o cabealho. Use as tags semnticas que vimos no curso, como , ,, , etc. Crie links para as pginas do menu. E use para representar o ttulo da pgina como logo acessvel.Nenhum item na sacola de comprasSua ContaLista de DesejosCarto FidelidadeSobreCaptulo 3 - HTML semntico e posicionamento no CSS - Exerccios: header semntico - Pgina 46Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptAjuda3) J podemos at testar no navegador. Repare como a pgina, embora sem estilo visual, utilizvel. assimque os clientes no visuais lero nosso contedo. Qual a importncia de uma marcao semntica?4) Vamos criar a estilizao visual bsica do nosso contedo, sem nos preocuparmos com posicionamentoainda. Ajuste as cores e alinhamento dos textos. Coloque o cone da sacola com CSS atravs de umaimagem 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;}.menu-opcoes ul {font-size: 15px;}.menu-opcoes a {color: #003366;}Aproveite e congure a cor e a fonte base de todos os textos do site, usando um seletor direto na tag: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.Captulo 3 - HTML semntico e posicionamento no CSS - Exerccios: header semntico - Pgina 47Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript3.8 CSS ResetQuando no especicamos nenhum estilo para nossos elementos do HTML, o navegador utiliza uma sriede estilos padro, que so diferentes em cada um dos navegadores. Em um momento mais avanado dosnossos projetos, poderemos enfrentar problemas com coisas que no tnhamos previsto; por exemplo, oespaamento entre caracteres utilizado em determinado navegador pode fazer com que um texto que, pelanossa denio deveria aparecer em 4 linhas, aparea com 5, 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, sobrescrevendototalmente os estilos padro do navegador.Desse jeito podemos comear a estilizar as nossas pginas a partir de um ponto que o mesmo para todosos 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:HTML5 BoilerplateOHTML5Boilerplate umprojeto que pretende fornecer um excelente ponto de partida para quempretendedesenvolver um novo projeto comHTML5. Uma srie de tcnicas para aumentar a compatibilidade da novatecnologia com navegadores um pouco mais antigos esto presentes e o cdigo totalmente gratuito. Emseu arquivo style.css, esto reunidas diversas tcnicas de CSS Reset. Apesar de consistentes, algumas dessastcnicas so um pouco complexas, mas um ponto de partida que podemos considerar.YUI3 CSS ResetCriado pelos desenvolvedores front-end do Yahoo!, uma das referncias na rea, esse CSS Reset compostode 3 arquivos distintos. O primeiro deles, chamado de Reset, simplesmente muda todos os valores possveispara um valor padro, onde at mesmo as tags e passam a ser exibidas com omesmo tamanho.Captulo 3 - HTML semntico e posicionamento no CSS - CSS Reset - Pgina 48Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptO segundo arquivo chamado deBase, onde algumasmargens e dimenses dos elementos so padronizadas.O terceiro chamado de Font, onde o tamanho dos tipos denido para que tenhamos um visual consistenteinclusive em diversos dispositivos mveis.Eric Meyer CSS ResetH tambm o famoso CSS Reset de Eric Meyer, que pode ser obtido em http://meyerweb.com/eric/tools/css/reset/. apenas um arquivo com tamanho bem reduzido.3.9 Block vs InlineOs elementos do HTML, quando renderizados no navegador, podem comportar-se basicamente de duasmaneiras diferentes no que diz respeito maneira como eles interferem no documento como um todo: embloco (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 , que j utilizamos em nosso projeto. Note que no hnenhum outro elemento esquerda ou direita do nosso nome da loja, apesar da expresso Mirror Fashionno ocupar toda a largura do documento.Entre os elementos em bloco, podemos destacar as tags de heading a , os pargrafos e divises.Elementos em linha so aqueles que ocupam somente o espao necessrio para que seu prprio contedoseja exibido, permitindo que outros elementos em linha possam ser renderizados logo na sequncia, sejaantes ou depois, exibindo diversos elementos nessa mesma linha.Entre os elementos em linha, podemos destacar as tags de ncora , as tags de nfase , e e a tag de marcao de atributos .Saber a distino entre esses modos de exibio importante, pois h diferenas na estilizao dos elementosdependendo do seu tipo.Pode ser interessante alterarmos esse padro de acordo com nossa necessidade, por isso existe a propriedadedisplay no CSS, que permite denir qual estratgia de exibio o elemento utilizar.Por exemplo, o elemento de uma tem por padro o valor block para a propriedade display. Sequisermos os elementos na horizontal, basta alterarmos a propriedade display da para inline:ul li{display: inline;}Captulo 3 - HTML semntico e posicionamento no CSS - Block vs Inline - Pgina 49http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript3.10 Exerccios: reset e display1) Utilizaremos o CSS reset do Eric Meyer. O arquivo reset.css j foi copiado para a pasta css do nossoprojeto quando importamos o projeto no captulo inicial.Precisamos s referenci-lo no head antes do nosso estilos.css:Abra novamente a pgina no navegador. Percebe a diferena, principalmente na padronizao dos espa-amentos.2) Prximo passo: transformar nosso menu em horizontal e ajustar espaamentos bsicos.Vamos usar a propriedade display para mudar os 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 basedo cone. Um padding-top deve resolver..menu-opcoes ul li {display: inline;margin-left: 20px;}.sacola {padding-top: 8px;}Teste a pgina. Est melhorando?3) Nosso header ainda est todo esquerda da pgina, sendo que, no layout, ele tem um tamanho xo eca centralizado na pgina. Alis, no s o cabealho que ca assim: o contedo da pgina em si e ocontedo do rodap tambm.Temos trs tipos de elementos que precisam ser centralizados nomeio da pgina. Vamos copiar e colar asinstrues CSS nos 3 lugares? No! Criamos uma classe no HTML a ser aplicada em todos esses pontose 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 doheader.Captulo 3 - HTML semntico e posicionamento no CSS - Exerccios: reset e display - Pgina 50Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript3.11 Position: static, relative, absoluteExiste um conjunto de propriedades que podemos utilizar para posicionar um elemento na pgina, que sotop, left, bottom e right. Porm essas propriedades, por padro, no so obedecidas por nenhum elemento,pois elas dependem de uma outra propriedade, a position.A propriedade position determina qual o modo de posicionamento de um elemento, e ela pode recebercomo valor static, relative, absolute ou xed. Veremos o comportamento de cada um deles, junto com aspropriedades de coordenadas.O primeiro valor, padro para todos os elementos, o static. Um elemento com posio static permanecesempre em seu local original no documento, aquele que o navegador entende como sendo sua posio derenderizao. Se passarmos algum valor para as propriedades de coordenadas, eles no sero respeitados.Um dos valores para a propriedade position que aceitam coordenadas o relative. Com ele, as coordenadasque passamos so obedecidas em relao posio original do elemento. Por exemplo:.logotipo {position: relative;top: 20px;left: 50px;}Os elementos em nosso documento que receberem o valor logotipo em seu atributo class tero 20pxadicionados ao seu topo e 50px adicionados sua esquerda em relao sua posio original. Note que,ao denirmos coordenadas, estamos adicionando pixels de distncia naquela direo, ento o elemento serrenderizado mais abaixo e direita em comparao sua posio original.O prximo modo de posicionamento que temos o absolute, e ele um pouco complexo. Existem algumasregras que alteram seu comportamento em determinadas circunstncias. Por denio, o elemento que temo modo de posicionamento absolute toma como referncia qualquer elemento que seja seu pai na estruturadoHTML cujomodo de posicionamento seja diferente de static (que o padro), e obedece s coordenadasde acordo com o tamanho total desse elemento pai.Quando no h nenhum elemento em toda a hierarquia daquele que recebe o posicionamento absolute queseja diferente de static, o elemento vai aplicar as coordenadas tendo como referncia a poro visvel dapgina no navegador. Por exemplo:Estrutura HTMLCaptulo 3 - HTML semntico e posicionamento no CSS - Position: static, relative, absolute - Pgina 51Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptEstilo CSS.quadrado {background: green;height: 200px;width: 200px;}.absoluto {position: absolute;top: 20px;right: 30px;}Seguindo o exemplo acima, o segundo elemento , que recebe o valor absoluto em seu atributo class,no tem nenhum elemento 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 20px e 30px nessas direes.Vamos analisar agora o exemplo a seguir:Estrutura HTMLEstilos CSS.quadrado {background: green;height: 200px;width: 200px;}.absoluto {position: absolute;top: 20px;right: 30px;}.relativo {position: relative;}Captulo 3 - HTML semntico e posicionamento no CSS - Position: static, relative, absolute - Pgina 52Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptNesse caso, o elemento que recebe o posicionamento absolute lho do elemento que recebe o posici-onamento relative na estrutura do documento, portanto, o elemento absolute vai usar como ponto dereferncia para suas coordenadas o elemento relative e se posicionar 20px ao topo e 30px direita da posi-o original desse elemento.O outro modo de posicionamento, xed, sempre vai tomar como referncia a poro visvel do documentono navegador, e mantm essa posio inclusive quando h rolagem na tela. uma propriedade til paraavisos importantes que devem ser visveis com certeza.Um resumo de position static Sua posio dada automaticamente pelo uxo da pgina: por padro ele renderizado logoaps seus irmos No aceita um posicionamento manual (le, 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 levarem conta seu posicionamento. O pai no sofreria alteraes mesmo se o elemento fosse static. xed Uma congurao de posicionamento vertical (le ou right) e uma horizontal (top ou bottom) obrigatria O elemento ser renderizado na pgina na posio indicada: mesmo que ocorra uma rolagem oelemento permanecer no mesmo lugar Seu tamanho no conta para calcular o tamanho do elemento pai, como se no fosse elementolho absolute Uma congurao de posicionamento vertical (le ou right) e uma horizontal (top ou bottom) obrigatria O elemento ser renderizado na posio indicada, porm relativa ao primeiro elemento pai cujoposition seja diferente de static ou, se no existir este pai, relativa pgina Seu tamanho no conta para calcular o tamanho do elemento paiCaptulo 3 - HTML semntico e posicionamento no CSS - Position: static, relative, absolute - Pgina 53Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript3.12 Exerccios: posicionamento1) Posicione o menu direita e embaixo no header. Use position: absolute para isso. E no esquea: sequeremos posicion-lo absolutamente com relao ao cabealho, o cabealho precisa estar posicionado.header {position: relative;}.menu-opcoes {position: absolute;bottom: 0;right: 0;}2) A sacola tambm deve estar posicionada a direita e no topo. Use position, top e right para conseguiresse comportamento. Adicione as regras de posicionamento ao seletor .sacola que j tnhamos:.sacola {position: absolute;top: 0;right: 0;}3) Teste a pgina no navegador. Como est nosso cabealho? De acordo com o design original?3.13 Exerccios opcionais1) Aplique nosso novo cabealho tambm na pgina sobre.html.Captulo 3 - HTML semntico e posicionamento no CSS - Exerccios: posicionamento - Pgina 54Captulo 4Mais HTML e CSSO medo o pai da moralidade Friedrich Wilhelm Nietzsche4.1 Analisando o miolo da pginaElaboramos 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 dedestaque, 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.4.2 FormulriosEm HTML, temos um elemento chamado criado para esta nalidade: capturar os dados do usurioe submet-lo a algum servio da internet.Os dados so passados para o por meio de tag , que pode uma ter dupla nalidade: receberos dados digitados ou submeter o formulrio. por meio da propriedade type que denimos essa nalidade. Em nosso caso, utilizaremos o tipo searchpara capturar os dados digitados e o tipo image para submeter o formulrio. Existe tambm o tipo submit,que possui a mesma nalidade do image, mas renderizado como um boto.Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript4.3 Posicionamento com float e clearEm nosso layout, precisamos colocar o menu abaixo da busca e alinhado esquerda com a imagem principalao lado de ambos. Como conseguir este resultado? Uma soluo seria utilizar position nomenu, mas algoque 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 com a propriedade float, fazendo com que o elemento pargrafo a contornasse. Vamos tentar aplicarfloat busca e aomenu para que ambos quem esquerda, fazendo com que a imagem central os contorne:.busca,.menu-departamentos {float: left;}O resultado no foi o esperado. Para resolvermos este problema, precisaremos recorrer propriedade clear.A propriedade clearExiste uma propriedade que determina qual vai ser o comportamento de outros elementos que vm ao redordaquele que a recebe e esto utuando, e essa propriedade a clear. A propriedade clear quer dizer limpeo uxo do documento ao meu lado e pode receber os valores left, right ou both.O valor left impede que elementos utuantes quem esquerda do elemento que recebe essa propriedade, ovalor right impede que elementos utuem direita desse, e o valor both impede que elementos utuem emCaptulo 4 - Mais HTML e CSS - Posicionamento com oat e clear - Pgina 56Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptambos os lados do elemento. importante sabermos que a propriedade clear de um elemento s interfereno layout da pgina caso outros elementos sua volta estiverem utuando.Ao aplicarmos clear:left em nosso menu, ele no car ao lado da nossa busca com propriedade float eser renderizado na linha seguinte:.busca,.menu-departamentos {float: left;}.menu-departamentos {clear: left;}4.4 Decorao de texto com CSSO CSS permite ainda transformaes e decoraes de texto.Transformao de textoA 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 4 - Mais HTML e CSS - Decorao de texto com CSS - Pgina 57Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript capitalize - S as primeiras letras das palavras em maisculo.Se quisermos colocar o texto em caixa alta:.menu-departamentos {text-transform: uppercase;}Decorao de textoExiste 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 com valor para o atributo href ).Existem outros tipos de decorao, como por exemplo, o texto contido na tag (que serve para indicarum texto que foi removido de uma determinada verso do documento) exibido com uma linha bem nomeio 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 usabilidadee navegabilidade. No caso dos menus, onde temos uma rea especca e isolada, normalmente estilizada edecorada o suciente, normalmente podemos ocultar esse sublinhado, como no exemplo:.item-menu {text-decoration: none;}Alm do none (nenhuma decorao) ainda poderamos ter congurado underline (com uma linha embaixo,o padro dos links), overline (com uma linha em cima do texto), line-through (uma linha no meio dotexto) e blink (o texto ca piscando na tela, o que no muito recomendado).4.5 Cascata e herana no CSSAlgumas propriedades de elementos pais, quando alteradas, so aplicadas automaticamente para seus ele-mentos lhos em cascata. Por exemplo:Sou um ttuloSou um subttulo#pai {color: blue;}Captulo 4 - Mais HTML e CSS - Cascata e herana no CSS - Pgina 58Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptNo exemplo acima, todos os elementos lhos herdaram o valor da propriedade color do elemento pai a qualeles pertencem.As propriedades que no so aplicadas em cascata em elementos lhos geralmente so aquelas que afetamdiretamente 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 no foi sobrescrito pelo valor do elemento pai , ou seja, ovalor 40px foi mantido.4.6 Para saber mais: o valor inheritImagine que temos a seguinte diviso com uma imagem:div {border: 2px solid;border-color: red;width: 30px;height: 30px;}Queremos que a imagem preencha todo o espao da , mas as propriedades width e height no soaplicadas em cascata, sendo assim, somos obrigados a denir o tamanho da imagem manualmente:img {width: 30px;height: 30px;}Esta no uma soluo elegante, porque, se alterarmos o tamanho da , teremos que lembrar de alterartambm o tamanho da imagem. Uma forma de resolver este problema utilizado o valor inherit para aspropriedades width e height da imagem:Captulo 4 - Mais HTML e CSS - Para saber mais: o valor inherit - Pgina 59Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptimg {width: inherit;height: inherit;}O valor inherit indica para o elemento lho 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 lho herdaro novo valor, facilitando assim, a manuteno do cdigo.Lembre-se de que o inherit tambm afeta propriedades que no so aplicadas em cascata.4.7 Exerccios: menu e destaque1) Vamos criar um elemento destaque e, dentro dele, uma section para busca e outra para o menu:BuscaDepartamentosBlusas e CamisasCalasSaiasVestidosSapatosBolsas e CarteirasAcessriosCaptulo 4 - Mais HTML e CSS - Exerccios: menu e destaque - Pgina 60Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptRepare como j usamos diversas classes no HTML para depois selecionarmos os elementos via CSS.2) Aplique o estilo visual do design com CSS. Queremos um fundo cinza nas caixas de busca e no menude departamentos. Alm disso, o texto deve estar em negrito e apresentado em maisculas. Aplicaremostambm algumas regras de tamanhos e margens..busca,.menu-departamentos {background-color: #dcdcdc;font-weight: bold;text-transform: uppercase;margin-right: 10px;width: 230px;}.busca h2,.busca form,.menu-departamentos h2 {margin: 10px;}.menu-departamentos li {background-color: white;margin-bottom: 1px;padding: 5px 10px;}.menu-departamentos a {color: #333333;text-decoration: none;}3) 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 deatributo do CSS para isso (veremos mais desses seletores depois no curso)..busca input {vertical-align: middle;}.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.Captulo 4 - Mais HTML e CSS - Exerccios: menu e destaque - Pgina 61Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript4) Para que omenu de departamentos e a busca estejam esquerda na pgina, iremosutuar esses elementoscom float:left.Mas s isso far com que o menu que a direita da busca (faa o teste). Precisamos indicar aomenu-departamentos que ele deve utuar esquerda mas no ao lado de outro elemento. Conseguimosisso com a propriedade clear..busca,.menu-departamentos {float: left;}.menu-departamentos {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 ecomplexo. Esteja certo de ter compreendido o porqu do uso dessas propriedades no exerccio antes deprosseguir o curso!Captulo 4 - Mais HTML e CSS - Exerccios: menu e destaque - Pgina 62Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript5) Mais acertos de design. Acerte as margens e posicionamentos no menu lateral e no topo:.destaque {margin-top: 10px;}.menu-departamentos {margin-top: 10px;padding-bottom: 10px;}Teste o resultado.4.8 Display inline-blockPrecisamos criar um painel com uma lista de novidades, onde cada produto ser representado por uma .J sabemos que por padro uma possui a propriedade display:block, mas queremos os produtos ladoa lado. Podemos trocar este comportamento mudando a propriedade display dos elementos para inline.Tambm ser necessrio alterar as propriedades width, margin e padding das , mas agora os elementos so inline e estemodo de exibio ignora alteraes que afetam as propriedades da box. Como resolvereste problema?Os navegadores mais modernos introduzem um modelo de exibio que a mistura dos dois, oinline-block. Os elementos que recebem o valor inline-block para a propriedade display obedecem sespecicaes de dimenso das propriedades height (altura) e width (largura) e ainda permitem que outroselementos sejam exibidos ao seu lado como elementos inline..painel li {display: inline-block;vertical-align: top;width: 140px;margin: 2px;padding-bottom: 10px;}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 zemos 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 4 - Mais HTML e CSS - Display inline-block - Pgina 63Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript4.9 Exerccios: painis flutuantes1) Vamos criar agora nosso painel de novidades. Crie um elemento para conter os dois painis deprodutos. Ele deve receber a classe container, para se alinhar ao meio da tela, e a classe paineis queusaremos depois no CSS.2) Dentro da div criada acima, criaremos uma nova para cada painel. A primeira, receber asclasses painel e novidades. Ela conter o ttulo em um e uma lista ordenada () de produtos.Cada produto deve ser representado como um item na lista () com um link para o produto e suaimagem (representado por figure, figcaption e img).Veja o exemplo com um produto. Ele deve ser includo dentro da section que voc acabou de criar:NovidadesFuzz Cardigan por R$ 129,90Crie o HTML desse painel e o preencha com vrios produtos (6 um bom nmero). Lembre-se de quecada produto est na sua prpria li com link e imagem prprios. Na pasta img/produtos do seu projeto,voc encontra vrias imagensminiaturaX.png que podem ser usadas para criar produtos diferentes.3) Crie um segundo painel, para representar os produtos mais vendidos. Esse painel deve car aps o fe-chamento do painel anterior, mas ainda dentro da div paineis.O novo painel deve receber as classes painel e mais-vendidos. Sua estrutura idntica ao do exerccioanterior (dica: copie o cdigo para evitar refazer tudo de novo).Captulo 4 - Mais HTML e CSS - Exerccios: painis utuantes - Pgina 64Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptMais VendidosNosso HTML j est cando grande e complexo, como uma pgina real cheia de contedo. Cuidado parano se confundir na posio das tags. Recapitulando essa parte dos painis, a estrutura deve estar assim: div: container paineis section: painel novidades* h2: ttulo Novidades* ol: lista de produtos vrios lis com produtos (e links e imagens dentro de cada um) section: painel mais-vendidos* h2: ttulo Mais Vendidos* ol: lista de produtos vrios lis com produtos (e links e imagens dentro de cada um)4) Vamos posicionar nossos painis para carem de acordo com o design.O painel de novidades deve utuar esquerda e o mais-vendidos, direita. Cada um deve ocupar 445px(pouco menos da metade dos 940px), assim um car ao lado do outro:.painel {margin: 10px 0;padding: 10px;width: 445px;}.novidades {float: left;}.mais-vendidos {float: right;}Captulo 4 - Mais HTML e CSS - Exerccios: painis utuantes - Pgina 65Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPrximo 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, comvertical-align:top..painel li {display: inline-block;vertical-align: top;width: 140px;margin: 2px;padding-bottom: 10px;}O posicionamento em si deve estar certo. Mas falta umas regras para estilo, como tamanho dos ttulos ecores de texto e fundo..painel h2 {font-size: 24px;font-weight: bold;text-transform: uppercase;margin-bottom: 10px;}.painel a {color: #333;font-size: 14px;text-align: center;text-decoration: none;}.novidades {background-color: #f5dcdc;}.mais-vendidos {background-color: #dcdcf5;}Teste a pgina no navegador e veja o resultado nal!Captulo 4 - Mais HTML e CSS - Exerccios: painis utuantes - Pgina 66Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript4.10 Seletores de atributo do CSS3Alm dos seletores de tag, classe e id que observamos anteriormente, existe mais uma srie de seletoresavanados do CSS.Um dos seletores CSS mais versteis o seletor de atributo, com ele podemos vericar a presena ou valorde um atributo para selecion-lo. Por exemplo:input[value] {color: #cc0000;}O seletor acima age em todos os elementos da tag que tm o atributo value. Tambm possvelvericar se o atributo tem um valor especco:input[type="text"] {border-radius: 4px;}Alm de vericar um valor integralmente, possvel utilizar alguns operadores para selecionar valores emdeterminadas condies, como por exemplo o seletor de atributo com prexo:div[class|="menu"] {border-radius: 4px;}O seletor acima vai agir em todas as tags cujo atributo class comece com a palavramenu seguida deum hfen e qualquer outro valor na sequncia, como por exemplo menu-principal, menu-departamentosemenu-teste.Tambm possvel buscar por uma palavra especca no valor, no importando o valor completo do atributo.Por exemplo:Captulo 4 - Mais HTML e CSS - Seletores de atributo do CSS3 - Pgina 67Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptinput[value~="problema"] {color: #cc0000;}O seletor acima agir sobre todos os elementos da tag que contiverem a palavra problema em seucontedo.Com o CSS3 possvel utilizar novos operadores com sinais que se assemelham aos 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 especicidade dos seletores de classe.4.11 RodapPara nalizarmos a pgina, precisamos desenvolver o rodap. Visualmente, ele bastante simples. Mas halgumas questes importantes a serem salientadas.SemnticaNo HTML5, a tag apropriada para rodaps a , que vamos usar no exerccio. Alm disso, nossorodap ainda tem mais 2 contedos: o logo em negativo do lado esquerdo e cones de acesso a redes sociaisdo lado direito. Que elementos usar?O logo no lado esquerdo uma simples imagem: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 conegrco.Captulo 4 - Mais HTML e CSS - Rodap - Pgina 68Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPodemos usar ento uma simples lista com :FacebookTwitterGoogle+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 nalvisual. Vamos cuidar do visual depois no CSS.4.12 Substituio por ImagemUm truque muito usado em CSS o chamado Image Replacement -- ou substituio por imagem. Servepara, 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 car 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, naprtica, 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;}4.13 Estilizao e posicionamento do rodapCaptulo 4 - Mais HTML e CSS - Substituio por Imagem - Pgina 69Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptContainer internoRepare que o rodap, diferentemente de todos os elementos do layout, ocupa 100% da largura da pgina. Eleno restrito ao tamanho de 940px do miolo do nosso site. Isso porque o rodap tem um background quese repete at os cantos.Mas repare que o contedo dele limitado aos 940px e centralizado junto com o resto da pgina -- ondeestvamos usando a class container.O que precisamos fazer ento ter o com 100% alm de uma tag interna pra o contedo do rodapem si, e essa tag ser o container:....PosicionamentoAo colocar o rodap, voc perceber que ele subir na pgina ao invs de car em baixo. Isso porque oselementos anteriores a ele, os painis de destaque, esto utuando na pgina e, portanto, saram do uxo derenderizao. 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 acertarisso com posicionamento absoluto, desde que o container do rodap esteja posicionado (basta dar umposition:relative a ele).J os itens dentro da lista (os 3 links), devem ser utuados lado a lado (e no um em cima do outro). fcilfazer com float:left no li.EstilizaoO rodap em si ter um background-image com o fundo preto estampado repetido innitamente.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 doCSS3:.social a[href*="facebook.com"] {background-image: url(../img/facebook.png);}Captulo 4 - Mais HTML e CSS - Estilizao e posicionamento do rodap - Pgina 70Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript4.14 Exerccios: rodap1) Vamos nalizar nossa pgina com o rodap do layout. Crie uma estrutura semntica no HTML usandoa tag e tags , , e 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.FacebookTwitterGoogle+Teste no seu navegador e veja o resultado sem estilo, mas utilizvel.2) Vamos estilizar o contedo visual. Coloque o background preto no rodap e faa as substituies deimagens. Use seletores de atributo do CSS3 para identicar 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"] {background-image: url(../img/facebook.png);}.social a[href*="twitter.com"] {background-image: url(../img/twitter.png);}Captulo 4 - Mais HTML e CSS - Exerccios: rodap - Pgina 71Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript.social a[href*="plus.google.com"] {background-image: url(../img/googleplus.png);}Teste no navegador. O que aconteceu?O rodap subiu na pgina porque os elementos anteriores (os painis de destaque) esto utuando. fcilarrumar, basta adicionar a regra de clear no footer:footer {clear: both;}Teste novamente. O rodap voltou para o lugar certo?3) 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 m, precisamos fazer os cones das redes sociais uturarem lado a lado horizontalmente:.social li {float: left;margin-left: 25px;}Teste no navegador. Como est o resultado nal? De acordo com o que o designer queria?Captulo 4 - Mais HTML e CSS - Exerccios: rodap - Pgina 72Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript4.15 Para saber mais: suporte HTML5 no Internet ExplorerantigoA partir do IE9, h um bom suporte a HTML5, at para elementos avanados como os de multimdia. En-tretanto, at o IE8 (incluindo as verses 6 e 7), as tags do HTML5 no so reconhecidas.Se voc abrir nossa pgina no IE8, ver o design todo quebrado pois as tags de header, footer, nav, sectionetc so ignoradas. Mas possvel corrigir o suporte a esses novos elementos semnticos.A soluo envolve um hack descoberto no IE e chamado de html5shiv. H um projeto opensource com ocdigo disponvel para download:http://code.google.com/p/html5shiv/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 comuma espcie de if dentro de um comentrio!Esse recurso do IE chamado de comentrios condicionais e nos permite adicionar cdigo que somenteser lido pelo IE -- uma excelente soluo para resolver seus bugs e inconsistncias sem estragar a pginanos demais navegadores.Nesse caso, estamos dizendo que o tal script com o hack s deve ser carregado pelas verses anteriores aoIE9; j que, a partir desta verso, h suporte nativo a HTML5 e no precisa de hacks.IE6 e IE7Ao testar nesses navegadores muito antigos, voc ver que apenas o HTML5shiv no suciente.Na verdade, vrios recursos e tcnicas que usamosnonossoCSSno eram suportados nas versesantigas.Felizmente, o uso de IE6 e IE7 no Brasil bastante baixo e cai cada vez mais - hoje j menos de1% dos usurios. Na Caelum, j no suportamos mais essas verses em nosso curso e nem emnossos sites.4.16 Exerccios opcionais1) Porte nosso rodap para a pgina Sobre do captulo anterior.Captulo 4 - Mais HTML e CSS - Para saber mais: suporte HTML5 no Internet Explorer antigo - Pgina 73http://code.google.com/p/html5shiv/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2) Nossa pgina Sobre foi construda sem muita preocupao semntica. No HTML5, h novas tags comobjetivo especco 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 - comonossa pgina Sobre faz.Podemos representar o texto todo com e suas sees com . Use essas novas tags nasobre.html para termos uma marcao mais semntica.3) Adicione suporte ao IE8 na nossa pgina usando o HTML5shiv.Captulo 4 - Mais HTML e CSS - Exerccios opcionais - Pgina 74Captulo 5JavaScript e interatividade na WebDesign no s como uma coisa aparenta, como ela funciona. Steve JobsJavaScript a linguagem de programao mais popular no desenvolvimento Web. Suportada por todos osnavegadores, a linguagem responsvel por praticamente qualquer tipo de dinamismo que queiramos emnossas pginas.Se usarmos todo o poder que ela tem para oferecer, podemos chegar a resultados impressionantes. Excelentesexemplos disso so aplicaes Web complexas como Gmail, Google Maps e Google Docs.5.1 Introduo ao JavaScriptPara rodar JavaScript em uma pginaWeb, precisamos ter emmente que a execuo do cdigo instantnea.Para inserirmos um cdigo JavaScript em uma pgina, necessrio utilizar a tag :alert("Ol, Mundo!");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 car suspensa at otrmino dessa execuo.Experimente criando essa tag em um HTML e reposicionando-a, verique 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:Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptNo arquivo HTMLArquivo externo script/hello.jsalert("Ol, Mundo!");Com a separao do script em arquivo externo possvel reaproveitar alguma funcionalidade em mais deuma pgina.5.2 Console do navegadorAlguns navegadores do suporte a entrada de comandos pelo console. Por exemplo, no Google Chrome oconsole pode ser acessado por meio do atalho Control + Shi + C; no Firefox, pelo atalho Control + Shi+ K.Experimente executar um alert no console e veja o resultado:alert("interagindo com o console!");5.3 Sintaxe bsicaOperaes matemticasTeste algumas contas digitando diretamente no console:> 12 + 1325> 14 * 342> 10 - 46> 25 / 55> 23 % 21Captulo 5 - JavaScript e interatividade na Web - Console do navegador - Pgina 76Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptVariveisPara 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 avarivel para obter o valor que guardamos nela. No JavaScript, tambm possvel alterar o valor da varivela 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> contador1> contador++1> contador2TiposO 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 armazenaruma 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 maiscomum utilizando o for:Captulo 5 - JavaScript e interatividade na Web - Sintaxe bsica - Pgina 77Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptvar pessoas = ["Joo", "Jos", "Maria", "Sebastio", "Antnio"];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 umArray, 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:var pessoas = ["Joo", "Jos", "Maria", "Sebastio", "Antnio"];alert(pessoas[0]);alert(pessoas[1]);alert(pessoas[4]);5.4 Exerccios opcionais: fixao de sintaxeOs prximos exerccios so opcionais e mostram mais aspectos de lgica de programao com algoritmosusando JavaScript.1) Escreva um cdigo que mostre os nmeros mpares entre 1 e 10.2) Escreva um cdigo que calcule a soma de 1 at 100. (obs: a resposta 5050)3) Crie um Array igual ao abaixo e mostre apenas os nomes das pessoas que tenham 4 letras.var pessoas = ["Joo", "Jos", "Maria", "Sebastio", "Antnio"];Dica: use o atributo length das Strings.5.5 Interatividade naWebOusodo JavaScript como a principal linguagemde programao daWeb s possvel por conta da integraoque o navegador oferece para o programador, a maneira com que conseguimos encontrar um elemento dapgina e alterar alguma caracterstica dele pelo cdigo JavaScript:var titulo = document.querySelector("#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 5 - JavaScript e interatividade na Web - Exerccios opcionais: xao de sintaxe - Pgina 78Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptvar painelNovidades = document.querySelector("section#main .painel#novidades");painelNovidades.style.color = "red"querySelector vs querySelectorAllA funo querySelector sempre retorna um elemento, mesmo que o seletor potencialmentetraga 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, precisaremospassar 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 umproblema com a caracterstica de execuo imediata do cdigo. O mais comum que as alteraes sejamfeitas 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 essecdigo guardado s ser executado quando chamarmos a funo. Para exemplicar a necessidade citadaacima, vamos utilizar o segundo recurso, os eventos:// obtendo um elemento atravs de um seletor de IDvar titulo = document.querySelector("#titulo");titulo.onclick = mostraAlerta;Note que primeiramente necessrio selecionar um elemento do documento e depois denir o onclick desseelemento como sendo a funo.De acordo com os dois cdigos acima, primeiramente guardamos um comportamento em uma funo. Aocontrrio do cdigo fora de uma funo, o comportamento no executado imediatamente, e sim guardadoCaptulo 5 - JavaScript e interatividade na Web - Interatividade na Web - Pgina 79Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptpara 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 onome da funo abrindo e fechando parnteses, indicando que estamos executando a funo que foi denidaanteriormente:function mostraAlerta() {alert("Funciona!");}// Chamando a funo:mostraAlerta();Tambm possvel determinar, por meio de seus argumentos, que a funo vai ter algum valor varivel quevamos denir 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!");Existem diversos eventos que podem ser utilizados para que a interao do usurio com a pgina seja o pontode 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 focoCaptulo 5 - JavaScript e interatividade na Web - Interatividade na Web - Pgina 80Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript 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 validaesExistem tambm uma srie de outros eventos mais avanados que permitem a criao de interaes paradrag-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 debusca da nossa home page. A ideia vericar se o campo foi preenchido ou se est vazio, quando o usurioclicar em buscar.5.6 Exerccio: validao na busca com JS1) Para testarmos o nosso formulrio de busca, vamos usar o Google como mecanismo de busca apenascomo ilustrao. Para isso, basta fazer o formulrio submeter a busca para a pgina do Google.No , acrescente um atributo action= apontando para a pgina do Google:Repare que colocamos tambm um id. Ele ser til para depois manipularmos esse elemento via JavaS-cript.Alm disso, o com o texto a ser buscado deve ter o nome de q para ser compatvel com o Google.Basta fazer:Teste a pgina e submeta uma busca simples para o Google com o nosso formulrio.2) Queremos fazer uma validao: quando o usurio clicar em submeter, vericar 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/ doprojeto. l que vamos escrever nossos scripts.Referencie esse arquivo no index.html usando a tag no nal da pgina, logo antes de fechar o:3) A validao em si ser feita por uma funo JavaScript a ser acionada no momento que o usurio tentarsubmeter o formulrio.Captulo 5 - JavaScript e interatividade na Web - Exerccio: validao na busca com JS - Pgina 81Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptA funo deve ser denida dentro do arquivo home.js criado antes. Seu papel vericar se o elementocom id=q (o campo de busca) est vazio. Se estiver, mostramos um alert e abortamos a submisso doformulrio 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 essafuno. Ns podemos chamar a funo explicitamente ou, melhor ainda, deixar que o navegador chamepra gente quando acontecer algum evento.No nosso caso, queremos indicar que a funo anterior deve ser executada quando o usurio disparar oevento de enviar o formulrio (onsubmit). Coloque o nal do arquivo JavaScript:// fazendo a associao da funo com o eventodocument.querySelector('#form-busca').onsubmit = validaBusca; o cdigo anterior que faz a associao da funo validaBusca com o evento onsubmit do formulrio.4) Teste a pgina e observe seu comportamento. Tente submeter com o campo vazio e com o campo preen-chido.5) (opcional)Mostrar uma janela de erro considerado pormuitos uma aomuito 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 em seu lugar pinte o fundo do formulrio de vermelhoem caso de erro. Cdigo da funo dever car assim:function validaBusca() {if (document.querySelector('#q').value == '') {document.querySelector('#form-busca').style.background = 'red';return false;}}Captulo 5 - JavaScript e interatividade na Web - Exerccio: validao na busca com JS - Pgina 82Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript6) (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 maisa chamamos.Nesses casos, podemos usar um recurso do JavaScript chamado de funes annimas que nos permitedenir a funo diretamente na denio do onsubmit. Troque nosso JavaScript para usar essa sintaxe.document.querySelector('#form-busca').onsubmit = function() {if (document.querySelector('#q').value == '') {document.querySelector('#form-busca').style.background = 'red';return false;}};Validation API HTML5Mais pra frente, veremos as novidades doHTML5 para validao de formulrios demaneiramaissimples, e at sem necessidade de JavaScript.5.7 Funes temporaisEm JavaScript, podemos criar um timer para executar um trecho de cdigo aps um certo tempo, ou aindaexecutar algo de tempos em tempos.A funo setTimeout permite que agendemos alguma funo para execuo no futuro e recebe o nome dafuno a ser executada e o nmero de milissegundos a esperar:// executa a minhaFuncao daqui um segundosetTimeout(minhaFuncao, 1000);Se for um cdigo recorrente, podemos usar o setInterval que recebe os mesmos argumentos mas executaa funo indenidamente de tempos em tempos:// executa a minhaFuncao de um em um segundosetInterval(minhaFuncao, 1000); uma funo til para, por exemplo, implementar um banner rotativo, como faremos no exerccio a seguir.Captulo 5 - JavaScript e interatividade na Web - Funes temporais - Pgina 83Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptclearIntervalAs funes temporais devolvemumobjeto que representa o agendamento que foi feito. possvelus-lo para cancelar a execuo no futuro. especialmente interessante para o caso do intervalque pode ser cancelado de sua execuo innita:// agenda uma execuo qualquervar timer = setInterval(minhaFuncao, 1000);// cancela execuoclearInterval(timer);5.8 Exerccio: banner rotativo1) Implemente um banner rotativo na home page da Mirror Fashion usando JavaScript.Temos duas imagens, a destaque-home.png e a destaque-home-2.png que queremos trocar a cada 4segundos; use o setInterval para isso.H vrias formas de implementar essa troca de imagens. Uma sugesto manter um array com os valorespossveis 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);2) (opcional, avanado) Faa um boto de pause que pare a troca do banner.Dica: use o clearInterval para interromper a execuo.3) (opcional, avanado) Faa um boto de play para reativar a troca dos banners.5.9 Para saber mais: sugesto para o desafio de pause/playPodemos criar no HTML um novo link para controlar a animao:Captulo 5 - JavaScript e interatividade na Web - Exerccio: banner rotativo - Pgina 84Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptO 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 objetoque controla aquele interval e nos permitir deslig-lo depois:var timer = setInterval(trocaBanner, 4000);Com isso, nosso cdigo que controla o pause e play caria assim:var controle = document.querySelector('.pause');controle.onclick = function() {if (controle.className == 'pause') {clearInterval(timer);controle.className = 'play';} else {timer = setInterval(trocaBanner, 4000);controle.className = 'pause';}return false;};Por m, 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;border-right: 10px solid #900;height: 30px;width: 5px;}Captulo 5 - JavaScript e interatividade na Web - Para saber mais: sugesto para o desao de pause/play - Pgina 85Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript.play {border-left: 25px solid #900;border-bottom: 15px solid transparent;border-top: 15px solid transparent;}5.10 Para saber mais: vrios callbacks no mesmo elementoNos exerccios que trabalhamos com eventos, usamos o onclick e o onsubmit diretamente no elemento queestvamos 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 docdigo acima que s podemos atrelar uma nica funo ao evento. Se tentarmos, em outra 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() {// tratamento do evento});Dessamaneira, conseguimos adicionar vrios listeners aomesmo evento, deixando o cdigomais exvel. Sh um porm: embora seja omodo ocial de se trabalhar com eventos, o addEventListener no suportadodo IE8 pra baixo.Para atender os IEs velhos, usamos a funo attachEvent, semelhante:document.querySelector('#destaque').attachEvent('onclick', function() {// tratamento do evento});O problema 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 5 - JavaScript e interatividade na Web - Para saber mais: vrios callbacks no mesmo elemento - Pgina 86Captulo 6CSS AvanadoCom o conhecimento nossas dvidas aumentam Johann GoetheDesde 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 utilizandosomente CSS. Conhecendo o comportamento dos navegadores ao exibir um elemento (ou um conjunto deelementos) e como as propriedade do CSS agem ao modicar um elemento possvel obter resultados im-pressionantes.O CSS3 agora permite coisas antes impossveis como elementos com cor ou fundo gradiente, sombras ecantos arredondados. Antes s era possvel atingir esses resultados com o uso de imagens e s vezes at comum pouco de JavaScript.A reduo do uso de imagens traz grandes vantagens quanto performance e quantidade de trfego de dadosnecessria para a exibio de uma pgina.6.1 Seletores avanadosOs 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 especicao e que so bastante teis. Jvimos alguns, como os seletores de atributo que usamos anteriormente. Vejamos outros.Seletor de irmosVeja o seguinte HTML, que simula um texto com vrios pargrafos e ttulos e subttulos no meio do docu-mento:Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptTtuloIncioSubttuloTextoMais textoComo 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 3 e funciona em todos os navegadoresmodernos (e no IE7 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 amesma tag pai). NoHTML anterior, sero selecionados os dois ltimos pargrafos (TextoeMais texto).Seletor de irmo adjacentesAinda comoHTML anterior, o que fazer se quisermos selecionar apenas o pargrafo imediatamente seguinteao subttulo? Ou seja, um p irmo do h2mas 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. um irmo de e aparece logo depois domesmo.Esse seletor faz parte da especicao CSS 2.1 e tem bom suporte nos navegadores modernos, incluindo oIE7.Seletor de filho diretoSe tivermos o seguinte HTML com ttulos e sees de um artigo:Ttulo principalCaptulo 6 - CSS Avanado - Seletores avanados - Pgina 88Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptTtulo da seoQueremos deixar o ttulo principal de outra cor. Como fazer? O seletor de nome de tag simples no vairesolver:/* 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 lho direto (>) do CSS 2.1 e suportado desde o IE7 tambm./* vai pegar s o h1 principal, filho direto de article e no os netos */article > h1 {color: blue;}NegaoImagine o seguinte o HTML com vrios pargrafos simples:TextoOutro textoTexto especialMais textoQueremos fazer todos os pargrafos de cor cinza, exceto o que tem o texto especial. Precisamos destac-lode alguma forma no HTML para depois selecion-lo no CSS. Uma classe ou ID resolve:TextoOutro textoTexto especialMais textoCaptulo 6 - CSS Avanado - Seletores avanados - Pgina 89Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptMas como escrever o CSS? Queremos mudar a cor dos pargrafos que no tm a classe especial. Um jeitoseria mudar a cor de todos e sobrescrever o especial depois:p {color: gray;}p.especial {color: black; /* restaura cor do especial */}No CSS3, h uma outra forma, usando o seletor de negao. Ele nos permite escrever um seletor que pegaelementos 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 comoargumento algum outro seletor simples (como classes, IDs ou tags).Essa propriedade do CSS3 possui suporte mais limitado no IE, somente a partir da verso 9 (nos outrosnavegadores no h problemas).6.2 Pseudo-classesPegue o seguinte HTML de uma lista de elementos:Primeiro itemSegundo itemTerceiro itemQuarto itemE se quisermos estilizar elementos especcos dessa lista? Por exemplo, o primeiro elemento deve ter corvermelha e o ltimo, azul. Com esse HTML simples, usando apenas os seletors que vimos at agora, serbem difcil.A soluo mais comum seria adicionar classes ou IDs no HTML para selecion-los depois no CSS:Primeiro itemSegundo itemCaptulo 6 - CSS Avanado - Pseudo-classes - Pgina 90Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptTerceiro itemQuarto item 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 pontocorreto, toda vez que zermos mudanas nos itens da lista.O CSS tem um recurso chamado de pseudo-classes que so como classes CSS j pr-denidas para ns. como se o navegador j colocasse certas classes por padro em certos elementos, cobrindo situaes comunscomo essa de selecionar o primeiro ou o ltimo elemento.H duas pseudo-classes doCSS3 que representamexatamente o primeiro elemento lho de outro (rst-child)e o ltimo elemento lho (last-child). Essas classes j esto denidas, no precisamos aplic-las em nossoHTML e podemos voltar para o HTML inicial:Primeiro itemSegundo itemTerceiro itemQuarto itemNoCSS, podemos usar pseudo-classes quase damesma forma que usaramos nossas classes normais. Repareque 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 IE7, Firefox3 e Chrome 4. E (estranhamente), o last-child s a partir do IE9 mas desde o Firefox 1 e Chrome 1.Captulo 6 - CSS Avanado - Pseudo-classes - Pgina 91Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptnth-childUm seletor ainda mais genrico do CSS3 o :nth-child() que nos permite passar o ndice doelemento. 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 epares 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 IE9, Firefox 3.5 e Chrome 1.Pseudo classes de estadoQueremos mudar a cor de um link quando o usurio passa o mouse por cima. Ou seja, queremos mudar seuvisual 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 eventode mouseover acontece (e remove a classe no mouseout).Entretanto, o CSS possui excelentes pseudo-classes que representam estados 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 omouse em cima do elemento e depois retirasse a classe quando ele sai. Tudo sem precisarmos controlar issocom 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;Captulo 6 - CSS Avanado - Pseudo-classes - Pgina 92Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript}/* 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;}6.3 Pseudo elementosPseudo classes nos ajudam a selecionar elementos com certas caractersticas sem termos que colocar umaclassemanualmente neles. Porm, o que fazer quando precisamos selecionar certo tipo de contedo que nemelemento tem?Exemplo: temos um texto num pargrafo:A Caelum tem os melhores cursos!Queremos dar um estilo de revista ao nosso texto e estilizar apenas a primeira letra da frase com uma fontemaior. Como fazer para selecionar essa letra? A soluo ingnua seria colocar um elemento ao redor da letrapara podermos selecion-la no CSS:A Caelum tem os melhores cursos!HTML confuso e difcil de manter.O CSS apresenta ento a ideia de pseudo-elementos. So elementos que no existem no documento maspodem ser selecionados pelo CSS. como se houvesse um elemento l!Podemos voltar o HTML inicial:A Caelum tem os melhores cursos!E no CSS:p:first-letter {font-size: 200%;}Captulo 6 - CSS Avanado - Pseudo elementos - Pgina 93Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptTemos ainda outro pseudo-elemento para selecionar a primeira linha apenas em um texto grande:p:first-line {font-style: italic;}Novos contedosH 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 o contedo semntico? Queremosque esses colchetes sejam indexados pelo Google? Queremos que sejam lidos como parte do texto pelosleitores de tela?Talvez no. Pode ser um contedo apenas visual. Podemos ger-lo com CSS usando os pseudo elementosaer e before.O HTML seria simples:Link1Link2Link3E no CSS:a:before {content: '[ ';}a:after {content: ' ]';}Ou ainda, imagine que queremos colocar amensagem (externo) ao lado de todos os links externos da nossapgina. 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 6 - CSS Avanado - Pseudo elementos - Pgina 94Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript6.4 Exerccios: seletores e pseudo-classes1) Vamos alterar nossa pgina de Sobre, a sobre.html. Queremos que as primeiras letras dos pargrafosquem 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!2) Repare que os pargrafos nessa pgina Sobre tm uma indentao no incio. Agora queremos removerapenas a identao do primeiro pargrafo da pgina.Poderamos colocar uma classe no HTML. Ou, melhor ainda, sabendo que esse o primeiro pargrafo() depois do ttulo (), usar o seletor de irmos adjacentes.Acrescente ao sobre.css:h1 + p {text-indent: 0;}Teste novamente.3) Podemos ainda usar o pseudo-elemento :first-line para alterar o visual da primeira linha do texto. Porexemplo, transformando-a em small-caps usando a propriedade font-variant:p:first-line {font-variant: small-caps;}Teste de novo.4) Vamos voltar a mexer naHome principal do site agora.Temos o menu superior (.menu-opcoes) que uma lista de links. Podemos melhorar sua usabilidadealterando seus estados quando o usurio passar o mouse (:hover) e quando clicar no item (:active).Adicione ao arquivo estilos.css:.menu-opcoes a:hover {color: #007dc6;Captulo 6 - CSS Avanado - Exerccios: seletores e pseudo-classes - Pgina 95Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript}.menu-opcoes a:active {color: #867dc6;}Teste o menu passando o mouse e clicando nas opes (segure um pouco o clique para ver melhor oefeito).5) 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 com vrios itens () com links dentro:Blusas e CamisasVamos adicionar no index.html uma sublista de opesdentro do deBlusas e Camisas, dessa forma:Blusas e CamisasManga curtaManga compridaCamisa socialCamisa casualPor padro, queremos que essa sublista esteja escondida (display:none). Quando o usurio passar omouse (:hover), queremos exibi-la (display: block).Altere o arquivo estilos.css com essa lgica..menu-departamentos li ul {display: none;}.menu-departamentos li:hover ul {Captulo 6 - CSS Avanado - Exerccios: seletores e pseudo-classes - Pgina 96Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptdisplay: block;}.menu-departamentos ul ul li {background-color: #dcdcdc;}Teste a pgina e a funcionalidade do menu.6) Para ajudar a diferenciar os links dos submenus, queremos colocar um trao na frente. Podemos alteraro HTML colocando os traos - algo visual e no semntico -, ou podemos gerar esse trao via CSS compseudo 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.)6.5 Exerccios opcionais1) A propriedade content tem muitas variaes. Uma variao simples, mas til, usar caracteres unicodepara 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 6 - CSS Avanado - Exerccios opcionais - Pgina 97Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptMais opes doUnicodeConsulte em uma tabela Unicode outros caracteres e seu cdigo hex correspondente.http://www.alanwood.net/unicode/dingbats.htmlhttp://www.alanwood.net/unicode/#links2) (avanado) Volte pgina Sobre, abra-a no navegador.Em um exerccio anterior, colocamos as primeiras linhas em small-caps usando o seletor p:rst-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 outropargrafo (mas sim precedidos por ttulos, guras etc).Com o seletor :not() do CSS3, conseguimos::not(p) + p:first-line {font-variant: small-caps;}Isso signica: selecione as primeiras linhas dos pargrafos que no so precedidos por outros par-grafos.6.6 CSS3: border-radiusUma das novidades mais celebradas do CSS3 foi a adio de bordas arredondadas via CSS. At ento, anica forma de obter esse efeito era usando imagens, o que deixava a pgina mais carregada e dicultava amanuteno.Com o CSS3 h o suporte a propriedade border-radius que recebe o tamanho do raio de arredondamentodas bordas. Por exemplo:div {border-radius: 5px;}Captulo 6 - CSS Avanado - CSS3: border-radius - Pgina 98http://www.alanwood.net/unicode/dingbats.htmlhttp://www.alanwood.net/unicode/#linksMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPodemos 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 5pxborda superior direita e inferior esquerda com 20px*/border-radius: 5px 20px;}.c{/*borda superior esquerda com 5pxborda superior direita e inferior esquerda com 20pxborda inferior direita com 50px */border-radius: 5px 20px 50px;}.d{/*borda superior esquerda com 5pxborda superior direita com 20pxborda inferior direita com 50pxbordar inferior esquerda com 100px */border-radius: 5px 20px 50px 100px;}Captulo 6 - CSS Avanado - CSS3: border-radius - Pgina 99Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript6.7 CSS3: text-shadowOutro efeito do CSS3 o suporte a sombras em textos com text-shadow. Sua sintaxe recebe o deslocamentoda 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;6.8 CSS3: box-shadowAlm 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 6 - CSS Avanado - CSS3: text-shadow - Pgina 100Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPodemos 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 oudiminuir:box-shadow: 20px 20px 20px 30px black;Captulo 6 - CSS Avanado - CSS3: box-shadow - Pgina 101Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPor m, possvel usar a keyword inset para uma borda interna ao elemento:box-shadow: inset 0 0 40px black;6.9 Opacidade e RGBADesde o CSS2 possvel mudar a opacidade de um elemento para que ele seja mais transparente com o usoda 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 paradeixar a imagem mostrar mais?Captulo 6 - CSS Avanado - Opacidade e RGBA - Pgina 102Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript simples com a opacity que recebe um valor decimal entre 0 e 1:p {opacity: 0.3;}Repare como todo o elemento ca transparente, o fundo e o texto. E se quisssemos o texto em branco opacoe o fundo com transparncia? NoCSS3, podemos usar outra tcnica, a de denir uma cor de fundo com valorde opacidade especca.No CSS3, alm das 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 0 e 255):/* 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. Naprtica, seria como o opacity daquela cor (um valor entre 0 e 1):/* 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 doopacity, podemos fazer ento:Captulo 6 - CSS Avanado - Opacidade e RGBA - Pgina 103Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptp {background: rgba(0,0,0,0.3);color: white;}6.10 PrefixosMuitos recursos do HTML5 e do CSS3 ainda so experimentais. Isso quer dizer que foram includos norascunho da especicao mas ainda no so 100% ociais. As especicaes ainda esto em aberto e vaidemorar algum tempo at elas serem fechadas.Existem recursos mais estveis e menos estveis. Alguns j esto bastante maduros e h bastante tempo naspec, e no so esperadas mais mudanas. Por outro lado, alguns so bem recentes e talvez ainda possa havermudana at a aprovao nal da especicao.Os navegadores desejam implementar os novos recursos antes mesmo da especicao terminar, para queos desenvolvedores possam comear a usar as novas propriedades e experiment-las na prtica. Entretanto,como a sintaxe nal depois de aprovada pode ser diferente, os navegadores implementam as novas proprie-dades instveis usando nomes provisrios.A boa prtica pegar o nome da propriedade e colocar um prexo especco do fabricante na frente. Quandoa especicao car estvel, tira-se esse prexo e suporta-se a sintaxe ocial.As bordas arredondadas, por exemplo, hoje so suportadas em todos os navegadores modernos com o nomenormal da propriedade a border-radius. Mas at o Firefox 3.6, 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 3,precisvamos usar o prexo deles com -webkit-border-radius.Captulo 6 - CSS Avanado - Prexos - Pgina 104Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptOs prexos dos fabricantes mais famosos so: -webkit-: navegadores Webkit (Chrome, Safari, iOS, Android) -moz-: Firefox (Mozilla) -ms-: Internet Explorer (Microso) -o-: Opera preciso consultar tabelas de compatibilidade para saber qual navegador suporta qual propriedade e se necessrio usar prexos para certas verses. Se quisermos omximo de compatibilidade, precisamos colocarvrios prexos 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 deprefixo pra isso */border-radius: 5px;}Algumas propriedades, como os transforms e transitions que veremos a seguir, at hoje precisam de prexosem todos os navegadores. Ser preciso repetir a propriedade 5 vezes, infelizmente. o preo que se pagapara usar recursos to novos e ainda experimentais.Nos casos de CSS3 que tratamos at agora (border-radius, text-shadow, box-shadow, rgba), todos os navega-dores modernos j suportam sem uso de prexos. Voc s precisar deles se quiser suportar verses antigas(nesse caso, consulte as documentaes para saber o que necessrio e quando).6.11 CSS3: GradientesOCSS3 traz tambm suporte declarao de gradientes semque precisemos trabalhar com imagens. Almdeser mais simples, a pgina ca mais leve e a renderizao ca 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 6 - CSS Avanado - CSS3: Gradientes - Pgina 105Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript.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%);}PrefixosAespecicao de gradientes j est em sua verso nal e j implementada semprexos em vrios browsers.Mas, enquanto a especicao ainda estava em rascunho, antes de ser nal, uma sintaxe diferente nos gra-dientes era usada. Isso quer dizer que verses mais antigas dos navegadores que suportavam gradientesesperam uma sintaxe diferente.Como as especicaes em rascunho so implementadas prexadas nos navegadores, fcil colocar essasregras com sintaxe diferente para esses navegadores. O problema que o cdigo ca grande e difcil demanter.A verso atual da especicao 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 versosuportada 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 bemmais antigas doWebKit - notadamente o Chrome at verso 9 e o Safari at verso 5-, 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 6 - CSS Avanado - CSS3: Gradientes - Pgina 106Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptGambiarras pro IE antigoO IE s suporta gradientes CSS3 a partir da verso 10, mas desde o IE6 era possvel fazer gradientes simplesusando um CSS proprietrio da Microso:.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 IE6 atIE9. O IE10 j no aceita mais essa gambiarra e exige que voc use a sintaxe ocial do CSS3 que vimos noincio.Gerao de gradientes comum tambm a congurao de um background simples e slido antes do gradiente, a ser usado pelosnavegadores 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 (progressiveenhancement):.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 nospermite criar gradientes CSS3 visualmente como num editor de imagens. Alm disso, j implementa todosos hacks e prexos para navegadores diferentes. H at uma opo que permite que enviemos uma imagemcom o design de um gradiente e ele identica as cores e gera o cdigo correto.http://www.colorzilla.com/gradient-editor/Recomendamos fortemente o uso dessa ferramenta para gerar gradientes CSS3.6.12 Progressive EnhancementNesse ponto, voc pode estar pensando nos navegadores antigos. Bordas redondas, por exemplo, s funcio-nam no IE a partir da verso 9. At o IE8 no h como fazer isso com CSS (nem com prexos).O que fazer ento? Muitos usurios no Brasil ainda usam IE8 e at verses mais antigas como IE7 e talvezIE6.Captulo 6 - CSS Avanado - Progressive Enhancement - Pgina 107http://www.colorzilla.com/gradient-editor/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptOmelhor no usar esses recursos modernos por causa dos usurios de navegadores antigos? No!No vamos sacricar a experincia da maioria dos usurios de navegadores modernos por causa do cada vezmenor nmero de pessoas usando navegadores antigos, mas tambm no queremos esquecer os usurios denavegadores antigos e deix-los sem suporte.Progressive enhancement e graceful degradationA ideia fazer seu site funcionar em qualquer navegador, sem prejudicar os navegadores mais antigos esem deixar de usar os novos recursos em navegadores novos. Graceful degradation foi o nome da primeiratcnica a pregar isso; o objetivo era montar seu site voltado aos navegadores modernos e fazer com que eledegradasse 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 pequenasmelhoriasmesmo ques funcionem nos navegadores modernos.Com CSS3, podemos usar progressive enhancement. No possvel ainda ter um site que dependa hojetotalmente do CSS3. Mas possvel desenvolver seu site e acrescentar melhorias progressivamente usandoCSS3.Ou seja, faa um layout que que usvel com bordas quadradas mas use bordas redondas para deix-lomelhor, mais bonito, nos navegadores mais modernos.Saiba mais no blog da Caelum:http://blog.caelum.com.br/css3-e-progressive-enhancement/6.13 Exerccios: visual CSS31) D um ar mais atual para nossa home colocando alguns efeitos nos painis.Use border-radius e box-shadow no painel em si para destac-lo mais. E use um text-shadow sutil paradeixar 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 6 - CSS Avanado - Exerccios: visual CSS3 - Pgina 108http://blog.caelum.com.br/css3-e-progressive-enhancement/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2) O box-shadow tambm aceita a criao de bordas internas aos elementos alm da borda externa. Bastausar a opo inset:box-shadow: inset 1px 1px 4px #999;Teste na sombra dos painis que zemos antes.3) O border-radius pode tambm ser congurado para bordas especcas apenas e at de tamanhos dife-rentes se quisermos..busca {border-top-left-radius: 4px;border-top-right-radius: 4px;}4) No CSS3, podemos usar cores com canal Alpha para translucncia usando a sintaxe do RGBA. Faa asombra do ttulo do painel um branco com 80% de opacidade..painel h2 {text-shadow: 1px 1px 2px rgba(255,255,255,0.8);}5) 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 6 - CSS Avanado - Exerccios: visual CSS3 - Pgina 109Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPrefixos no exerccioUsamos no exerccio a verso ocial da especicao sem prexos que funciona nas ltimasverses 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 prexos para suport-los. Ou usar uma ferramentacomo o Collorzilla Gradient Generator para automatizar:http://www.colorzilla.com/gradient-editor/Consulte o suporte nos browsers aqui: http://caniuse.com/css-gradients6.14 CSS3 TransitionsCom 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 algomais sutil? Uma animao desse valor mudando lentamente, mostrando o elemento se deslocando na tela?Usamos CSS3 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 2 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 6 - CSS Avanado - CSS3 Transitions - Pgina 110http://www.colorzilla.com/gradient-editor/http://caniuse.com/css-gradientsMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript 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 velocidadecustomizada 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 oatalho all (que j o valor padro, inclusive):#teste:hover {transition: all 2s ease;}Essa especicao, ainda em estgio inicial, suportada em todos os navegadores modernos, incluindo o IE10. Mas precisamos de prexos 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 6 - CSS Avanado - CSS3 Transitions - Pgina 111http://www.roblaplaca.com/examples/bezierBuilder/http://www.roblaplaca.com/examples/bezierBuilder/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript6.15 CSS3 TransformsCom essa nova especicao, 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 menorque seu tamanho padro ou alterar a posio do elemento sem sofrer interferncia de sua estrutura.Translate.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);}Rotate#menu-departamentos {transform: rotate(-10deg);}Captulo 6 - CSS Avanado - CSS3 Transforms - Pgina 112Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptScale#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);}Skewfooter {/* Distorcer o elemento no eixo horizontal */transform: skewX(10deg);}#social {/* Distorcer o elemento no eixo vertical */transform: skewY(10deg);}Captulo 6 - CSS Avanado - CSS3 Transforms - Pgina 113Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript possvel combinar vrias transformaes no mesmo elemento, basta declarar uma depois da outra:html {transform: rotate(-30deg) scale(0.4);}Essa especicao, ainda em estgio inicial, suportada em todos os navegadores modernos, incluindo o IE9, mas todas as implementaes exigem o uso dos respectivos prexos.#teste {-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);transform: rotate(-10deg);}6.16 Exerccios: CSS3 transform e transitionPrefixos nos exercciosNo exerccio, optamos por usar sintaxes que funcionam em todos os browsers mas apenas emsuas ltimas verses. Isso quer dizer que acrescentamos os prexos necessrios apenas hoje emdia. Se quiser suportar verses mais antigas, adicione mais prexos.Consulte a compatibilidade e prexos:http://caniuse.com/css-transitionshttp://caniuse.com/transforms2d1) Quando o usurio passar o mouse em algum produto dos painis de destaque, mostre uma sombra portrs com box-shadow. Use tambm uma transio com transition para que essa sombra aparea suave-mente:Captulo 6 - CSS Avanado - Exerccios: CSS3 transform e transition - Pgina 114http://caniuse.com/css-transitionshttp://caniuse.com/transforms2dMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript.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.2) Altere a regra anterior para tambm colocar agora um fundo branco no elemento. Anime esse fundotambm, fazendo um efeito tipo fade.Na regra transition de antes, podemos indicar que todas as propriedades devem ser 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;}3) Mais coisas de CSS3! Ainda quando passar o mouse em cima do item do painel, queremos aumentar oelemento em 20%, 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 com all.4) Altere a regra anterior do transform pra tambm fazer o elemento rotacionar suavemente em 5 graus nosentido anti-horrio:.painel li:hover {-webkit-transform: scale(1.2) rotate(-5deg);transform: scale(1.2) rotate(-5deg);}Captulo 6 - CSS Avanado - Exerccios: CSS3 transform e transition - Pgina 115Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript5) (opcional) Faa os elementos mpares girarem em sentido anti-horrio e os pares no sentido horrio!No exerccio anterior, zemos todos girarem anti-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);}6) (opcional) Repare como a animao ocorre apenas quando passamos o mouse em cima, mas quandotiramos, a volta do efeito no animada.Podemos habilitar a animao na volta do elemento para o estado normal movendo as regras de transiopara o li em si (e no s no :hover)..painel li {-webkit-transition: 0.7s;transition: 0.7s;}7) (opcional) Um terceiro argumento para a funo de transio a funo de animao, que controla comoo efeito executa de acordo com o tempo.Por padro, os efeitos so lineares, mas podemos obter resultados mais interessantes com outras opescomo 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 {Captulo 6 - CSS Avanado - Exerccios: CSS3 transform e transition - Pgina 116Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript-webkit-transition: 0.7s ease-out;transition: 0.7s ease-out;}6.17 Para saber mais: especificidade de seletores CSSQuando declaramos uma srie de seletores CSS, bem possvel que nos deparemos com situaes em quemais 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 m de resolver conitos e garantir que aspropriedades desejadas estejam sendo aplicadas aos elementos corretos.O comportamento padro dos seletores CSS, quando no h conitos entre propriedades, que as proprie-dades de mais de um seletor para um mesmo elemento sejam acumuladas. Veja no exemplo a seguir:Estrutura HTMLTexto do pargrafo em destaqueTexto de um pargrafo comumSeletores CSSp {color: navy;}p {font-size: 16px;}No exemplo anterior, utilizamos omesmo seletor duas vezes no CSS. Isso faz com que as propriedades sejamacumuladas em todos os elementos selecionados. No caso, todos os elementos da tag p em nosso documentosero exibidos da cor navy (azul marinho) e com a fonte no tamanho 16px.Quando h conito 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 6 - CSS Avanado - Para saber mais: especicidade de seletores CSS - Pgina 117Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptNesse caso, h conito entre as propriedades font-size declaradas nos seletores. Como os seletores soequivalentes, os pargrafos sero exibidos com a fonte no tamanho 16pt. A declarao anterior, com valorde 12pt sobrescrita pela nova propriedade declarada mais abaixo no nosso CSS. A cor navy continuaaplicada a todos os pargrafos do documento.Especificidade de Seletores CSSSeletores equivalentes tm suas propriedades sobrescritas conforme so declaradas. Mas o que acontecequando temos diferentes tipos de seletores?Cada tipo de seletor tem um peso diferente quando o navegador os interpreta e aplica suas propriedadesdeclaradas aos elementos de um documento. Existe uma maneira bem simples de saber como funcionamesses pesos porque eles fazem parte da especicao do CSS. Para car um pouco mais fcil s pensarmosem uma regra simples: quanto mais especco for o seletor, maior seu valor. Por isso esse peso, ou valor,que cada seletor tem recebe o nome de especicidade.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 queeles possam ter. Por esse motivo, o seletor de tag tem valor baixo de especicidade.O seletor de classe, por exemplo .destaque {}, um pouco mais especco, ns decidimos quais elementostm determinado valor para esse atributo nos elementos do HTML, portanto o valor de especicidade doseletor de classe maior do que o valor de especicidade do seletor de tag.O seletor de id, por exemplo #cabecalho {}, bem especco, pois s podemos ter um nico elemento comdeterminado valor para o atributo id, ento seu valor de especicidade omaior entre os seletores que vimosat agora.E quando temos seletores compostos ou combinados? Como calcular essa especicidade?Podemos adicionar um ponto em cada posio do valor de um seletor para chegarmos ao seu valor de es-pecicidade. Para isso vamos utilizar uma tabela para nos ajudar a conhecer esses valores, e a seguir vamosaplicar o calculo a alguns seletores propostos.Seguindo os valores descritos na tabela acima, podemos calcular o valor de especicidade para qualquerCaptulo 6 - CSS Avanado - Para saber mais: especicidade de seletores CSS - Pgina 118Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptseletor 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 nosexemplos 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 especicidade do seletor, maior a prioridade de seu valor, dessa maneira um seletorcom valor de especicidade 013 sobrescreve as propriedades conitantes para o mesmo elemento que umseletor com valor de especicidade 001.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 cursovamos ver outros tipos mais avanados de seletores, e vamos complementando essa tabela para termos umareferncia completa para esse clculo.Captulo 6 - CSS Avanado - Para saber mais: especicidade de seletores CSS - Pgina 119Captulo 7Web para dispositivos mveisA iniciativa da Internet mvel importante, informaes devem ser igualmente disponveis em qualquerdispositivo Tim Berners-Lee7.1 Site mobile ou mesmo site?O volume de usurios que acessam a Internet por meio de dispositivos mveis cresceu exponencialmentenos ltimos anos. Usurios de iPhones, iPads e outros smartphones e tablets tm demandas diferentes dosusurios Desktop. Redes lentas e acessibilidade em dispositivos limitados e multitoque so as principaisdiferenas.Como atender a esses usurios?Para que suportemos usurios mveis, antes de tudo, precisamos tomar uma deciso: fazer um Site 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 terum Site diferente voltado para dispositivos mveis. comum usar um subdomnio diferente como m. oumobile., como http://m.uol.com.br.Essa abordagem a que trazmaior facilidade na hora de pensar nas capacidades de cada plataforma, Desktopemobile, 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 telapequena e um tablet com tela mediana? E se ainda considerarmos os novos televisores como GoogleTV? Teramos que montar um Site especco para cada tipo de plataforma?http://m.uol.com.brMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript Muitas vezes esses Sites mobile so verses limitadas dos Sites de verdade e no apenas ajustes deusabilidade para o dispositivo diferente. Isso no frustra o usurio que, cada vez mais, usa dispositivosmveis para completar as mesmas tarefas que antes fazia no Desktop? Dar manuteno em um Site j bastante trabalhoso, imagine dar manuteno em dois - ummobile eum normal. Voc ter contedos duplicados entre Sites diferentes, podendo prejudicar seu SEO se no for feitocom cuidado. Ter que lidar com redirects entre URLs mveis e normais, dependendo do dispositivo. O usuriopode receber de um amigo um link para uma pgina vista no Site normal; mas se ele abrir esse emailno celular, ter que ver a verso mobile desse link, sendo redirecionado automaticamente. E mesmacoisa 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 desenvolvedortambm, que no precisar manter vrios Sites diferentes. E o que garante a compatibilidade com a maiorgama de aparelhos diferentes.Certamente, a ideia no fazer o usuriomvel acessar a pgina exatamente damesmamaneira que o usurioDesktop. Usando truques de CSS3 bem suportados no mercado, podemos usar a mesma base de layout emarcao 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 7 - Web para dispositivos mveis - Site mobile ou mesmo site? - Pgina 121Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptComo desenvolver um Site exclusivo paraMobile?A abordagem que trataremos no curso a de fazer adaptaes na mesma pgina para ser com-patvel com CSS3. 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 designmais enxuto e levando em conta que a tela ser pequena (em geral, usa-se width de 100% paraque se adapte pequenas variaes de tamanhos de telas entre smartphones diferentes).Uma diculdade estar no servidor para detectar se o usurio est vindo de umdispositivomvelou no, e redirecion-lo para o lugar certo. Isso costuma envolver cdigo no servidor que detecteo navegador do usurio usando o User-Agent do navegador. uma boa prtica tambm incluir um link para a verso normal do Site caso o usurio no queiraa verso mvel.7.2 CSSmedia typesDesde a poca do CSS2, h uma preocupao com o suporte de regras de layout diferentes para cada situaopossvel. Isso feito usando os chamados media types, que podem ser declarados ao se invocar um arquivoCSS:Captulo 7 - Web para dispositivos mveis - CSS media types - Pgina 122Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptOutra 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;}}Omedia type screen determina a visualizao normal, na tela do Desktop. muito comum tambm termosumCSS commedia type print com regras de impresso (por exemplo, retirar navegao, formatar cores paraserem mais adequadas para leitura em papel etc).E havia tambm o media type handheld, voltado para dispositivos mveis. Com ele, conseguamos adaptaro 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 doque 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 pginascompletas e to complexas quanto as do Desktop. Por isso, o iPhone e outros celulares modernos ignoramas regras de handheld e se consideram, na verdade, screen.Alm disso, mesmo que handheld funcionasse nos smartphones, como trataramos os diferentes dispositivosde hoje em dia como tablets, televises etc?A soluo veio com o CSS3 e seusmedia queries.7.3 CSS3media queriesTodos os smartphones e navegadores modernos suportam uma nova forma de adaptar o CSS baseado naspropriedades dos dispositivos, asmedia queries do CSS3.Captulo 7 - Web para dispositivos mveis - CSS3 media queries - Pgina 123Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptEm vez de simplesmente falar que determinado CSS para handheld em geral, ns podemos agora indicarque determinadas regras do CSS devem ser vinculadas a propriedades do dispositivo como tamanho da tela,orientao (landscape ou portrait) e at resoluo em dpi.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 queque queremos que as telas com largura mxima de 480px tenham uma fonte de 12px.Voc pode testar isso apenas redimensionando seu prprio navegador Desktop para um tamanhomenor que480px.7.4 ViewportMas, se voc tentar rodar nosso exemplo anterior em um iPhone ou Android de verdade, ver que aindaestamos vendo a verso Desktop da pgina. A regra domax-width parece ser ignorada!Captulo 7 - Web para dispositivos mveis - Viewport - Pgina 124Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptFigura 7.1: Site atual rodando num celular AndroidNa verdade, a questo que os smartphones modernos tm telas grandes e resolues altas, justamente paranos permitir ver sites complexos feitos para Desktop. A tela de um iPhone 4S por exemplo 960px por640px. Celulares Android j chegam a 1280px, o mesmo de um Desktop.Ainda assim, a experincia desses celulares bem diferente dos Desktops. 1280px em uma tela de 4 polegadas bem diferente de 1280px em umnotebook de 13 polegadas. A resoluomuda. Celulares costumam ter umaresoluo em dpi bem maior que Desktops.Como arrumar nossa pgina?Os smartphones sabem que considerar a tela como 1280px no ajudar o usurio a visualizar a pgina otimi-zada para telas menores. H ento o conceito de device-width que, resumidamente, representa um nmeroem pixels que o fabricante do aparelho considera como mais prximo da sensao que o usurio tem aovisualizar a tela.Nos iPhones, por exemplo, o device-width considerado como 320px,mesmo coma tela tendo uma resoluobem mais alta.Captulo 7 - Web para dispositivos mveis - Viewport - Pgina 125Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPor padro, iPhones, Androids e ans costumam considerar o tamanho da tela visvel, chamada de viewportcomo grande o suciente para comportar os Sites Desktop normais. Por isso a nossa pgina foi mostradasem zoom como se estivssemos no Desktop.A Apple criou ento uma soluo que depois foi copiada pelos outros smartphones, que congurar o valorque julgarmos mais adequado para o viewport:Isso faz com que a tela seja considerada com largura de 320px, fazendo com nosso layout mobile nalmentefuncione e nossas media queries tambm.Melhor ainda, podemos colocar o viewport com o valor device-width denido pelo fabricante, dando maisexibilidade com dispositivos diferentes com tamanhos diferentes:7.5 Exerccios: adaptaes para mobile1) Vamos adaptar nossa home page (index.html) para mobile.Captulo 7 - Web para dispositivos mveis - Exerccios: adaptaes para mobile - Pgina 126Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptComece declarando a meta tag com o viewport dentro do da index.html:Vamos escrever nosso CSS de adaptao em um novo arquivo, chamadomobile.css. Crie esse arquivo eo importe no head do index.html. Use media queries para que ele s seja aplicado em resolues de nomximo 320px (celulares comuns)2) Nossa pgina hoje tem o tamanho xo em 940px e centralizada (com o uso do seletor .container).Para deixarmos a pgina mais exvel nos celulares, precisamos remover esse tamanho absoluto e colocaralgum que faa mais sentido em telas menores, onde queremos ocupar quase que a tela toda (deixandoapenas uma pequena margem). Para isso, editemobile.css:.container {width: 96%;}J possvel redimensionar a tela para 320px e ver que o site comea a se adaptar. Mas ainda h bastantetrabalho pela frente.3) 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 car abaixo do logo e nomais posicionado direita.header h1 {text-align: center;}header h1 img {max-width: 50%;}.sacola {display: none;}.menu-opcoes {position: static;text-align: center;}Lembre-se que, anteriormente, nosso menu estava com position:absolute para car a direita do logo.Agora, queremos deix-lo uir abaixo do logo; bastou restaurar o position:static.Teste novamente com o navegador redimensionado. Est melhorando?4) Ajustamos a posio do menu do topo e, automaticamente, os links se posicionaram formando duaslinhas. Mas repare como esto prximos uns dos outros. Ser que o nosso usurio consegue clicar nelesusando seu celular? Vamos aumentar o espao entre eles:Captulo 7 - Web para dispositivos mveis - Exerccios: adaptaes para mobile - Pgina 127Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript.menu-opcoes ul li {display: inline-block;margin: 5px;}5) Ajuste 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 quebrar em colunas.Vamos ocupar 100% da tela com o menu e a busca. A imagem de destaque dever ser redimensionadapara ocupar 100% da tela e no estourar o tamanho..busca,.menu-departamentos,.destaque img {margin-right: 0;width: 100%;}Teste esse passo no navegador redimensionado.6) Nossa pgina est cando 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 6 elementos, com 3por linha. Vamosmanter o painel com 3 elementos por linha, mas vamos fazer os dois painis encaixaremum em cima 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 3 em cada linha.Uma boa maneira colocar cada elemento com 30% do painel, totalizando 90%, e deixando espao paraas margens.J a imagem interna de cada produto dever ocupar 100% do seu quadrado (o que ajustamos), senoas imagens vo estourar o layout em certos tamanhos..painel li {width: 30%;}.painel img {width: 100%;}Teste a pgina nal no navegador redimensionado. Temos nossa pgina mobile!Captulo 7 - Web para dispositivos mveis - Exerccios: adaptaes para mobile - Pgina 128Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript7) O que acontece em resolues maiores de 320px? Nosso design volta ao padro de 940px e camos comscroll horizontal. A maioria dos smartphones tem 320px de largura, mas nem todos, e nosso layout nose ajusta bem a esses outros. At mesmo aqueles com 320px de largura, ao girar o aparelho em modopaisagem, a resoluo maior (480px num iPhone e mais de 500px em muitos Androids).O melhor era que nosso layout adaptvel fosse usado no s em 320px mas em diversas resolues inter-medirias antes dos 940px que estabelecemos para o site Desktop.Podemos ajustar nossa media query para aplicar o CSS de adaptao a qualquer tamanho de tela menorCaptulo 7 - Web para dispositivos mveis - Exerccios: adaptaes para mobile - Pgina 129Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptque os 940px do Desktop (ou seja, no mximo, 939px):Teste, novamente, redimensionando o navegador para vrias resolues diferentes.Repare que, como zemos um layout uido, baseado em porcentagens, os elementos se ajustam a dife-rentes resolues sem esforo. uma boa prtica usar porcentagens e, sempre que possvel, evitar o usode valores absolutos em pixels.8) (opcional) Se voc fez os exerccios opcionais anteriores do controle de pause/play no banner, precisamosreposicionar o controle de pause/play:.play,.pause {top: auto;right: auto;left: 10px;bottom: 10px;}7.6 ResponsiveWebDesignRepare o que zemos nesse captulo. Nossa pgina, com omesmoHTML e pequenos ajustes de CSS, suportadiversas resolues diferentes, desde a pequena de um celular at um Desktop.Essa prtica o que o mercado chama deWeb Design Responsivo. O termo surgiu num famoso artigo deEthan Marcotte e diz exatamente o que acabamos de praticar. So 3 os elementos de um design responsivo: layout udo usando medidas exveis, como porcentagens; media queries para ajustes de design; uso de imagens exveis.Ns aplicamos os 3 princpios na nossa adaptao da Home pra mobile. A ideia do responsivo que a pginase adapte a diferentes condies, em especial a diferentes resolues. E, embora o uso de porcentagensexista h dcadas na Web, foi a popularizao das media queries que permitiram layouts verdadeiramenteadaptativos.7.7 Mobile-firstNosso exerccio seguiu o processo que chamamos de desktop-rst. Isso signica que tnhamos nossa pginacodicada para o layout Desktop e, num segundomomento, adicionamos as regras para adaptao a mobile.Captulo 7 - Web para dispositivos mveis - Responsive Web Design - Pgina 130Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptNaprtica, isso no muito interessante. Repare como tivemos que desfazer algumas coisas do que tnhamosfeito no nosso layout para desktop: tiramos alguns posicionamentos e deszemos diversos ajustes na largurade elementos. muito mais comum e recomendado o uso da prtica inversa: oMobile-rst. Isto , comear o desenvolvi-mento pelomobile e, depois, adicionar suporte a layouts desktop. No cdigo, no h nenhum segredo: vamosapenas usar mais media queriesmin-width ao invs demax-width, mais comum em cdigos desktop-rst.A grande mudana do mobile-rst que ela permite uma abordagemmuito mais simples e evolutiva. Inicia-se o desenvolvimento pela reamais simples e limitada, commais restries, omobile. O uso da tela pequenavai nos forar a criar pginas mais simples, focadas e objetivas. Depois, a adaptao pra Desktop commediaqueries, apenas uma questo de readaptar o layout.A abordagem desktop-rst comea pelo ambiente mais livre e vai tentando cortar coisas quando chega nomobile. Esse tipo de adaptao , na prtica, muito mais trabalhosa.Ns recomendamos o uso domobile-rst. E usaremos essa prtica no curso a partir das prximas pginas,assim voc poder comparar os dois estilos.7.8 Exerccios opcionais: verso tablet1) Nosso layout anterior tem dois comportamentos: um layout xo em 940px otimizado para Desktops eoutro construdo para telas pequenas, mas que aplicado para qualquer resoluo abaixo de 939px.Repare que, em resolues altas (mas menores que 940px), nosso design mobile no ca 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 320px e 939px.Por exemplo, podemos usar 2 colunas no nosso menu quando chegarmos em 480px (um iPhone empaisagem):@media (min-width: 480px) {header h1 {margin: 5px 0;}.menu-departamentos {padding-bottom: 10px;margin-bottom: 10px;}.menu-departamentos nav > ul {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}}Captulo 7 - Web para dispositivos mveis - Exerccios opcionais: verso tablet - Pgina 131Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptEm telas umpoucomaiores, como tablets (um iPad tem 768px por exemplo), podemos querer fazer outrosajustes com uma media query:@media (min-width: 720px) {header h1 {text-align: left;}.menu-opcoes {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 320px at o Desktopgrande. Veja a responsividade do nosso design, se ajustando a diversos tamanhos de tela.2) Acesse sua pgina mobile no seu smartphone de verdade!3) (trabalhoso) Adapte o layout das outras pginas (Sobre, Contato e Produto) para mobile, tambm. Faauma soluo mobile completa!Captulo 7 - Web para dispositivos mveis - Exerccios opcionais: verso tablet - Pgina 132Captulo 8Introduo a PHPMedir progresso de programao em linhas de cdigo como medir o progresso da construo de um aviopor seu peso. Bill Gates8.1 Libertando oHTML de suas limitaesApesar de toda evoluo do HTML5 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 outraslinguagens 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 linguagem no servidor para executar tarefas como gerar pginas dinamicamente com dados deum 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.Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptJava vs JavaScriptApensar do nome, essas duas linguagens so completamente diferentes. Java um linguagemvoltada mais para servidores, com bastante apelo no mundo corporativo, e mantida pela Oracle.JavaScript a linguagem daWeb para se escrever funcionalidades dinmicas numa pgina. Rodano browser.8.2 Como funciona um servidorHTTPSe escrevermos um HTML simples num arquivo .html, basta abri-lo no navegador e pronto, j podemosvisualizar 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 comhttp://. Quando acessamos um endereo desses na Internet, falamos que estamos fazendo uma requisioao servidor. Ou seja, pedimos que certo contedo seja exibido.Por exemplo, ao acessar http://www.caelum.com.br/apostilas estamos conectando via HTTP ao servidorwww.caelum.com.br e requisitando a URL /apostilas.Do outro lado, existe um servidor HTTP esperando novas requisies que responsvel por servir o queo usurio est pedindo. Esse servidor um programa que instalamos e ca responsvel por processar asrequisies.A grande questo que esse servidor no precisa ser algo que simplesmente l o arquivo HTML e envia seucontedo 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.8.3 Como funciona o PHP no servidorAo usar PHP, podemos escolher diversos servidores compatveis. O mais famoso de todos o Apache, queprovavelmente voc ir encontrar em muitas hospedagens no dia a dia.Mas uma novidade das ltimas verses do PHP (5.4+) que ele j vem com um servidor embutido simplesque 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:8080Nesse comando, a opo -S indica que queremos o servidor embutido dele, o endereo localhost indica quevamos acessar nosso servidor localmente e o valor 8080 a porta que o servidor vai rodar.Captulo 8 - Introduo a PHP - Como funciona um servidor HTTP - Pgina 134http://http://www.caelum.com.br/apostilasMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptDepois, basta navegar na URL http://localhost:8080/ e nosso servidor vai responder normalmente. Comonosso projeto s tem arquivos .html, veremos as pginas no navegador iguaizinhas como vamos antes, semnovidades.Mas no precisa ser assim. Para executar cdigo do lado do servidor com PHP, basta renomear o arquivode .html para .php. Por exemplo: sobre.php. Com essa extenso, podemos agora misturar cdigo dinmicoPHP no meio do nosso HTML.Todo cdigo PHP ca dentro de uma tag especial dele, pra diferenciar do cdigo HTML:E podemos misturar isso com HTML normalmente. O que for tag do PHP vai ser executada pelo servidorPHP. O que no for, vai ser enviado para o browser do jeito que est.HTML aquiMais HTMLVamos ver muitas coisas com PHP ao longo do curso. Por enquanto, vamos fazer um exerccio que apenasmostra o ano atual no rodap da pgina de sobre. Para acessar o ano atual, podemos fazer:Chamamos a funo date do PHP passando como argumento o formato que queremos a sada. No caso, Yindica que queremos o ano apenas. Veja outros formatos em: http://www.php.net/dateA funo date devolve a data mas no mostra na tela. O comando print pega esse valor e mostra na tela.8.4 Para saber mais: instalao do PHP em casaO site ocial do PHP o http://php.net e l voc encontra downloads e cdigo fonte completo.Captulo 8 - Introduo a PHP - Para saber mais: instalao do PHP em casa - Pgina 135http://localhost:8080/http://www.php.net/datehttp://php.netMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptWindowsPara facilitar a instalao do PHP e dependncias no Windows, existe um pacote famoso chamadoWAMPda 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/wampDepois de instalado, conseguimos acessar o binrio do PHP pela linha de comando atravs de ummenu. Vem Iniciar -> BitNami Application Stack -> Use Application Stack.Mac e LinuxCostumam vir j com o PHP instalado. Verique apenas se a vero igual ou superior a 5.4, que precisamospro curso. Se for mais antiga, consulte o gerenciador de pacotes do seu sistema para atualizar.8.5 Exerccios: executando o PHP1) Nosso primeiro passo executar o servidor local do PHP. Para isso, abra o terminal e entre na pasta doprojeto:$ cd Desktop/mirror-fashion/Em seguida, execute o servidor PHP:$ php -S 0.0.0.0:8080Os endereos do server builtin do PHPO argumento -S habilita o servidor do PHP. Como argumento, ele recebe um IP e uma porta.Quando passamos 0.0.0.0, estamos habilitando todos os IPs da mquina; isso quer dizer que oservidor acessvel tanto na prpria mquina quanto via rede. Isso til para testarmos nossoprojeto em dispositivos mveis conectados na rede, por exemplo.2) Abra o navegador e acesse http://localhost:8080. Voc dever ver a pgina da Mirror Fashion sendoservida pelo PHP agora.Para testarmos nossa instalao do PHP, vamos implementar uma funcionalidade bem simples, pormmuito til. Isto , queremos saber o ano atual dinamicamente e inserir esse valor na pgina. Com PHP,isso muito simples: basta usar a funo date.3) Primeiro renomeie a extenso do arquivo sobre.html para sobre.php. Lembre que um arquivo PHPnadamais que um HTML com instrues especiais pra rodar no servidor.4) O texto que descreve a Mirror Fashion fala de sua fundao em 1932. Acrescente uma frase dinmica notexto que indica h quantos anos a empresa foi fundada.Captulo 8 - Introduo a PHP - Exerccios: executando o PHP - Pgina 136http://bitnami.com/stack/wamphttp://localhost:8080Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptFundada h anos,...5) Repare que no lugar de sair a quantidade de anos, estamos exibindo o ano atual. Para resolver isso, vamossubtrair o ano atual menos a data de fundao da Mirror Fashion:Fundada h anos,...6) (opcional) A funo date recebe como parmetro o formato que desejamos para nossa data. Teste outrosvalores, comom ou l.Consulte outros valores na documentao: http://www.php.net/date8.6 Reaproveitamento de cdigo com includeUm recurso muito comum de aparecer em todo projeto a criao de um cabealho e um rodap nico parao site que so aproveitados em todas as pginas. Cada pgina individual s muda o miolo.O problema que, com HTML puro, a nica soluo car copiando e colando o cdigo do cabealho emtodas as pginas. Isso muito ruim. Se um dia precisarmos mudar um item no menu do cabealho, temoszilhes de arquivos pra mexer.O HTML no tem recursos pra que deixemos esse cdigo centralizado em um s lugar. Existem algumassolues que, ou so muito limitadas ou tm problemas srios de suporte nos navegadores. Ento, do pontode 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 cdigoem todas as pginas usando o comando include.Repare que o HTML nal que o browser recebe o mesmo de antes. A incluso do cabealho acontece noservidor.8.7 Exerccios: include1) 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:Captulo 8 - Introduo a PHP - Reaproveitamento de cdigo com include - Pgina 137http://www.php.net/dateMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptMirror FashionRepare que j inclumos algumas tags que vimos antes no curso. Em especial, o charset como UTF-8, atag 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 omesmo cabealho.Tnhamos criado um cabealho bacana na index.php e, para termos omesmo cabealho noproduto.php,teramos que copiar e colar o cdigo do .O HTML sozinho no tem recursos muito interessantes para se reaproveitar pedaos de cdigo entrepginas. Mas no servidor isso bem fcil de resolver. Com PHP, basta usar a funo include.2) Primeiro, crie um arquivo chamado cabecalho.php e coloque o contedo do cabealho que temos nahome com a tag . Esta uma boa hora para usar o cortar-e-colar:Nenhum item na sacola de comprasSua ContaLista de DesejosCartao FidelidadeSobreAjudaCaptulo 8 - Introduo a PHP - Exerccios: include - Pgina 138Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript3) Na pgina produto.php, inclua cabecalho.php logo no incio do body:4) Teste a nova pgina acessando http://localhost:8080/produto.php. O cabealho deve aparecer includo.Verique o HTML da pgina pelo navegador.5) Crie o arquivo rodape.php para fazermos amesma coisa com o rodap copiando o contedo do que havamos criado na Home:FacebookTwitterGoogle+6) Na pgina produto.php, inclua rodape.php logo antes de fechar o body usando o include do PHP:7) O que ganhamos fazendo o include com PHP? Qual o trabalho de editar o logo da empresa, por exemplo,se tivermos 100 pginas no site?8) (opcional) Aplique o cabealho e o rodap que acabamos de criar tambm naHome e na pgina de Sobre.Para isso, transforme esses arquivos em PHP renomeando suas extenses e use o include.8.8 Para saber mais: ainda mais flexibilidade com variveisPodemos passar variveis de um arquivo para o outro durante o include. Por exemplo, a pgina do cabealhopode receber um ttulo para imprimir no ao invs de deixar um valor xo.E na pgina produto.php, denimos a varivel antes de dar o include:Captulo 8 - Introduo a PHP - Para saber mais: ainda mais exibilidade com variveis - Pgina 139http://localhost:8080/produto.phpMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript8.9 Exerccios opcionais: variveis em PHP1) Edite o arquivo cabecalho.php para incluir toda a estrutura inicial do arquivo HTML e no s o topo dapgina. Coloque desde o doctype, abertura da tag html, head, body at o header em si.Mirror FashionAgora remova esse pedao do doctype, html, head e body de dentro das pginas que fazamos include. Aideia que todo esse pedao agora reaproveitvel no include e no apenas o header em si.2) Mas algumas partes do HTML que estamos incluindo agora no cabecalho.php devem ser dinmicas. O por exemplo no deveria car xo 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, dena uma varivel com o ttulo:E no cabecalho.php, vamos imprimir essa varivel dentro do :Captulo 8 - Introduo a PHP - Exerccios opcionais: variveis em PHP - Pgina 140Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptRepare como agora o ttulo parametrizvel. Dena um ttulo nas outras pginas que fazem uso doincinclude tambm (Home, Sobre etc).3) Que outros elementos desse cabealho podemmudar entre pginas diferentes almdo ttulo? Implementesolues 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 listartodos os arquivos CSS no cabecalho.php. O melhor cada pgina declarar qual arquivo .css adicionalquer incluir alm dos bsicos.Na produto.php, podemos querer incluir um produto.css. Vamos usar uma varivel pra isso:E no cabecalho.php podemos incluir essa varivel no meio do nosso head:4) Nem todas as pginas precisam de um arquivo .css extra. Do jeito que zemos, se a varivel$cabecalho_css no for denida, um erro acontecer. Isso ruim.Uma forma de evitar tentar imprimir a varivel apenas se ela existir, e ignorar isso caso ela no estejadenida. Ou seja, a varivel opcional.Podemos fazer isso no PHP indicando que o erro de varivel no encontrada pode ser ignorado. Paraisso, usamos o@ na frente da varivel:Captulo 8 - Introduo a PHP - Exerccios opcionais: variveis em PHP - Pgina 141Captulo 9Progressive enhancement e mobile-rstQualquer tolo consegue escrever cdigo que um computador consiga entender. Bons programadores escrevemcdigo que humanos conseguem entender.Martin FowlerVamos criar a prxima pgina da nossa loja, que ser uma pgina para mostrar os detalhes de um produtoaps o usurio clicar em um produto na lista da home. Essa pgina vai mostrar uma foto grande, mostraropes 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 serexibido.Eis nosso design aplicado na tela do iPhone para visualizarmos:Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript9.1 Formulrio de compraUm dos aspectos fundamentais dessa pgina permitir que o usurio escolha a variao correta do produtopara ele. Repare que ele pode escolher a cor e o tamanho e depois comprar o produto especco que escolheu.Quando clicar nesse boto de comprar, as escolhas do usurio precisam ser enviadas para o servidor processara 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 oservidor. Falando assim, quase bvio que estamos descrevendo um .Mais: se queremos escolher, por exemplo, a cor da roupa dentre 3 opes possveis, temos componentesespeccos de formulrio para isso. Podemos fazer um combobox com ou implementar com 3radio buttons. Vamos fazer esse ltimo. Verde Rosa AzulMuito simples e funciona. Mas tem vrias falhas de acessibilidade e HTML semntico. O texto que descrevecada opo, por exemplo, no deve car solto na pgina. Devemos usar o elemento para representarCaptulo 9 - Progressive enhancement e mobile-rst - Formulrio de compra - Pgina 143Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptisso. E associar com o respectivo input.VerdeRosaAzulMais 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 ? No.Semanticamente, esses 3 inputs representam a mesma coisa e devem ser agrupados em um que,por sua vez, recebe um com a legenda em texto apropriada.Escolha a corVerdeRosaAzulAproveitamos 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 afoto de verdade da roupa naquela cor. Uma imagem vale mais que mil palavras. Mas, claro, isso para quemenxerga. Para leitores de tela e outros browsers no visuais, vamos usar o atributo alt= na imagem paramanter sua acessibilidade.Captulo 9 - Progressive enhancement e mobile-rst - Formulrio de compra - Pgina 144Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptEscolha a corSe implementarmos esse cdigo, sem visual nenhum, e testarmos no browser, teremos uma funcionalidadecompleta, funcional e acessvel. Isso fantstico. Resolveremos o visual depois.9.2 Exerccio: formulrio da pgina de produtoVamos implementar nossa pgina de produto. O primeiro passo a construo de um HTML semntico.1) Edite a pgina produto.php e, entre os includes do cabealho e do rodap, adicione um formulrio comradios e labels para a escolha da cor. Tambm usaremos o atributo alt para boa acessibilidade:Fuzzy Cardiganpor apenas R$ 129,00Escolha a cor:Captulo 9 - Progressive enhancement e mobile-rst - Exerccio: formulrio da pgina de produto - Pgina 145Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2) Teste oHTMLdo exerccio anterior. Veja seu funcionamento sem interferncia doCSS e do JS que faremosdepois.9.3 Design mobile-firstQuando criamos a home page do projeto no sabamos ainda otimizar nosso site para dispositivos mveis.Vimos o design e codicamos originalmente pensando nos browsers do desktop. Mais tarde, aplicamos osconceitos de media queries e viewport para ajustar o projeto para telas menores.Esse tipo de uxo de desenvolvimento muito comum. Desenvolver para desktop primeiro, que so amaioriados 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-rst. Isso signica fazer o design mobileprimeiro, implementar o cdigo para mobile primeiro e, depois, ajustar para o desktop. O resultado naldeve ser um site que funciona tanto no desktop quanto no mobile, como antes, s mudamos a ordem douxo de desenvolvimento.Na prtica, o quemuita gente descobriu que criar pensando no ambientemais restritivo (omobile) e depoisadaptar para o ambientemais poderoso (desktop) mais fcil que fazer o contrrio. desktop-rst acaba sendodifcil por colocar o mobile, que complicado, s no nal do projeto.Um exemplo prtico que passamos na nossa home page. Fizemos antes um menu com CSS usando hoverpara abrir subcategorias. Isso algo super comum e funciona muito bem no desktop. Mas um desastre nomobile, onde no existe hover. Podemos agora repensar nossa home para ser compatvel com mobile. Masse tivssemos, desde o incio, pensando em mobile, talvez nem crissemos o menu hover.Captulo 9 - Progressive enhancement e mobile-rst - Design mobile-rst - Pgina 146Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptOutro exemplo: os links domenu so bastante inacessveis emmobile. As opes esto muito prximas umadas outras e tocar na opo certa com o dedo (gordo!) muito difcil. No desktop no h esse problema poisusamos mouse, por isso no pensamos nisso antes.Se tivssemos comeado pelomobile, j teramos feito os linksmaiores emais espaados pensando nos dedosgordos (costuma-se recomendar um valor mdio de 50px 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 desktopmas o contrrio nem sempre verdade. Por isso omobile-rst.Repare que o designer j mandou a pgina de produtos para ns pensando emmobile-rst: pouca informa-o, s o essencial, prioritrio. Botes grandes e espaados. Nenhum efeito de hover. Tudo numa coluna sde informaes para dar scroll, j que a tela pequena.Nem sabemos ainda como ser a verso desktop, e no interessa por enquanto.Mais sobre mobile-firstNo vamos nos estender no assunto aqui no curso mas, se interessar, existe um livro s sobre otema, chamado Mobile-rst de Luke Wroblewski. Em portugus, voc pode ler mais no livro AWeb Mobile do instrutor da Caelum Srgio Lopes.9.4 Progressive enhancementNo exerccio vamos ver como usar CSS para estilizar aquele formulrio anterior em algo parecido com o de-sign desejado. Mas o importante perceber como temos umapgina funcional e acessvel antes de pensarmosem visual.O papel do HTML esse. Estruturar o contedo da pgina de maneira semntica e acessvel, provendo umabase 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 suciente para uma experincia completa e funcional dapgina.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 tantode estilo com CSS quanto de comportamento com JavaScript.Hoje no mercado h muita falta de prossionais com experincia e completo entendimento das implicaesde progressive enhancement. Amadores focam em olhar o design do Photoshop e copiar na pgina. Prossi-onais focam em experinciasWeb acessveis, semnticas e portveis, onde o design tem um papel decorativo.Captulo 9 - Progressive enhancement e mobile-rst - Progressive enhancement - Pgina 147Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript9.5 Box model e box-sizingO BoxModel padro doW3CQuando alteramos as propriedades de elementos dentro de uma pgina, precisamos estar cientes de comoessas alteraes se comportaro na presena de outros elementos. Uma forma de entender o impacto causadopela mudana pensar no box model oumodelo em caixa em portugus.O boxmodel constitudo de quatro reas retangulares: contedo (content), espaamento (padding), bordas(borders) e margens (margin) conforme a gura 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-sizingOs primeiros a perceberem que o box model do CSS era esquisito foi a Microso. J no IE6 em quirks modeeles trocaram o box model para que o width signicasse o tamanho total at a borda. A ideia era boa maso problema foi eles atropelarem a especicao da poca, o que acabou criando boa parte dos problemas deincompatibilidade entre navegadores. O IE em standards mode usa o box model ocial e esse o padro apartir do IE8.Mas como a ideia, no m, era boa, isso acabou se transformando no box-sizing do CSS3, que nos permitetrocar 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 denido pelo seu contedo apenas -- em outras palavras, o tal box model padro que vimos antes. MasCaptulo 9 - Progressive enhancement e mobile-rst - Box model e box-sizing - Pgina 148Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptpodemos trocar por box-sizing: border-box que indica que o tamanho agora levar em conta at a borda ou seja, o width ser a soma do contedo com a borda e o padding.9.6 Exerccios: pgina de produtoVamos estruturar nosso CSS para implementar a funcionalidade de troca de cores. A cada passo, teste nobrowser para ir acompanhando o resultado.1) Crie um novo arquivo produto.css na pasta css/.2) Em produto.php, importe o produto.css aps todos os outros csss:3) Primeiro, vamos desenhar as bolinhas coloridas com pseudo-elementos do CSS3 usando um truque combordas redondas grandes:.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 boxmodelpadro. Uma soluo trocar o box model com a propriedade box-sizing:Captulo 9 - Progressive enhancement e mobile-rst - Exerccios: pgina de produto - Pgina 149Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript.cores label:after {-moz-box-sizing: border-box;box-sizing: border-box;}Agora que temos as bolinhas coloridas visuais conguradas, 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. Podemosusar um seletor avanado para isso:.cores input:not(:checked) + label img {display: none;}Reita sobre esse ltimo seletor. O que ele faz exatamente? Esteja certo de ter entendido cada parte deleantes de prosseguir.4) Teste a pgina. A troca de imagens deve estar funcionando, apesar das coisas no estarem ainda posicio-nadas corretamente.5) Com a troca de imagens funcionando, vamos implementar o posicionamento correto das bolinhas lado alado. Para isso, use position:absolute j que seus tamanhos so conhecidos:.cores label:after {position: absolute;}As bolinhas vo ser posicionadas com relao ao eldset cores, ento ele precisa estar posicionado. Opadding superior para abrir espao para as bolinhas:.cores {position: relative;padding-top: 80px;}Cada bolinha um label:after, basta posicion-las absolutamente:.cores label:after {position: absolute;top: 30px;}As bolinhas caram sobrepostas na esquerda. Para corrigir, basta colocar uma coordenada left diferentepara cada uma:Captulo 9 - Progressive enhancement e mobile-rst - Exerccios: pgina de produto - Pgina 150Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptlabel[for=verde]:after {left: 0;}label[for=rosa]:after {left: 60px;}label[for=azul]:after {left: 120px;}Teste o resultado.6) Um ponto importante de uma soluo responsiva que as imagens se adaptem ao tamanho da tela. svezes, usamos imagensmaiores e, quando a tela pequena, a imagemca vazando para fora do elementopai.Uma forma de corrigir esse problema garantir que ela nunca passe o tamanho do pai com max-width:.cores label img {display: block;max-width: 100%;}Bug no FirefoxNosso max-width: 100% no vai funcionar se voc usar um Firefox antigo. Neste navegador, oelemento fieldset no respeitava o comportamento correto de largura de um elemento e, assim,a largura da imagem tambm ca incorreta (o bug j est registrado em https://bugzilla.mozilla.org/show_bug.cgi?id=261037) .O problema foi corrigido no Firefox 27.7) Com toda a parte funcional e de posicionamento pronta, vamos estilizar alguns detalhes visuais da pgina.Primeiro, detalhes de tipograa 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;Captulo 9 - Progressive enhancement e mobile-rst - Exerccios: pgina de produto - Pgina 151https://bugzilla.mozilla.org/show_bug.cgi?id=261037https://bugzilla.mozilla.org/show_bug.cgi?id=261037Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptfont-weight: bold;}.produto p {font-size: 1.2em;font-style: italic;margin-bottom: 1em;}O ganha um destaque:.produto legend {display: block;font: bold 0.9em/2.5 Arial;text-transform: uppercase;}E por m, o boto de comprar deve car em evidncia:.comprar {background: #91bd3c;border: none;color: #333;font-size: 1.4em;text-transform: uppercase;box-shadow: 0 1px 3px #777;display: block;padding: 0.5em 1em;margin: 1em 0;}Teste e observe o estilo simples da pgina.8) (opcional) Quando selecionamos a bolinha, uma borda escura aparece. Use transition para fazer aborda aparecer suavemente, como um fadein.Adicione o seletor no incio de produto.css:.cores label:after {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, comomostraruma borda mais leve, tambm no incio de produto.css:Captulo 9 - Progressive enhancement e mobile-rst - Exerccios: pgina de produto - Pgina 152Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript.cores label:hover:after {border: 6px solid rgba(0,0,0,0.1);}9.7 Evoluindo o design para desktopFeito o design mobile-rst, hora de expandir o site para as verses maiores. Do ponto de vista de design,signica ajustar os elementos paramelhor aproveitar o espaomaior das telas de tablets e desktops. Do pontode vista de cdigo, usar media queries para implementar essas mudanas.Um exemplo: imagine que, em telas maiores que 600px, queremos utuar uma imagem a esquerda:@media (min-width: 600px) {img {float: left;}}Ao desenvolver mobile-rst, usamos muitas media queries do tipomin-width para implementar as mudan-as para o tablet/desktop.9.8 Media queries de contedoAo 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 bonsbreakpoints essencial para um design responsivo de qualidade.E o quemais aparece de pergunta de quem est comeando comdesign responsivo : quais os valores padresde se colocar nas media queries? E logo surge uma lista parecida de tamanhos comuns: 320px, 480px, 600px,768px, 992px, 1200px. O pessoal chama essa prtica de device-driven breakpoints, pois so valores geradosa partir de tamanhos de dispositivos.Mas evite esse tipo de breakpoint. Essa lista pensa em meia dzia de tipos de dispositivos, mas obviamenteno atende todos (e os 360px de um Galaxy S4?). Usar esses valores de media queries no garante que seudesign funcionar em todos os dispositivos, mas apenas nos dispositivos padres -- seja l o que for isso.Prera breakpoints com valores baseados no seu contedo. Ou seja, achar suas media queries a partir do seucontedo e do seu design. Fica bem mais fcil garantir que sua pgina funciona em todos os dispositivos.Na prtica, faa seu design mobile-rst, abra no navegador pequeno, v redimensionando a janela at acharum ponto que o design quebra ou ca feio; anote o tamanho da janela e crie um breakpoint l. No precisaser um valor bonitinho como 600px. s vezes sua pgina vai quebrar justo em 772px. No tem problema.Captulo 9 - Progressive enhancement e mobile-rst - Evoluindo o design para desktop - Pgina 153Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript9.9 Exerccios: responsive designNosso layout anterior foi feito com mobile em mente, mobile-rst. A parte boa que, quando abrimos nodesktop, tudo funciona muito bem. Mas o espao maior no bem aproveitado.Se voc redimensionar a janela para um tamanho grande, notar que nosso contedo no est centralizadona pgina como o restante. Lembre que criamos uma classe container para isso. Podemos us-la novamente.1) Na pgina produto.php, crie uma nova ao redor do contedo da pgina. Isto, ser uma div pai da div com class produto:.........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.2) Edite produto.css e adicione a media query em seu nal:@media (min-width: 630px) {}Na verso desktop, queremos reposicionar as coisas em duas colunas. Vamos colocar a foto do produtos esquerda posicionada em relao ao .produto. Isso vai afetar o posicionamento das bolinhas ento vamostrocar para posicion-las com float simples.O cdigo curto mas cheio de detalhes. Acompanhe os comentrios para entender o papel de cada item.3) Dentro da media query anterior, acrescente: (no precisa copiar os comentrios):.produto {/* a foto vai se posicionar absolutamente com relaoa esse elemento, por isso preciso estar posicionado*/position: relative;/* deixo 40% de espao em branco na esquerda para foto ocupar */padding-left: 40%;}.cores {Captulo 9 - Progressive enhancement e mobile-rst - Exerccios: responsive design - Pgina 154Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript/* eu era relative antes; reinicio para static para evitarque a foto se posicione com relao a mim*/position: static;/* 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;}.cores label:after {/* 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. Apesardisso, o restante j comea a car no lugar.4) As prximas regras devem ser adicionadas dentro damedia query anterior. Voc pode at escrever apenasas propriedades dentro dos seletores existentes na media query.Primeiro, para evitar que a imagem vaze para fora do espao que lhe foi determinado, vamos usar aspropriedades 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, bastaaumentar 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:.cores label:after {margin-right: 10px;Captulo 9 - Progressive enhancement e mobile-rst - Exerccios: responsive design - Pgina 155Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript}9.10 HTML5 Input rangeNo design original, havia a previso de se criar umamaneira de selecionar tambm o tamanho da roupa almde sua cor. O tamanho algo simples em nossa loja. Temos valores possveis 36, 38, 40, 42, 44 e 46.E h muitas formas corretas e semnticas de implementar isso no formulrio. Pode ser um comesses valores, radio buttons ou, como vamos ver, o novo input range do HTML5.O um componente novo do HTML5 com bom suporte j nos navegadores querepresenta 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 paratamanho de roupa, que s tem nmeros pares).O legal de componentes HTML5 que eles so nativos dos browsers. Isso signica que no precisamos detrabalho para us-los ou estiliz-los. Eles j vm com estilo padro do navegador em questo o que beminteressante. A interface padro familiar para o usurio.Veja o range no Safari do iPhone:E veja o mesmo componente no IE10 do Windows 8:Visuais totalmente diferentes mas totalmente adaptados plataforma em questo.Suporte ao input rangeTodos os browsers modernos suportam o input range. Voc ter problemas porm em versesmais antigas. O IE s suporta a partir do 10, o Android a partir do 4.2, e o Firefox no 23.http://caniuse.com/input-rangeLembre que aqui no curso estamos estudando novas ideias. Se voc precisar suportar os na-vegadores antigos nesse exerccio, sempre poder substituir por um simples ou umconjunto de radio buttons. Funcionalmente, tero o mesmo resultado.Captulo 9 - Progressive enhancement e mobile-rst - HTML5 Input range - Pgina 156http://caniuse.com/input-rangeMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript9.11 Exerccios: seletor de tamanho1) Implemente a funcionalidade de escolher o tamanho da roupa usando um input range do HTML5, colo-cando o cdigo a seguir logo abaixo do nosso primeiro eldset:Escolha o tamanho:Teste seu funcionamento nos browsers modernos.2) Temos dois eldsets, um para escolher cor e outro, tamanho. Nomobile, eles cam um em cima do outro.No desktop, podemos posicion-los lado a lado.Dentro da media query anterior, acrescente:fieldset {display: inline-block;vertical-align: top;margin: 1em 0;min-width: 200px;width: 45%;}9.12 TabelasO uso de tabelas era muito comum h alguns anos para a denio de reas. Seu uso para essa nalidadeacabou se tornando prejudicial pela complexidade da marcao, o que diculta bastante a manuteno daspginas. Alm disso havia uma implicao direta na denio de relevncia do contedo das tabelas para osindexadores de contedo por mecanismos de busca.Ainda assim, hoje, quando queremos exibir uma srie de dados tabulares, indicado o uso da tag de tabela.Ttulo da primeira colunaTtulo da segunda colunaLinha 1, coluna 1.Linha 1, coluna 2.Captulo 9 - Progressive enhancement e mobile-rst - Exerccios: seletor de tamanho - Pgina 157Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptLinha 2, coluna 1.Linha 2, coluna 2.Note que na primeira linha da tabela, as clulas so indicadas coma tag , o que til para diferenciarseu contedo das clulas de dados.Existem diversas maneiras de se alterar uma estrutura de uma tabela, como por exemplo indicamos que umaclula ou ocupamais de uma linha de altura pormeio do atributo rowspan, ou ento que ela ocupamais de uma coluna de largura com o uso do atributo colspan.Podemos adicionar um ttulo nossa tabela com a tag .Ainda existem as tags , e , que servem para agrupar linhas de nossa tabela. Valeressaltar que dentro do grupo devemos ter apenas linhas contendo a tag como clula.Outra tag de agrupamento que temos na tabela a que permite que sejam denidas as colunas, a tag. Dentro dessa tag denimos uma tag para cada coluna, e dessa maneira podemos adi-cionar alguns atributos que inuenciaro todas as clulas daquela coluna.A seguir um exemplo completo de como utilizar essas tags dentro de uma tabela.Quantidade e preo de camisetas.Quantidade de CamisetasPreoAmarelaVermelhaCaptulo 9 - Progressive enhancement e mobile-rst - Tabelas - Pgina 158Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptTotal de camisetas amarelas: 35Total de camisetas vermelhas: 34Valor total: $45.00Polo125$30.00Regata2329$15.009.13 Exerccios: detalhes1) Crie a seo de detalhes logo abaixo da div com a classe produto, mas ainda dentro do container:...Detalhes do produtoEsse o melhor casaco de Cardig que voc j viu. Excelentematerial italiano com estampa desenhada pelos artesos dacomunidade de Krotor nas ilhas gregas. Compre j e receba hojemesmo pela nossa entrega a jato.2) O estilo bastante simples, apenas para deixar o textomais bonito. Adicione no nal, fora damedia queryque zemos antes:.detalhes {padding: 2em 0;Captulo 9 - Progressive enhancement e mobile-rst - Exerccios: detalhes - Pgina 159Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript}.detalhes h2 {font-size: 1.5em;line-height: 2;}.detalhes p {margin: 1em 0;font-size: 1em;line-height: 1.5;max-width: 36em;}@media (min-width: 500px) {.detalhes {font-size: 1.2em;}}3) Crie uma tabela com caractersticas do produto contendo informaes tcnicas. Adicione dentro da divdetalhes:CaractersticaDetalheModeloCardig 7845MaterialAlgodo e poliesterCoresAzul, Rosa e VerdeLavagemLavar a moCaptulo 9 - Progressive enhancement e mobile-rst - Exerccios: detalhes - Pgina 160Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript4) Estilize a tabela para deix-la mais agradvel. Use o seletor de lhos mltiplos para um estilo zebrado.Adicione o estilo fora da media query:table {border-spacing: 0.2em;border-collapse: separate;}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;}9.14 Exerccios opcionais: fundo1) Para implementarmos o fundo cinza em tela cheia, vamos precisar de um novo elemento pai para contertodos os elementos da pgina. Crie um ao redor do div container quetnhamos antes.Apenas para referncia, nesse momento, seu HTML deve estar mais ou menos assim:......Captulo 9 - Progressive enhancement e mobile-rst - Exerccios opcionais: fundo - Pgina 161Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2) 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;}.cores label img {border: 2px solid #ccc;}9.15 Discusso em aula: importncia do Progressive Enhan-cement naWeb atualCaptulo 9 - Progressive enhancement e mobile-rst - Discusso em aula: importncia do Progressive Enhancement na Webatual - Pgina 162Captulo 10PHP: parmetros e bancos de dadosAntes do soware ser reusvel, ele precisa ser usvel. Ralph Johnson10.1 Submisso do formulrioTodo formulrio criado noHTML tem seus dados enviados para o servidor quando submetido. Cada campodo formulrio enviado como parmetro na requisio feita ao servidor.No formulrio, podemos indicar que pgina (URL) vai receber os dados preenchidos. s especicar o atri-buto action. No nosso exemplo, temos um formulrio na pgina produto.php e vamos criar uma prximapgina, checkout.php, que vai receber o produto escolhido e deixar o usurio proceder com a compra.No formulrio de produto ento fazemos:Hainda umoutro atributo do formque indica amaneira como os dados so enviados. o atributo method quepode 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).Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript10.2 Parmetros com PHPOs dados enviados no formulrio so recebidos no PHP e podemos acess-los atravs de variveis do prprioPHP: $_GET e _POST, dependendo de qual foi o mtodo do formulrio.Para acessar o valor de um certo campo preenchido, precisamos saber onome dele. NoHTMLdo formulrio,sempre que criamos um componente, damos um name a ele:No PHP, podemos acessar cada parmetro individualmente usando uma sintaxe de arrays:ouImprimindo varivel com PHPAt o captulo anterior, quando queramos imprimir algo na tela usamos a construo:Mas o PHP permite uma sintaxe mais curta para declarar um bloco de cdigo quando a nicaao imprimir algo e no h vrias linhas de cdigo. 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 umamensagem de conrmao para o usurio seguida dos parmetros que foram submetidos no formulrio.10.3 Listas de definio noHTMLQuando falamos de listas em HTML, sempre lembramos da e da . 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 denir itens. uma lista de termos e suasrespectivas denies. Se quisssemos criar uma lista das siglas de cursos da Caelum e seu respectivo nome,podemos fazer assim:Captulo 10 - PHP: parmetros e bancos de dados - Parmetros com PHP - Pgina 164Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptWD-43Desenvolvimento Web com HTML, CSS e JavaScriptWD-47Programao front end avanada com JavaScript e jQueryA lista a DL e cada termos representado por um DT seguindo por sua denio em um DD.10.4 Exerccios: checkout da compra1) Crie o arquivo checkout.php com uma estrutura bsica.Checkout Mirror Fashiontima escolha!Obrigado por comprar na Mirror Fashion!Preencha seus dados para efetivar a compra.No vamos usar o menu da Mirror Fashion nessa pgina, para criar uma experincia de checkout maisimersiva.2) O formulrio na pgina de produto precisa enviar os dados escolhidos para a pgina de checkout. Paraisso, nosso formulrio deve indicar para onde ser submetido.Altere a tag no arquivo produto.php para apontar para nossa nova pgina adicionando o atributoaction:Abra a pgina de produto no navegador e teste o submit. Repare como a pgina de checkout chamadae os parmetros escolhidos na pgina anterior vo junto na URL.3) Os parmetros enviados no captulo anterior aparecemnaURL. Isso porque nosso formulrio, por padro, do tipo GET. Podemos trocar para o tipo POST e, assim, os parmetros sero enviados mas no estaroCaptulo 10 - PHP: parmetros e bancos de dados - Exerccios: checkout da compra - Pgina 165Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptvisveis na URL.Altere a tag no arquivo produto.php para enviar via POST adicionando o atributo method:Na pgina checkout.php podemos pegar os valores submetidos atravs de variveis do PHP e exibir essesvalores na tela. Adicione na pgina de checkout as informaes de cor e tamanho escolhidos. Use umalista de denies DL com DT/DD pra isso:Sua compraCor Tamanho Teste acessando um produto e clicando em comprar. Os valores escolhidos devem aparecer na pgina decheckout, atravs dos parmetros escolhidos.Teste vrias vezes, com escolhas diferentes, pra ver como nossa pgina de checkout dinamicamenteconstruda com os parmetros enviados.4) Imagine que vamos ter vrios produtos diferentes na loja, todas enviando as compras pra nossa pgina decheckout. E l queremos saber qual o nome do produto est sendo comprado (alm da cor e do tamanho).Podemos passar mais um parmetro para a pgina de checkout com o nome do produto. Use um inputhidden pra passar essa informao. Na pgina produto.php, adicione dentro do form um input hidden:Por m, na pgina checkout.php, adicione a impresso do parmetro nome dentro da lista de deniesque zemos antes:Produto Teste o funcionamento do hidden fazendo uma nova compra de produto.10.5 Exerccios opcionais1) 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.Crie ainda um outro input hidden pra passar o ID.Captulo 10 - PHP: parmetros e bancos de dados - Exerccios opcionais - Pgina 166Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2) Na pgina produto.php, mude o action do formulrio paraGET ao invs do POST que temos hoje. Testetudo de novo. O que muda? Qual a diferena? O que precisa ser alterado no checkout?10.6 Banco de dados e SQLNamaioria dos sistemasWeb, os dados do negcio cam separados em um banco de dados ao invs de carescritos diretamente no HTML. Em uma loja virtual como a nossa, os produtos seriam cadastrados nessebanco 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 temcolunas com campos especcos e muitas linhas com os dados cadastrados. Podem existir relaes entre astabelas.Figura 10.1: Exemplo de uma tabela com produtos da loja virtualPara 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 atualizardados. 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 produtosO comando SELECT indica que estamos selecionamos dados. O asterisco indica que queremos todos osdados. E o FROM produtos aponta o nome da tabela.Podemos selecionar apenas um dado especco. Por exemplo, apenas os nomes dos produtos:SELECT nome FROM produtosCaptulo 10 - PHP: parmetros e bancos de dados - Banco de dados e SQL - Pgina 167Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptVamos 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-sql10.7 MySQL e phpMyAdminExistem muitos bancos de dados no mercado, como MySQL, Oracle, SQL Server, DB2, Postgre, SQLite.Todos eles aceitam comandos SQL que vimos antes, com pequenas variaes apenas.No curso, usaremos oMySQL que um dos bancos mais usados no mundo e bastante usado por programa-dores PHP. quase uma escolha natural.http://www.mysql.comPara ajudar a visualizar e administrar o MySQL podemos instalar alguma interface grca compatvel. Oprprio MySQL tem um produto chamado Workbench que um programa Desktop pra isso. Mas umaopo 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 seracessado direto no navegador. Isso faz dele uma ferramenta verstil e til para acessar bancos de dadosremotos.Vamos usar o phpMyAdmin no curso. Basta baixar o zip no site deles e subir um servidor php na pasta dele,como zemos na pasta do nosso prprio projeto.http://www.phpmyadmin.net/10.8 Para saber mais: instalao doMySQL em casaOMySQL 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 ainstalao acontecer.Importante: Se voc instalou o WAMP no primeiro captulo de PHP da apostila, no precisa instalar oMySQL agora.10.9 Buscas noMySQL com PHPSabendo usar um banco de dados e a escrever SELECTs para extrair dados dele, o prximo passo aprendera fazer isso de dentro da nossa pgina PHP. Isto , queremos pegar dados no banco de dados e imprimir natela usando PHP.Captulo 10 - PHP: parmetros e bancos de dados - MySQL e phpMyAdmin - Pgina 168http://www.alura.com.br/cursos-online-introducao/banco-de-dados-sqlhttp://www.mysql.comhttp://www.phpmyadmin.net/https://dev.mysql.com/downloads/mysql/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPrecisamos ver como conectar no MySQL e disparar comando SQL usando PHP.ConexoA 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 bancode dados disponvel (wd43). Ela abre a conexo se tudo der certo e devolve uma varivel $conexao querepresenta a conexo aberta.A buscaPrximo 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.Dados no PHPltimo passo transformar os dados da tabela em algo usvel no PHP. Uma maneira comum transformaros 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 dacoluna 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.10.10 Refinando as buscas comWHEREHmuitas opes possveis no SQL para renarmos a busca. O SELECT * que zemos antes retorna todos osdados da tabela inteira, o que pode ser muita coisa. Imagine que estamos interessados nos dados apenas deum produto especco, de uma certa linha.Podemos indicar ao SELECT que queremos os dados do produto de um certo ID, que uma coluna numricaque temos no banco de dados para identicar o cdigo individual de cada produto. Fazemos isso no SQLcom a clusulaWHERE.Captulo 10 - PHP: parmetros e bancos de dados - Renando as buscas comWHERE - Pgina 169Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptSELECT * FROM produtos WHERE id = 4Esse cdigo devolve todas as colunas do produto cujo id for 4, e apenas ele.10.11 Exerccios: phpMyAdmin1) V no terminal e encontre a pasta do phpmyadmin:$ cd /caelum/cursos/43/phpmyadminDentro dela, rode um servidor PHP em uma porta diferente, como 8000:$ php -S 0.0.0.0:8000V no navegador e acesse: http://localhost:8000Voc dever ver o phpMyAdmin. Coloque usurio root e deixe a senha em branco para entrar.2) A primeira tela do phpMyAdmin pode ser assustadora de tantas opes. Ele tem muitos recursos.Na parte esquerda cam os bancos de dados disponveis na mquina. Localize e clique no bancoWD43que corresponde aos dados do nosso curso.Captulo 10 - PHP: parmetros e bancos de dados - Exerccios: phpMyAdmin - Pgina 170http://localhost:8000Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPodemos importar os dados do curso pra esse banco. Eles esto no arquivo dados.sql na pasta do curso.Para importar, v nomenu Import no topo do phpMyAdmin. Clique emBrowse para selecionar o arquivono seu computador e depois clique em Go.Aps a importao, selecione a tabela produtos dentro deWD43 nomenu da esquerda. Ele deve mostraros 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 , 3010.12 Exerccios: PHP comMySQL1) No topo do arquivo produto.php abra a conexo com o banco de dados e selecione os dados do produto:Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript$produto = mysqli_fetch_array($dados);?>Repare que criamos uma varivel $produto no PHP que contm os dados do produto. Ela um array epodemos acessar as diferentes colunas atravs do nome.Altere os ttulos na pgina para usar os dados dinmicos do banco: por apenas Altere tambm, no nal da pgina, o local onde mostramos o texto da descrio do produto:Teste nossa pgina de produto nonavegador e repare que os dados vmdinamicamente do banco. Observeo cdigo fonte HTML nal gerado, como idntico ao que tnhamos antes.2) Queremos que nossa pgina seja capaz de exibir os dados de qualquer produto do banco. Para escolherqual produto mostrar, vamos usar um parmetro na URL com o cdigo do produto, o ID.Altere o cdigo da busca que zemos antes para incluir a clusulaWHERE no nal baseada no id doproduto 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=2.3) A imagem do produto tambm diferente para cada produto. Abra a pasta img/produtos/ e repare nasvrias imagens que esto l. Elas seguem um padro. O nome contm o cdigo do produto e as trsvariaes 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 dafoto:Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript10.13 Busca de muitos resultadosPodemos fazer uma busca demuitos resultados removendo oWHERE e fazendo o SELECT simples de antes:SELECT * FROM produtosMas tambm podemos restringir o nmero de resultados. Imagine que a tabela imensa, de milhares deregistros, mas queremos apenas os primeiros 10 agora. No MySQL, isso pode ser feito com o comandoLIMIT na busca:SELECT * FROM produtos LIMIT 0, 10Isso signica que queremos 10 resultados contando a partir do primeiro (0). Podemos trocar o primeironmero pra acessar informaes em outras partes do banco.10.14 Ordenao dos resultadosOutro recurso interessante do banco de dados devolver as informaes ordenadas de acordo com certocritrio. Se quisermos os produtos em ordem alfabtica pelo nome dele:SELECT * FROM produtos ORDER BY nomePodemos ainda escolher o sentido da ordenao comASC (ascendente) eDESC (decrescente). Por exemplo,para ordenar os produtos no sentido do mais recente para o mais antigo:SELECT * FROM produtos ORDER BY data DESCE, por m, misturar tudo isso num SQL complexo:SELECT * FROM produtos ORDER BY data DESC LIMIT 0, 1010.15 Exerccios: mais buscas com PHP1) A nossa home page lista os produtos mas, do jeito que zemos, est tudo esttico com dados de mentira.Vamos alterar para fazer uma busca no banco de dados e retornar os produtos a serem exibidos. muitoparecido com o que zemos na pgina de produto; a diferena que vamos listar vrios produtos de umavez ao invs de um s.Em primeiro lugar, precisamos transformar nossa pgina num arquivo PHP, para poder usar o banco dedados nela. Renomeie o arquivo index.html para index.php se ainda no estiver.Captulo 10 - PHP: parmetros e bancos de dados - Busca de muitos resultados - Pgina 173Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptNo index.php, localize o painel novidades e apague todos os que listam produtos com dados est-ticos.No lugar, escreva um cdigo PHP que faz a busca dos produtos no banco de dados e percorra essa listacom um lao while:Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptSELECT * FROM produtos ORDER BY data DESC LIMIT 0, 6Teste novamente a home e veja o resultado.4) (opcional) Implemente omesmo recurso de busca dinmica no outro painel, o de produtosmais vendidos.A nica diferena que queremos ordenar os elementos a partir da quantidade de vendas. Use o campovendas no ORDER BY pra isso.5) (opcional) Teste outros valores para o LIMIT nas buscas. O primeiro nmero indica oset, ou seja a partirde qual item estamos interessados. Usar 3,6 indica que queremos os itens do terceiro ao nono.Teste tambm outras ordenaes. Alm do DESC, temos o ASC.10.16 Exerccios opcionais1) Em vez de passar os dados do produto para o checkout via input hidden, a soluomais 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 10 - PHP: parmetros e bancos de dados - Exerccios opcionais - Pgina 175Captulo 11Bootstrap e formulrios HTML5O trabalho a melhor das regularidades e a pior das intermitncias Victor Marie Hugo11.1 Bootstrap e frameworks de CSSUma 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 trazemtoda uma base construda de onde partiremos nossa aplicao.Existem muitas opes mas o Twitter Bootstrap talvez seja o de maior notoriedade. Ele foi criado pelopessoal do Twitter a partir de cdigo que eles j usavam internamente. Foi liberado como opensource eganhou muitos adeptos. O projeto cresceu bastante emmaturidade e importncia no mercado a ponto de sedesvincular do Twitter e ser apenas o Bootstrap.http://getbootstrap.comO Bootstrap traz uma srie de recursos: Reset CSS Estilo visual base pra maioria das tags cones Grids prontos pra uso Componentes CSS Plugins JavaScripthttp://getbootstrap.comMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript Tudo responsivo e mobile-rstComo o prprio nome diz, uma forma de comear o projeto logo com um design e recursos base semperder tempo com design no incio.11.2 Estilo e componentes basePara usar o Bootstrap, apenas inclumos seu CSS na pgina:S isso j nos traz uma srie de benefcios. Um reset aplicado, e nossas tags ganham estilo e tipograa base.Isso quer dizer que podemos usar tags como um H1 ou um P agora e elas tero um estilo caracterstico doBootstrap.Alm disso, ganhamos muitas classes com componentes adicionais que podemos aplicar na pgina. Sovrias opes. Por exemplo, pra criar um ttulo comuma frase de abertura emdestaque, usamos o jumbotron:tima escolha!Obrigado por comprar na Mirror Fashion.No exerccio a seguir vamos usar vrios outros componentes.11.3 A pgina de checkout daMirror FashionNeste 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 compradireto, 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 maisfacilidade e rapidez.Captulo 11 - Bootstrap e formulrios HTML5 - Estilo e componentes base - Pgina 177Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptFigura 11.1: Site visto no DesktopE, como aprendemos antes, vamos desenvolver tudo mobile-rst. Nesse momento, portanto, ainda noteremos o design Desktop mostrado acima, mas uma verso mobile em uma coluna. Veremos como adaptara verso Desktop com Bootstrap depois.Figura 11.2: Site visto no MobileCaptulo 11 - Bootstrap e formulrios HTML5 - A pgina de checkout da Mirror Fashion - Pgina 178Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript11.4 Exerccio opcional: incio do checkout sem PHP1) Se voc no fez os captulos comPHP, crie agora sua pgina checkout.html comHTML simples pra poderseguir esse captulo. No h dependncia obrigatria de PHP no curso.Checkout Mirror Fashiontima escolha!Obrigado por comprar na Mirror Fashion!Preencha seus dados para efetivar a compra.Sua compraProdutoFuzzy CardiganCorverdeTamanho40PreoR$ 129,00Teste a pgina simples no navegador.11.5 Exerccios: pgina de checkout1) 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 mudanasutil no estilo da pgina, principalmente nos aspectos tipogrcos.Captulo 11 - Bootstrap e formulrios HTML5 - Exerccio opcional: incio do checkout sem PHP - Pgina 179Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptColoque no da pgina de checkout o CSS do bootstrap:Teste novamente a pgina.2) O primeiro componente pronto do bootstrap que vamos usar o jumbotron. basicamente a aberturado 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 h1 e p em dois . O primeiro div contmclass="jumbotron" e o segundo, class="container".tima escolha!Obrigado....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 responsivedesign automaticamente em seus componentes.Para saber mais do jumbotron: http://getbootstrap.com/components/#jumbotron3) Use um outro componente do Bootstrap, o panel para organizar a seo que mostramos as informaesda compra do cliente. Cuidado com o exerccio, com os nomes das classes, que confundem bastante.Adapte o HTML do H2 Sua compra e do DL que temos para se adequar ao componente de panel:Sua compraRepare como os nomes das classes, apesar de seremmuitos, fazem sentido para isolar cada parte do painel.Teste novamente a pgina no navegador e veja o resultado. Temos um painel arredondado com ttulo emdestaque no topo.Para saber mais sobre painis do Bootstrap: http://getbootstrap.com/components/#panelsCaptulo 11 - Bootstrap e formulrios HTML5 - Exerccios: pgina de checkout - Pgina 180http://getbootstrap.com/components/#jumbotronhttp://getbootstrap.com/components/#panelsMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript4) 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, masagora uma classe do Bootstrap.Crie um outro div container pra conter o panel que acabamos de criar e veja como ele ca melhorposicionado no centro da tela.5) Dentro do panel-body, logo no topo, acima da lista de denies , vamos colocar uma foto do pro-duto 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-.pngCom Bootstrap, podemos ainda acrescentar algumas classes nessa imagem para obter resultados interes-santes. A classe img-responsive faz a imagem car exvel e nunca estourar o tamanho do pai. E a classeimg-thumbnail faz a imagem car centralizada com uma borda de destaque.Adicione a imagem do produto logo acima da lista dentro do div panel-body:Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptTeste novamente a pgina.Imagem sem PHPPara o exerccio de Bootstrap em si, voc pode usar uma imagem esttica sem envolver o PHPpara gerar o endereo:6) (opcional) No painel, troque a classe panel-default pela classe panel-success. Teste e veja o resultado.Consulte outros valores na documentao: http://getbootstrap.com/components/#panels11.6 Formulrios a fundoQuando 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 .J usamos alguns antes. Agora vamos ver a fundo seus desdobramentos.Atributos do FormO formulrio exemplicado 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 decomo feita a aplicao que receber essas informaes no lado do servidor.O segundo atributo, method, especica o mtodo do HTTP pelo qual essa informao ser transmitida. Ovalor post, demaneira simplista, signica que queremos inserir as informaes desse formulrio, salv-la dealguma maneira. Outro valor possvel para esse atributo, o get, utilizado quando queremos obter algumacoisa a partir das informaes que estamos transmitindo, por exemplo, um formulrio de busca.ComponentesPorm, neste exemplo, no temos nenhum elemento para capturar as informaes. Na verdade, somente amarcao da tag no mostra nenhum elemento visvel no navegador. Vamos supor que precisemosde uma informao como o nome do visitante do nosso site para guardar em um banco de dados. Vamosadicionar alguns elementos ao nosso formulrio anterior:Captulo 11 - Bootstrap e formulrios HTML5 - Formulrios a fundo - Pgina 182http://getbootstrap.com/components/#panelsMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptNome:LabelAdicionamos a marcao do elemento . Esse elemento uma tag de contedo, e seu texto exibidode maneira comum dentro do nosso formulrio, a nica diferena que essa marcao faz uma ligao comoutro elemento qualquer em nosso formulrio. Note que nosso label tem o atributo for, que recebe o valornome.Quando clicamos com o mouse sobre o texto marcado com a tag label, o elemento que tem o atributo idcom o mesmo valor que o atributo for do label selecionado para que possamos interagir com ele. Noexemplo, esse elemento vinculado ao label um campo de texto que declaramos com a tag input.Essa marcao de extrema importncia para a usabilidade e acessibilidade dos nossos formulrios.InputAmaioria dos elementos que utilizamos nos formulrios para capturar informaes dos usurios so da tag. 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 utilizamosdois muito comuns. A seguir, vamos detalhar os tipos aceitos para essa tag.textProvavelmente o tipo mais comum de input, o que tem o atributo type="text, utilizado quando queremosque o usurio envie uma informao textual simples, pois esse elemento no permite a entrada de quebrasde linha.Ao enviarmos o formulrio, a informao digitada pelo usurio acessvel no lado do servidor por meiodo atributo name, utilizado para identicar cada informao contida nos parmetros da requisio. Parater acesso informao digitada quando tratamos o formulrio com algum tipo de script, para validar ocontedo por exemplo, necessrio obter o contedo da propriedade value do objeto no DOM.passwordO input que recebe o atributo type="password similar ao anterior, do tipo text, com a diferena de queele no exibe exatamente o texto digitado pelo usurio, e sim uma srie de smbolos * ou outro, dependendodo navegador e sistema operacional.Captulo 11 - Bootstrap e formulrios HTML5 - Formulrios a fundo - Pgina 183Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptcheckboxO elemento input do tipo checkbox exibe uma caixa para marcao, muito utilizado quando temos umaopo que pode ser marcada como sim ou no, por exemplo Aceito os termos de contrato do usurio, ouManter a sesso ativa em formulrios de login.Apesar de muito utilizado com o valor true, possvel determinar qualquer valor para o checkbox.Aceito os termos do contrato.radioMenos de 5 anosMenos de 10 anosMenos de 15 anosMenos de 20 anosQuando 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.buttonO elemento input com o atributo type="button renderiza um boto dentro do formulrio, mas esse botono tem nenhuma funo direta nele e comumente utilizado para disparar eventos para a execuo descripts.O texto do boto determinado pelo valor do atributo value.submitCaptulo 11 - Bootstrap e formulrios HTML5 - Formulrios a fundo - Pgina 184Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptO elemento input com o atributo type="submit similar ao boto, mas quando acionado esse elementoinicia a chamada que envia as informaes do formulrio para o endereo indicado no atributo action do.image possvel substituir o boto de envio do formulrio por uma imagem, possibilitando criar um visual maisatrativo para o formulrio.resetO input com type="reset elimina os valores entrados anteriormente nos elementos de um formulrio, per-mitindo que o usurio limpe o mesmo. e A tag dos tipos button, submit e reset pode ser substituda pela tag . Nestecaso, o texto do boto passa a ser indicado como contedo da tag. Ainda assim necessrioespecicar o valor do atributo type, inclusive se ele for button:Clique aquileQuando necessrio que o usurio envie um arquivo para a aplicao no lado do servidor necessrio ouso do input do tipo le. Para o correto envio dos arquivos, muitas vezes tambm necessrio adicionar oatributo enctype="multipart/form-data" na tag .hiddenMuitas vezes precisamos enviar e receber informaes que no tmutilidade direta para o usurio e, portanto,no devem ser exibidos no formulrio. Para essa nalidade, existe o input do tipo hidden, que somentecarrega em si um valor.Captulo 11 - Bootstrap e formulrios HTML5 - Formulrios a fundo - Pgina 185Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptTextareaQuando desejamos que o usurio insira uma quantidade grande de informaes textuais, incluindo quebrasde linha, necessrio o uso da tag textareaSelect, Optgroup eOptionQuando desejamos que o usurio selecione entre diversas opes, com a possibilidade de exibilizar a ma-neira com que ele interage com o componente do formulrio, podemos utilizar a tag .BrasliaRio de JaneiroSo PauloEm sua congurao 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 exploradordo sistema operacional.BrasliaRio de JaneiroSo PauloCaso necessrio, dependendo do nmero de opes apresentadas ao usurio, pode ser interessante agrup-las:Asa NorteAsa SulVila MarianaCentroBotafogoCaptulo 11 - Bootstrap e formulrios HTML5 - Formulrios a fundo - Pgina 186Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptCentro11.7 Novos componentes doHTML5Com a nova especicao 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 textopermitindo a entrada de qualquer tipo de informao.A maioria dos novos tipos de componentes de formulrio foram criados para permitir que o navegadoradapte o mtodo de entrada para o mais adequado em cada um dos casos. Alguns desses componentes jso compatveis com navegadores de dispositivos mveis.emailO input do tipo email permite que os dispositivosmveis, principalmente, exibamum teclado adaptado parafacilitar esse tipo de entrada. Por exemplo, o iPhone exibe um teclado com o caractere @ e com as opes dedomnio .com.Captulo 11 - Bootstrap e formulrios HTML5 - Novos componentes do HTML5 - Pgina 187Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptnumberO input do tipo number, alm de exibir um teclado numrico em dispositivos mveis, nos navegadoresmodernos exibe um controle que permite incrementar ou decrementar o valor do campo clicando em umaseta para cima ou para baixo.Alm dessa diferena visual, possvel determinar valores mnimos, mximos e se h uma escala de valoresvlidos. No exemplo anterior, o elemento deve aceitar nmeros mltiplos de 5 com o limite do valor 100.urlOelemento input com tipo url permite que os dispositivos exibam um teclado como, no exemplo do iPhone,opes como www e .com.rangeO elemento input do tipo range exibe um controle deslizante nos navegadores modernos, permitindo umainterao 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 especicar um valormnimo, mximo e uma escala.A renderizao mais comum desse controle, em um Chrome:date,month, week, time, datetime e datetime-localOs 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 um calendrio. possvel especicar datas mnima emxima.Em geral, os navegadores devem oferecer alguma funcionalidade de escolha de datas para o usurio, comoo Chrome:Captulo 11 - Bootstrap e formulrios HTML5 - Novos componentes do HTML5 - Pgina 188Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptOu o iPhone:colorO elemento input do tipo color permite que seja exibido um color picker para o preenchimento do seuvalor. O Chrome no Mac, por exemplo, exibe o color picker padro do sistema:Captulo 11 - Bootstrap e formulrios HTML5 - Novos componentes do HTML5 - Pgina 189Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptsearchO input do tipo search exibe um campo especco 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).telO input do tipo tel foi especicado para coletar um nmero de telefone.Em dispositivos com teclados virtuais como smartphones e tablets, comum o teclado ser adaptado paraexibir apenas opes relevantes entrada de nmeros telefnicos, como no iPhone:Captulo 11 - Bootstrap e formulrios HTML5 - Novos componentes do HTML5 - Pgina 190Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript11.8 Novos atributosHTML5 em elementos de formulrioNa especicao do HTML5 esto denidos novos atributos pra os elementos de formulrio, visando imple-mentar algumas necessidades comuns que antes no eram possveis de serem atendidas puramente com amarcao do formulrio.autofocusSua presena indica que aquele campo deve iniciar com foco quando a pgina for carregada. O usurio jpode comear a digitar algo sem nenhum clique.placeholderOatributo placeholder exibe o texto contido em seu valor dentro do elemento do formulrio caso o seu valorseja vazio.autocomplete, list e datalist possvel implementar uma funcionalidade de sugesto de valores com mais facilidade.Captulo 11 - Bootstrap e formulrios HTML5 - Novos atributos HTML5 em elementos de formulrio - Pgina 191Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptA implementao de autocomplete sem o atributo list no campo, ligando-o a um datalist, vai utilizar os lti-mos valores utilizados em outros campos ou em outros formulrios, dando prioridade a valores adicionadosem inputs com o mesmo valor no atributo name.Existem diversas maneiras de utilizar os componentes de formulrios, tanto os novos do HTML5 como os jexistentes. Mesmo com a oportunidade de inovar e criar uma interao totalmente diferente do usurio comum formulrio, importante manter o mesmomtodo que adotamos anteriormente. Amarcao correta doformulrio facilita muito o uso dele em diversos navegadores e em outros tipos de clientes tambm, comopor exemplo navegadores especiais para decientes visuais.11.9 cones com glyphiconsO 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 umafonte normal.Para usarmos com Bootstrap bem simples:So 180 cones no total, das mais diversas razes. Basta olhar o nome da documentao e usar na pgina.Captulo 11 - Bootstrap e formulrios HTML5 - cones com glyphicons - Pgina 192Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptFigura 11.3: Alguns dos coneshttp://getbootstrap.com/components/#glyphiconsA vantagem de se usar fontes para cones que o desenho ca escalvel, como uma letra. Ele no perdequalidade em nenhum tamanho ou resoluo por ser vetorial. E, assim como uma letra, podemos aplicarefeitos de texto como sombras e cores.A desvantagem que cada cone s pode ter um path no desenho e uma nica cor. No possvel usar conescomplexos com fontes.11.10 Exerccios: formulrios1) O formulrio de compra possui campos para o cliente digitar informaes pessoais e informaes sobreo pagamento. Para melhor organizao, vamos separar os campos em dois eldsets.Captulo 11 - Bootstrap e formulrios HTML5 - Exerccios: formulrios - Pgina 193http://getbootstrap.com/components/#glyphiconsMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptVamos criar o logo depois do panel, e ainda dentro do container. Neste form, crie os dois eldsetsusando para identicar cada um. No nal, um boto cuidar do envio dos dados (vamos usarum btn-primary do Bootstrap).Dados pessoaisCarto de crditoConfirmar Pedido2) O primeiro eldset, dos Dados Pessoais, deve conter os campos Nome, Email, CPF e um checkbox parao usurio optar ou no por receber spam.Implemente os campos dentro do primeiro eldset. Use as classes do Bootstrap para formulrios. Usetambm um input email do HTML5.Dados pessoaisNome completoEmailCPFCaptulo 11 - Bootstrap e formulrios HTML5 - Exerccios: formulrios - Pgina 194Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptQuero receber spam da Mirror FashionRepare que cada campo possui um input e um label. Para agrup-los, usamos um div form-group doBootstrap. Cada input deve ter uma classe form-control.Teste a pgina e observe o estilo padro que ganhamos apenas por usar o Bootstrap.3) O eldset de dados do carto tem trs campos: um com cdigo do carto, outro com a bandeira do cartoe outro com data de validade. Neste ltimo, usaremos o input month do HTML5.Implemente os campos dentro do segundo eldset:Carto de crditoNmero - CVVBandeiraMasterCardVISAAmerican ExpressValidade4) Adicione o atributo placeholder do HTML5 nos campos email e CPF com dicas de preenchimento:...Captulo 11 - Bootstrap e formulrios HTML5 - Exerccios: formulrios - Pgina 195Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptAdicione o atributo autofocus do HTML5 no input nome:5) 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:Confirmar PedidoPara saber mais sobre os cones do Bootstrap: http://getbootstrap.com/components/#glyphicons6) Use outras classes do Bootstrap para ajustarmais detalhes. No boto, adicione a classe btn-lg para deixaro 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/#buttons7) (opcional) O Bootstrap tem outros recursos para formulrios, como os input groups. Teste trocando ocdigo do campo email para isso:Email@Implemente tambm em outros campos, inclusive usando cones do glyphicons.Veja mais opes do Bootstrap para formulrios: http://getbootstrap.com/css/#forms11.11 ValidaoHTML5Entre as muitas novidades de formulrios que vimos no HTML5, h ainda toda uma parte de validao dedados com restries expressas diretamente no cdigo HTML.Captulo 11 - Bootstrap e formulrios HTML5 - Validao HTML5 - Pgina 196http://getbootstrap.com/components/#glyphiconshttp://getbootstrap.com/css/#buttonshttp://getbootstrap.com/css/#formsMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptrequiredPodemos indicar na marcao do formulrio quando um campo de preenchimento obrigatrio.Esse atributo permite uma validao fraca no lado do cliente.patternConseguimos tambm especicar um formato requerido atravs do atributo pattern, adicionando uma ex-presso regular como valor:O atributo pattern tambm permite uma validao fraca do campo.Validao no CSSAmaioria dos novos componentes de formulrio e os atributos que funcionam como validadores de camposna verdade somente aplicam uma pseudo-classe especca no campo que no est atendendo ao padro ourequisito especicado.Essa pseudo-classe a :invalid, e pode ser utilizada para dar um retorno visual imediato caso o usurio noesteja 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 informaesdo 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. Essavericao e alterao do elemento submit pode ser feita por JavaScript e jQuery de maneira simples.11.12 Para saber mais: controlando as validaesHTML5A ideia da nova validao doHTML5 permitir que os navegadores j possuamuma forma simples de provervalidaes sem que os desenvolvedores precisem recorrer a complicadas bibliotecas JavaScript (algo comumem muitas pginas).Captulo 11 - Bootstrap e formulrios HTML5 - Para saber mais: controlando as validaes HTML5 - Pgina 197Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptNo entanto, muitas vezes, as opes padro do navegador no so exatamente o que precisamos, e queremosmudar 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 browserevt.preventDefault();// checa validade e mostra alertif (!this.validity.valid) {alert("Nome obrigatrio!");}};Isso nos permite trocar, por exemplo, todo o visual e forma de apresentao dos erros. E, o melhor, casoo usurio esteja com JavaScript desabilitado, ser executada a validao padro sem problemas. Um timofallback. (nas solues tradicionais de validao dom jQuery, por exemplo, tudo se perde quando o usuriodesabilita JavaScript).Outra forma de desabilitar a validao, afetando o formulrio inteiro, colocando o atributo novalidate natag .Alm de desabilitar completamente a validao do navegador, podemos apenas trocar a mensagem de erromas ainda usar o mecanismo e design padro:document.querySelector('input[type=email]').oninvalid = function() {// remove mensagens de erro antigasthis.setCustomValidity("");// reexecuta validaoif (!this.validity.valid) {// se invlido, coloca mensagem de errothis.setCustomValidity("Email invlido");}};Captulo 11 - Bootstrap e formulrios HTML5 - Para saber mais: controlando as validaes HTML5 - Pgina 198Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptSuporte nos navegadoresA validao HTML5 est implementada no Chrome, Firefox, Safari, Opera e IE10. Dos navega-dores mveis, temos suporte em Chrome, Firefox, Opera, IE e Blackberry:http://caniuse.com/form-validationSe voc quiser suportar navegadores mais antigos, recomendamos o uso de um polyll:https://github.com/aFarkas/webshim11.13 Exerccios: validao comHTML51) Adicione o atributo required nos campos Nome e CPF.Teste submeter o formulrio sem preencher esse campos.2) 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).3) Podemos estilizar no CSS quando um campo est invlido:.form-control:invalid {border: 1px solid #cc0000;}4) (opcional avanado) Implemente uma mensagem customizada para erro de email de invlido usando aAPI JavaScript das validaes HTML5.document.querySelector('input[type=email]').oninvalid = function() {// remove mensagens de erro antigasthis.setCustomValidity("");// reexecuta validaoif (!this.validity.valid) {// se invlido, coloca mensagem de errothis.setCustomValidity("Email invlido");}};Captulo 11 - Bootstrap e formulrios HTML5 - Exerccios: validao com HTML5 - Pgina 199http://caniuse.com/form-validationhttps://github.com/aFarkas/webshimMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript11.14 Grid responsivo do BootstrapUmas das diculdades mais comuns de um projeto front-end o posicionamento de elementos, sobretudoem designs multi coluna. A soluo mais comum uso de grids, uma ideia antiga que veio dos prpriosdesigners.Divide-se a tela em colunas e vamos encaixando os elementos dentro desse grid.Todo frameworkCSSmoderno traz um grid pronto para utilizao. Todo codigoCSS necessrio para corretoposicionamento j foi escrito e s precisamos usar as classes certas. O Bootstrap tem um grid pronto e vriasclasses para usarmos.O grid do Bootstrap trabalha com a ideia de 12 colunas e podemos escrever nosso cdigo escolhendo quantascolunas ocupar. Alguns exemplos:Essas classes de coluna so as que denem o tamanho de cada elemento na pgina com base nas 12 partes dogrid padro. Em cdigo:......No cdigo anterior, deixamos o primeiro DIV ocupando 4/12 da tela e o outro, 8/12. Repare que, para o gridfuncionar, ao redor das colunas usamos um div com class row. Ele necessrio.Podemos ainda criar grids dentro de grid, sempre obedecendo a diviso de 12 colunas em cada. Por exemplo:...Captulo 11 - Bootstrap e formulrios HTML5 - Grid responsivo do Bootstrap - Pgina 200Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript......Esse exemplo criou um segundo grid dentro da coluna da direita do primeiro. Nesse segundo grid h duascolunas ocupando metade cada uma (6/12). Mas como um grid est dentro do outro, na prtica, ele vaiocupar metade do tamanho do div que tem 8/12 de tamanho.ResponsivoUm dos pontos mais interessantes dos grids que eles so responsivos. Isso quer dizer que podemos aplicardiferentes layouts de colunas no nosso cdigo aomesmo tempo e cada um deles vai valer s em determinadasituao.Nos cdigos anteriores, por exemplo, usamos classes como col-md-6. Omd nessa classe signica que vamosocupar 6 colunas do grid apenas em telas maiores que 992px de largura. Em telas menores, automaticamentenosso grid ser de uma coluna s.E, claro, temos classes pra outros tamanhos de tela tambm. No Bootstrap temos essas famlias de classes degrids j prontas: col-xs- : Extra small. < 768px col-sm- : Small (tablets). >= 768px col-md- : Medium (Desktops). >= 992px col-lg- : Large (Desktops). >= 1200pxPodemos aplicar mais de uma classe ao mesmo tempo no mesmo elemento:...Captulo 11 - Bootstrap e formulrios HTML5 - Grid responsivo do Bootstrap - Pgina 201Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript...Nesse exemplo, nosso grid divide no meio (6 pra cada lado) em telas muito pequenas mas depois divide em4 e 8 pra telas um pouco maiores.11.15 Exerccios: grids1) Nosso design mobile-rst funciona muito bem em telas pequenas. Mas conforme vamos aumentando obrowser, notamos que tudo ca meio grande. O panel e o form esticam 100%, o que um exagero emtelas maiores.Vamos usar grids do Bootstrap para transformar nosso design em 2 colunas em telas maiores. Por padro,o Bootstrap j traz media queries para adaptao em 768px. A ideia deixar o panel ocupar 4/12 e o formocupar 8/12.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.Faa essas alteraes e cuidado com o resultado nal e os milhes de divs misturados. O cdigo devecar mais ou menos assim:Teste a pgina e redimensione para um tamanho em torno de 768px pra ver o resultado.Captulo 11 - Bootstrap e formulrios HTML5 - Exerccios: grids - Pgina 202Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2) Repare que o Bootstrap ajusta vrias coisas responsivamente pra gente de maneira automtica. Alm deaplicar as classes do grid, repare como os tamanhos e fontes aumentam de acordo com a resoluo, semprecisarmos fazer nada.Faa os testes.3) Quando aumentamos bastante a tela, tudo ainda se ajusta na proporo de 4 pra 8 que denimos. Mas oformulrio ca grande demais. Em telas maiores, talvez seja legal deixar o formulrio em 2 colunas.Vamos usar outras classes do grid do Bootstrap que se aplicam em layouts maiores que 992px. Vamosdividir o formulrio em 2 partes iguais, ou seja 6/12 (lembre que o grid do Bootstrap tem 12 partes comobase). Conseguimos isso tudo usando a classe col-md-6.As mudanas necessrias so: Crie um div com classe row ao redor dos 2 eldsets; Aplique a classe col-md-6 em cada um dos eldsets.No nal, a estrutura deve estar parecida com essa:........Teste a pgina e redimensione para um tamanho em torno de 992px pra ver o resultado.4) (opcional) possvel usarmais de uma classe de grid aomesmo tempo nomesmo elemento. Por exemplo:dividimos a tela em 4/12 para o painel e 8/12 para o formulrio. Mas se, em telas maiores, voc quisermudar essa proporo para 3/12 e 9/12, basta adicionar as classes col-lg-3 e col-lg-9 em conjunto as quetnhamos antes.Implemente essa mudana no projeto.Exemplo:A srie col-lg- aplica em resolues acima de 1200px.Para saber mais sobre os grids do Bootstrap: http://getbootstrap.com/css/#gridCaptulo 11 - Bootstrap e formulrios HTML5 - Exerccios: grids - Pgina 203http://getbootstrap.com/css/#gridMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript5) (opcional) Alm de alterar o grid nas diferentes resolues, o Bootstrap tambm permite esconder/exibircertos elementos apenas em uma resoluo especca.Por exemplo: imagine que, para otimizar o espao pequeno no design para smartphone, vamos escondera imagem do produto. Podemos fazer isso adicionando a classe hidden-xs na . Isso vai esconder oelemento em resolues menores que 768px.Para saber mais sobre as classes auxiliares para responsivo do Bootstrap: http://getbootstrap.com/css/#responsive-utilities11.16 Para saber mais: componentes JS do BootstrapAlm de componentes CSS puro do Bootstrap como panel e jumbotron, temos outros componentes maisavanados que envolvem interatividade e JavaScript.H muita coisa disponvel por padro no Bootstrap, pelo menos os componentes mais comuns como janelamodal, galeria de imagens, dropdowns, menus de navegao e mais.http://getbootstrap.com/javascript/No exerccio, vamos usar o menu superior (navbar).11.17 Exerccios opcionais: navbar e JavaScript1) Um componente muito famoso do Bootstrap seu menu superior, chamado de navbar. O HTML umpouco 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:Mirror FashionSobreAjudaPerguntas frequentesEntre em contatoTeste o resultado no navegador.2) Repare que o menu no gruda no jumbotron por ter uma margem por padro. Sem problemas, com umCSS bem simples podemos customizar o componente.Captulo 11 - Bootstrap e formulrios HTML5 - Para saber mais: componentes JS do Bootstrap - Pgina 204http://getbootstrap.com/css/#responsive-utilitieshttp://getbootstrap.com/css/#responsive-utilitieshttp://getbootstrap.com/javascript/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptRemova a margem da navbar adicionando esse CSS:.navbar {margin: 0;}Alm disso, adicione no a classe navbar-static-top.Teste novamente.3) Teste o menu em resolues menores. Note que o Bootstrap ajusta automaticamente o navbar em telasmenores. Por padro, o comportamento mudar o menu de horizontal para vertical em mobile.Veja esse comportamento redimensionando o browser.4) Uma outra soluo para menus em telas pequenas de juntar as opes em uma espcie de dropdownque s abre quando ativado. Isso , criar um boto para ativar o menu (geralmente com o famoso conedo sanduche). bem simples fazer isso com Bootstrap, a funcionalidade est toda pronta.Para fazer o menu colapsar em telas pequenas, basta adicionar 2 classes no : a collapse e a navbar-collapse.Se voc testar agora, vai notar que o menu some nas telas menores. Para exibi-lo, precisamos fazer oprximo passo: criar o cone que ativa o menu.Dentro do navbar-header, logo abaixo do , crie um boto de ativao. O boto apenas o textomenu mas possui a classe navbar-toggle. Alm disso, dois outros parmetros conguram seu funcio-namento com o collapse que usamos antes:menuSe 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 umalinha de cdigo JS sequer, mas para tudo funcionar precisamos adicionar o JavaScript do Bootstrap.No m da pgina, logo antes de fechar o , chame o arquivo do Bootstrap e do jQuery:Teste novamente e veja o plugin funcionando. Usamos o JavaScript do Bootstrap implicitamente.Captulo 11 - Bootstrap e formulrios HTML5 - Exerccios opcionais: navbar e JavaScript - Pgina 205Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptAtributos customizados noHTML5At a verso 4 do HTML, no havia uma forma padronizada de colocar atributos customizados.A partir do HTML5, atributos comeando com data- em qualquer tag so considerados atribu-tos customizados e no quebram a validade do nosso cdigo HTML. Esses atributos so bastanteteis para passar informao para um cdigo Javascript, como zemos agora, passando informa-o para o cdigo do Bootstrap.5) H muitas opes possveis para o navbar. Por exemplo, podemos inverter as cores e usar um esquemamais escuro apenas trocando a classe navbar-default pela classe navbar-inverse.Para saber mais sobre o navbar: http://getbootstrap.com/components/#navbar6) 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 um tema chamado atly, open source. Para us-lo, basta trocar o bootstrap.css peloarquivo dele no head:7) (opcional) Use cones do glyphicons no menu. Basta coloc-los dentro dos itens que quiser. Algumassugestes:Outra sugesto trocar a palavra menu que usamos no navbar colapsado pelo cone do sanduche: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/#glyphicons8) (opcional) Troque a classe navbar-static-top pela navbar-xed-top. Repare que o menu ca xo no topomesmo com scroll.Voc talvez queira aplicar um padding no body pro contedo no subir:body { padding-top: 70px; }9) (opcional) No navbar-header, use um logo da Mirror Fashion em vez de texto.Captulo 11 - Bootstrap e formulrios HTML5 - Exerccios opcionais: navbar e JavaScript - Pgina 206http://getbootstrap.com/components/#navbarhttp://getbootstrap.com/components/#glyphiconsMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript11.18 Para saber mais: outros frameworks CSSO Bootstrap no o nico framework CSS do mercado. talvez o mais famoso e commais usurios, mas hmuitas 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. Umboto principal por exemplo:Clique aquiClique aquiClique aquiClique aqui11.19 Discussoemaula: osproblemasdoBootstrapequandono us-loCaptulo 11 - Bootstrap e formulrios HTML5 - Para saber mais: outros frameworks CSS - Pgina 207http://foundation.zurb.com/http://semantic-ui.com/http://purecss.io/Captulo 12jQueryO primeiro problema para todos, homens e mulheres, no aprender, mas desaprender Gloria SteinemPor conta das diculdades enfrentadas pelos programadores JavaScript para pginas Web, foi criada umabiblioteca 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 deum mesmo cdigo com diversos navegadores. Uma maneira de se atingir esse objetivo criando funesque vericam quaisquer caractersticas necessrias e permitam que o programador escreva um cdigo nicopara todos os navegadores.Alm dessa vantagem, o jQuery, que hoje a biblioteca padro na programao front-end para Web, trazuma sintaxe mais uida nas tarefas mais comuns ao programador que so: selecionar um elemento dodocumento e alterar suas caractersticas.12.1 jQuery - A funo $O jQuery uma grande biblioteca que contm diversas funes que facilitam a vida do programador. Amaisimportante delas, que inicia a maioria dos cdigos, a funo $.Com ela possvel selecionar elementos commaior facilidade, maior compatibilidade, e commenos cdigo.Por exemplo:// JavaScript "puro"var cabecalho = document.getElementById("cabecalho");Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptif (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 omodomais compatvelpossvel para adicionar o evento ao elemento cujo id cabecalho.Existem diversas funes que o jQuery permite que utilizemos para alterar os elementos que selecionamospela 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 aoseletor CSS que utilizaramos para selecionar o elemento de id cabecalho. Na sequncia chamamos a funocss e passamos um objeto como argumento, essa funo adicionar ou alterar as informaes desse objetocomo propriedades de estilo do elemento que selecionamos com a funo $. Em seguida chamamos maisuma funo, a addClass, que vai adicionar o valor selecionado ao atributo class do elemento com o idcabecalho.Dessa maneira, possvel fazer muito mais commuito menos cdigo, e ainda por cima de uma maneira quefunciona em diversos navegadores.12.2 jQuery SelectorsUm dos 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, ostemos todos nossa disposio.Por exemplo, se quisermos esconder todas as tags lhas de um , basta:Captulo 12 - jQuery - jQuery Selectors - Pgina 209Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript$('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 imediatamente filho de um $('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 thsLembre-se de que a funo que chamamos aps o seletor aplicada para todos os elementos retornados.Veja:// forma ineficientealert($('div').text() + $('p').text() + $('ul li').text());// forma eficiente :Dalert($('div, p, ul li').text());A funo text() chamada para todos os s, s, e s lhos de s.12.3 Filtros customizados e porDOMExistem diversos seletores herdados do css que servem para selecionar elementos baseados noDOM. Algunsdeles so:Captulo 12 - jQuery - Filtros customizados e por DOM - Pgina 210Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript$('div > p'); // s imediatamente filhos de $('p + p'); // s imediatamente precedidos por outro $('div:first-child'); // um elemento que seja o primeiro filho$('div:last-child'); // um elemento que seja o ltimo filho$('div > *:first-child'); // um elemento que seja o primeiro filho direto de uma $('div > *:last-child'); // um elemento que seja o ultimo filho direto de uma $('div p:nth(0)'); // o primeiro elemento filho de uma $('div:empty'); // s vazios12.4 Utilitrio de iterao do jQueryO jQuery traz tambm entre suas diversas funcionalidades, uma funo que facilita a iterao em elementosde um Array com uma sintaxe mais agradvel:$("#menu-departamentos li").each(function (index, item) {alert(item.text());});A funo each chamada logo aps um seletor executa a funo que passamos como argumento para cada umdos itens encontrados. Essa funo precisa de dois argumentos. O primeiro ser o ndice do elemento atualna coleo (0 para o primeiro, 1 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 prprioobjeto $. Passamos dois argumentos, o primeiro o Array que queremos percorrer e o segundo a funo quedesejamos executar para cada um dos itens do Array.12.5 Caractersticas de execuoPara utilizarmos o jQuery em nossos projetos com maior segurana, devemos tomar alguns cuidados.Captulo 12 - jQuery - Utilitrio de iterao do jQuery - Pgina 211Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptImportaoAntes de mais nada necessrio incluir o jQuery em nossa pgina. S assim o navegador executar seucdigo para que possamos utilizar suas funcionalidades em nosso cdigo.Por isso necessrio que a tag do jQuery seja a primeira de todas na ordem de nosso documento:Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptCarregamento de contedo com AjaxNo nosso exerccio, vamos apenas esconder ou exibir o contedo usando CSS e JavaScript. Emalguns 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 dinamicamentena pgina via JavaScript. Ajax e outras tcnicas de JavaScript avanadas so tpicos do cursoWD-47 da Formao Web da Caelum:http://www.caelum.com.br/curso/wd4712.7 Exerccios: jQuery na home1) Aumente a quantidade de produtos exibidos nos painis da home para 12. 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 metadee mostrar apenas se o usurio quiser ver.2) Crie um no nal de cada DIV painel, logo aps a lista . Esse ser o boto responsvel porexibir os produtos.Mostra maisNo 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 zemos a funcionalidade em JavaScript para mostrar os produtos. Mas a pgina usvel e vlida mesmo nesse caso. A ideia que, na falta de JavaScript, todos os produtos sejam exibidose o boto esteja escondido.3) Implemente a funcionalidade de compactar o painel de produtos para mostrar apenas os 6 primeiros porpadro. 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 12 - jQuery - Exerccios: jQuery na home - Pgina 213http://www.caelum.com.br/curso/wd47Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptEssa classe, claro, s vai fazer efeito se adicionarmos ela na pgina. Para testar, v no div com classe painele adicione a classe painel-compacto do lado.4) Estamos sem JavaScript ainda na pgina. E, j que adicionamos a classe painel-compacto direto noHTML, quebramos a experincia do usurio nesse caso. Perceba que os produtos adicionais cam es-condidos e boto aparece.Mas nada funciona! Pssima experincia.Claro que, nesse caso, porque no implementamos ainda. Mas imagine o cenrio onde, mesmo comtudo implementado, o JavaScript no carrega, acontece um erro ou o usurio desabilitou.5) Vamos implementar a funcionalidade em JavaScript. O primeiro passo remover a classepainel-compacto do HTML. Como ela uma classe atrelada a funcionalidade JS, vamos adicion-la comjQuery, apenas se o JS for executado.Primeiro, vamos importar o jQuery na home. Inclua a seguinte linha imediatamente antes da importaodo home.js:Agora, no home.js, faa:$('.novidades').addClass('painel-compacto');O resultado visual parece o mesmo. Mas reita sobre as implicaes de progressive enhancement, essen-cial para um projeto de qualidade.6) 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.7) (opcional) Implemente a mesma funcionalidade para o painel da direita, omais-vendidos.8) (opcional trabalhoso) Podemos estilizar o boto de mostrar mais produtos com regras CSS3 que apren-demos. Uma sugesto:.painel button {/* posicionamento */float: right;margin-right: 10px;padding: 10px;/* estilo */background-color: #333;Captulo 12 - jQuery - Exerccios: jQuery na home - Pgina 214Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptborder: 0;border-radius: 4px;box-shadow: 1px 1px 3px rgba(30,30,30,0.5);color: white;font-size: 1em;text-decoration: none;text-shadow: 1px 0 1px black;/* animao*/transition: 0.3s;}.painel button:hover {background-color: #393939;box-shadow: 1px 0 20px rgba(200,200,120,0.9);}E at mais frescuras, se estiver disposto:.painel button {color: white;position: relative;margin-bottom: 10px;}.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;Captulo 12 - jQuery - Exerccios: jQuery na home - Pgina 215Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript}12.8 O elemento output doHTML5Na 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 napgina 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 mudarde 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 HTML5, temos uma tag nova com valor semntico exato pra essa situao: o . Essa tag repre-senta a sada de algumclculo ou valor simples obtido a partir de umoumais componentes de um formulrio.Ele tem um atributo for que aponta de qual elemento saiu o valor.42Visualmente, 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 42 estaticamente. O que precisamos atualizar esse valor toda vez que o valor doinput range mudar. Pra isso, precisamos de JavaScript. E vamos implementar com jQuery no exerccio aseguir.12.9 Exerccios: mostrando tamanho do produto com jQuery1) Na pgina produto.php, adicione o elemento output do HTML5 logo aps o input range, ainda dentrodo fieldset de escolha de tamanho.42Repare que esse elemento no tem visual especco e tambm no atualiza seu valor sozinho. Vamosimplementar isso via JavaScript, usando jQuery.2) O preenchimento inicial e atualizao do valor no output deve ser feita via JavaScript. bastante simples:quando o input range mudar de valor (evento oninput), pegamos seu valor e jogamos no output.Para escrever o JavaScript, voc pode criar umnovo arquivo produto.js e import-lo na pgina. Ou, comoo cdigo bem pequeno, se preferir, pode escrever direto num elemento na pgina.O importante importar o jQuery antes do nosso cdigo, como zemos antes:Captulo 12 - jQuery - O elemento output do HTML5 - Pgina 216Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptO 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.IE10Para suportar o IE10, precisamos colocar o evento onchange. O correto no HTML5 seria usar oevento oninput, que at funciona melhor nos browsers modernos. Se quiser suportar os dois nojQuery, 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, alterara 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);3) Estilize o output para ter um design mais ajustado a nossa pgina de produto:.tamanhos output {display: inline-block;height: 44px;width: 44px;line-height: 44px;text-align: center;border: 3px solid #666;border-radius: 50%;color: #555;}12.10 Plugins jQueryAlm 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/Captulo 12 - jQuery - Plugins jQuery - Pgina 217http://plugins.jquery.com/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptCada plugin um arquivo JavaScript que voc inclui na pgina e adiciona uma funcionalidade especca.Muitos exigem que escrevamos um pouco de cdigo pra congurar seu uso; outros so mais plug and play.Voc vai precisar consultar a documentao do plugin especco quando for usar.12.11 Exerccios: plugin1) Um plugin que podemos usar na nossa pgina mscaras numricas para digitar em campos como CPFou CEP. Isso ajuda bastante o usurio.Para usar esse plugin, basta invocar seu arquivo JavaScript no nal da pgina do checkout, logo aps achamada do jQuery e do bootstrap.js:2) Cada campo que for usar uma mscara numrica precisa denir o atributo data-mask com o formato aser usado.No do CPF, adicione o atributo:data-mask="999.999.999-99"3) Nos campos do nmero do carto com cdigo de vericao, podemos usar:data-mask="9999 9999 9999 9999 - 999"12.12 Exerccios opcionais1) Refaa os exerccios da home da validao da busca e do banner usando jQuery. Tente ver como o cdigoca bem menor e mais legvel.Captulo 12 - jQuery - Exerccios: plugin - Pgina 218Captulo 13Integraes com servios WebPessoas viviam em fazendas, depois foram viver nas cidades. Agora todos ns vamos viver na Internet Sean Parker13.1 Web 2.0 e integraesBoa parte do grande poder daWeb, de estarmos conectados o tempo todo, o de permitir a integrao entreas pginas. A Web nasceu com esse conceito de tudo interligado, por meio dos links.Mas a talWeb 2.0 trouxe ideias aindamais complexas. Interligar pginas e servios diferentes, criando novosresultados 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.13.2 iframesUma das formas de se fazer esse tipo de integrao com o uso da tag . Ela nos permite embutir ocontedo de uma outra pgina no meio da nossa muito facilmente:Podemos incluir pginas internas ou externas. E quando se trata das externas, fcil usar esse recurso paraincluir componentes reaproveitveis de outros servios. Como mapas.Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript13.3 Vdeo embutido com YouTubeO YouTube prov uma integrao muito fcil com nossas pginas. Podemos incluir um vdeo qualquer praser tocado diretamente em nossa pgina.Basta entrar no YouTube e copiar o endereo de um que eles disponibilizam para ser embutido nanossa pgina.Vamos fazer isso em nosso projeto.13.4 Exerccios: iframe1) Acesse o vdeo institucional da Mirror Fashion: http://youtu.be/Tb06abHE4hYVamos embutir o vdeo em nossa pgina Sobre, no meio do texto explicativo. Para obter o cdigo deembutir no YouTube, localize a opo Share/Compartilhar e v na aba Embed. Ele vai te dar o cdigoHTML do iframe.Copie o cdigo do iframe e cole na pgina Sobre onde achar melhor. Teste a pgina.13.5 Exerccio opcional: GoogleMaps1) O Google Maps possui recurso parecido de embutir um mapa completo atravs de um iframe.Abra o GoogleMaps no seu navegador e acesse um endereo que usaremos para o site daMirror Fashion.Clique em compartilhar e copie o cdigo que aparece na opo HTML ( um iframe).Captulo 13 - Integraes com servios Web - Vdeo embutido com YouTube - Pgina 220http://youtu.be/Tb06abHE4hYMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript2) Na pgina sobre.html, adicione o iframe copiado no ponto que achar mais conveniente para exibir prousurio:Abra a pgina e veja o mapa l.13.6 Boto de curtir do FacebookBoa parte dos sites atuais possui a funcionalidade de curtir do Facebook. um boto simples mas integradocom a rede social que permite aos usurios curtirem a pgina atual e compartilhar essa informao em seuspers. uma poderosa ferramenta de marketing, j que permite a recomendao pessoal de produtos e servios demaneira viral.Incluir essa funcionalidade no nosso site bastante simples. O Facebook prov umcdigo JavaScript eHTMLpara copiarmos na nossa pgina, onde podemos passar diversas conguraes.O boto representado por um div vazio cheio de parmetros:Mas s esse div vazio, obviamente, no far o boto aparecer. Precisamos tambm importar um arquivoJavaScript deles e rod-lo:(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'));Captulo 13 - Integraes com servios Web - Boto de curtir do Facebook - Pgina 221Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptEsse cdigo colocado uma vez s no nal 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 oboto e j d o cdigo pronto para ser copiado:https://developers.facebook.com/docs/reference/plugins/like/13.7 Exerccios: Facebook1) Congure o script do Facebook na pgina de Produto. Antes de fechar a tag body, adicione:(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'));2) O boto em si um div que devemos colocar na pgina onde queremos exibi-lo. Para ns, coloque logoaps os elementos de ttulo e preo do produto.Teste a pgina e veja o boto renderizado.3) (opcional) Posicione o boto melhor na pgina usando CSS.13.8 Para saber mais: TwitterVoc tambm pode acrescentar o boto de postar tweet. Basta seguir a documentao do Twitter:https://dev.twitter.com/docs/tweet-buttonO boto em si um link que ser transformado pelo script:Captulo 13 - Integraes com servios Web - Exerccios: Facebook - Pgina 222https://developers.facebook.com/docs/reference/plugins/like/https://dev.twitter.com/docs/tweet-buttonMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptTweetE o script deve ser colocado no nal da pgina tambm:!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");13.9 Para saber mais: Google+Podemos tambm colocar o boto de +1 do Google+. Para obter o cdigo, basta ir em:http://www.google.com/webmasters/+1/button/O boto um div vazio, parecido com o do Facebook:E o script deve ser colocado no nal da pgina: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);})();Alm disso, o Google+ possui metadados prprios diferentes daqueles do OpenGraph:Captulo 13 - Integraes com servios Web - Para saber mais: Google+ - Pgina 223http://www.google.com/webmasters/+1/button/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript13.10 Exerccios opcionais: Twitter eGoogle+1) Acrescente o boto do Twitter na pgina. Obtenha o cdigo em: https://dev.twitter.com/docs/tweet-buttonOu use o boto vertical com:TweetAlm disso, no nal da pgina, importe o script do Twitter:!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");2) Coloque tambm o +1 do Google, cujo cdigo est em:http://www.google.com/webmasters/+1/button/13.11 Fontes customizadas com@font-faceFontes 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 2.1 possvel incorporar novas fontes declarando a propriedade @font-face indicandoa URL onde o navegador pode baixar aquela fonte:@font-face {font-family: "Minha Fonte";Captulo 13 - Integraes com servios Web - Exerccios opcionais: Twitter e Google+ - Pgina 224https://dev.twitter.com/docs/tweet-buttonhttps://dev.twitter.com/docs/tweet-buttonhttp://www.google.com/webmasters/+1/button/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptsrc: url("minhafonte.ttf");}E, surpreendentemente, essa funcionalidade existe desde o Internet Explorer 4.Mas nem tudo so ores. O suporte entre navegadores um imenso problema. Cada um suporta um tipode arquivo. Fontes true type, por exemplo, padro entre designers, s suportado a partir do IE9. O IEusava fontes em formato EOT, outros navegadores TTF, o iPhone s SVG e ainda surgiu um terceiro formatoWOFF, que agora faz parte da especicao.13.12 Servios de web fontsLidar com essas diferenas entre navegadores um problema, e isso sem contar a diculdade de se obter asfontes legalmente em vrios formatos e servi-las corretamente e de maneira otimizada.Ultimamente surgiram servios de web fonts de terceiros, que oferecem toda a infraestrutura necessria parausarmos fontes na Web sem problemas e sem precisarmos instalar nada. As fontes so servidas direto dosservidores 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 imensocom 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, maspossui excelentes opes e muito fcil de ser integrado a uma pginaWeb, bastando importar umCSS delese usar a fonte.13.13 Exerccios: GoogleWeb Fonts1) Vamos usar duas fontes do Google Web Fonts na nossa pgina inicial. Uma fonte base PT Sans e outrapara os ttulos dos painis, Bad Script.Importe as fontes via CSS no topo do nosso Index:Use as fontes no estilos.css referenciando-as pelo nome:body {font-family: 'PT Sans', sans-serif;}Captulo 13 - Integraes com servios Web - Servios de web fonts - Pgina 225http://typekit.com/https://www.google.com/fontsMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript.painel h2 {font-family: 'Bad Script', sans-serif;}Abra a pgina no navegador e veja as mudanas visuais.2) (opcional) Navegue no catlogo de fontes doGoogle emhttps://www.google.com/webfonts e escolha umaoutra fonte para usarmos no ttulo da pgina de produtos.Captulo 13 - Integraes com servios Web - Exerccios: Google Web Fonts - Pgina 226https://www.google.com/webfontsCaptulo 14Apndice - Otimizaes de front-endA esperana...: um sonho feito de despertares AristtelesEstudos de diversas empresas ao redor do mundo j provaram que sites rpidos, alm de mais prazerosos deusar, trazem mais converses, vendas e usurios felizes.A Amazon, por exemplo, descobriu que cada 100ms de melhora na velocidade de carregamento da pginatrazia um crescimento de 1% em seu faturamento.O Yahoo! provou que cada 400ms de melhora em sua homepage provoca um aumento de 9% no trfego dosusurios.A Mozilla tornou suas pginas 2.2s mais rpidas e, com isso, causou um aumento de 15% nos downloads doFirefox. So 60 milhes de downloads a mais por ano.O Google descobriu que aumentar o tempo de carregamento da pgina de busca de 0.4s para 0.9s ao subir onmero de resultados de 10 para 30 diminua o trfego em 20%.At a Caelum j fez experimentos em seu Site. No nosso caso, uma pgina que tinha tempo de carregamentode 6s em comparao com uma de 2s causava uma perda de 18% na taxa de converses.Otimizao coisa de programadoresUm dos maiores erros a se cometer com relao performance pensar que um problema exclusivo daprogramao da parte server-side do projeto. Certamente um cdigo ruim no servidor pode causar imensosgargalos de performance. Uma busca mal feita no banco de dados, um algoritmo pesado de executar etc.Na esmagadoramaioria das situaes, a realidade que o processamento server-side responsvel pormenosde 10% do tempo total de carregamento de uma pgina. A maior parte dos gargalos de performance est emprticas client-side!Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptUm estudo que zemos com 100 Sites de participantes de uma conferncia de tecnologia de alto nvel tcnico- a QCon SP de 2011 - trouxe dados interessantes. Nessa amostra, o tempomdio de carregamento da pginaera de 9s (com casos bem graves, demorando mais de 30s). Mesmo assim, 75% dos Sites executavam emmenos de 400ms no servidor. Os outros 8s so gastos em outros pontos, muito ligados a prticas client-sideque veremos.14.1 HTML eHTTP - Como funciona aWorldWideWeb?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 entenderuma srie de tcnicas e conceitos, resultando em maior qualidade na criao de pginas, alm de contribuirpara a conana do programador ao enfrentar um novo desao.A primeira coisa que devemos levar em considerao 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 obtere exibir ao usurio nal. O cliente deve ser informado de qual o endereo do recurso necessrio em deter-minado momento, normalmente o usurio nal prov essa informao entrando um endereo na barra deendereos do navegador, ou clicando em um link.Esse endereo conhecido como URL (Universal Resource Locator), por exemplo:http://209.85.227.121:80/index.htmlO endereo exemplicado composto por 4 partes bsicas. A primeira delas o protocolo de comunicao aser utilizado para a obteno do recurso. No exemplo acima o protocolo requerido oHTTP. A comunicaoentre 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 le, de leituradireta de arquivo quando desejamos obter um recurso acessvel diretamente pelo computador sem utilizaruma 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 quequeremos) e a porta de comunicao com o servidor. Os servidores Web utilizam a porta 80 por padro,ento no exemplo poderamos ter omitido essa informao que a comunicao seria feita com sucesso.O endereo IP um cdigo composto de 4 octetos representados em formato decimal separados por umponto, um nmero um tanto difcil de ser memorizado, (a prxima gerao de endereos IP, criada paraevitar o m dos endereos disponveis formada por 8 grupos de 4 dgitos hexadecimais separados por :,por exemplo: 2001:0db8:85a3:08d3:1319:8a2e:0370:7344) por isso aWeb utiliza servidores de nomeaode domnios (DNS), para que o usurio nal possa informar um nome em vez de um nmero e uma porta,por exemplo www.caelum.com.br.Captulo 14 - Apndice - Otimizaes de front-end - HTML e HTTP - Como funciona a World Wide Web? - Pgina 228Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptA quarta parte o caminho do recurso que desejamos obter dentro do servidor. No nosso exemplo estamossolicitando o arquivo index.html, que o nome padro de arquivo para a pgina inicial de um Site, e, nessecaso, tambm poderia ser omitido. A adoo desses valores padres permite que para obtermos a pginainicial do site da Caelum, por exemplo, os usurios nais digitem somentewww.caelum.com.br na barra deendereos de seu navegador.O cicloHTTPConhecemos um pouco sobre URLs, e as utilizaremos quando formos adicionar links e recursos externosem 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).A correta comunicao entre os dois lados do ciclo depende de uma srie de informaes. UmHTTP requestleva 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 nalidades. Nossofoco no uso do HTTP para pginas da Web que podemos acessar de um navegador. Alguns navegadoresincluem 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 onavegador Firefox.Na imagem esto destacadas as informaes mais relevantes da requisio. A primeira delas a palavraGET. GET um dos mtodos suportados pelo protocolo HTTP para realizar a comunicao, e ele deve serutilizado quando queremos obter um recurso que o servidor tem acesso. Caso o servidor encontre o recursoque 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 recursoque o cliente espera obter (Accept). No exemplo, esperamos encontrar uma pgina HTML pelo endereowww.caelum.com.br.Com essas informaes, o servidor processa o pedido e prepara uma response (resposta). Essa respostacontm uma srie de informaes importantes para que o cliente possa tomar as decises necessrias e, nocaso de sucesso na comunicao, exibir o recurso para o usurio.Captulo 14 - Apndice - Otimizaes de front-end - HTML e HTTP - Como funciona a World Wide Web? - Pgina 229Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptAs informaes mais importantes, no nosso caso, so o cdigo da resposta e o tipo do recurso encontrado(Content-Type). No nosso exemplo, o cdigo 200 indica que o recurso foi localizado com sucesso e includona resposta.Todas essas informaes que vimos at aqui fazem parte dos cabealhos da requisio e da resposta. Soinformaes 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, assim como em toda requisio solicitando uma pginaWeb, o corpo da resposta contmas informaes marcadas para exibio correta no navegador.14.2 Princpios de programao distribudaUma pgina Web uma aplicao distribuda. Isso signica que h uma comunicao via rede entre doispontos. No caso, o navegador e o servidor da pgina.E, como toda aplicao distribuda, h alguns princpios bsicos de performance. Quando h comunicaoremota envolvida, em geral, queremos:Diminuir o volume de dados trafegados entre as partes.eDiminuir o nmero de chamadas remotas.14.3 Ferramentas de diagnstico - YSlow e PageSpeedO primeiro passo saber o que melhorar. H diversas boas prticas pregadas na literatura de performanceWeb. Melhor ainda a existncia ferramentas automatizadas para diagnstico que analisam sua pgina e dodicas sobre o qu e comomelhorar. H at uma nota de 0 a 100 para voc saber o quo bem est nas prticasde otimizao.Captulo 14 - Apndice - Otimizaes de front-end - Princpios de programao distribuda - Pgina 230Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptAs mais famosas ferramentas so duas extenses, a YSlow feita pelo pessoal do Yahoo! e a PageSpeed feitapelo Google. Ambas so extenses para o Firefox e para Chrome - mas rodam melhor no Firefox. Parainstal-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.htmlO 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/YSlowAbra o Firebug e clique no YSlow. Ele te mostra uma nota para as otimizaes da pgina e sugestes do quemelhorar.D uma olhada nas regras. Note que h algumas que envolvem programao no servidor, como congurarcompresso GZIP ou acertar os headers HTTP. uma boa conversar com os programadores do projeto paratambm 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/minicar nossosCSS e JavaScript, algo que veremos no tpico seguinte.PageSpeedAbra o Firebug e v na aba do PageSpeed. Ele lhe mostra uma nota para a pgina e diversas prticas deotimizao. Aquelas que esto em vermelho so as que voc deveria fazermas no fez. Amarelos so algumassugestes e verdes so as que voc est bem - mas s vezes h mais sugestes at nessas.Para saber mais: WebPageTest.orgOutra 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 lugaresdo mundo e nos d mtricas de tempo de carregamento, e at um vdeo mostrando a performance de acordocom o tempo.Se voc j tem a pgina publicada em algum endereo, bem interessante testar essa ferramenta tambm.14.4 Compresso e minificao de CSS e JavaScriptDurante todo o curso, aprendemos diversas boas prticas de codicao CSS e JavaScript. E, como todaprogramao, um ponto importante manter a legibilidade do cdigo.Dar bons nomes a variveis, escrever bons comentrios, escrever cdigo identado, com bom espaamentovisual etc.Captulo 14 - Apndice - Otimizaes de front-end - Compresso e minicao de CSS e JavaScript - Pgina 231http://developer.yahoo.com/yslow/http://code.google.com/speed/page-speed/download.htmlhttps://developers.google.com/pagespeed/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptEntretanto, nada disso necessrio no momento do navegador renderizar a pgina. Um comentrio nocdigo completamente intil na hora da execuo. Assim como espaos, identao ou nomes de variveislegveis.Mais que isso, todas essas prticas adicionam bytes e mais bytes aos arquivos CSS e JavaScript. Arquivosesses 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 oque chamamos deminicao dos arquivos CSS e JavaScript.Rodamos um programa compressor nos nossos arquivos para tirar todos esses bytes desnecessrios parasimples execuo. O resultado so arquivos CSS e JavaScript completamente idnticos em funcionalidademas 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, identaoetc. A boa prtica continua sendo escrever cdigo legvel e bem documentado. Queremos apenas que, antesde colocar o site no ar, os arquivos sejam minicados. E, com as ferramentas automticas de hoje em dia, muito fcil fazer isso.YUI CompressorH diversas ferramentas para compresso de CSS e JavaScript. Uma das mais famosas o YUI Compressordo Yahoo!. Por ser em Java, multiplataforma e fcil de se usar. Ele comprime tanto cdigo CSS quantocdigo 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 siteser colocado no ar, por exemplo.Us-lo bem simples:java -jar yuicompressor-x.y.z.jar script.js -o script-min.jsEste comando vai ler o arquivo script.js, minicar seu contedo e gravar o resultado em script-min.js.O mesmo poderia ser feito com arquivos CSS.Testando onlineDiversos sites oferecem uma interface Web para o YUI - e outros compressores. So teis paravoc testar e ver logo o impacto sem instalar nada, mas so mais chatos para se automatizar.http://refresh-sf.com/yui/Captulo 14 - Apndice - Otimizaes de front-end - Compresso e minicao de CSS e JavaScript - Pgina 232http://developer.yahoo.com/yui/compressor/http://refresh-sf.com/yui/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript14.5 Compresso de imagensImagens so tambm fortes candidatas a otimizaes. Quo importante ser fazer isso?O HTTPArchive.org armazena informaes histricas coletadas mensalmente sobre os 17 mil sites maisacessados da Internet mundial. Com base nelas, compila alguns grcos e dados interessantes.E, com relao a imagens, os estudos mostram que mais de 60% do peso de uma pgina est nelas:Figura 14.1: Participao de cada tipo de arquivo no tamanho total das pginasSe conseguir otimizar um pouco as imagens, o resultado nal ser de grande impacto para a pgina!Otimizaes lossyA otimizaomais direta relacionada a isso diminuir a qualidade das imagens. Quando voc salva um JPG,pode escolher o grau de compresso, obtendo imagens menores mas sacricando um pouco a qualidade.Chamamos esse tipo de otimizao de lossy, pois h perda de qualidade. preciso avaliar at que ponto se pode sacricar a qualidade do design em prol da performance. No entanto,tenha em mente que muitas otimizaes podem acabar sendo imperceptveis para o olho humano - aindamais o olho gil e desatento dos usurios Web que varrem as pginas rapidamente e podem nem perceberque uma imagem est com menos denio.Voc pode otimizar fotos JPG manualmente no seu editor de imagens favorito e chegar a um meio termoentre qualidade e tamanho nal. Ou ento, pode tentar o excelente servio online JPEGMini que prometediminuir o tamanho das suas imagens diminuindo a qualidade de maneira praticamente imperceptvel. Elesusam um algoritmo que promete simular as caractersticas da percepo do olho humano, o que lhes permitepiorar a qualidade da imagem apenas em pontos que so pouco percebidos pelo nosso olhar.http://www.jpegmini.com/Captulo 14 - Apndice - Otimizaes de front-end - Compresso de imagens - Pgina 233http://www.jpegmini.com/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptDesign otimizadoOutra estratgia boa pensar bem na hora de fazer o design - ou convencer o designer a pensar bem. Serque realmente precisamos daquele monte de imagens na pgina? Ser que aquele cone precisa ser truecolorou podia ser salvo em grayscale?Um ponto importante que o crescimento e adoo de CSS3 tem trazido novas possibilidades de design emCSS puro que antes s eram possveis com imagens. 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 codica. Ele pode ser um fator de peso na performance da suapgina.Otimizaes losslessA otimizao mais simples e ecaz com imagens o que chamamos de compresso lossless. diminuir otamanho da imagem sem perder absolutamente nada na qualidade.Isso possvel porque os formatos da Web (JPEG, PNG, GIF) em geral guardam em seus arquivos maisinformaes do que as necessrias para renderizar a imagem. Uma foto JPEG por exemplo tem diversosmetadados 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 muitasvezes 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 socompletamente 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.itE o prprio JPEGMini j faz isso tambm para nossas fotos JPEG.E offline?Usar o Smush.it uma das formas mais simples e ecientes de se otimizar as imagens. Caso vocqueira usar algo direto no computador, recomendamos dois programas com interfaces grcaslocais:MAC: http://imageoptim.pornel.net/ Windows: http://luci.criosweb.ro/riot/Se o objetivo automatizar a otimizao, voc provavelmente vai querer ferramentas de linhade comando. E h vrias delas disponveis (inclusive as usadas pelo Smush.it). Procure por:optipng, pngout, pngcrush, advpng, jpegoptim, gifsicle.Captulo 14 - Apndice - Otimizaes de front-end - Compresso de imagens - Pgina 234http://smush.ithttp://imageoptim.pornel.net/http://luci.criosweb.ro/riot/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript14.6 Diminuir o nmero de requestsTodas as prticas que vimos at agora tinham como objetivo diminuir o tamanho das requisies, o volumedo trfego de dados. H ainda outro ponto que levantamos sobre aplicaes distribudas: diminuir o nmerototal de requests.No YSlow, na aba Components, voc pode ver todos os componentes de pgina que acabou de fazer. Cadaimagem, arquivo JavaScript, CSS e at vdeos e Flash so requisies feitas ao servidor. Isso sem pensar noprprio 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 maiorparte do tempo de um request gasto em tarefas de rede (DNS, SSL, TCP/IP etc). Se voc j otimizou otamanho 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 navegadoresantigos (apenas 2 conexes). Hoje, nos navegadores mais modernos, gira em torno de 6 a 8 conexes. Pareceum nmero alto - e realmente foi uma grande evoluo -, mas se voc comear a contar todos os arquivosexternos que est usando, vai ver que h chances de uma pgina mediana fazer dezenas de requests.O HTTPArchive reporta uma mdia de mais de 80 requests sendo feitos na pgina:Figura 14.2: Nmero e volume mdio de requestsOu seja, mesmo com 8 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 ca travado at que todos osdownloads terminem.Diminuir o nmero de requisies essencial.Captulo 14 - Apndice - Otimizaes de front-end - Diminuir o nmero de requests - Pgina 235Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript14.7 Juntar arquivos CSS e JSNo caso de arquivos CSS e JavaScript, a boa prtica juntar diversos arquivos em um nmero menor paraminimizar requisies.Ao usar jQuery, por exemplo, importamos a biblioteca em si e, em geral, criamos um script a mais da nossaaplicao que vai us-lo. muito comum tambm (como veremos no curso WD-47) usarmos diversos plu-gins com o jQuery para fazer vrias tarefas avanadas. So todos requests a mais que vo sobrecarregar nossapgina.Se vamos usar, por exemplo, jQuery com 3 plugins e mais 2 arquivos da aplicao, poderamos simplesmentejuntar todos em 1 ou 2 arquivos. Novamente, a boa prtica no escrever um cdigo todo misturado de umavez s em um arquivo de milhares de linhas. Faa seu cdigo com boas prticas e execute alguma rotina quejunte automaticamente esses arquivos pra voc antes de subir no servidor.O prprio jQuery faz isso. Usamos um arquivo chamado jquery.jsmas se voc for olhar o projeto ocial, verque esse apenas um arquivo gerado a partir de outros 22 arquivos separados, que foram criados de maneiraindependente para melhor organizar e encapsular as funcionalidades do projeto.Amesma dica vale para arquivos CSS. Voc pode organizar seu cdigo em arquivos diferentes (por exemplo,um com tipograa, outro com estrutura de layout e outro com estilos visuais), porm, na hora de subir aaplicao no ar, a boa prtica diminuir o nmero de arquivos e juntar quantos puder.14.8 Image SpritesJuntar arquivos texto como JS e CSS muito fcil, basta copiar os contedos seguidamente. E as imagens? Jvimos 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 imagensconsiste em criar um arquivo s e posicionar diversas imagens dentro. Depois, usando CSS, recorta-se ospedaos 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 14 - Apndice - Otimizaes de front-end - Juntar arquivos CSS e JS - Pgina 236Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptCriar 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 seposicionam as imagens para obter o resultado nal.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, almdo 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 especicar a posio da imagem em relao ao ponto inicial do elemento.Para saber mais - DataURIAinda pensando emminimizar o nmero de requisies para imagens, h uma outra tcnica conhecida comoData 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 quesegue o formato de codicao chamado Base 64.Esse processo de converso feito por algum programa que converta para base64 ou diretamente no servidorpor 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 14 - Apndice - Otimizaes de front-end - Image Sprites - Pgina 237Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptCom HTML normal, faramos:Isso vai causar uma requisio para o arquivo logo-caelum.png. Usando data URIs, vamos embutir o cdigobase64 da imagem direto na tag HTML:Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptY4jR8YgB4MKO9K9RBuH+lFPx0J1zuIAc5SOvVEDY0y2G43sd5R2FT21roVi0MsSg1c/czwdZ2tzi12Sg/wh4WOdYuyjwGunrbXFvhahPQUbgIVxpvR0daaid/9iROSx79KFPspbO5+sJkMbrOEBb8gOxrC8z3pXkGoCx5ITO/p3jdDO9on5qRv9Ak9Xuybyz1jdNzDJonlfvYOam0dr7QDgOSbfGD3YcG/qTSUm8nkZxGPkjWtNuZapqnXWO8EiVGKleuHzr60LtGu82LaKXMMpUeyOjswWLPGF0HI3EdP2PMlbXtPSzWZpVdltfyq1qaF/wcqGXqfyNPprynXD9nu1WhuM0f0xaWZrr6vjoPZvMn3YXkRPe4bG2F/g9S7CNMkQtgRwAAAABJRU5ErkJggg==">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 muitoprximo 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 em todos os navegadores. Todos osmaismodernossuportam, j o IE6 e IE7 e mesmo o IE8 possui algumas limitaes. Alm disso, o processo de gerao dessastring base64 costuma exigir um pouco de conhecimento de programao no servidor.14.9 Para saber maisA Caelum tem vrios posts no Blog sobre o assunto, sendo o principal:http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites/14.10 Exerccios: otimizaesWeb1) 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.2) Nossos banners principais na home so fotograas imensas, mas esto em PNG. O formato ideal paraeles JPG, que traz uma qualidade satisfatria com muito menos kbytes.Faa a converso dos banners de PNG para JPG e compare os resultados.3) 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.comUm servio alternativo o http://kraken.ioOs 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.comCaptulo 14 - Apndice - Otimizaes de front-end - Para saber mais - Pgina 239http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites/https://developers.google.com/pagespeed/http://webpagetest.org/http://smushit.comhttp://kraken.iohttp://jpegmini.comMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript4) Criamos vrios arquivos CSS e JavaScript na nossa home. Podemos junt-los para obter um ganho deperformance.Nos CSS, temos dois arquivos: estilos.css e mobile.css. Podemos junt-los num nico arquivo. (dica:o mobile.css importado commedia query; para junt-lo no arquivo principal, voc precisar escrever amedia query corretamente dentro do CSS)Nos JavaScripts, podemos, por exemplo, juntar o jQuery e o jQuery UI num nico arquivo.5) Comprima os arquivos CSS e JavaScript.6) Depois dessas otimizaes, teste novamente no PageSpeed e WebPageTest. Houve alguma melhora?Captulo 14 - Apndice - Otimizaes de front-end - Exerccios: otimizaes Web - Pgina 240Captulo 15Apndice - LESSNo podemos solucionar problemas usando a mesma forma de raciocnio que usamos quando os criamos. Albert EinsteinLESS uma linguagem baseada em CSS (mesma ideia, sintaxe familiar) com recursos que fazem falta noCSS em algumas situaes. tambm chamado de pr-processador pois, na verdade, usado para gerar umarquivo CSS no nal.Alguns dos recursos apresentados pela linguagem so variveis, suporte a operaes aritmticas, sintaxemaiscompacta para representar hierarquias e mixins.15.1 VariveisVoc j precisou usar a mesma cor no CSS em vrios pontos diferentes? Um ttulo e um boto com mesmacor, por exemplo? O CSS tem uma soluo pra evitar copiar e colar, que seria o uso de classes. Mas, muitasvezes, 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 LESSsim!@corprincipal: #BADA55;#titulo {font-size: 2em;color: @corprincipal;}button {background-color: @corprincipal;Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptcolor: white;}Repare no uso da @corprincipal que no CSS puro, mas tem uma sintaxe bem parecida e familiar. Depoisde compilado, o LESS vira esse CSS:#titulo {font-size: 2em;color: #BADA55;}button {background-color: #BADA55;color: white;}15.2 ContasSabe quando voc tem aquele elemento principal com 960px mas que precisa de um padding de 35px e duascolunas l dentro de tamanhos iguaismas deixando 20px entre elas? Qual o tamanho de cada colunamesmo?435px. 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 (960px 35px * 2 20px) / 2 = 435px. No LESS, voc pode fazer a conta direito na propriedadee o resultado nal 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 15 - Apndice - LESS - Contas - Pgina 242Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript.container {padding: @respiro;width: @total;}.coluna {width: (@total - @respiro * 2 - @espacamento) / 2;}E d pra fazer contas de tudo que tipo, at com cores!15.3 HierarquiaVoc tem um #topo com um ttulo h1 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 semntico? Tem que mexer em3 lugares (e torcer pra ningum ter usado em outro canto). Fora que o cdigo ca desorganizado j queessas 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 deparent. O mesmo CSS acima podia ser no LESS:#topo {width: 100%;h1 {font-size: 2em;}ul {margin-left: 10px;}}Captulo 15 - Apndice - LESS - Hierarquia - Pgina 243Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptPodemos usar vrios nveis de hierarquia (mas no abuse!), deixando nosso cdigomais estruturado, exvele legvel.15.4 Funes de cores e palhetas automticasProvavelmente 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 geraras 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 20% mais lights e 10% 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.15.5 Reaproveitamento com mixinsUma das coisas mais legais do LESS sua capacidade de criar as prprias funes, que ele chama demixins. til quando voc tem que repetir a mesma coisa vrias vezes, como nas propriedades CSS3 que precisamde prexos, tipo uma borda redonda.Captulo 15 - Apndice - LESS - Funes de cores e palhetas automticas - Pgina 244Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptVoc pode denir um mixin recebendo argumento o tamanho da borda e cuspindo as verses pros diversosnavegadores:.arredonda(@raio: 5px) {-webkit-border-radius: @raio;-moz-border-radius: @raio;border-radius: @raio;}Parece uma classe CSSmas ele recebe uma varivel como parmetro (que pode ter um valor 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 innitas! Pense nummixin pra te ajudar a gerar aqueles gradientes CSS3 chatos ou ummixin prprio .botaoBonito que gera botes legais s recebendo uma cor base e um tamanho.15.6 Executando o LESSNo 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 15 - Apndice - LESS - Executando o LESS - Pgina 245Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptCom isso, podemos incluir diretamente nosso arquivo .less usando uma tag , colocada antes da tagque carrega o less.js:Para melhor performance, o ideal seria gerar o CSS antes usando o compilador. H uma verso em linha decomando usando Node.JS, mas como JavaScript, voc pode rod-lo em qualquer canto - at no Java comRhino.H tambm programas visuais pra instalar, como o LESS.app e d pra testar cdigo rapidamente onlinemesmo no LessTester.com.No Windows, voc pode usar oWinLESS que um compilador com interface grca e bem fcil de usar:http://winless.org/15.7 Para saber mais: recursos avanados e alternativasA linguagem LESS tem recursos ainda mais avanados. D pra fazer mixins mais complicados com umaespcie de if/else por exemplo e at usar patternmatching. Voc encontra todos os detalhes na documentaoocial.Alm do LESS, existem outros pr-processadores CSS no mercado. O Sass (http://sass-lang.com/) muitofamoso nomundo Ruby e tem zilhes de funes, tornando-omais poderoso que o LESSmasmais complexotambm. H tambm o Stylus (http://learnboost.github.io/stylus/) , que simplica ainda mais a sintaxe.15.8 Exerccios: LESS1) Atualmente, nosso arquivo estilos.css possui vrias regras que usam o seletor de hierarquia (espao).Essas regras podem ser escritas de formamais compacta com LESS. Ento vamos usar LESS para escrev-lo. Neste exerccio, vamos usar a verso Javascript do LESS, que transforma nosso cdigo em CSS dentrodo navegador.Crie uma nova pasta no seu projeto chamada less e copie o estilos.css para l. Em seguida, renomeie-opara estilos.less. Por m, altere o index.html para usar o estilos.less. Troque a linhaporE inclua a seguinte linha antes de fechar a tag body para carregar o pr-processador LESS:Captulo 15 - Apndice - LESS - Para saber mais: recursos avanados e alternativas - Pgina 246http://winless.org/http://sass-lang.com/http://learnboost.github.io/stylus/Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptTeste a pgina no navegador. Ela deve continuar com a mesma aparncia de antes.2) Vamos comear amigrar nosso cdigo CSS para LESS. Um seletor bastante repetido no cdigo .painel.Agrupe todas as regras que usamesse seletor numnico seletor noLESS.O cdigo nal deve car parecidocom 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 ca mais organizado ecurto!3) A cor #333333 (cinza escuro) se repete algumas vezes no nosso estilo. Vamos isol-la numa varivel parafacilitar a manuteno:@escuro: #333333;Procure os lugares que usam a cor e use a varivel no lugar. Por exemplo:Captulo 15 - Apndice - LESS - Exerccios: LESS - Pgina 247Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptbody {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 pginaagora basta mexer num nico lugar!4) Vamos deixar o nosso cdigo de transies mais limpo isolando os prexos num nico lugar. Para isso,vamos criar ummixin:.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 omouse passa em cima: apagueas 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 */}Captulo 15 - Apndice - LESS - Exerccios: LESS - Pgina 248Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript.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.5) (opcional) Podemos melhorar nosso mixin de gradiente fazendo uma verso que s recebe uma cor ecalcula a segunda automaticamente, fazendo ela ser 10% mais escura que a cor dada. Podemos aindafazer com que essa nova verso j aproveite o mixin j existente, passando a segunda cor calculada paraele:.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.Captulo 15 - Apndice - LESS - Exerccios: LESS - Pgina 249http://www.colorzilla.com/gradient-editor/http://www.colorzilla.com/gradient-editor/Captulo 16Apndice - Subindo sua aplicao no cloudPerder tempo em aprender coisas que no interessam, priva-nos de descobrir coisas interessantes Carlos Drummond de Andrade16.1 Como escolher um provedorExistemmuitos servidores com suporte a PHP eMySQL nomercado, 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 clssicosde hospedagem onde voc paga um valor xo por ms e tem direito a usar os recursos de uma mquinacompartilhada com outros usurios. Costumam ter um valor mais baixo mas limitaes tcnicas caso seusite tenho um pouco mais de acessos.E h planos de cloud computing onde o objetivo no ter restries tcnicas com relao ao volume deacessos. Sua aplicao pode comear pequena e crescer indenidamente sem problemas, em um ambienteescalvel que cresce elasticamente conforme suas necessidades. Nesse cenrio, voc paga por quanto usardos recursos em cada ms, e no uma mensalidade xa. Costuma ter um valor mais alto que hospedagensclssicas, mas traz um ambiente bem mais robusto.16.2 O Jelastic Cloud LocawebNesse 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 eminstantes, e enviar um ZIP com nosso projeto para ser executado.Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptSaiba mais sobre o produto, inclusive os preos atuais, em:http://jelasticcloud.com.br/testegratisH um trial de 14 dias que podemos usar para testar nosso projeto sem limitaes.16.3 Criando a contaAcesse 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 botono topo que diz Criar ambiente.Na janela de criao, selecione a aba PHP e o servidor Apache com o armazenamentoMySQL. D tambmum nome a esse ambiente:Dentro de alguns instantes seu ambiente ser criado e voc vai receber um email de conrmao. Esse email importante por conter a senha de acesso ao MySQL.16.4 Importando dados noMySQLCriado o ambiente, ns teremos acesso a um banco de dadosMySQL vazio. No email que voc recebeu, estousurio, senha e endereo do banco de dados.Captulo 16 - Apndice - Subindo sua aplicao no cloud - Criando a conta - Pgina 251http://jelasticcloud.com.br/testegratisMaterial do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptAcesse 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 recebeuno email sobre o MySQL para acessar.Dentro do phpMyAdmin, localize a aba superior Importar. Selecione a opo Procurar no computador eaponte o arquivo dados.sql que usamos no curso. No m da pgina, clique em Executar.Tudo dando certo, voc deve ver o banco de dadosWD43 criado na coluna da esquerda, com nossa tabelaprodutos populada.16.5 Preparando o projetoVolte pro cdigo do seu projeto. Precisamos fazer uma alterao nos cdigos que acessam o banco de dadosno 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 providosno email:Captulo 16 - Apndice - Subindo sua aplicao no cloud - Preparando o projeto - Pgina 252Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript$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 como ultimo argumento, o nome do banco, pra ser em maiscula.16.6 Enviando o projeto e inicializando servidorEntre na pasta do projeto na sua mquina e crie um arquivo ZIP com todo seu contedo (todos os arquivose 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 emUpload:Indique o endereo do ZIP que criou com seu projeto e d um nome a esse upload, como Site da MirrorFashion:Aguarde o upload nalizar 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. Cliquenele e selecione o ambiente que criamos antes:Uma janela se abre perguntando qual contexto voc quer instalar. Isso quer dizer se queremos criar umasubpasta no servidor s pra esse projeto. Voc pode deixar em branco pra criar na raiz do servidor mesmo.Clique em Instalar:Captulo 16 - Apndice - Subindo sua aplicao no cloud - Enviando o projeto e inicializando servidor - Pgina 253Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScriptAguarde 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 16 - Apndice - Subindo sua aplicao no cloud - Enviando o projeto e inicializando servidor - Pgina 254