Caelum html-css-javascript-php

WD-43 Desenvolvimento Web com HTML, CSS e JavaScript WEB SITE SCRIPTS StyleSheet HTML www.caelum.com.br

Conheça mais da Caelum. Cursos Online www.caelum.com.br/online Casa do Código Livros para o programador www.casadocodigo.com.br Blog Caelum blog.caelum.com.br Newsletter www.caelum.com.br/newsletter Facebook www.facebook.com/caelumbr Twitter twitter.com/caelum

Sobre esta apostila Esta apostila daCaelumvisa ensinar deumamaneira elegante,mostrando apenas o que é necessário e quando é necessário, no momento certo, poupando o leitor de assuntos que não costumam ser de seu interesse em determinadas fases do aprendizado. A Caelum espera que você aproveite esse material. Todos os comentários, críticas e sugestões serão muito bem-vindos. Essa apostila é constantemente atualizada e disponibilizada no site da Caelum. Sempre consulte o site para novas versões e, ao invés de anexar o PDF para enviar a um amigo, indique o site para que ele possa sempre baixar as últimas versões. Você pode conferir o código de versão da apostila logo no nal do índice. Baixe sempre a versão mais nova em: www.caelum.com.br/apostilas Esse material é parte integrante do treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript e dis-tribuído gratuitamente exclusivamente pelo site da Caelum. Todos os direitos são reservados à Caelum. A distribuição, cópia, revenda e utilização para ministrar treinamentos são absolutamente vedadas. Para uso comercial deste material, por favor, consulte a Caelum previamente. www.caelum.com.br Õ

Sumário Õ Sobre o curso - o complexo mundo do front-end Õ Õ.Õ O curso e os exercícios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ Õ.ó O projeto de e-commerce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó Õ.ì Tirando dúvidas com instrutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó Õ.¦ Tirando dúvidas online no GUJ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó Õ.¢ Bibliograa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ì Õ.ä Para onde ir depois? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ì ó Introdução a HTML e CSS ¦ ó.Õ Exibindo informações naWeb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¦ ó.ó Sintaxe do HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ß ó.ì Estrutura de um documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ß ó.¦ Tags HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . É ó.¢ Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õþ ó.ä A estrutura dos arquivos de um projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕÕ ó.ß Editores e IDEs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕÕ ó.˜ Primeira página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕÕ ó.É Exercício: primeiros passos com HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¦ ó.Õþ Estilizando com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õä ó.ÕÕ Sintaxe e inclusão de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õß ó.Õó Propriedades tipográcas e fontes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕÉ ó.Õì Alinhamento e decoração de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óþ ó.Õ¦ Imagem de fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕ ó.Õ¢ Bordas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕ ó.Õä Exercício: primeiros passos com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óó ó.Õß Cores naWeb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óì ó.Õ˜ Listas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¦ ó.ÕÉ Espaçamento e margem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óä ó.óþ Exercícios: listas e margens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó˜ ó.óÕ Links HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÉ ó.óó Exercícios: links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ìþ ó.óì Elementos estruturais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ìÕ ó.ó¦ CSS: Seletores de ID e lho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ìó ó.ó¢ Exercícios: seletores CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ìì ó.óä Fluxo do documento e žoat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ì¢ ó.óß Exercícios: žutuação de elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ì¢ ó.ó˜ O futuro e presente daWeb com o HTML¢ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ìä ì HTML semântico e posicionamento no CSS ìß i

ì.Õ O processo de desenvolvimento de uma tela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ìß ì.ó O projeto Mirror Fashion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ìÉ ì.ì Analisando o Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¦þ ì.¦ HTML semântico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¦ó ì.¢ Pensando no header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¦ì ì.ä Estilização com classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¦¦ ì.ß Exercícios: header semântico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¦ä ì.˜ CSS Reset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¦ß ì.É Block vs Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¦˜ ì.Õþ Exercícios: reset e display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¦É ì.ÕÕ Position: static, relative, absolute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¢þ ì.Õó Exercícios: posicionamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¢ì ì.Õì Exercícios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¢¦ ¦ Mais HTML e CSS ¢¢ ¦.Õ Analisando o miolo da página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¢¢ ¦.ó Formulários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¢¢ ¦.ì Posicionamento com žoat e clear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¢ä ¦.¦ Decoração de texto com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¢ß ¦.¢ Cascata e herança no CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¢˜ ¦.ä Para saber mais: o valor inherit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ¢É ¦.ß Exercícios: menu e destaque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . äþ ¦.˜ Display inline-block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . äì ¦.É Exercícios: painéis žutuantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ä¦ ¦.Õþ Seletores de atributo do CSSì . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . äß ¦.ÕÕ Rodapé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ä˜ ¦.Õó Substituição por Imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . äÉ ¦.Õì Estilização e posicionamento do rodapé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . äÉ ¦.Õ¦ Exercícios: rodapé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ßÕ ¦.Õ¢ Para saber mais: suporte HTML¢ no Internet Explorer antigo . . . . . . . . . . . . . . . . . . . ßì ¦.Õä Exercícios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ß¦ ¢ JavaScript e interatividade naWeb ß¢ ¢.Õ Introdução ao JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ß¢ ¢.ó Console do navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ßä ¢.ì Sintaxe básica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ßä ¢.¦ Exercícios opcionais: xação de sintaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ß˜ ¢.¢ Interatividade naWeb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ß˜ ¢.ä Exercício: validação na busca com JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ˜Õ ¢.ß Funções temporais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ˜ì ¢.˜ Exercício: banner rotativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ˜¦ ¢.É Para saber mais: sugestão para o desao de pause/play . . . . . . . . . . . . . . . . . . . . . . . ˜¢ ¢.Õþ Para saber mais: vários callbacks no mesmo elemento . . . . . . . . . . . . . . . . . . . . . . . . ˜ä ii

ä CSS Avançado ˜˜ ä.Õ Seletores avançados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ˜˜ ä.ó Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÉÕ ä.ì Pseudo elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . É¦ ä.¦ Exercícios: seletores e pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Éä ä.¢ Exercícios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . É˜ ä.ä CSSì: border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÉÉ ä.ß CSSì: text-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕþÕ ä.˜ CSSì: box-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕþÕ ä.É Opacidade e RGBA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õþì ä.Õþ Prexos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õþ¢ ä.ÕÕ CSSì: Gradientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õþä ä.Õó Progressive Enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õþ˜ ä.Õì Exercícios: visual CSSì . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕþÉ ä.Õ¦ CSSì Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕÕÕ ä.Õ¢ CSSì Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕÕì ä.Õä Exercícios: CSSì transform e transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕÕ¢ ä.Õß Para saber mais: especicidade de seletores CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕÕ˜ ß Web para dispositivos móveis ÕóÕ ß.Õ Site mobile ou mesmo site? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕóÕ ß.ó CSS media types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õóì ß.ì CSSì media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õó¦ ß.¦ Viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õó¢ ß.¢ Exercícios: mobile site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õóß ß.ä ResponsiveWeb Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕìÕ ß.ß Mobile-rst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕìÕ ß.˜ Exercícios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õìó ˜ Introdução a PHP Õì¦ ˜.Õ Libertando o HTML de suas limitações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õì¦ ˜.ó Como funciona um servidor HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õì¢ ˜.ì Como funciona o PHP no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õì¢ ˜.¦ Para saber mais: instalação do PHP em casa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õìä ˜.¢ Exercícios: executando o PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õìß ˜.ä Reaproveitamento de código com include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õì˜ ˜.ß Exercícios: include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕìÉ ˜.˜ Para saber mais: ainda mais žexibilidade com variáveis . . . . . . . . . . . . . . . . . . . . . . . Õ¦þ ˜.É Exercícios opcionais: variáveis em PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¦þ É Progressive enhancement e mobile-rst Õ¦ó É.Õ Design mobile-rst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¦ó É.ó Implementação mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¦ì iii

É.ì Formulário de compra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¦¦ É.¦ Progressive enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¦ä É.¢ Box model e box-sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¦ß É.ä Exercícios: página de produto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¦˜ É.ß Evoluindo o design para desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¢ì É.˜ Media queries de conteúdo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¢ì É.É Exercícios: responsive design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¢¦ É.Õþ HTML¢ Input range . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¢ä É.ÕÕ Exercícios: seletor de tamanho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¢ß É.Õó Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¢ß É.Õì Exercícios: detalhes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ¢É É.Õ¦ Exercícios opcionais: fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕäÕ Õþ PHP: parâmetros e bancos de dados Õäì Õþ.Õ Submissão do formulário . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õäì Õþ.ó Parâmetros com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õä¦ Õþ.ì Listas de denição no HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õä¦ Õþ.¦ Exercícios: checkout da compra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õä¢ Õþ.¢ Exercícios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õää Õþ.ä Banco de dados e SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õäß Õþ.ß MySQL e phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õä˜ Õþ.˜ Para saber mais: instalação do MySQL em casa . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õä˜ Õþ.É Buscas no MySQL com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õä˜ Õþ.Õþ Renando as buscas com WHERE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕäÉ Õþ.ÕÕ Exercícios: phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õßþ Õþ.Õó Exercícios: PHP com MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕßÕ Õþ.Õì Busca de muitos resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õßì Õþ.Õ¦ Ordenação dos resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õßì Õþ.Õ¢ Exercícios: mais buscas com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õßì Õþ.Õä Exercícios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õß¢ ÕÕ Bootstrap e formulários HTML¢ Õßä ÕÕ.Õ Bootstrap e frameworks de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õßä ÕÕ.ó Estilo e componentes base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õßß ÕÕ.ì A página de checkout da Mirror Fashion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õßß ÕÕ.¦ Exercício opcional: início do checkout sem PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕßÉ ÕÕ.¢ Exercícios: página de checkout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ˜þ ÕÕ.ä Formulários a fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ˜ì ÕÕ.ß Novos componentes do HTML¢ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Õ˜˜ ÕÕ.˜ Novos atributos HTML¢ em elementos de formulário . . . . . . . . . . . . . . . . . . . . . . . . ÕÉó ÕÕ.É Ícones com glyphicons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕÉì ÕÕ.Õþ Exercícios: formulários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕÉ¢ ÕÕ.ÕÕ Para saber mais: outros frameworks CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ÕÉÉ iv

Õó Componentes complexos do Bootstrap e mais HTML¢ óþþ Õó.Õ Grid responsivo do Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óþþ Õó.ó Exercícios: grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óþó Õó.ì Validação HTML¢ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óþ¢ Õó.¦ Para saber mais: controlando as validações HTML¢ . . . . . . . . . . . . . . . . . . . . . . . . . óþä Õó.¢ Exercícios: validação com HTML¢ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óþß Õó.ä Componentes JavaScript do Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óþ˜ Õó.ß Exercícios: navbar e JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óþ˜ Õó.˜ Exercícios: modal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕþ Õó.É Para saber mais: envio de emails com PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕÕ Õó.Õþ Exercícios opcionais: email de conrmação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕó Õó.ÕÕ Discussão em aula: os problemas do Bootstrap e quando não usá-lo . . . . . . . . . . . . . . . óÕì Õì jQuery óÕ¦ Õì.Õ jQuery - A função g . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕ¦ Õì.ó jQuery Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕ¢ Õì.ì Filtros customizados e por DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕä Õì.¦ Utilitário de iteração do jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕß Õì.¢ Características de execução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕß Õì.ä Mais produtos na home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕ˜ Õì.ß Exercícios: jQuery na home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óÕÉ Õì.˜ O elemento output do HTML¢ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óóó Õì.É Exercícios: mostrando tamanho do produto com jQuery . . . . . . . . . . . . . . . . . . . . . . óóó Õì.Õþ Formulários dinâmicos com jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óó¦ Õì.ÕÕ Exercícios: javascript no checkout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óó¦ Õì.Õó Plugins jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óóä Õì.Õì Exercícios: plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óóä Õì.Õ¦ Exercícios opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óóß Õ¦ Integrações com serviçosWeb óó˜ Õ¦.Õ Web ó.þ e integrações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óó˜ Õ¦.ó iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óó˜ Õ¦.ì Vídeo embutido com YouTube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óóÉ Õ¦.¦ Exercícios: iframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óóÉ Õ¦.¢ Exercício opcional: Google Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óóÉ Õ¦.ä Botão de curtir do Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óìþ Õ¦.ß Exercícios: Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óìÕ Õ¦.˜ Para saber mais: OpenGraph e web semântica . . . . . . . . . . . . . . . . . . . . . . . . . . . . óìÕ Õ¦.É Exercícios opcionais: OpenGraph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óìì Õ¦.Õþ Para saber mais: Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óìì Õ¦.ÕÕ Para saber mais: Google+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óì¦ Õ¦.Õó Exercícios opcionais: Twitter e Google+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óì¢ Õ¦.Õì Fontes customizadas com @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óì¢ v

Õ¦.Õ¦ Serviços de web fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óìä Õ¦.Õ¢ Exercícios: GoogleWeb Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óìä Õ¢ Otimizações de front-end óì˜ Õ¢.Õ HTML e HTTP - Como funciona aWorldWideWeb? . . . . . . . . . . . . . . . . . . . . . . . óìÉ Õ¢.ó Princípios de programação distribuída . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¦Õ Õ¢.ì Ferramentas de diagnóstico - YSlow e PageSpeed . . . . . . . . . . . . . . . . . . . . . . . . . . ó¦Õ Õ¢.¦ Compressão e minicação de CSS e JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¦ó Õ¢.¢ Compressão de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¦¦ Õ¢.ä Diminuir o número de requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¦ä Õ¢.ß Juntar arquivos CSS e JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¦ß Õ¢.˜ Image Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¦ß Õ¢.É Para saber mais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¢þ Õ¢.Õþ Exercícios: otimizaçõesWeb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¢þ Õä Apêndice - LESS ó¢ó Õä.Õ Variáveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¢ó Õä.ó Contas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¢ì Õä.ì Hierarquia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¢¦ Õä.¦ Funções de cores e palhetas automáticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¢¢ Õä.¢ Reaproveitamento com mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¢¢ Õä.ä Executando o LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¢ä Õä.ß Para saber mais: recursos avançados e alternativas . . . . . . . . . . . . . . . . . . . . . . . . . . ó¢ß Õä.˜ Exercícios: LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ó¢ß Õß Apêndice - Subindo sua aplicação no cloud óäÕ Õß.Õ Como escolher um provedor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óäÕ Õß.ó O Jelastic Cloud Locaweb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óäÕ Õß.ì Criando a conta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óäó Õß.¦ Importando dados no MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óäó Õß.¢ Preparando o projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óäì Õß.ä Enviando o projeto e inicializando servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . óä¦ Índice Remissivo óä¢ Versão: Õä.¢.ó¢ vi

CZ£i±¶™ Õ Sobre o curso - o complexo mundo do front-end “Ação é a chave fundamental para todo sucesso” – Pablo Picasso Vivemos hoje numa era em que a Internet ocupa um espaço cada vezmais importante em nossas vidas pesso-ais e prossionais. O surgimento constante de AplicaçõesWeb, para as mais diversas nalidades, é um sinal claro de que esse mercado está em franca expansão e traz muitas oportunidades. Aplicações corporativas, comércio eletrônico, redes sociais, lmes, músicas, notícias e tantas outras áreas estão presentes na Internet, fazendo do navegador (o browser) o soŸware mais utilizado de nossos computadores. Esse curso pretende abordar o desenvolvimento de front-end (interfaces) para Aplicações Web e Sites que acessamos por meio do navegador de nossos computadores, utilizando padrões atuais de desenvolvimento e conhecendo a fundo suas características técnicas. Discutiremos as implementações dessas tecnologias nos diferentes navegadores, a adoção de frameworks que facilitam e aceleram nosso trabalho, além de dicas téc-nicas que destacam um prossional no mercado. HTML, CSS e JavaScript serão vistos em profundidade. Além do acesso por meio do navegador de nossos computadores, hoje o acesso à Internet a partir de dis-positivos móveis representa um grande avanço da plataforma, mas também implica em um pouco mais de atenção ao trabalho que um programador front-end tem que realizar. No decorrer do curso, vamos conhe-cer algumas dessas necessidades e como utilizar os recursos disponíveis para atender também a essa nova necessidade. Õ.Õ O h¶§«™ u ™« uìu§hih†™« Esse é um curso prático que começa nos fundamentos de HTML e CSS, incluindo tópicos relacionados às novidades das versões HTML¢ e CSSì. Depois, é abordada a linguagem de programação JavaScript, para en-riquecer nossas páginas com interações e efeitos, tanto com JavaScript puro quanto com a biblioteca jQuery, hoje padrão de mercado.

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Durante o curso, serão desenvolvidas páginas de um Site de comércio eletrônico. Os exercícios foram proje-tados para apresentar gradualmente ao aluno quais são as técnicas mais recomendadas e utilizadas quando assumimos o papel do Programador front-end, quais são os desaos mais comuns e quais são as técnicas e padrões recomendados para atingirmos nosso objetivo, transformando imagens estáticas (os layouts) em código que os navegadores entendem e exibem como páginas daWeb. Os exercícios propostos são fundamentais para o acompanhamento do curso, desde os mais iniciais, já que são incrementados no decorrer das aulas. Igualmente importante é a participação ativa nas discussões e debates em sala de aula. Õ.ó O £§™u±™ ou u-h™““u§hu Durante o curso, vamos produzir um site para um e-commerce de moda chamado Mirror Fashion. Cons-truiremos várias páginas da loja com intuito de aprender os conceitos de HTML, CSS e JS. Os conteúdos e o design da loja já foram pré-denidos. Vamos, aqui, focar na implementação, papel do programador front-end. Õ.ì T†§Z•o™ ouê†oZ« h™“ †•«±§¶±™§ Durante o curso, tire todas as suas dúvidas com o instrutor. HTML, CSS e JavaScript, apesar de parecerem simples e básicos, têm muitas características complexas que não podem deixar de ser totalmente compreen-didas pelo aluno. Os instrutores também estão disponíveis para tirar as dúvidas do aluno após o término do treinamento, basta entrar em contato direto como instrutor ou coma Caelum, teremos o prazer em ajudá-lo. Se você está acompanhando essa apostila em casa, pense também em fazer o curso presencial na Caelum. Você terá contato direto como instrutor para esclarecer suas dúvidas, aprendermais tópicos além da apostila, e trocar experiências. Õ.¦ T†§Z•o™ ouê†oZ« ™•†•u •™ GUJ Recomendamos fortemente a busca de recursos e a participação ativa na comunidade por meio das listas de discussão relacionadas ao conteúdo do curso. O GUJ.com.br é um site de perguntas e respostas para desenvolvedores de soŸware que abrange diversas áreas, sendo que front-end é um dos principais focos. A comunidade do GUJ tem mais de Õ¢þ mil usuários e Õ milhão emeio demensagens. É o lugar ideal pra você tirar suas dúvidas e encontrar outros desenvolvedores. http://www.guj.com.br Capítulo Õ - Sobre o curso - o complexo mundo do front-end - O projeto de e-commerce - Página ó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Õ.¢ B†f†™§Z€†Z Além do conhecimento disponível na Internet pela da comunidade, existemmuitos livros interessantes sobre o assunto. Algumas referências: • HTML¢ e CSSì: Domine a web do futuro - Lucas Mazza, editora Casa do Código; • A Web Mobile: Programe para um mundo de muitos dispositivos - Sérgio Lopes, editora Casa do Código; • A Arte E A Ciência Do CSS - Adams & Cols; • Pro JavaScript Techniques - John Resig; • e Smashing Book - smashingmagazine.com Õ.ä PZ§Z ™•ou †§ ou£™†«¥ Este curso é parte da FormaçãoWeb Design da Caelum que engloba também o treinamento Programação com JavaScript e jQuery. Você pode obter mais informações aqui: http://www.caelum.com.br/cursos-web-front-end/ Se o seu desejo é entrar mais a fundo no desenvolvimento Web, incluindo a parte server-side, oferecemos a Formação Ruby on Rails, a Formação Java e a Formação .NET que abordam três caminhos possíveis para esse mundo. Mais informações em: • http://www.caelum.com.br/cursos-rails/ • http://www.caelum.com.br/cursos-java/ • http://www.caelum.com.br/cursos-dotnet/ Capítulo Õ - Sobre o curso - o complexo mundo do front-end - Bibliograa - Página ì

CZ£i±¶™ ó Introdução a HTML e CSS “Quanto mais nos elevamos, menores parecemos aos olhos daqueles que não sabem voar.” – FriedrichWilhelm Nietzsche ó.Õ Eì†f†•o™ †•€™§“Zcou« •ZWuf A única linguagem que o navegador consegue interpretar para a exibição de conteúdo é o HTML. Para iniciar a exploração do HTML, vamos imaginar o seguinte caso: o navegador realizou uma requisição e recebeu como corpo da resposta o seguinte conteúdo: Mirror Fashion. Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios. Confira nossas promoções. Receba informações sobre nossos lançamentos por email. Navegue por todos nossos produtos em catálogo. Compre sem sair de casa. Para conhecer o comportamento dos navegadores quanto ao conteúdo descrito antes, vamos reproduzir esse conteúdo em um arquivo de texto comum, que pode ser criado com qualquer editor de texto puro. Salve o arquivo como index.html e abra-o a partir do navegador à sua escolha.

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Parece que obtemos um resultado um pouco diferente do esperado, não? Apesar de ser capaz de exibir texto puro em sua área principal, algumas regras devem ser seguidas caso desejemos que esse texto seja exibido com alguma formatação, para facilitar a leitura pelo usuário nal. Usando o resultado acima podemos concluir que o navegador por padrão: • Pode não exibir caracteres acentuados corretamente; • Não exibe quebras de linha. Para que possamos exibir as informações desejadas com a formatação, é necessário que cada trecho de texto tenha uma marcação indicando qual é o signicado dele. Essa marcação também inžuencia a maneira com que cada trecho do texto será exibido. A seguir é listado o texto com uma marcação correta: !DOCTYPE html html head titleMirror Fashion/title meta charset=utf-8 /head body h1Mirror Fashion./h1 h2Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios./h2 Capítulo ó - Introdução a HTML e CSS - Exibindo informações naWeb - Página ¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ul liConfira nossas promoções./li liReceba informações sobre nossos lançamentos por email./li liNavegue por todos nossos produtos em catálogo./li liCompre sem sair de casa./li /ul /body /html Reproduza o código anterior em um novo arquivo de texto puro e salve-o como index-ó.html. Não se preo-cupe com a sintaxe, vamos conhecer detalhadamente cada característica do HTML nos próximos capítulos. Abra o arquivo no navegador. Agora, o resultado é exibido de maneira muito mais agradável e legível. Para isso, tivemos que utilizar al-gumas marcações do HTML. Essas marcações são chamadas de tags, e elas basicamente dão signicado ao texto contido entre sua abertura e fechamento. Apesar de estarem corretamentemarcadas, as informações não apresentamnenhum atrativo estético e, nessa deciência do HTML, reside o primeiro e maior desao do programador front-end. O HTML foi desenvolvido para exibição de documentos cientícos. Para termos uma comparação, é como se a Web fosse desenvolvida para exibir monograas redigidas e formatadas pela Metodologia do Trabalho Capítulo ó - Introdução a HTML e CSS - Exibindo informações naWeb - Página ä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Cientíco da ABNT. Porém, com o tempo e a evolução da Web e de seu potencial comercial, tornou-se necessária a exibição de informações com grande riqueza de elementos grácos e de interação. ó.ó S†•±Zìu o™ HTML O HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página no navegador. No código que vimos antes, as tags são os elementos a mais que escrevemos usando a sintaxe nomedatag. Diversas tags são disponibilizadas pela linguagem HTML e cada uma possui uma funcionalidade especíca. No código de antes, vimos por exemplo o uso da tag h1. Ela representa o título principal da página. h1Mirror Fashion/h1 Note a sintaxe. Uma tag é denida com caracteres e , e seu nome (HÕ no caso). Muitas tags possuem conteúdo, como o texto do título (“Mirror Fashion”). Nesse caso, para determinar onde o conteúdo acaba, usamos uma tag de fechamento com a barra antes do nome: /h1. Algumas tags podem receber atributos dentro de sua denição. São parâmetros usando a sintaxe de nome=valor. Para denir uma imagem, por exemplo, usamos a tag img e, para indicar qual imagem carre-gar, usamos o atributo src: img src=../imagens/casa_de_praia.jpg Repare que a tag img não possui conteúdo por si só. Nesses casos, não é necessário usar uma tag de fecha-mento como antes no hÕ. ó.ì E«±§¶±¶§Z ou ¶“ o™h¶“u•±™ HTML Um documento HTML válido precisa seguir obrigatoriamente a estrutura composta pelas tags html, head e body e a instrução !DOCTYPE. Vejamos cada uma delas: A ±Z „±“ Na estrutura do nosso documento, antes de tudo, inserimos uma tag html. Dentro dessa tag, é necessário declarar outras duas tags: head e body. Essas duas tags são “irmãs”, pois estão nomesmo nível hierárquico em relação à sua tag “pai”, que é html. html head/head body/body /html Capítulo ó - Introdução a HTML e CSS - Sintaxe do HTML - Página ß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript A ±Z „uZo A tag head contém informações sobre nosso documento que são de interesse somente do navegador, e não dos visitantes do nosso site. São informações que não serão exibidas na área do documento no navegador. A especicação obriga a presença da tag de conteúdo title dentro do nosso head, permitindo especicar o título do nosso documento, que normalmente será exibido na barra de título da janela do navegador ou na aba do documento. Outra conguração muito utilizada, principalmente em documentos cujo conteúdo é escrito em um idioma como o português, que tem caracteres como acentos e cedilha, é a conguração da codicação de caracteres, chamado de encoding ou charset. Podemos congurar qual codicação queremos utilizar em nosso documento por meio da conguração de charset na tag meta. Um dos valores mais comuns usados hoje em dia é o UTF-˜, também chamado de Unicode. Há outras possibilidades, como o latinÕ, muito usado antigamente. O UTF-˜ é a recomendação atual para encoding na Web por ser amplamente suportada em navegadores e editores de código, além de ser compatível compraticamente todos os idiomas domundo. É o que usaremos no curso. html head titleMirror Fashion/title meta charset=utf-8 /head body/body /html A ±Z f™oí A tag body contém o corpo do nosso documento, que é exibido pelo navegador em sua janela. É necessário que o body tenha ao menos um elemento “lho”, ou seja, uma ou mais tags HTML dentro dele. html head titleMirror Fashion/title meta charset=utf-8 /head body h1A Mirror Fashion/h1 /body /html Nesse exemplo, usamos a tag h1, que indica um título. Capítulo ó - Introdução a HTML e CSS - Estrutura de um documento HTML - Página ˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript A †•«±§¶ca™ DOCTYPE O DOCTYPE não é uma tag HTML, mas uma instrução especial. Ela indica para o navegador qual versão do HTML deve ser utilizada para renderizar a página. Utilizaremos !DOCTYPE html, que indica para o navegador a utilização da versão mais recente do HTML - a versão ¢, atualmente. Hámuitos comandos complicados nessa parte de DOCTYPE que eramusados em versões anteriores do HTML e do XHTML. Hoje em dia, nada disso é mais importante. O recomendado é sempre usar a última versão do HTML, usando a declaração de DOCTYPE simples: !DOCTYPE html ó.¦ TZ« HTML O HTML é composto de diversas tags, cada uma com sua função e signicado. O HTML ¢, então, adicionou muitas novas tags, que veremos ao longo do curso. Nesse momento, vamos focar em tags que representam títulos, parágrafo e ênfase. Ti±¶™« Quando queremos indicar que um texto é um título em nossa página, utilizamos as tags de heading em sua marcação: h1Mirror Fashion./h1 h2Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios./h2 As tags de heading são tags de conteúdo e vão de h1 a h6, seguindo a ordem de importância, sendo h1 o título principal, o mais importante, e h6 o título de menor importância. Utilizamos, por exemplo, a tag h1 para o nome, título principal da página, e a tag h2 como subtítulo ou como título de seções dentro do documento. A ordem de importância, além de inžuenciar no tamanho padrão de exibição do texto, tem impacto nas ferramentas que processam HTML. As ferramentas de indexação de conteúdo para buscas, como o Google, Bing ou Yahoo! levamem consideração essa ordem e relevância. Os navegadores especiais para acessibilidade também interpretamo conteúdo dessas tags demaneira a diferenciar seu conteúdo e facilitar a navegação do usuário pelo documento. Capítulo ó - Introdução a HTML e CSS - Tags HTML - Página É

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript PZ§a§Z€™« Quando exibimos qualquer texto em nossa página, é recomendado que ele seja sempre conteúdo de alguma tag lha da tag body. A marcação mais indicada para textos comuns é a tag de parágrafo: pNenhum item na sacola de compras./p Se você tiver vários parágrafos de texto, use várias dessas tags p para separá-los: pUm parágrafo de texto./p pOutro parágrafo de texto./p MZ§hZcou« ou e•€Z«u Quando queremos dar uma ênfase diferente a um trecho de texto, podemos utilizar as marcações de ênfase. Podemos deixar um texto “mais forte” com a tag strong ou deixar o texto com uma “ênfase acentuada” com a tag em. Também há a tag small, que diminui o tamanho do texto. Por padrão, os navegadores renderizarão o texto dentro da tag strong em negrito e o texto dentro da tag em em itálico. Existem ainda as tags b e i, que atingem o mesmo resultado visualmente, mas as tags strong e em são mais indicadas por denirem nossa intenção de signicado ao conteúdo, mais do que uma simples indicação visual. Vamos discutir melhor a questão do signicado das tags mais adiante. pCompre suas roupas e acessórios na strongMirror Fashion/strong./p ó.¢ I“Zu•« A tag img dene uma imagem em uma página 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 não possa ser carregada ou visualizada. O HTML ¢ introduziu duas novas tags especícas para imagem: figure e figcaption. A tag figure dene uma imagem com a conhecida tag img. Além disso, permite adicionar uma legenda para a imagem por meio da tag figcaption. figure img src=img/produto1.png alt=Foto do produto figcaptionFuzz Cardigan por R$ 129,90/figcaption /figure Capítulo ó - Introdução a HTML e CSS - Imagens - Página Õþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó.ä A u«±§¶±¶§Z o™« Z§¤¶†ê™« ou ¶“ £§™u±™ Como todo tipo de projeto de soŸware, existem algumas recomendações quanto à organização dos arquivos de um site. Não há nenhum rigor técnico quanto a essa organização e, namaioria das vezes, você vai adaptar as recomendações da maneira que for melhor para o seu projeto. Como um site é um conjunto de páginasWeb 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, é recomendado que exista uma “capa”, uma página inicial que possa indicar para o visitante quais são as outras páginas que fazem parte desse projeto e como ele pode acessá-las, como se fosse o índice do site. Esse índice, não por coincidência, é convenção adotada pelos servidores de páginas Web. Se desejamos que uma determinada pasta seja servida como um site e dentro dessa pasta existe um arquivo chamado index.html, esse arquivo será a página inicial a menos que alguma conguração determine outra página para esse m. Dentro da pasta do site, no mesmo nível que o index.html, é recomendado que sejam criadas mais algumas pastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts. Para iniciar um projeto, teríamos uma estrutura de pastas como a demonstrada na imagem a seguir: Muitas vezes, um site é servido por meio de uma aplicação Web e, nesses casos, a estrutura dos arquivos depende de como a aplicação necessita dos recursos para funcionar corretamente. Porém, no geral, as apli-cações também seguem um padrão bem parecido com o que estamos adotando para o nosso projeto. ó.ß Eo†±™§u« u IDE« Existem editores de texto como Gedit (www.gnome.org), Sublime (http://www.sublimetext.com/) e Note-pad++ (http://notepad-plus-plus.org), que possuem realce de sintaxe e outras ferramentas para facilitar o desenvolvimento de páginas. Há também IDEs (Integrated Development Environment), que oferecem re-cursos como autocompletar e pré-visualização, como Eclipse e Visual Studio. ó.˜ P§†“u†§Z £a†•Z A primeira página que desenvolveremos para a Mirror Fashion será a Sobre, que explica detalhes sobre a empresa, apresenta fotos e a história. Capítulo ó - Introdução a HTML e CSS - A estrutura dos arquivos de um projeto - Página ÕÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Recebemos o design já pronto, assim como os textos. Nosso trabalho, como desenvolvedores de front-end, é codicar o HTML e CSS necessários para esse resultado. Capítulo ó - Introdução a HTML e CSS - Primeira página - Página Õó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Capítulo ó - Introdução a HTML e CSS - Primeira página - Página Õì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó.É Eìu§hih†™: £§†“u†§™« £Z««™« h™“ HTML Õ) 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 páginas. • Copie a pasta caelum/¦ì/mirror-fashion para a área de trabalho de sua máquina. • Verique a pasta img, agora cheia de arquivos do design do site. Além desta pasta, teremos as pastas js e css, que ainda não usaremos. E“ hZ«Z Você pode baixar um ZIP com todos os arquivos necessários para o curso aqui: http:// mirrorfashion.net/caelum-arquivos-curso-web.zip ó) Dentro da pasta mirror-fashion, vamos criar o arquivo sobre.html com a estrutura básica contendo o DOCTYPE e as tags html, head e body: !DOCTYPE html html head meta charset=utf-8 titleSobre a Mirror Fashion/title /head body /body /html ì) A página deve ter uma imagem com o logo da empresa, um título e um texto falando sobre ela. Use a tag img para o logo, h1 para título, h2 para subtítulo e p para parágrafo: img src=img/logo.png h1A Mirror Fashion/h1 p A Mirror Fashion é a maior empresa de comércio eletrônico no segmento de moda em todo o mundo. Fundada em 1932, possui filiais em 124 países........ /p Dica: o texto para ser colocado na página está no arquivo sobre.txt disponível na pastaCaelum/¦ì/textos. São vários parágrafos que devem ser adaptados com o HTML apropriado. Após copiar o texto do arquivo sobre.txt coloque cada um dos parágrafos dentro de uma tag p. Coloque também o título História dentro de uma tag h2. Capítulo ó - Introdução a HTML e CSS - Exercício: primeiros passos com HTML - Página Õ¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¦) Um texto corrido sem ênfases é difícil de ler. Use negritos e itálicos para destacar partes importantes. Use a tag strong para a ênfase mais forte em negrito, por exemplo para destacar o nome da empresa no texto do primeiro parágrafo: pA strongMirror Fashion/strong é a maior empresa comércio eletrônico......./p Use também a ênfase com em que deixará o texto em itálico. Na parte da História, coloque os nomes das pessoas e da família em em. ¢) A página deve ter duas imagens. A primeira apresenta o centro da Mirror Fashion e deve ser inserida após o segundo parágrafo do texto. A outra, é uma imagem da Família Pelho e deve ser colocada após o subtítulo da História. As imagens podem ser carregadas com a tag img, apontando seu caminho. Além disso, no HTML¢, podemos usar as tags figure e figcaption para destacar a imagem e colocar uma legenda em cada uma. A imagem do centro de distribuição está em img/centro-distribuicao.png: figure img src=img/centro-distribuicao.png figcaptionCentro de distribuição da Mirror Fashion/figcaption /figure A imagem da família é a img/familia-pelho.jpg e deve ser colocada na parte de História: figure img src=img/familia-pelho.jpg figcaptionFamília Pelho/figcaption /figure Verique o resultado no navegador. Devemos já ver o conteúdo e as imagens na sequência, mas sem um design muito interessante. B™Z £§a±†hZ - I•ou•±Zca™ Uma prática sempre recomendada, ligada à limpeza e utilizada para facilitar a leitura do código, é o uso correto de recuos, ou indentação, no HTML. Costumamos alinhar elementos “irmãos” na mesma margem e adicionar alguns espaços ou um tab para elementos “lhos”. A maioria dos exercícios dessa apostila utiliza um padrão recomendado de recuos. Capítulo ó - Introdução a HTML e CSS - Exercício: primeiros passos com HTML - Página Õ¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript B™Z £§a±†hZ - C™“u•±a§†™« Quando iniciamos nosso projeto, utilizamos poucas tags HTML.Mais tarde adicionaremos uma quantidade razoável de elementos, o que pode gerar uma certa confusão. Para manter o código mais legível, é recomendada a adição de comentários antes da abertura e após o fechamento de tags estruturais (que conterão outras tags). Dessa maneira, nós podemos identicar claramente quando um elemento está dentro dessa estrutura ou depois da mesma. !-- início do cabecalho -- div id=header pEsse parágrafo está dentro da área principal./p /div !-- fim do cabecalho -- pEsse parágrafo está depois da área principal./p ó.Õþ E«±††ñZ•o™ h™“ CSS Quando escrevemos o HTML, marcamos o conteúdo da página com tags que melhor representam o signicado daquele conteúdo. Aí quando abrimos a página no navegador é possível perceber que o navegador mostra as informações com estilos diferentes. Um hÕ, por exemplo, ca em negrito numa fonte maior. Parágrafos de texto são espaçados entre si, e assim por diante. Isso quer dizer que o navegador tem um estilo padrão para as tags que usamos. Mas, claro, pra fazer sites bonitões vamos querer customizar o design dos elementos da página. Antigamente, isso era feito no próprio HTML. Se quisesse um título em vermelho, era só fazer: h1font color=redMirror Fashion anos 90/font/h1 Além da tag font, várias outras tags de estilo existiam. Mas isso é passado. Tags HTML para estilo são má prática hoje em dia e jamais devem ser usadas. Em seu lugar, surgiu o CSS, que é uma outra linguagem, separada do HTML, com objetivo único de cuidar da estilização da página. A vantagem é que o CSS é bem mais robusto que o HTML para estilização, como veremos. Mas, principalmente, escrever formatação visual misturado com conteúdo de texto no HTML se mostrou algo bem impraticável. O CSS resolve isso separando as coisas; regras de estilo não aparecem mais no HTML, apenas no CSS. Capítulo ó - Introdução a HTML e CSS - Estilizando com CSS - Página Õä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó.ÕÕ S†•±Zìu u †•h¶«a™ ou CSS A sintaxe do CSS tem estrutura simples: é uma declaração de propriedades e valores separados por um sinal de dois pontos “:”, e cada propriedade é separada por um sinal de ponto e vírgula “;” 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 três maneiras diferentes. A±§†f¶±™ «±íu A primeira delas é como um atributo style no próprio elemento: p style=color: blue; background-color: yellow; O conteúdo desta tag será exibido em azul com fundo amarelo no navegador! /p Mas tínhamos acabado de discutir que uma das grandes vantagens do CSS eramanter as regras de estilo fora do HTML. Usando esse atributo style não parece que zemos isso. Justamente por isso não se recomenda esse tipo de uso na prática, mas sim os que veremos a seguir. A ±Z «±íu A outra maneira de se utilizar o CSS é declarando suas propriedades dentro de uma tag style. Como estamos declarando as propriedades visuais de um elemento em outro lugar do nosso documento, precisamos indicar de alguma maneira a qual elemento nos referimos. Fazemos isso utilizando um seletor CSS. É basicamente uma forma de buscar certos elementos dentro da página que receberão as regras visuais que queremos. No exemplo a seguir, usaremos o seletor que pega todas as tags p e altera sua cor e background: !DOCTYPE html html head meta charset=utf-8 titleSobre a Mirror Fashion/title style p { background-color: yellow; color: blue; } Capítulo ó - Introdução a HTML e CSS - Sintaxe e inclusão de CSS - Página Õß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript /style /head body p O conteúdo desta tag será exibido em azul com fundo amarelo! /p p strongTambém/strong será exibido em azul com fundo amarelo! /p /body /html O código anterior da tag style indica que estamos alterando a cor e o fundo de todos os elementos com tag p. Dizemos que selecionamos esses elementos pelo nome de sua tag, e aplicamos certas propriedades CSS apenas neles. A§¤¶†ê™ uì±u§•™ A terceira maneira de declararmos os estilos do nosso documento é com um arquivo externo, geralmente com a extensão .css. Para que seja possível declarar nosso CSS em um arquivo à parte, precisamos indicar em nosso documento HTML uma ligação entre ele e a folha de estilo. Além da melhor organização do projeto, a folha de estilo externa traz ainda as vantagens de manter nosso HTML mais limpo e do reaproveitamento de uma mesma folha de estilos para diversos documentos. A indicação de uso de uma folha de estilos externa deve ser feita dentro da tag head do nosso documento HTML: !DOCTYPE html html head meta charset=utf-8 titleSobre a Mirror Fashion/title link rel=stylesheet href=estilos.css /head body p O conteúdo desta tag será exibido em azul com fundo amarelo! /p p strongTambém/strong será exibido em azul com fundo amarelo! /p /body /html Capítulo ó - Introdução a HTML e CSS - Sintaxe e inclusão de CSS - Página Õ˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript E dentro do arquivo estilos.css colocamos apenas o conteúdo do CSS: p { color: blue; background-color: yellow; } ó.Õó P§™£§†uoZou« ±†£™§a€†hZ« u €™•±u« Da mesma maneira que alteramos cores, podemos alterar o texto. Podemos denir fontes com o uso da propriedade font-family. Apropriedade font-family pode receber seu valor comou sem aspas. No primeiro caso, estaremos passando o nome do arquivo de fonte a ser utilizado, no último, estaremos passando a família da fonte. Por padrão, os navegadores mais conhecidos exibem texto em um tipo que conhecemos como “serif ”. As fontes mais conhecidas (e comumente utilizadas como padrão) são “Times” e “Times New Roman”, depen-dendo do sistema operacional. Elas são chamadas de fontes serifadas pelos pequenos ornamentos em suas terminações. Podemos alterar a família de fontes que queremos utilizar em nosso documento para a família “sans-serif ” (sem serifas), que contém, por exemplo, as fontes “Arial” e “Helvetica”. Podemos também declarar que que-remos utilizar uma família de fontes “monospace” como, por exemplo, a fonte “Courier”. h1 { font-family: serif; } h2 { font-family: sans-serif; } p { font-family: monospace; } É possível, e muito comum, declararmos o nome de algumas fontes que gostaríamos de vericar se existem no computador, permitindo que tenhamos um controle melhor da forma como nosso texto será exibido. Normalmente, declaramos as fontesmais comuns, e existeumgrupo de fontes que são consideradas “seguras” por serem bem populares. Em nosso projeto, vemos que as fontes não têm ornamentos. Então vamos declarar essa propriedade para todo o documento por meio do seu elemento body: Capítulo ó - Introdução a HTML e CSS - Propriedades tipográcas e fontes - Página ÕÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript body { font-family: Arial, Helvetica, sans-serif; } Nesse caso, o navegador vericará se a fonte “Arial” está disponível e a utilizará para renderizar os textos de todos os elementos do nosso documento que, por cascata, herdarão essa propriedade do elemento body. Caso a fonte “Arial” não esteja disponível, o navegador vericará a disponibilidade da próxima fonte decla-rada, no nosso exemplo a “Helvetica”. Caso o navegador não encontre também essa fonte, ele solicita qualquer fonte que pertença à família “sans-serif ”, declarada logo a seguir, e a utiliza para exibir o texto, não importa qual seja ela. Temos outras propriedades para manipular a fonte, como a propriedade font-style, que dene o estilo da fonte que pode ser: normal (normal na vertical), italic (inclinada) e oblique (oblíqua). ó.Õì A†•„Z“u•±™ u ouh™§Zca™ ou ±uì±™ Já vimosuma série de propriedades e subpropriedades que determinamo estilo do tipo (fonte). Agora, vamos conhecer algumas maneiras de alterarmos as disposições dos textos. Uma das propriedades mais simples, porém muito utilizada, é a que diz respeito ao alinhamento de texto: a propriedade text-align. p { text-align: right; } O exemplo acima determina que todos os parágrafos da nossa página terão o texto alinhado para a direita. Também é possível determinar que um elemento tenha seu conteúdo alinhado ao centro ao denirmos o valor center para a propriedade text-align, ou então denir que o texto deve ocupar toda a largura do elemento aumentando o espaçamento entre as palavras com o valor justify. O padrão é que o texto seja alinhado à esquerda, com o valor left, porém é importante lembrar que essa propriedade propaga-se em cascata. É possível congurar também uma série de espaçamentos de texto com o CSS: p { line-height: 3px; /* tamanho da altura de cada linha */ letter-spacing: 3px; /* tamanho do espaço entre cada letra */ word-spacing: 5px; /* tamanho do espaço entre cada palavra */ text-indent: 30px; /* tamanho da margem da primeira linha do texto */ } Capítulo ó - Introdução a HTML e CSS - Alinhamento e decoração de texto - Página óþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó.Õ¦ I“Zu“ ou €¶•o™ A propriedade background-image permite indicar um arquivo de imagem para ser exibido ao fundo do elemento. Por exemplo: h1 { background-image: url(sobre-background.jpg); } Com essa declaração, o navegador vai requisitar um arquivo sobre-background.jpg, que deve estar na mesma pasta do arquivo CSS onde consta essa declaração. ó.Õ¢ B™§oZ« As propriedades do CSS para denirmos as bordas de um elemento nos apresentam uma série de opções. Podemos, para cada borda de um elemento, determinar sua cor, seu estilo de exibição e sua largura. Por exemplo: body { border-color: red; border-style: solid; border-width: 1px; } Para que o efeito da cor sobre a borda surta efeito, é necessário que a propriedade border-style tenha qual-quer valor diferente do padrão none. Conseguimos fazer também comentários no CSS usando a seguinte sintaxe: /* deixando o fundo ridículo */ body { background: gold; } Capítulo ó - Introdução a HTML e CSS - Imagem de fundo - Página óÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó.Õä Eìu§hih†™: £§†“u†§™« £Z««™« h™“ CSS Õ) Aplicaremos um pouco de estilo em nossa página usando CSS. Dentro da pasta css, crie um arquivo sobre.css, que conterá nosso código de estilo para essa página. Em primeiro lugar, precisamos carregar o arquivo sobre.css dentro da página sobre.html com a tag link dentro da tag head: link rel=stylesheet href=css/sobre.css Para a tag body, altere a sua cor e sua fonte base por meio das propriedades color e font-family: body { color: #333333; font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; } O título 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 subtítulos, para ajudar a separar o conteúdo. h1 { background-image: url(../img/sobre-background.jpg); } h2 { border-bottom: 2px solid #333333; } Acerte também a renderização das guras. Coloque um fundo cinza, uma borda sutil, deixe a legenda em itálico 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 página começa a pegar o estilo da página nal! Capítulo ó - Introdução a HTML e CSS - Exercício: primeiros passos com CSS - Página óó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó) (opcional) Teste outros estilos de bordas em vez do solid que vimos no exercício anterior. Algumas possibilidades: dashed, dotted, double, groove e outros. Teste também outras possibilidades para o text-align, como left, right e justify. ó.Õß C™§u« •ZWuf Propriedades como background-color, color, border-color, entre outras aceitam uma cor como valor. Exis-tem várias maneiras de denir cores quando utilizamos o CSS. A primeira, mais simples e ingênua, é usando o nome da cor: h1 { color: red; } h2 { background: yellow; } O difícil é acertar a exata variação de cor que queremos no design. Por isso, é bem incomum usarmos cores com seus nomes. O mais comum é denir a cor com base em sua composição RGB. Capítulo ó - Introdução a HTML e CSS - Cores naWeb - Página óì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript RGB é um sistema de cor bastante comum aos designers. Ele permite especicar até Õä milhões de cores como uma combinação de três cores base: Vermelho (Red), Verde (Green), Azul (Blue). Podemos escolher a intensidade de cada um desses três canais básicos, numa escala de þ a ó¢¢. Um amarelo forte, por exemplo, tem ó¢¢ de Red, ó¢¢ de Green e þ de Blue (ó¢¢, ó¢¢, þ). Se quiser um laranja, basta diminuir um pouco o verde (ó¢¢, óþþ, þ). E assim por diante. No CSS, podemos escrever as cores tendo como base sua composição RGB. Aliás, no CSSì - que veremos melhor depois - há até uma sintaxe bem simples pra isso: h3 { color: rgb(255, 200, 0); } Essa sintaxe funciona nos browsers mais modernos mas não é a mais comum na prática, por questões de compatibilidade. O mais comum é a notação hexadecimal, que acabamos usando no exercício anterior ao escrever kFóEDED. Essa sintaxe tem suporte universal nos navegadores e é mais curta de escrever, apesar de ser mais enigmática. h3 { background: #F2EDED; } No fundo, porém, é a mesma coisa. Na notação hexadecimal (que começa com k), temos ä caracteres. Os primeiros ó indicam o canal Red, os dois seguintes, o Green, e os últimos, Blue. Ou seja, RGB. E usamos a matemática pra escrever menos, trocando a base numérica de decimal para hexadecimal. Na base hexadecimal, os algarismos vão de zero a quinze (ao invés do zero a nove da base decimal comum). Para representar os algarismos de dez a quinze, usamos letras de A a F. Nessa sintaxe, portanto, podemos utilizar números de þ-É e letras de A-F. Há uma conta por trás dessas conversões, mas seu editor de imagens deve ser capaz de fornecer ambos os valores para você sem problemas. Um valor ó¢¢ vira FF na notação hexadecimal. A cor kFóEDED, por exemplo, é equivalente a rgb(ó¦ó, óìß, óìß), um cinza claro. Vale aqui uma dica quanto ao uso de cores hexadecimais, toda vez que os caracteres presentes na composição da base se repetirem, estes podem ser simplicados. Então um número em hexadecimal ììääFF, pode ser simplicado para ìäF. ó.Õ˜ L†«±Z« HTML Não são raros os casos em que queremos exibir uma listagem em nossas páginas. O HTML tem algumas tags denidas para que possamos fazer isso de maneira correta. A lista mais comum é a lista não-ordenada. Capítulo ó - Introdução a HTML e CSS - Listas HTML - Página ó¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ul liPrimeiro item da lista/li li Segundo item da lista: ul liPrimeiro item da lista aninhada/li liSegundo item da lista aninhada/li /ul /li liTerceiro item da lista/li /ul Note que, para cada item da lista não-ordenada, utilizamos umamarcação de item de lista li. No exemplo acima, utilizamos uma estrutura composta na qual o segundo item da lista contém uma nova lista. Amesma tag de item de lista li é utilizada quando demarcamos uma lista ordenada. ol liPrimeiro item da lista/li liSegundo item da lista/li liTerceiro item da lista/li liQuarto item da lista/li liQuinto item da lista/li /ol As listas ordenadas também podem ter sua estrutura composta por outras listas ordenadas como no exemplo que temos para as listas não-ordenadas. Também é possível ter listas ordenadas aninhadas em um item de uma lista não-ordenada e vice-versa. Existe um terceiro tipo de lista que devemos utilizar para demarcar um glossário, quando listamos termos e seus signicados. Essa lista é a lista de denição. dl dtHTML/dt dd HTML é a linguagem de marcação de textos utilizada para exibir textos como páginas na Internet. /dd dtNavegador/dt dd Navegador é o software que requisita um documento HTML através do protocolo HTTP e exibe seu conteúdo em uma janela. /dd /dl Capítulo ó - Introdução a HTML e CSS - Listas HTML - Página ó¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó.ÕÉ E«£ZcZ“u•±™ u “Z§u“ Utilizamos a propriedade padding para espaçamento e margin para margem. Vejamos cada uma e como elas diferem entre si. PZoo†• A propriedade padding é utilizada para denir uma margem interna em alguns elementos (por margem interna queremos dizer a distância entre o limite do elemento, sua borda, e seu respectivo conteúdo) e tem as subpropriedades listadas a seguir: • padding-top • padding-right • padding-bottom • padding-leŸ Essas propriedades aplicamuma distância entre o limite do elemento e seu conteúdo acima, à direita, abaixo e à esquerda respectivamente. Essa ordem é importante para entendermos como funciona a shorthand property do padding. Podemos denir todos os valores para as subpropriedades do padding em uma única propriedade, chamada exatamente de padding, e seu comportamento é descrito nos exemplos a seguir: Se passado somente um valor para a propriedade padding, essemesmo valor é aplicado em todas as direções. p { padding: 10px; } Se passados dois valores, o primeiro será aplicado acima e abaixo (equivalente a passar o mesmo valor para padding-top e padding-bottom) e o segundo será aplicado à direita e à esquerda (equivalente ao mesmo valor para padding-right e padding-left). p { padding: 10px 15px; } Se passados três valores, o primeiro será aplicado acima (equivalente a padding-top), o segundo será aplicado à direita e à esquerda (equivalente a passar o mesmo valor para padding-right e padding-left) e o terceiro valor será aplicado abaixo do elemento (equivalente a padding-bottom) p { padding: 10px 20px 15px; } Capítulo ó - Introdução a HTML e CSS - Espaçamento e margem - Página óä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Se passados quatro valores, serão aplicados respectivamente a padding-top, padding-right, padding-bottom e padding-left. Para facilitar a memorização dessa ordem, basta lembrar que os valores são aplicados em sentido horário. p { padding: 10px 20px 15px 5px; } MZ§†• A propriedade margin é bem parecida com a propriedade padding, exceto que ela adiciona espaço após o limite do elemento, ou seja, é um espaçamento além do elemento em si. Além das subpropriedades listadas a seguir, há a shorthand property margin que se comporta da mesma maneira que a shorthand property do padding vista no tópico anterior. • margin-top • margin-right • margin-bottom • margin-leŸ Há ainda umamaneira de permitir que o navegador dena qual será a dimensão da propriedade padding ou margin conforme o espaço disponível na tela: denimos o valor auto para a margem ou o espaçamento que quisermos. No exemplo a seguir, denimos que um elemento não tem nenhuma margem acima ou abaixo de seu con-teúdo e que o navegador dene uma margem igual para ambos os lados de acordo com o espaço disponível: p { margin: 0 auto; } D†“u•«ou« É possível determinar as dimensões de um elemento, por exemplo: p { background-color: red; height: 300px; width: 300px; } Todos os parágrafos do nosso HTML ocuparão ìþþ pixels de largura e de altura, comcor de fundo vermelha. Capítulo ó - Introdução a HTML e CSS - Espaçamento e margem - Página óß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó.óþ Eìu§hih†™«: †«±Z« u “Z§u•« Õ) Ainda na página sobre.html, crie um subtítulo chamado Diferenciais e, logo em seguida, uma lista de diferenciais. Use h2 para o subtítulo, ul para a lista e li para os itens da lista. Dica: você pode copiar o texto dos diferenciais do arquivo diferenciais.txt. h2Diferenciais/h2 ul liMenor preço do varejo, garantido/li liSe você achar uma loja mais barata, leva o produto de graça/li .... /ul Teste o resultado no navegador. ó) Podemosmelhorar a apresentação da página acertando alguns espaçamentos usando várias propriedades do CSS, como margin, padding e text-indent. h1 { padding: 10px; } h2 { margin-top: 30px; } p { padding: 0 45px; text-indent: 15px; } figure { padding: 15px; margin: 30px; } figcaption { margin-top: 10px; } Veja o resultado no navegador. ì) Para centralizar o body como no design, podemos usar o truque de colocar um tamanho xo e margens auto na esquerda de direita: Capítulo ó - Introdução a HTML e CSS - Exercícios: listas e margens - Página ó˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript body { margin-left: auto; margin-right: auto; width: 940px; } Verique mais uma vez o resultado. ó.óÕ L†•Ž« HTML Quando precisamos indicar que um trecho de texto se refere a um outro conteúdo, seja ele no mesmo docu-mento ou em outro endereço, utilizamos a tag de âncora a. Existem dois diferentes usos para as âncoras. Um deles é a denição de links: p Visite o site da a href=http://www.caelum.com.brCaelum/a. /p Note que a âncora está demarcando apenas a palavra “Caelum” de todo o conteúdo do parágrafo exemplicado. Isso signica que, ao clicarmos como cursor domouse na palavra “Caelum”, o navegador redirecionará o usuário para o site da Caelum, indicado no atributo href. Outro uso para a tag de âncora é a demarcação de destinos para links dentro do próprio documento, o que chamamos de bookmark. pMais informações a href=#infoaqui/a./p pConteúdo da página.../p h2 id=infoMais informações sobre o assunto:/h2 pInformações.../p De acordo com o exemplo acima, ao clicarmos sobre a palavra “aqui”, demarcada com um link, o usuário será levado à porção da página onde o bookmark “info” é visível. Bookmark é o elemento que tem o atributo id. Capítulo ó - Introdução a HTML e CSS - Links HTML - Página óÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript É possível, com o uso de um link, levar o usuário a um bookmark presente em outra página. a href=http://www.caelum.com.br/curso/wd43/#contato Entre em contato sobre o curso /a O exemplo acima fará com que o usuário que clicar no link seja levado à porção da página indicada no endereço, especicamente no ponto onde o bookmark “contato” seja visível. ó.óó Eìu§hih†™«: †•Ž« Õ) No primeiro parágrafo do texto, citamos o centro de distribuição na cidade de Jacarezinho, no Paraná. Transforme esse texto em um link externo apontando para o mapa no Google Maps. Use a tag a para criar link para o Google Maps: a href=https://maps.google.com.br/?q=Jacarezinho Jacarezinho, no Paraná /a Teste a página no navegador e acesse o link. ó) Durante o curso, vamos criar várias páginas para o site da Mirror Fashion, como uma página inicial (chamada index.html) e uma página de contato (chamada contato.html). Queremos, nessa página de Sobre que estamos fazendo, linkar para essas outras. Por isso, vamos criá-las agora na pasta mirror-fashion com a estrutura básica e um parágrafo indicando em qual página o usuário está. Não se preocupe, elas serão incrementadas em breve. Crie a página index.html: !DOCTYPE html html head titleMirror Fashion/title meta charset=utf-8 /head body h1Olá, sou o index.html!/h1 /body /html Crie a página contato.html: !DOCTYPE html html Capítulo ó - Introdução a HTML e CSS - Exercícios: links - Página ìþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript head titleMirror Fashion/title meta charset=utf-8 /head body h1Olá, sou o contato.html/h1 /body /html Agora adicione links internos na nossa sobre.html apontando para estas outras páginas que acabamos de criar. O terceiro parágrafo do texto possui diversas referências a essas outras páginas mas ainda sem links. Crie links lá: ... Acesse a href=index.htmlnossa loja/a ou entre em a href=contato.htmlcontato/a se tiver dúvidas... Repare como apenas envolvemos o texto a ser linkado usando a tag a. Veja o resultado. ì) Se reparar bem, ainda nesse terceiro parágrafo de texto, há referências textuais para as outras seções da nossa página, em particular para a História e os Diferenciais. Para facilitar a navegação do usuário, pode-mos transformar essas referências em âncoras para as respectivas seções no HTML. Para isso, adicione um id em cada um dos subtítulos para identicá-los: h2 id=historiaHistória/h2 ... h2 id=diferenciaisDiferenciais/h2 Agora que temos os ids dos subtítulos preenchidos, podemos criar uma âncora para eles: ... Conheça também nossa a href=#historiahistória/a e nossos a href=#diferenciaisdiferenciais/a.... Veja o resultado em seu navegador. ó.óì Eu“u•±™« u«±§¶±¶§Z†« Já vimos muitas tags para casos especícos: títulos com hÕ, parágrafos com p, imagens com img, listas com ul etc. E ainda vamos ver várias outras. Mas é claro que não existe uma tag diferente para cada coisa do universo. O conjunto de tags do HTML é bem vasto mas é também limitado. Capítulo ó - Introdução a HTML e CSS - Elementos estruturais - Página ìÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Invariavelmente você vai cair algum dia num cenário onde não consegue achar a tag certa para aquele con-teúdo. Nesse caso, pode usar as tags div e span que funcionam como coringas. São tags sem nenhum signicado especialmas que podem servir para agruparumcerto conteúdo, tantoumbloco da página quanto um pedaço de texto. E, como vamos ver a seguir, vamos poder estilizar esses divs e spans com CSS customizado. Por padrão, eles não têm estilo algum. ó.ó¦ CSS: Suu±™§u« ou ID u €†„™ Já vimos como selecionar elementos no CSS usando simplesmente o nome da tag: p { color: red; } Apesar de simples, é uma maneira muito limitada de selecionar. Às vezes não queremos pegar todos os parágrafos da página, mas apenas algum determinado. Existem, portanto, maneiras mais avançadas de selecionarmos um ou mais elementos do HTML usando os seletores CSS. Vamos ver seletores CSS quase que ao longo do curso todo, inclusive alguns bem avançados e modernos do CSSì. Por enquanto, vamos ver mais ó básicos além do seletor por nome de tag. Suu±™§ ou ID É possível aplicar propriedades visuais a um elemento selecionado pelo valor de seu atributo id. Para isso, o seletor deve iniciar com o caractere “k” seguido do valor correspondente. #cabecalho { color: white; text-align: center; } O seletor acima fará com que o elemento do nosso HTML que tem o atributo id com valor “cabecalho” tenha seu texto renderizado na cor branca e centralizado. Note que não há nenhuma indicação para qual tag a propriedade será aplicada. Pode ser tanto uma div quanto um p, até mesmo tags sem conteúdo como uma img, desde que essa tenha o atributo id com o valor “cabecalho”. Como o atributo id deve ter valor único no documento, o seletor deve aplicar suas propriedades declaradas somente àquele único elemento e, por cascata, a todos os seus elementos lhos. Capítulo ó - Introdução a HTML e CSS - CSS: Seletores de ID e lho - Página ìó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Suu±™§ „†u§a§¤¶†h™ Podemos ainda utilizar um seletor hierárquico 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 nos elementos img lhos do elemento com id=rodape. ó.ó¢ Eìu§hih†™«: «uu±™§u« CSS Õ) Emnossa página, temosuma figure que aponta para a imagem centro-distribuicao.png. Queremos acertar seu tamanho para ser compatível com a imagem de dentro, além de centralizá-la na página. Com CSS, podemos congurar o tamanho com width e colocar as margens laterais como auto para cen-tralizar. Mas como indicar no CSS que queremos aplicar essas regras somente a um certo elemento? Usando IDs. Coloque um id na figure para podermos estilizá-la especicamente via CSS: figure id=centro-distribuicao .... Adicionando o CSS: #centro-distribuicao { margin-left: auto; margin-right: auto; width: 550px; } Teste no navegador. Compare o resultado coma figure de id familia-pelho que não recebeu omesmo estilo. Capítulo ó - Introdução a HTML e CSS - Exercícios: seletores CSS - Página ìì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó) Crie um rodapé para a página utilizando uma div, que deve ser inserida como último elemento dentro da tag body: div id=rodape img src=img/logo.png copy; Copyright Mirror Fashion /div Teste o resultado. ì) Assim como zemos para os títulos e subtítulos, estilize o nosso rodapé. Repare no uso do id via CSS para selecionarmos apenas o elemento especíco que será estilizado. Repare também no uso do seletor de descendentes para indicar um elemento que está dentro de outro. #rodape { color: #777; margin: 30px 0; padding: 30px 0; } #rodape img { margin-right: 30px; vertical-align: middle; width: 94px; } Teste o resultado nal no navegador. Capítulo ó - Introdução a HTML e CSS - Exercícios: seletores CSS - Página ì¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó.óä F¶ì™ o™ o™h¶“u•±™ u €™Z± Suponhamos que, por uma questão de design, a imagem da família Pelho deva vir ao lado do parágrafo e conforme a imagem abaixo: Isso não acontece por padrão. Repare que, observando as tags HTML que usamos até agora, os elementos da página são desenhados um em cima do outro. É como se cada elemento fosse uma caixa (box) e o padrão é empilhar essas caixas verticalmente. Mais pra frente vamos entender melhor esse algoritmo, mas agora o importante é que ele atrapalha esse nosso design. Temos um problema: a tag figure ocupa toda a largura da página e aparece empilhada no žuxo do docu-mento, não permitindo que outros elementos sejam adicionados ao seu lado. Este problema pode ser solucionado por meio da propriedade žoat. Esta propriedade permite que tiremos um certo elemento do žuxo vertical do documento o que faz com que o conteúdo abaixo dele žua ao seu redor. Na prática, vai fazer exatamente o layout que queremos. Em nosso exemplo, o conteúdo do parágrafo tentará žuir ao redor da nossa imagem com žoat. Perceba que houve uma perturbação do žuxo HTML, pois agora a nossa imagem parece existir fora do žuxo. ó.óß Eìu§hih†™«: €¶±¶Zca™ ou uu“u•±™« Õ) Queremos que a imagem da Família Pelho esteja žutuando a direita no texto na seção sobre a História da empresa. Para isso, use a propriedade float no CSS. Como a figure com a imagem da família Pelho ainda não possui id, adicione um: figure id=familia-pelho .... Agora podemos referenciar o elemento através de seu id em nosso CSS, indicando a žutuação e uma margem para espaçamento: Capítulo ó - Introdução a HTML e CSS - Fluxo do documento e žoat - Página ì¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript #familia-pelho { float: right; margin: 0 0 10px 10px; } Teste o resultado. Repare como o texto é renderizado ao redor da imagem, bem diferente de antes. ó) (opcional) Faça testes com o float: left também. ì) (opcional) Teste žutuar a imagem do centro de distribuição. Como o conteúdo žuirá ao seu redor agora? É o que queríamos? Como melhorar? ó.ó˜ O €¶±¶§™ u £§u«u•±u oZWuf h™“ ™ HTML¢ Nos últimos anos, muito tem se falado sobre a próxima versão do HTML, o HTML¢. Esse projeto é um grande esforço do WìC e dos principais browsers para atender a uma série de necessidades do desenvolvi-mento daWeb como plataforma de sistemas distribuídos e informação descentralizada. Algumas novidades são importantes para a marcação de conteúdo, outras para a estilização com o CSS nível ì (CSSì) e outras novidades são importantes para interação avançada como usuário comnovas funcionalidades do navegador com JavaScript. Apesar da especicação ainda não estar completa e existirem diferenças entre as implementações adotadas pelos diferentes navegadores ainda hoje, o mercado está tomando uma posição bem agressiva quanto à ado-ção dos novos padrões e hoje muitos projetos já são iniciados com os novos padrões. Em alguns casos, os esforços de manutenção de um projeto que adota os novos padrões é similar ou compa-rável com a manutenção de um projeto que prevê compatibilidade total com navegadores já obsoletos como o Internet Explorer ß e o Firefox ì. Em nosso projeto, vamos adotar os padrões do HTML¢ e vamos conhecer e utilizar algumas de suas novi-dades quanto à melhoria da semântica de conteúdo e novas propriedades de CSS que nos permite adicionar efeitos visuais antes impossíveis. Ainda assim, nosso projeto será parcialmente compatível com navegadores obsoletos por conta da técnica Progressive Enhancement. Capítulo ó - Introdução a HTML e CSS - O futuro e presente daWeb com o HTML¢ - Página ìä

CZ£i±¶™ ì HTML semântico e posicionamento no CSS “O caos é a rima do inaudito.” – Zack de la Rocha ì.Õ O £§™hu««™ ou ou«u•ê™ê†“u•±™ ou ¶“Z ±uZ Existe hoje no mercado uma grande quantidade de empresas especializadas no desenvolvimento de sites e aplicações web, bem como algumas empresas de desenvolvimento de soŸware ou agências de comunicação que têm pessoas capacitadas para executar esse tipo de projeto. Quando detectada a necessidade do desenvolvimento de um site ou aplicação web, a empresa que tem essa necessidade deve passar todas as informações relevantes ao projeto para a empresa que vai executá-lo. A em-presa responsável pelo seu desenvolvimento deve analisar muito bem essas informações e utilizar pesquisas para complementar ou mesmo certicar-se da validade dessas informações. Um projeto de site ou aplicação web envolve muitas disciplinas em sua execução, pois são diversas caracte-rísticas a serem analisadas e diversas as possibilidades apresentadas pela plataforma. Por exemplo, devemos conhecer muito bem as características do público alvo, pois ele dene qual a melhor abordagem para denir a navegação, tom linguístico e visual a ser adotado, entre outras. A anidade do público com a Internet e o computador pode inclusive denir o tipo e a intensidade das inovações 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 formação na área de comunicação. Essa equipe, ou pessoa, analisa e endereça uma série de informações da característica humana do projeto, denindo a quantidade, conteúdo e localização de cada informação. Algumas das motivações e práticas de Design de Interação e Experiência do Usuário são conteúdo do curso Design de Interação, Experiência do Usuário e Usabilidade. O resultado do trabalho dessa equipe é uma

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript série de denições sobre a navegação (mapa do site) eumesboço de cadauma das visões, que são as páginas, e visões parciais como, por exemplo, os diálogos de alerta e conrmação da aplicação. Essas visões não adotam nenhum padrão de design gráco: são utilizadas fontes, cores e imagens neutras, embora as informações escritas devam ser denidas nessa fase do projeto. Esses esboços das visões são o que chamamos de wireframes e guiam o restante do processo de design. Com os wireframes em mãos, é hora de adicionar as imagens, cores, tipos, fundos, bordas e outras caracte-rísticas visuais. Esse trabalho é realizado pelos designers grácos, que utilizam ferramentas grácas como Capítulo ì - HTML semântico e posicionamento no CSS - O processo de desenvolvimento de uma tela - Página ì˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Adobe Photoshop, Adobe Fireworks, GIMP, entre outras. O que resulta desse trabalho que o designer realiza em cada wireframe é o que chamamos de layout. Os layouts são imagens estáticas já com o visual completo a ser implementado. Apesar de os navegadores serem capazes de exibir imagens estáticas, exibir uma única imagem para o usuário nal no navegador não é a forma ideal de se publicar uma página. Para que as informações sejam exibidas de forma correta e para possibilitar outras formas de uso e interação com o conteúdo, é necessário que a equipe de programação front-end transforme essas imagens em telas visíveis e, principalmente, utilizáveis pelos navegadores. Existem diversas tecnologias e ferramentas para realizar esse tipo de trabalho. Algumas das tecnologias disponíveis são: HTML, Adobe Flash, Adobe Flex, JavaFX e MicrosoŸ Silverlight. De todas as tecnologias disponíveis, a mais recomendada é certamente o HTML, pois é a linguagem que o navegador entende. Todas as outras tecnologias citadas dependem do HTML para serem exibidas correta-mente no navegador e, ultimamente, o uso do HTML, em conjunto com o CSS e o JavaScript, tem evoluído a ponto de podermos substituir algumas dessas outras tecnologias onde tínhamos mais poder e controle em relação à exibição de grácos, efeitos e interatividade. ì.ó O £§™u±™M†§§™§ FZ«„†™• Durante o curso, vamos produzir algumas páginas de um projeto: um e-commerce de roupas. No capítulo anterior, de introdução, criamos uma página simples de Sobre. Vamos começar agora a projetar o restante, com as páginas mais complexas. Uma equipe de UX já deniu as páginas, o conteúdo de cada uma delas e produziu alguns wireframes. Depois de realizado esse trabalho, a equipe de design já adicionou o visual desejado pelo cliente como resultado nal do projeto. Agora é a nossa vez de transformar esse layout emHTML, para que os navegadores possamler e renderizar o código, exibir a página para o usuário nal. No capítulo anterior, começamos a codicar a página de Sobre da nossa loja, com o intuito de praticar o básico de HTML e CSS. Nesse momento, vamos focar na construção da parte principal da loja, a Home Page, e seguiremos o layout ocial criado pela equipe de design: Capítulo ì - HTML semântico e posicionamento no CSS - O projeto Mirror Fashion - Página ìÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Figura ì.Õ: Design da Homepage ì.ì A•Z†«Z•o™ ™ LZí™¶± Antes de digitar qualquer código, é necessária uma análise do layout. Com essa análise, deniremos as prin-cipais áreas de nossas páginas. Um fator muito importante a ser considerado quando fazemos essa análise do layout é o modo como os navegadores interpretam e renderizam o HTML. O HTML é exibido no navegador de acordo com a ordem de leitura do idioma da página. Na maioria dos casos, a leitura é feita da esquerda para a direita, de cima para baixo, da mesma maneira que lemos essa apostila, por exemplo. Olhe detalhadamente nosso layout e tente imaginar qual a melhor maneira de estruturar nosso HTML para que possamos codicá-lo. De acordo com o posicionamento de elementos que foi denido desde a etapa de criação dos wireframes, Capítulo ì - HTML semântico e posicionamento no CSS - Analisando o Layout - Página ¦þ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript todas as páginas no nosso projeto obedecem a uma estrutura similar. E«±§¶±¶§Z oZ £a†•Z Note que há um cabeçalho (uma área que potencialmente se repetirá em mais de uma página) que ocupa uma largura xa; sendo assim, podemos criar uma seção exclusiva para o cabeçalho. Outra área que tem uma característica semelhante é o rodapé, pois pode se repetir em mais de uma página. Podemos notar que o fundo do elemento vai de uma ponta à outra da página, porém seu conteúdo segue a mesma largura xa do restante da página. A área central, que contém informações diferentes em cada página, não tem nenhum elemento ao fundo. Porém, notemos que sua largura é limitada antes de atingir o início e omda página. Notemos que, apesar do fundo do rodapé ir de uma ponta à outra, seu conteúdo também é limitado pelamesma largura do conteúdo. No caso da home page, o miolo da página pode ainda ser visto como dois blocos diferentes. Há o bloco principal inicial com o menu de navegação e o banner de destaque. E há outro bloco no nal com dois painéis com listas de produtos. Poderíamos denir essas áreas da seguinte maneira: body header !-- Conteúdo do cabeçalho -- /header section id=main !-- Conteúdo principal -- /section section id=destaques !-- Painéis com destaques -- /section Capítulo ì - HTML semântico e posicionamento no CSS - Analisando o Layout - Página ¦Õ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript footer !-- Conteúdo do rodapé -- /footer /body Note que utilizamos o atributo id do HTML para identicar a section principal. O atributo id deve ser único em cada página, ou seja, só pode haver um elemento com o atributo id=main. Mesmo se o outro elemento for de outra tag, o id não pode se repetir. De acordo com a estrutura acima, nós separamos as quatro áreas principais. ì.¦ HTML «u“a•±†h™ As tags que usamos antes - header, section e footer - são tags novas do HTML¢. Antigamente, numa situação parecida comessa, teríamos criado apenas três div, uma para cada parte da página, e talvez colocado ids diferentes pra cada uma. Qual a diferença entre colocar div e essas novas tags do HTML¢? Visualmente e funcionalmente, nenhuma diferença. A única diferença é o nome da tag e o signicado que elas carregam. E isso é bastante importante. Dizemos que a função do HTML é fazer a marcação do conteúdo da página, representar sua estrutura da informação. Não é papel do HTML, por exemplo, cuidar da apresentação nal e dos detalhes de design - isso é papel do CSS. O HTML precisa ser claro e limpo, focado em marcar o conteúdo. As novas tags do HTML¢ trazem novos signicados semânticos para usarmos em elementos HTML. Em vez de simplesmente agrupar os elementos do cabeçalho em um div genérico e sem signicado, usamos uma tag header que carrega em si o signicado de representar um cabeçalho. Com isso, temos um HTML com estrutura baseada no signicado de seu conteúdo, o que traz uma série de benefícios, como a facilidade de manutenção e compreensão do documento. Provavelmente, o design da sua página deixa bastante claro qual parte da sua página é o cabeçalho e qual parte é omenu de navegação. Visualmente, são distinguíveis para o usuário comum. Mas e se desabilitarmos o CSS e as regras visuais? Como distinguir esses conteúdos? Um HTML semântico carrega signicado independente da sua apresentação visual. Isso é particularmente importante quando o conteúdo será consumido por clientes não visuais. Há vários desses cenários. Um usuário cego poderia usar um leitor de tela para ouvir sua página. Neste caso, a estrutura semântica do HTML é essencial para ele entender as partes do conteúdo. Mais importante ainda, robôs de busca como o Google também são leitores não visuais da sua página. Sem um HTML semântico, o Google não consegue, por exemplo, saber que aquilo é um menu e que deve seguir seus links. Ou que determinada parte é só um rodapé informativo, mas não faz parte do conteúdo principal. Semântica éuma importante técnica de SEO- Search EngineOptimization - e crítica paramarketing digital. Capítulo ì - HTML semântico e posicionamento no CSS - HTML semântico - Página ¦ó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Vamos falar bastante de semântica ao longo do curso e esse é um ingrediente fundamental das técnicas modernas de web design. Veremos mais cenários onde uma boa semântica é essencial. ì.¢ Pu•«Z•o™ •™ „uZou§ Já sabemos que o nosso cabeçalho será representado pela tag header do HTML¢, semanticamente perfeita para a situação. Mas e o conteúdo dele? Observe apenas o cabeçalho no layout anterior. Quais blocos de conteúdo você identica nele? • O logo principal com o nome da empresa • Uma mensagem sobre a sacola de compras • Uma lista de links de navegação da loja Repare como não destacamos a presença do ícone da sacola. Ele não faz parte do conteúdo, é meramente decorativo. O conteúdo é a mensagem sobre os itens na sacola. Que tipo de conteúdo é esse? Qual tag usar? É apenas uma frase informativa, um parágrafo de texto. Podemos usar p: p Nenhum item na sacola de compras /p Mas e a imagem com o ícone? Como é decorativa, pertence ao CSS, como veremos depois. O HTML não tem nada a ver com isso. Continuando no header, nossa lista de links pode ser uma lista - ul comlis. Dentro de cada item, vamos usar um link - a - para a página correspondente. Mas há como melhorar ainda mais: esses links não são links ordinários, são essenciais para a navegação do usuário na página. Podemos sinalizar isso com a nova tag nav do HTML¢, que representa blocos de navegação primários: nav ul lia href=#Sua Conta/a/li lia href=#Lista de Desejos/a/li lia href=#Cartão Fidelidade/a/li lia href=sobre.htmlSobre/a/li lia href=#Ajuda/a/li /ul /nav O último ponto para fecharmos nosso cabeçalho é o logo. Como representá-lo? Capítulo ì - HTML semântico e posicionamento no CSS - Pensando no header - Página ¦ì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Visualmente, observamos no layout que é apenas uma imagem. Podemos usar então uma tag img como zemos antes. Mas e semanticamente, o que é aquele conteúdo? E, principalmente, o que signica aquele logo para clientes não visuais? Como gostaríamos que esse conteúdo fosse indexado no Google? Émuito comum, nesse tipo de situação, usar um h1 comum texto que represente o título da nossa página. Se pensarmos bem, o que queremos passar com o logo é a ideia de que a página é da Mirror Fashion. Quando o texto for lido para um cego, queremos essa mensagem lida. Quando o Google indexar, queremos que ele associe nossa página com Mirror Fashion e não com uma imagem “qualquer”. É fácil obter esse resultado colocando a img dentro do h1. E para representar o conteúdo textual da imagem (o que vai ser usado pelo leitor de tela e peloGoogle), usamos o atributo alt da imagem. Esse atributo indica conteúdo alternativo, que será usado quando o cliente não for visual e não conseguir enxergar a imagem visualmente. h1img src=img/logo.png alt=Mirror Fashion/h1 Repare como a colocação do HÕ e do ALT na imagem não alteram em nada a página visualmente. Estão lá por pura importância semântica. E isso émuito bom. O HÕ dará o devido destaque semântico para a o logo, colocando-o como elemento principal. E o ALT vai designar um conteúdo textual alternativo à imagem. ì.ä E«±††ñZca™ h™“ hZ««u« Para podermos estilizar os elementos que criamos, vamos precisar de uma forma de selecionarmos no CSS cada coisa. Já vimos seletor de tag e por ID. Ou seja, pra estilizar nosso menu nav, podíamos fazer: nav { ... } Mas imagine que podemos ter muitos NAV na página e queremos ser mais especícos. O ID é uma solução: nav id=menu-setores /nav E, no CSS: #menu-setores { ... } Vamos ver uma terceira forma, no uso de classes. O código é semelhante mas usa o atributo class no HTML e o ponto no CSS: Capítulo ì - HTML semântico e posicionamento no CSS - Estilização com classes - Página ¦¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript nav class=menu-setores /nav E, no CSS: .menu-setores { ... } Mas quando usar ID ou CLASS? Ambos fariam seu trabalho nesse caso. Mas é bom lembrar que ids são mais fortes, devem ser únicos na página, sempre. Embora esse nosso menu seja único agora, imagine se, no futuro, quisermos ter o mesmo menu em outro ponto da página, mais pra baixo? Usar classes facilita reuso de código e žexibilidade. Além disso, um elemento pode ter mais de uma classe ao mesmo tempo, aplicando estilos de várias regras do CSS ao mesmo tempo. No caso do ID, não. 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 também: p class=sacola Nenhum item na sacola de compras /p Ru¶±††ñZ•o™ ¶“Z hZ««u £Z§Z o†êu§«™« uu“u•±™« Pode ser interessante criar uma classe que determina a centralização horizontal de qualquer elemento, sem interferir em suas margens superior e inferior como no exemplo a seguir: .container { margin-right: auto; margin-left: auto; } Agora, é só adicionar a class “container” ao elemento, mesmo que ele já tenha outros valores para esse atri-buto: div class=info container pConteúdo que deve ficar centralizado/p /div Capítulo ì - HTML semântico e posicionamento no CSS - Estilização com classes - Página ¦¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ì.ß Eìu§hih†™«: „uZou§ «u“a•±†h™ Õ) Já temos o arquivo index.html criado. Vamos apagar seu único parágrafo, pois adicionaremos conteúdo que fará sentido. Crie o arquivo estilos.css na pasta css do nosso projeto, que será onde escreveremos o CSS visual da nossa página. Adicione também a tag link apontando para css/estilos.css: link rel=stylesheet href=css/estilos.css ó) Próximo passo: criar o cabeçalho. Use as tags semânticas que vimos no curso, como header, nav, ul, li, etc. Crie links para as páginas do menu. E use h1 para representar o título da página com o logo acessível. header h1img src=img/logo.png alt=Mirror Fashion/h1 p class=sacola Nenhum item na sacola de compras /p nav class=menu-setores ul lia href=#Sua Conta/a/li lia href=#Lista de Desejos/a/li lia href=#Cartão Fidelidade/a/li lia href=sobre.htmlSobre/a/li lia href=#Ajuda/a/li /ul /nav /header ì) Já podemos até testar no navegador. Repare como a página, embora sem estilo visual, é utilizável. É assim que os clientes não visuais lerão nosso conteúdo. Qual a importância de uma marcação semântica? ¦) Vamos criar a estilização visual básica do nosso conteúdo, sem nos preocuparmos com posicionamento ainda. Ajuste as cores e alinhamento dos textos. Coloque o ícone da sacola com CSS através de uma imagem de fundo do parágrafo: .sacola { background: url(../img/sacola.png) no-repeat top right; font-size: 14px; padding-right: 35px; text-align: right; width: 140px; } Capítulo ì - HTML semântico e posicionamento no CSS - Exercícios: header semântico - Página ¦ä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript .menu-setores ul { font-size: 15px; } .menu-setores 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: body { color: #333333; font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; } Teste no navegador e veja como nossa página começa a pegar o design. ì.˜ CSS Ru«u± Quando não especicamos nenhum estilo para nossos elementos do HTML, o navegador utiliza uma série de estilos padrão, que são diferentes em cada um dos navegadores. Em um momento mais avançado dos nossos projetos, poderemos enfrentar problemas com coisas que não tínhamos previsto; por exemplo, o espaçamento entre caracteres utilizado em determinado navegador pode fazer com que um texto que, pela nossa denição deveria aparecer em ¦ linhas, apareça com ¢, quebrando todo o nosso layout. Para evitar esse tipo de interferência, alguns desenvolvedores e empresas criaram alguns estilos que chama-mos de CSS Reset. A intenção é setar um valor básico para todas as características do CSS, sobrescrevendo totalmente os estilos padrão do navegador. Capítulo ì - HTML semântico e posicionamento no CSS - CSS Reset - Página ¦ß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Desse jeito podemos começar a estilizar as nossas páginas a partir de um ponto que é o mesmo para todos os casos, o que nos permite ter um resultado muito mais sólido em vários navegadores. Existem algumas opções para resetar os valores do CSS. Algumas que merecem destaque hoje são as seguin-tes: HTML¢ Boilerplate OHTML¢ Boilerplate éumprojeto que pretende fornecerumexcelente ponto de partida para quem pretende desenvolver um novo projeto com HTML¢. Uma série de técnicas para aumentar a compatibilidade da nova tecnologia com navegadores um pouco mais antigos estão presentes e o código é totalmente gratuito. Em seu arquivo “style.css”, estão reunidas diversas técnicas de CSS Reset. Apesar de consistentes, algumas dessas técnicas são um pouco complexas, mas é um ponto de partida que podemos considerar. YUIì CSS Reset Criado pelos desenvolvedores front-end do Yahoo!, uma das referências na área, esse CSS Reset é composto de ì arquivos distintos. O primeiro deles, chamado de Reset, simplesmente muda todos os valores possíveis para um valor padrão, onde atémesmo as tags h1 e small passama ser exibidas comomesmo tamanho. Osegundo arquivo é chamado de Base, onde algumasmargens e dimensões dos elementos são padronizadas. Oterceiro é chamado de Font, onde o tamanho dos tipos é denido para que tenhamos um visual consistente inclusive em diversos dispositivos móveis. EricMeyer CSS Reset Há também o famoso CSS Reset de EricMeyer, que pode ser obtido em http://meyerweb.com/eric/tools/css/ reset/. É apenas um arquivo com tamanho bem reduzido. ì.É B™hŽ ê« I•†•u Os elementos do HTML, quando renderizados no navegador, podem comportar-se basicamente de duas maneiras diferentes no que diz respeito à maneira como eles interferem no documento como um todo: em bloco (block) ou em linha (inline). Elementos em bloco são aqueles que ocupam toda a largura do documento, tanto antes quanto depois deles. Um bom exemplo de elemento em bloco é a tag h1, que já utilizamos em nosso projeto. Note que não há nenhum outro elemento à esquerda ou à direita do nosso nome da loja, apesar da expressão “Mirror Fashion” não ocupar toda a largura do documento. Entre os elementos em bloco, podemos destacar as tags de heading h1 a h6, os parágrafos p e divisões div. Elementos em linha são aqueles que ocupam somente o espaço necessário para que seu próprio conteúdo seja exibido, permitindo que outros elementos em linha possam ser renderizados logo na sequência, seja antes ou depois, exibindo diversos elementos nessa mesma linha. Capítulo ì - HTML semântico e posicionamento no CSS - Block vs Inline - Página ¦˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Entre os elementos em linha, podemos destacar as tags de âncora a, as tags de ênfase small, strong e em e a tag de marcação de atributos span. Saber a distinção entre essesmodos de exibição é importante, pois há diferenças na estilização dos elementos dependendo do seu tipo. Pode ser interessante alterarmos esse padrão de acordo comnossa necessidade, por isso existe a propriedade display no CSS, que permite denir qual estratégia de exibição o elemento utilizará. Por exemplo, o elemento li de uma ul tem por padrão o valor block para a propriedade display. Se quisermos os elementos na horizontal, basta alterarmos a propriedade display da li para inline: ul li{ display: inline; } ì.Õþ Eìu§hih†™«: §u«u± u o†«£Zí Õ) Utilizaremos o CSS reset do Eric Meyer. O arquivo reset.css já foi copiado para a pasta css do nosso projeto quando importamos o projeto no capítulo inicial. Precisamos só referenciá-lo no head antes do nosso estilos.css: link rel=stylesheet href=css/reset.css Abra novamente a página no navegador. Percebe a diferença, principalmente na padronização dos espa-çamentos. ó) Próximo passo: transformar nosso menu em horizontal e ajustar espaçamentos básicos. Vamos usar a propriedade display para mudar os li para inline. Aproveite e já coloque um espaça-mento entre os links com margin. Repare também como a sacola está desalinhada. O texto está muito pra cima e não alinhado com a base do ícone. Um padding-top deve resolver. .menu-setores ul li { display: inline; margin-left: 20px; } .sacola { padding-top: 8px; } Teste a página. Está melhorando? Capítulo ì - HTML semântico e posicionamento no CSS - Exercícios: reset e display - Página ¦É

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ì) Nosso header ainda está todo à esquerda da página, sendo que, no layout, ele tem um tamanho xo e ca centralizado na página. Aliás, não é só o cabeçalho que ca assim: o conteúdo da página em si e o conteúdo do rodapé também. Temos três tipos de elementos que precisamser centralizados nomeio da página. Vamos copiar e colar as instruções CSS nos ì lugares? Não! Criamos uma classe no HTML a ser aplicada em todos esses pontos e um único seletor no CSS. .container { margin: 0 auto; width: 940px; } Vamos usar essa classe container no HTML também. Altere a tag header e passe o class=container para ela. Teste a página e veja o conteúdo centralizado. Agora, falta “somente” o posicionamento dos elementos do header. ì.ÕÕ P™«†±†™•: «±Z±†h, §uZ±†êu, Zf«™¶±u Existe um conjunto de propriedades que podemos utilizar para posicionar um elemento na página, que são top, left, bottom e right. Porém essas propriedades, por padrão, não são 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 receber como valor static, relative, absolute ou xed. Veremos o comportamento de cada um deles, junto com as propriedades de coordenadas. O primeiro valor, padrão para todos os elementos, é o static. Um elemento com posição static permanece sempre em seu local original no documento, aquele que o navegador entende como sendo sua posição de renderização. Se passarmos algum valor para as propriedades de coordenadas, eles não serão respeitados. Umdos valores para a propriedade position que aceitamcoordenadas é o relative. Comele, as coordenadas que passamos são obedecidas em relação à posição original do elemento. Por exemplo: .logotipo { position: relative; top: 20px; Capítulo ì - HTML semântico e posicionamento no CSS - Position: static, relative, absolute - Página ¢þ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript left: 50px; } Os elementos em nosso documento que receberem o valor “logotipo” em seu atributo class terão óþpx adicionados ao seu topo e ¢þpx adicionados à sua esquerda em relação à sua posição original. Note que, ao denirmos coordenadas, estamos adicionando pixels de distância naquela direção, então o elemento será renderizado mais abaixo e à direita em comparação à sua posição original. O próximo modo de posicionamento que temos é o absolute, e ele é um pouco complexo. Existem algumas regras que alteram seu comportamento em determinadas circunstâncias. Por denição, o elemento que tem o modo de posicionamento absolute toma como referência qualquer elemento que seja seu pai na estrutura doHTMLcujomodo de posicionamento seja diferente de static (que é o padrão), e obedece às coordenadas de acordo com o tamanho total desse elemento pai. Quando não há nenhum elemento em toda a hierarquia daquele que recebe o posicionamento absolute que seja diferente de static, o elemento vai aplicar as coordenadas tendo como referência a porção visível da página no navegador. Por exemplo: Estrutura HTML div class=quadrado/div div class=quadrado absoluto/div Estilo CSS .quadrado { background: green; height: 200px; width: 200px; } .absoluto { position: absolute; top: 20px; right: 30px; } Seguindo o exemplo acima, o segundo elemento div, que recebe o valor “absoluto” em seu atributo class, não tem nenhum elemento como seu “pai” na hierarquia do documento, portanto ele vai alinhar-se ao topo e à direita do limite visível da página no navegador, adicionando respectivamente óþpx e ìþpx nessas direções. Vamos analisar agora o exemplo a seguir: Estrutura HTML div class=quadrado relativo div class=quadrado absoluto/div /div Capítulo ì - HTML semântico e posicionamento no CSS - Position: static, relative, absolute - Página ¢Õ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Estilos CSS .quadrado { background: green; height: 200px; width: 200px; } .absoluto { position: absolute; top: 20px; right: 30px; } .relativo { position: relative; } Nesse caso, o elemento que recebe o posicionamento absolute é “lho” do elemento que recebe o posici-onamento relative na estrutura do documento, portanto, o elemento absolute vai usar como ponto de referência para suas coordenadas o elemento relative e se posicionar óþpx ao topo e ìþpx à direita da posi-ção original desse elemento. O outro modo de posicionamento, xed, sempre vai tomar como referência a porção visível do documento no navegador, e mantém essa posição inclusive quando há rolagem na tela. É uma propriedade útil para avisos importantes que devem ser visíveis com certeza. U“ §u«¶“™ ou £™«†±†™• • static – Sua posição é dada automaticamente pelo žuxo da página: por padrão ele é renderizado logo após seus irmãos – Não aceita um posicionamento manual (leŸ, right, top, bottom) – O tamanho do seu elemento pai leva em conta o tamanho do elemento static • relative – Por padrão 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, porém sem levar em conta seu posicionamento. O pai não sofreria alterações mesmo se o elemento fosse static. Capítulo ì - HTML semântico e posicionamento no CSS - Position: static, relative, absolute - Página ¢ó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript • xed – Uma conguração de posicionamento vertical (leŸ ou right) e uma horizontal (top ou bottom) é obrigatória – O elemento será renderizado na página na posição indicada: mesmo que ocorra uma rolagem o elemento permanecerá no mesmo lugar – Seu tamanho não conta para calcular o tamanho do elemento pai, é como se não fosse elemento lho • absolute – Uma conguração de posicionamento vertical (leŸ ou right) e uma horizontal (top ou bottom) é obrigatória – O elemento será renderizado na posição indicada, porém relativa ao primeiro elemento pai cujo position seja diferente de static ou, se não existir este pai, relativa à página – Seu tamanho não conta para calcular o tamanho do elemento pai ì.Õó Eìu§hih†™«: £™«†h†™•Z“u•±™ Õ) Posicione o menu à direita e embaixo no header. Use position: absolute para isso. E não esqueça: se queremos posicioná-lo absolutamente com relação ao cabeçalho, o cabeçalho precisa estar posicionado. header { position: relative; } .menu-setores { position: absolute; bottom: 0; right: 0; } ó) A sacola também deve estar posicionada a direita e no topo. Use position, top e right para conseguir esse comportamento. Adicione as regras de posicionamento ao seletor .sacola que já tínhamos: .sacola { position: absolute; top: 0; right: 0; } ì) Teste a página no navegador. Como está nosso cabeçalho? De acordo com o design original? Capítulo ì - HTML semântico e posicionamento no CSS - Exercícios: posicionamento - Página ¢ì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ì.Õì Eìu§hih†™« ™£h†™•Z†« Õ) Aplique nosso novo cabeçalho também na página sobre.html. Capítulo ì - HTML semântico e posicionamento no CSS - Exercícios opcionais - Página ¢¦

CZ£i±¶™ ¦ Mais HTML e CSS “O medo é o pai da moralidade” – FriedrichWilhelm Nietzsche ¦.Õ A•Z†«Z•o™ ™ “†™™ oZ £a†•Z Elaboramos o cabeçalho, 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 navegação e o banner de destaque, e o bloco com os painéis com destaques de produtos. Na área de navegação, teremos um formulário de busca, permitindo que o usuário busque por produtos. ¦.ó F™§“¶a§†™« Em HTML, temos um elemento chamado form criado para esta nalidade: capturar os dados do usuário e submetê-lo a algum serviço da internet. Os dados são passados para o form por meio de tag input, que pode uma ter dupla nalidade: receber os dados digitados ou submeter o formulário. É por meio da propriedade type que denimos essa nalidade. Em nosso caso, utilizaremos o tipo search para capturar os dados digitados e o tipo image para submeter o formulário. Existe também o tipo submit, que possui a mesma nalidade do image, mas é renderizado como um botão. form input type=search

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript input type=image src=img/busca.png class=lupa /form ¦.ì P™«†h†™•Z“u•±™ h™“ €™Z± u huZ§ Em nosso layout, precisamos colocar omenu abaixo da busca e alinhado à esquerda coma imagem principal ao lado de ambos. Como conseguir este resultado? Uma solução seria utilizar position nomenu,mas é algo que quebraria facilmente nosso layout caso a busca aumentasse de tamanho. Em um dos nossos primeiros exercícios com a página sobre.html, colocamos a imagem da família Pelho à direita coma propriedade float, fazendo comque o elemento parágrafo a contornasse. Vamos tentar aplicar float à busca e aomenu para que ambos quem à esquerda, fazendo comque a imagem central os contorne: .busca, .menu-departamentos { float: left; } O resultado não foi o esperado. Para resolvermos este problema, precisaremos recorrer à propriedade clear. A £§™£§†uoZou huZ§ Existe uma propriedade que determina qual vai ser o comportamento de outros elementos que vêm ao redor daquele que a recebe e estão žutuando, e essa propriedade é a clear. A propriedade clear quer dizer “limpe o žuxo do documento ao meu lado” e pode receber os valores left, right ou both. Ovalor left impede que elementos žutuantes quem à esquerda do elemento que recebe essa propriedade, o valor right impede que elementos žutuem à direita desse, e o valor both impede que elementos žutuem em Capítulo ¦ - Mais HTML e CSS - Posicionamento com žoat e clear - Página ¢ä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ambos os lados do elemento. É importante sabermos que a propriedade clear de um elemento só interfere no layout da página caso outros elementos à sua volta estiverem žutuando. Ao aplicarmos clear:left em nosso menu, ele não cará ao lado da nossa busca com propriedade float e será renderizado na linha seguinte: .busca, .menu-departamentos { float: left; } .menu-departamentos { clear: left; } ¦.¦ Duh™§Zca™ ou ±uì±™ h™“ CSS O CSS permite ainda transformações e decorações de texto. T§Z•«€™§“Zca™ ou ±uì±™ A propriedade text-transform permite realizar transformações em textos e seus possíveis valores são: • uppercase - Todas as letras em maiúsculo; • lowercase - Todas as letras em minúsculo; Capítulo ¦ - Mais HTML e CSS - Decoração de texto com CSS - Página ¢ß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript • capitalize - Só as primeiras letras das palavras em maiúsculo. Se quisermos colocar o texto em caixa alta: .menu-departamentos { text-transform: uppercase; } Duh™§Zca™ ou ±uì±™ Existe uma série de decorações que o navegador adiciona aos textos, dependendo das tags que utilizamos. A decoração mais comum é o sublinhado nos textos de links (tags a com valor para o atributo “href ”). Existem outros tipos de decoração, como por exemplo, o texto contido na tag del (que serve para indicar um texto que foi removido de uma determinada versão do documento) é exibido com uma linha bem no meio do texto. É muito comum que em alguns casos seja desejável ocultar a linha inferior nos links, embora seja recomen-dado que links dentro de textos sejam decorados para destacarem-se do restante, facilitando a usabilidade e navegabilidade. No caso dos menus, onde temos uma área especíca e isolada, normalmente estilizada e decorada o suciente, normalmente podemos ocultar esse sublinhado, como no exemplo: .item-menu { text-decoration: none; } Além do none (nenhuma decoração) ainda poderíamos ter congurado underline (comuma linha embaixo, o padrão dos links), overline (com uma linha em cima do texto), line-through (uma linha no meio do texto) e blink (o texto ca piscando na tela, o que não é muito recomendado). ¦.¢ CZ«hZ±Z u „u§Z•cZ •™ CSS Algumas propriedades de elementos pais, quando alteradas, são aplicadas automaticamente para seus ele-mentos lhos em cascata. Por exemplo: div id=pai h1Sou um título/h1 h2Sou um subtítulo/h2 /div #pai { color: blue; } Capítulo ¦ - Mais HTML e CSS - Cascata e herança no CSS - Página ¢˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript No exemplo acima, todos os elementos lhos herdaramo valor da propriedade color do elemento pai a qual eles pertencem. As propriedades que não são aplicadas em cascata em elementos lhos geralmente são aquelas que afetam diretamente a caixa (box) do elemento, como width, height, margin e padding. h1 { padding-left: 40px; } #pai { color: blue; padding-left: 0; } Perceba que o padding do elemento h1 não foi sobrescrito pelo valor do elemento pai div, ou seja, o valor 40px foi mantido. ¦.ä PZ§Z «Zfu§ “Z†«: ™ êZ™§ †•„u§†± Imagine que temos a seguinte divisão com uma imagem: div img src=box-model.png alt=box model /div div { border: 2px solid; border-color: red; width: 30px; height: 30px; } Queremos que a imagem preencha todo o espaço da div, mas as propriedades width e height não são aplicadas em cascata, sendo assim, somos obrigados a denir o tamanho da imagem manualmente: img { width: 30px; height: 30px; } Esta não é uma solução elegante, porque, se alterarmos o tamanho da div, teremos que lembrar de alterar também o tamanho da imagem. Uma forma de resolver este problema é utilizado o valor inherit para as propriedades width e height da imagem: Capítulo ¦ - Mais HTML e CSS - Para saber mais: o valor inherit - Página ¢É

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript img { 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 herdará o novo valor, facilitando assim, a manutenção do código. Lembre-se de que o inherit também afeta propriedades que não são aplicadas em cascata. ¦.ß Eìu§hih†™«: “u•¶ u ou«±Z¤¶u Õ) Vamos criar um elemento destaque e, dentro dele, uma section para busca e outra para o menu: div class=container destaque section class=busca h2Busca/h2 form input type=search input type=image src=img/busca.png /form /section!-- fim .busca -- section class=menu-departamentos h2Departamentos/h2 nav ul lia href=#Blusas e Camisas/a/li lia href=#Calças/a/li lia href=#Saias/a/li lia href=#Vestidos/a/li lia href=#Sapatos/a/li lia href=#Bolsas e Carteiras/a/li lia href=#Acessórios/a/li /ul /nav /section!-- fim .menu-departamentos -- img src=img/destaque-home.png alt=Promoção: Big City Night /div!-- fim .container.destaque -- Capítulo ¦ - Mais HTML e CSS - Exercícios: menu e destaque - Página äþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Repare como já usamos diversas classes no HTML para depois selecionarmos os elementos via CSS. ó) Aplique o estilo visual do design com CSS. Queremos um fundo cinza nas caixas de busca e no menu de departamentos. Além disso, o texto deve estar em negrito e apresentado em maiúsculas. Aplicaremos também 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 ul li { background-color: white; margin-bottom: 1px; padding: 5px 10px; } .menu-departamentos ul li a { color: #333333; text-decoration: none; } ì) Na busca, use a propriedade vertical-align para alinhar o campo de texto à imagem da lupa pelo centro. Aproveite e coloque o tamanho do campo de texto para melhor encaixar no design e use seletores de atributo do CSS para isso. Não se preocupe, este tipo de seletor será explicado mais a frente. .busca input { vertical-align: middle; } .busca input[type=search] { width: 170px; } Teste a página no navegador e veja como o design está quase pronto, apenas o posicionamento dos ele-mentos precisa ser acertado. Capítulo ¦ - Mais HTML e CSS - Exercícios: menu e destaque - Página äÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¦) Para que omenu de departamentos e a busca estejamà esquerda na página, iremos žutuar esses elementos com float:left. Mas só isso fará com que o menu que a direita da busca (faça o teste). Precisamos indicar ao menu-departamentos que ele deve žutuar à esquerda mas não ao lado de outro elemento. Conseguimos isso com a propriedade clear. .busca, .menu-departamentos { float: left; } .menu-departamentos { clear: left; } Observe novamente a página 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 é difícil e complexo. Esteja certo de ter compreendido o porquê do uso dessas propriedades no exercício antes de prosseguir o curso! Capítulo ¦ - Mais HTML e CSS - Exercícios: menu e destaque - Página äó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¢) 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. ¦.˜ D†«£Zí †•†•u-f™hŽ Precisamos criar um painel comuma lista de novidades, onde cada produto será representado por uma li. Já sabemos que por padrão uma li possui a propriedade display:block, mas queremos os produtos lado a lado. Podemos trocar este comportamento mudando a propriedade display dos elementos para inline. Também será necessário alterar as propriedades width, margin e padding das li, mas agora os elementos li são inline e estemodo de exibição ignora alterações que afetamas propriedades da box. Como resolver este problema? Os navegadores mais modernos introduzem um modelo de exibição que é a mistura dos dois, o inline-block. Os elementos que recebem o valor inline-block para a propriedade display obedecem às especicações de dimensão das propriedades height (altura) e width (largura) e ainda permitem que outros elementos sejam exibidos ao seu lado como elementos inline. .painel li { display: inline-block; vertical-align: top; width: 140px; margin: 2px; 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 vários produtos de tamanhos diferentes, eles vão se alinhar pelo topo. Capítulo ¦ - Mais HTML e CSS - Display inline-block - Página äì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¦.É Eìu§hih†™«: £Z†•e†« €¶±¶Z•±u« Õ) Vamos criar agora nosso painel de novidades. Crie um elemento div para conter os dois painéis de produtos. Ele deve receber a classe container, para se alinhar ao meio da tela, e a classe paineis que usaremos depois no CSS. div class=container paineis !-- os paineis de novidades e mais vendidos entrarão aqui dentro -- /div ó) Dentro da div criada acima, criaremos uma nova section para cada painel. A primeira, receberá as classes painel e novidades. Ela conterá o título em um h2 e uma lista ordenada (ol) de produtos. Cada produto deve ser representado como um item na lista (li) com um link para o produto e sua imagem (representado por figure, figcaption e img). Veja o exemplo com um produto. Ele deve ser incluído dentro da section que você acabou de criar: section class=painel novidades h2Novidades/h2 ol !-- primeiro produto -- li a href=produto.html figure img src=img/produtos/miniatura1.png figcaptionFuzz Cardigan por R$ 129,90/figcaption /figure /a /li !-- coloque mais produtos aqui! -- /ol /section Crie o HTML desse painel e o preencha com vários produtos (ä é um bom número). Lembre-se de que cada produto está na sua própria li com link e imagem próprios. Na pasta img/produtos do seu projeto, você encontra várias imagens miniaturaX.png que podem ser usados para criar produtos diferentes. ì) Crie um segundo painel, para representar os produtos mais vendidos. Esse painel deve car após o fe-chamento do painel anterior, mas ainda dentro da section paineis. O novo painel deve receber as classes painel e mais-vendidos. Sua estrutura é idêntica ao do exercício anterior (dica: copie o código para evitar refazer tudo de novo). Capítulo ¦ - Mais HTML e CSS - Exercícios: painéis žutuantes - Página ä¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript section class=painel mais-vendidos h2Mais Vendidos/h2 ol !-- coloque vários produtos aqui -- /ol /section Nosso HTML já está cando grande e complexo, como é uma página real cheia de conteúdo. Cuidado para não se confundir na posição das tags. Recapitulando essa parte dos painéis, a estrutura deve estar assim: • section: paineis container – section: painel novidades * hó: título Novidades * ol: lista de produtos · vários lis com produtos (e links e imagens dentro de cada um) – section: painel mais-vendidos * hó: título Mais Vendidos * ol: lista de produtos · vários lis com produtos (e links e imagens dentro de cada um) ¦) Vamos posicionar nossos painéis 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 É¦þpx), assim um cará ao lado do outro: .painel { margin: 10px 0; padding: 10px; width: 445px; } .novidades { float: left; } .mais-vendidos { float: right; } Capítulo ¦ - Mais HTML e CSS - Exercícios: painéis žutuantes - Página ä¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Próximo passo: os itens dos produtos dentro da lista de cada painel. Queremos que sejam dispos-tos lado a lado mas com certo tamanho e espaçamento para alinhamento. Conseguimos isso co-locando display:inline-block nos elementos da lista e, para alinhar os produtos pelo topo, com vertical-align:top. .painel li { 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 títulos e cores 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 página no navegador e veja o resultado nal! Capítulo ¦ - Mais HTML e CSS - Exercícios: painéis žutuantes - Página ää

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¦.Õþ Suu±™§u« ou Z±§†f¶±™ o™ CSSì Além dos seletores de tag, classe e id que observamos anteriormente, existe mais uma série de seletores avançados do CSS. Um dos seletores CSS mais versáteis é o seletor de atributo, com ele podemos vericar a presença ou valor de um atributo para selecioná-lo. Por exemplo: input[value] { color: #cc0000; } O seletor acima age em todos os elementos da tag input que têm o atributo “value”. Também é possível vericar se o atributo tem um valor especíco: input[type=text] { border-radius: 4px; } Além de vericar um valor integralmente, é possível utilizar alguns operadores para selecionar valores em determinadas condições, como por exemplo o seletor de atributo com prexo: div[class|=menu] { border-radius: 4px; } O seletor acima vai agir em todas as tags div cujo atributo “class” comece com a palavra menu seguida de um hífen e qualquer outro valor na sequência, como por exemplo menu-principal, menu-departamentos e menu-teste. Também é possível buscar por uma palavra especíca no valor, não importando o valor completo do atributo. Por exemplo: Capítulo ¦ - Mais HTML e CSS - Seletores de atributo do CSSì - Página äß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript input[value~=problema] { color: #cc0000; } O seletor acima agirá sobre todos os elementos da tag input que contiverem a palavra “problema” em seu conteúdo. Como CSSì é possível utilizar novos operadores comsinais que se assemelhamaos das expressões 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 posição */ input[name*=tela] { color: #666666; } Os seletores de atributo têm o mesmo valor de especicidade dos seletores de classe. ¦.ÕÕ R™oZ£e Para nalizarmos a página, precisamos desenvolver o rodapé. Visualmente, ele é bastante simples. Mas há algumas questões importantes a serem salientadas. Su“a•±†hZ No HTML¢, a tag apropriada para rodapés é a footer, que vamos usar no exercício. Além disso, nosso rodapé ainda tem mais ó conteúdos: o logo em negativo do lado esquerdo e ícones de acesso a redes sociais do lado direito. Que elementos usar? O logo no lado esquerdo é uma simples imagem: img src=img/logo-rodape.png alt=Logo Mirror Fashion Já a lista de ícones das redes sociais, na verdade, é uma lista de links. Os ícones são meramente ilustrativos. Em um leitor de tela, vamos querer que um link seja lido para o usuário, independentemente do seu ícone gráco. Capítulo ¦ - Mais HTML e CSS - Rodapé - Página ä˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Podemos usar então uma simples lista com a: ul class=social lia href=http://facebook.com/mirrorfashionFacebook/a/li lia href=http://twitter.com/mirrorfashionTwitter/a/li lia href=http://plus.google.com/mirrorfashionGoogle+/a/li /ul Esse é um ponto importante para entendermos a diferença entre marcação semântica e apresentação visual. Repare que criamos uma estrutura no HTML com conteúdo completamente diferente do resultado nal visual. Vamos cuidar do visual depois no CSS. ¦.Õó S¶f«±†±¶†ca™ £™§ I“Zu“ Um truque muito usado em CSS é o chamado Image Replacement -- ou substituição por imagem. Serve para, usando técnicas de CSS, exibir uma imagem em algum elemento que originalmente foi feito comtexto. Perfeito para nosso caso dos ícones das redes sociais. A ideia básica é: • 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 tática de colocar um text-indent negativo bastante alto. Isso, na prática, 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; } ¦.Õì E«±††ñZca™ u £™«†h†™•Z“u•±™ o™ §™oZ£e Capítulo ¦ - Mais HTML e CSS - Substituição por Imagem - Página äÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript C™•±Z†•u§ †•±u§•™ Repare que o rodapé, diferentemente de todos os elementos do layout, ocupa ÕþþÛ da largura da página. Ele não é restrito ao tamanho de É¦þpx do miolo do nosso site. Isso porque o rodapé tem um background que se repete até os cantos. Mas repare que o conteúdo dele é limitado aos É¦þpx e centralizado junto com o resto da página -- onde estávamos usando a class container. O que precisamos fazer então é ter o footer comÕþþÛ além de uma tag interna pra o conteúdo do rodapé em si, e essa tag será o container: footer div class=container .... /div /footer P™«†h†™•Z“u•±™ Ao colocar o rodapé, você perceberá que ele subirá na página ao invés de car em baixo. Isso porque os elementos anteriores a ele, os painéis de destaque, estão žutuando na página e, portanto, saíram do žuxo de renderização. Para corrigir isso, basta usar a propriedade clear: both no footer. Dentro do rodapé em si, queremos que a lista de ícones seja colocada à direita. Podemos acertar isso com posicionamento absoluto, desde que o container do rodapé esteja posicionado (basta dar um position:relative a ele). Já os itens dentro da lista (os ì links), devem ser žutuados lado a lado (e não um em cima do outro). É fácil fazer com float:left no li. E«±††ñZca™ O rodapé em si terá um background-image com o fundo preto estampado repetido innitamente. Os elementos internos são todos ícones a serem substituídos por imagens via CSS com image replacement. E, para saber qual ícone atribuir a qual link da lista de mídias sociais, podemos usar seletores de atributo do CSSì: .social a[href*=facebook.com] { background-image: url(../img/facebook.png); } Capítulo ¦ - Mais HTML e CSS - Estilização e posicionamento do rodapé - Página ßþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¦.Õ¦ Eìu§hih†™«: §™oZ£e Õ) Vamos nalizar nossa página com o rodapé do layout. Crie uma estrutura semântica no HTML usando a tag footer e tags img, ul, li e a para o conteúdo. Atenção especial para a necessidade de um elemento container dentro do rodapé para alinhar seu con-teúdo com o restante da página. footer div class=container img src=img/logo-rodape.png alt=Logo Mirror Fashion ul class=social lia href=http://facebook.com/mirrorfashionFacebook/a/li lia href=http://twitter.com/mirrorfashionTwitter/a/li lia href=http://plus.google.com/mirrorfashionGoogle+/a/li /ul /div /footer Teste no seu navegador e veja o resultado sem estilo, mas utilizável. ó) Vamos estilizar o conteúdo visual. Coloque o background preto no rodapé e faça as substituições de imagens. Use seletores de atributo do CSSì 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] { Capítulo ¦ - Mais HTML e CSS - Exercícios: rodapé - Página ßÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript background-image: url(../img/facebook.png); } .social a[href*=twitter.com] { background-image: url(../img/twitter.png); } .social a[href*=plus.google.com] { background-image: url(../img/googleplus.png); } Teste no navegador. O que aconteceu? Orodapé subiu na página porque os elementos anteriores (os painéis de destaque) estão žutuando. É fácil arrumar, basta adicionar a regra de clear no footer: footer { clear: both; } Teste novamente. O rodapé voltou para o lugar certo? ì) Último passo: posicionar os elementos internos do rodapé apropriadamente. Vamos posicionar os ícones sociais absolutamente à direita com position:absolute. Para isso, o contai-ner do nosso rodapé precisa estar posicionado. Aproveite também e coloque um espaçamento 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? Capítulo ¦ - Mais HTML e CSS - Exercícios: rodapé - Página ßó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¦.Õ¢ PZ§Z «Zfu§ “Z†«: «¶£™§±u HTML¢ •™ I•±u§•u± Eì£™§u§ Z•±†™ A partir do IEÉ, há um bom suporte a HTML¢, até para elementos avançados como os de multimídia. En-tretanto, até o IE˜ (incluindo as versões ä e ß), as tags do HTML¢ não são reconhecidas. Se você abrir nossa página no IE˜, verá o design todo quebrado pois as tags de header, footer, nav, section etc são ignoradas. Mas é possível corrigir o suporte a esses novos elementos semânticos. A solução envolve um hack descoberto no IE e chamado de html¢shiv. Há um projeto opensource com o código disponível para download: http://code.google.com/p/html¢shiv/ Para incluir a correção na nossa página, basta adicionar no header: !--[if lt IE 9] script src=//html5shiv.googlecode.com/svn/trunk/html5.js/script ![endif]-- Repare que isso carrega um JavaScript que acionará o hack. Mas a tag script está dentro de um bloco com uma espécie de if dentro de um comentário! Esse recurso do IE é chamado de comentários condicionais e nos permite adicionar código que somente será lido pelo IE -- uma excelente solução para resolver seus bugs e inconsistências sem estragar a página nos demais navegadores. Nesse caso, estamos dizendo que o tal script com o hack só deve ser carregado pelas versões anteriores ao IEÉ; já que, a partir desta versão, há suporte nativo a HTML¢ e não precisa de hacks. IEä u IEß Ao testar nesses navegadoresmuito antigos, você verá que apenas o HTML¢shiv não é suciente. Na verdade, vários recursos e técnicas que usamos no nosso CSS não eramsuportados nas versões antigas. Felizmente, o uso de IEä e IEß no Brasil é bastante baixo e cai cada vez mais - hoje já é menos de ÕÛ dos usuários. Na Caelum, já não suportamos mais essas versões em nosso curso e nem em nossos sites. Capítulo ¦ - Mais HTML e CSS - Para saber mais: suporte HTML¢ no Internet Explorer antigo - Página ßì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¦.Õä Eìu§hih†™« ™£h†™•Z†« Õ) Porte nosso rodapé para a página “Sobre” do capítulo anterior. ó) Nossa página “Sobre” foi construída sem muita preocupação semântica. No HTML¢, há novas tags com objetivo especíco de lidar com conteúdos textuais divididos em partes, com subtítulos etc. Podem ser artigos de um jornal, um livro online ou mesmo um texto descrevendo nossa empresa - como nossa página Sobre faz. Podemos representar o texto todo com article e suas seções com section. Use essas novas tags na sobre.html para termos uma marcação mais semântica. ì) Adicione suporte ao IE˜ na nossa página usando o HTML¢shiv. Capítulo ¦ - Mais HTML e CSS - Exercícios opcionais - Página ß¦

CZ£i±¶™ ¢ JavaScript e interatividade naWeb “Design não é só como uma coisa aparenta, é como ela funciona.” – Steve Jobs JavaScript é a linguagem de programação mais popular no desenvolvimento Web. Suportada por todos os navegadores, a linguagem é responsável por praticamente qualquer tipo de dinamismo que queiramos em nossas páginas. Se usarmos todo o poder que ela tem para oferecer, podemos chegar a resultados impressionantes. Excelentes exemplos disso são aplicaçõesWeb complexas como Gmail, Google Maps e Google Docs. ¢.Õ I•±§™o¶ca™ Z™ JZêZSh§†£± Para rodar JavaScript em uma páginaWeb, precisamos ter emmente que a execução do código é instantânea. Para inserirmos um código JavaScript em uma página, é necessário utilizar a tag script: script alert(Olá, Mundo!); /script O exemplo acima é um “hello world” em JavaScript utilizando uma função do navegador, a função alert. É possível adicionar essa tag em qualquer local do documento que a sua renderização cará suspensa até o término dessa execução. Experimente criando essa tag em um HTML e reposicionando-a, verique os elementos que já foram ren-derizados na página antes do aparecimento da caixa de diálogo e o que acontece após clicar em “OK”. Também é possível executar código que está em um arquivo externo, por exemplo:

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript No arquivo HTML script src=scripts/hello.js/script Arquivo externo script/hello.js alert(Olá, Mundo!); Com a separação do script em arquivo externo é possível reaproveitar alguma funcionalidade em mais de uma página. ¢.ó C™•«™u o™ •ZêuZo™§ Alguns navegadores dão suporte a entrada de comandos pelo console. Por exemplo, no Google Chrome o console 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!); ¢.ì S†•±Zìu fa«†hZ O£u§Zcou« “Z±u“a±†hZ« Teste algumas contas digitando diretamente no console: 12 + 13 25 14 * 3 42 10 - 4 6 25 / 5 5 23 % 2 1 Capítulo ¢ - JavaScript e interatividade naWeb - Console do navegador - Página ßä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript VZ§†aêu†« Para armazenarmos um valor para uso posterior, podemos criar uma variável: var curso = WD-43; alert(curso); No exemplo acima, guardamos o valor WD-43 na variável curso. A partir desse ponto, é possível utilizar a variável para obter o valor que guardamos nela. No JavaScript, também é possível alterar o valor da variável a qualquer momento, inclusive por valores de tipos diferentes (por exemplo, um número) sem problemas, coisa que não é possível de se fazer em algumas outras linguagens de programação. Teste no console: var contador = 0; undefined contador++ 0 contador 1 contador++ 1 contador 2 T†£™« O JavaScript dá suporte aos tipos String (letras e palavras), Number (números 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 informação que é considerado um tipo no JavaScript é o Array, onde podemos armazenar uma série de informações de tipos diferentes: var pessoas = [João, José, Maria, Sebastião, Antônio]; Quando utilizamos o JavaScript para interagir com os elementos da página é muito comum obtermos cole-ções. Para fazer alguma coisa com cada elemento de uma coleção é necessário efetuar uma iteração. A mais comum é utilizando o for: Capítulo ¢ - JavaScript e interatividade naWeb - Sintaxe básica - Página ßß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript var pessoas = [João, José, Maria, Sebastião, Antônio]; for (var i = 0; i pessoas.length; i++) { alert(pessoas[i]); } Essa sintaxe utilizando os colchetes em pessoas[i] é uma maneira de selecionarmos um elemento de um Array, no caso o valor de i é um número para cada um dos elementos da coleção. Para explorar o compor-tamento do Array você pode realizar alguns testes com essa seleção: var pessoas = [João, José, Maria, Sebastião, Antônio]; alert(pessoas[0]); alert(pessoas[1]); alert(pessoas[4]); ¢.¦ Eìu§hih†™« ™£h†™•Z†«: €†ìZca™ ou «†•±Zìu Os próximos exercícios são opcionais e mostram mais aspectos de lógica de programação com algoritmos usando JavaScript. Õ) Escreva um código que mostre os números ímpares entre Õ e Õþ. ó) Escreva um código que calcule a soma de Õ até Õþþ. (obs: a resposta é ¢þ¢þ) ì) Crie um Array igual ao abaixo e mostre apenas os nomes das pessoas que tenham ¦ letras. var pessoas = [João, José, Maria, Sebastião, Antônio]; Dica: use o atributo length das Strings. ¢.¢ I•±u§Z±†ê†oZou •ZWuf Ouso do JavaScript como a principal linguagemde programação daWeb só é possível por conta da integração que o navegador oferece para o programador, a maneira com que conseguimos encontrar um elemento da página e alterar alguma característica dele pelo código JavaScript: var titulo = document.querySelector.getElementById(titulo); titulo.textContent = Agora o texto do elemento mudou!; No exemplo anterior, nós selecionamos um elemento do documento e alteramos sua propriedade textCon-tent. Existem diversasmaneiras de selecionarmos elementos de um documento e de alterarmos suas propri-edades. Inclusive é possível selecionar elementos de maneira similar ao CSS, através de seletores CSS: Capítulo ¢ - JavaScript e interatividade naWeb - Exercícios opcionais: xação de sintaxe - Página ß˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript var painelNovidades = document.querySelector(section#main .painel#novidades); painelNovidades.style.color = red ¤¶u§íSuuh±™§ ê« ¤¶u§íSuuh±™§A A função querySelector sempre retorna um elemento, mesmo que o seletor potencialmente traga mais de um elemento, neste caso, apenas o primeiro elemento da seleção será retornado. A função querySelectorAll retorna uma lista de elementos compatíveis como seletor CSS pas-sado como argumento. Sendo assim, para acessarmos cada elemento retornado, precisaremos passar o seu índice conforme o exemplo abaixo: var paragrafos = document.querySelectorAll(div p); paragrafos[o].textContent = Primeiro parágrafo da seleção; paragrafos[1].textContent = Segundo parágrafo da seleção; Apesar de ser interessante a possibilidade de alterar o documento todo por meio do JavaScript, existe um problema com a característica de execução imediata do código. O mais comum é que as alterações sejam feitas quando o usuário executa alguma ação, como por exemplo, clicar em um elemento. Para suprir essa necessidade, é necessário utilizar de dois recursos do JavaScript no navegador. O primeiro é a a criação de funções: function mostraAlerta() { alert(Funciona!); } Ao criarmos uma função, a execução do código simplesmente guarda o que estiver dentro da função, e esse código guardado só será executado quando chamarmos a função. Para exemplicar a necessidade citada acima, vamos utilizar o segundo recurso, os eventos: // obtendo um elemento através de um seletor de ID var titulo = document.querySelector(#titulo); titulo.onclick = mostraAlerta; Note que primeiramente é necessário selecionarumelemento do documento e depois denir o onclick desse elemento como sendo a função. De acordo com os dois códigos acima, primeiramente guardamos um comportamento em uma função. Ao contrário do código fora de uma função, o comportamento não é executado imediatamente, e sim guardado Capítulo ¢ - JavaScript e interatividade naWeb - Interatividade naWeb - Página ßÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript para quando quisermos chamá-lo. Depois informamos que um elemento deve executar aquele comporta-mento em determinado momento, no caso em um evento “click”. Também é possível chamar uma função em um momento sem a necessidade de um evento, é só utilizar o nome da função abrindo e fechando parênteses, indicando que estamos executando a função que foi denida anteriormente: function mostraAlerta() { alert(Funciona!); } // Chamando a função: mostraAlerta(); Também é possível determinar, por meio de seus argumentos, que a função vai ter algum valor variável que vamos denir quando quisermos executá-la: function mostraAlerta(texto) { // Dentro da função texto conterá o valor passado na execução. alert(texto); } // Ao chamar a função é necessário definir o valor do texto mostraAlerta(Funciona com argumento!); Existem diversos eventos que podem ser utilizados para que a interação do usuário coma página seja o ponto de disparo de funções que alteram os elementos da própria página: • onclick: clica com o mouse • ondblclick: clica duas vezes com o mouse • onmousemove: mexe o mouse • onmousedown: aperta o botão do mouse • onmouseup: solta o botão do mouse (útil com os dois acima para gerenciar drag’n’drop) • onkeypress: ao pressionar e soltar uma tecla • onkeydown: ao pressionar uma tecla. • onkeyup: ao soltar uma tecla. Mesmo acima. • onblur: quando um elemento perde foco • onfocus: quando um elemento ganha foco Capítulo ¢ - JavaScript e interatividade naWeb - Interatividade naWeb - Página ˜þ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript • onchange: quando um input, select ou textarea tem seu valor alterado • onload: quando a página é carregada • onunload: quando a página é fechada • onsubmit: disparado antes de submeter o formulário. Útil para realizar validações Existem também uma série de outros eventos mais avançados que permitem a criação de interações para drag-and-drop, e até mesmo a criação de eventos customizados. No próximo exercício, vamos usar funções JavaScript com eventos para lidar com a validação do campo de busca da nossa home page. A ideia é vericar se o campo foi preenchido ou se está vazio, quando o usuário clicar em buscar. ¢.ä Eìu§hih†™: êZ†oZca™ •Z f¶«hZ h™“ JS Õ) Para testarmos o nosso formulário de busca, vamos usar o Google como mecanismo de busca apenas como ilustração. Para isso, basta fazer o formulário submeter a busca para a página do Google. No form, acrescente um atributo action= apontando para a página do Google: form action=http://www.google.com.br/search id=form-busca Repare que colocamos também um id. Ele será útil para depois manipularmos esse elemento via JavaS-cript. Além disso, o input como texto a ser buscado deve ter o nome de q para ser compatível como Google. Basta fazer: input type=search name=q id=q Teste a página e submeta uma busca simples para o Google com o nosso formulário. ó) Queremos fazer uma validação: quando o usuário clicar em submeter, vericar se o valor foi preenchido. Se estiver em branco, queremos mostrar uma mensagem de erro em um alert. A validação será escrita em JavaScript. Portanto, comece criando um arquivo home.js na pasta js/ do projeto. É lá que vamos escrever nossos scripts. Referencie esse arquivo no index.html usando a tag script no nal da página, logo antes de fechar o /body: script src=js/home.js/script ì) A validação em si será feita por uma função JavaScript a ser acionada no momento que o usuário tentar submeter o formulário. Capítulo ¢ - JavaScript e interatividade naWeb - Exercício: validação na busca com JS - Página ˜Õ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript A função deve ser denida dentro do arquivo home.js criado antes. Seu papel é vericar se o elemento com id=q (o campo de busca) está vazio. Se estiver, mostramos um alert e abortamos a submissão do formulário com return false: function validaBusca() { if (document.querySelector('#q').value == '') { alert('Não podia ter deixado em branco a busca!'); return false; } } Uma função é um bloco de código JavaScript que executa algum código quando alguém chamar essa função. ¦) Nós podemos chamar a função explicitamente ou,melhor ainda, deixar que o navegador chame pra gente quando acontecer algum evento. No nosso caso, queremos indicar que a função anterior deve ser executada quando o usuário disparar o evento de enviar o formulário (onsubmit). // fazendo a associação da função com o evento document.querySelector('#form-busca').onsubmit = validaBusca; É o código acima que faz a associação da função validaBusca com o evento onsubmit do formulário. ¢) Teste a página e observe seu comportamento. Tente submeter com o campo vazio e com o campo preen-chido. ä) (opcional)Mostrar uma janela de erro é considerado pormuitos uma açãomuito agressiva contra o usuá-rio. Talvez um feedback mais sutil seja pintar o fundo do formulário de vermelho, indicando um erro. Na função de validação, remova a linha do alerta e em seu lugar pinte o fundo do formulário de vermelho em caso de erro. Código da função deverá car assim: function validaBusca() { if (document.querySelector('#q').value == '') { document.querySelector('#form-busca').style.background = 'red'; return false; } } Capítulo ¢ - JavaScript e interatividade naWeb - Exercício: validação na busca com JS - Página ˜ó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ß) (opcional avançado) No exercício criamos uma função JavaScript com nome validaBusca e a referenci-amos no onsubmit do formulário. Mas repare que o único uso dessa função é nessa situação, nunca mais a chamamos. Nesses casos, podemos usar um recurso do JavaScript chamado de funções anônimas que nos permite denir a função diretamente na denição 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; } }; VZ†oZ±†™• API HTML¢ Mais pra frente, veremos as novidades doHTML¢ para validação de formulários demaneiramais simples, e até sem necessidade de JavaScript. ¢.ß F¶•cou« ±u“£™§Z†« Em JavaScript, podemos criar um timer para executar um trecho de código após um certo tempo, ou ainda executar algo de tempos em tempos. A função setTimeout permite que agendemos alguma função para execução no futuro e recebe o nome da função a ser executada e o número de milissegundos a esperar: // executa a minhaFuncao daqui um segundo setTimeout(minhaFuncao, 1000); Se for um código recorrente, podemos usar o setInterval que recebe os mesmos argumentos mas executa a função indenidamente de tempos em tempos: // executa a minhaFuncao de um em um segundo setInterval(minhaFuncao, 1000); É uma função útil para, por exemplo, implementar um banner rotativo, como faremos no exercício a seguir. Capítulo ¢ - JavaScript e interatividade naWeb - Funções temporais - Página ˜ì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript huZ§I•±u§êZ As funções temporais devolvemumobjeto que representa o agendamento que foi feito. É possível usá-lo para cancelar a execução no futuro. É especialmente interessante para o caso do interval que pode ser cancelado de sua execução innita: // agenda uma execução qualquer var timer = setInterval(minhaFuncao, 1000); // cancela execução clearInterval(timer); ¢.˜ Eìu§hih†™: fZ••u§ §™±Z±†ê™ Õ) Implemente um banner rotativo na home page da Mirror Fashion usando Javascript. Temos duas imagens, a destaque-home.png e a destaque-home-ó.png que queremos trocar a cada ¦ segundos; use o setInterval para isso. Há várias formas de implementar essa troca de imagens. Uma sugestão émanter um array comos valores possíveis para a imagem e um inteiro que guarda qual é o banner atual. var banners = [img/destaque-home.png, img/destaque-home-2.png]; var bannerAtual = 0; function trocaBanner() { bannerAtual = (bannerAtual + 1) % 2; document.querySelector('.destaque img').src = banners[bannerAtual]; } setInterval(trocaBanner, 4000); ó) (opcional, avançado) Faça um botão de pause que pare a troca do banner. Dica: use o clearInterval para interromper a execução. ì) (opcional, avançado) Faça um botão de play para reativar a troca dos banners. Capítulo ¢ - JavaScript e interatividade naWeb - Exercício: banner rotativo - Página ˜¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¢.É PZ§Z «Zfu§ “Z†«: «¶u«±a™ £Z§Z ™ ou«Z€†™ ou £Z¶«u/£Zí Podemos criar no HTML um novo link para controlar a animação: a href=# class=pause/a O JavaScript deve chamar clearInterval para pausar ou novamente o setInterval para continuar a ani-mação. Precisamos editar o código anterior que chamava o setInterval para pegar o seu retorno. Será um objeto que controla aquele interval e nos permitirá desligá-lo depois: var timer = setInterval(trocaBanner, 4000); Com isso, nosso código que controla o pause e play caria assim: var controle = document.querySelector('.pause'); controle.onclick = function() { if (this.className == 'pause') { clearInterval(timer); controle.className = 'play'; } else { timer = setInterval(trocaBanner, 4000); controle.className = 'pause'; } return false; }; Por m, podemos estilizar o botão 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; Capítulo ¢ - JavaScript e interatividade naWeb - Para saber mais: sugestão para o desao de pause/play - Página ˜¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript border-right: 10px solid #900; height: 30px; width: 5px; } .play { border-left: 25px solid #900; border-bottom: 15px solid transparent; border-top: 15px solid transparent; } ¢.Õþ PZ§Z «Zfu§ “Z†«: êa§†™« hZfZhŽ« •™ “u«“™ uu“u•±™ Nos exercícios que trabalhamos com eventos, usamos o onclick e o onsubmit diretamente no elemento que estávamos manipulando: document.querySelector('#destaque').onclick = function() { // tratamento do evento }; É uma forma fácil e portável de se tratar eventos, mas não muito comum na prática. O maior problema do código acima é que só podemos atrelar uma única função ao evento. Se tentarmos, em outra parte do código, colocar uma segunda função para executar no mesmo evento, ela sobrescreverá a anterior. A maneira mais recomendada de se associar uma função a eventos é com o uso de addEventListener: document.querySelector('#destaque').addEventListener('click', function() { // tratamento do evento }); Dessamaneira, conseguimos adicionar vários listeners aomesmo evento, deixando o códigomais žexível. Só há um porém: embora seja omodo ocial de se trabalhar comeventos, o addEventListener não é suportado do IE˜ pra baixo. Para atender os IEs velhos, usamos a função attachEvent, semelhante: Capítulo ¢ - JavaScript e interatividade naWeb - Para saber mais: vários callbacks no mesmo elemento - Página ˜ä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript document.querySelector('#destaque').attachEvent('onclick', function() { // tratamento do evento }); O problema é ter que fazer sempre as duas coisas para garantir a portabilidade da nossa página. Essa questão é resolvida pelos famosos frameworks JavaScript, como o jQuery, que veremos mais adiante no curso. Capítulo ¢ - JavaScript e interatividade naWeb - Para saber mais: vários callbacks no mesmo elemento - Página ˜ß

CZ£i±¶™ ä CSS Avançado “Com o conhecimento nossas dúvidas aumentam” – Johann Goethe Desde o surgimento do CSS, os desenvolvedores front-end utilizam diversas técnicas para alterar a exibi-ção dos elementos no navegador. Mesmo assim algumas coisas eram impossíveis de se conseguir utilizando somente CSS. Conhecendo o comportamento dos navegadores ao exibir um elemento (ou um conjunto de elementos) e como as propriedade do CSS agem ao modicar um elemento é possível obter resultados im-pressionantes. O CSSì agora permite coisas antes impossíveis como elementos com cor ou fundo gradiente, sombras e cantos arredondados. Antes só era possível atingir esses resultados com o uso de imagens e às vezes até com um pouco de JavaScript. A redução do uso de imagens traz grandes vantagens quanto à performance e quantidade de tráfego de dados necessária para a exibição de uma página. ä.Õ Suu±™§u« ZêZ•cZo™« Os seletores CSS mais comuns e tradicionais são os que já vimos: por ID, por classes e por descendência. No entanto, há muitos outros seletores novos que vão entrando na especicação e que são bastante úteis. Já vimos alguns, como os seletores de atributo que usamos anteriormente. Vejamos outros. Suu±™§ ou †§“a™« Veja o seguinte HTML, que simula um texto com vários parágrafos e títulos e subtítulos no meio do docu-mento:

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript article h1Título/h1 pInício/p h2Subtítulo/h2 pTexto/p pMais texto/p /article Como faremos se quisermos estilizar de uma certa maneira todos os parágrafos após o subtítulo? O seletor de irmãos (siblings) (~) serve pra isso! Ele vem do CSS ì e funciona em todos os navegadores modernos (e no IEß pra frente). h2 ~ p { font-style: italic; } Isso indica que queremos selecionar todos os p que foramprecedidos por algum h2 e são irmãos do subtítulo (ou seja, estão sob amesma tag pai). NoHTMLanterior, serão selecionados os dois últimos parágrafos (Texto e Mais texto). Suu±™§ ou †§“a™ ZoZhu•±u« Ainda comoHTMLanterior, o que fazer se quisermos selecionar apenas o parágrafo imediatamente seguinte ao subtítulo? Ou seja, é um p irmão do h2 mas que aparece logo na sequência. Fazemos isso com o seletor de irmão adjacentes - adjacent sibling: h2 + p { font-variant: small-caps; } Nesse caso, apenas o parágrafo Texto será selecionado. É um irmão de hó e aparece logo depois domesmo. Esse seletor faz parte da especicação CSS ó.Õ e tem bom suporte nos navegadores modernos, incluindo o IEß. Suu±™§ ou €†„™ o†§u±™ Se tivermos o seguinte HTML com títulos e seções de um artigo: article h1Título principal/h1 Capítulo ä - CSS Avançado - Seletores avançados - Página ˜É

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript section h1Título da seção/h1 /section /article Queremos deixar o título principal de outra cor. Como fazer? O seletor de nome de tag simples não vai resolver: /* vai pegar todos os h1 da página */ h1 { color: blue; } Tentar o seletor de hierarquia também não 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 ó.Õ e suportado desde o IEß também. /* vai pegar só o h1 principal, filho direto de article e não os netos */ article h1 { color: blue; } NuZca™ Imagine o seguinte o HTML com vários parágrafos simples: pTexto/p pOutro texto/p pTexto especial/p pMais texto/p Queremos fazer todos os parágrafos de cor cinza, exceto o que tem o texto especial. Precisamos destacá-lo de alguma forma no HTML para depois selecioná-lo no CSS. Uma classe ou ID resolve: pTexto/p pOutro texto/p p class=especialTexto especial/p pMais texto/p Capítulo ä - CSS Avançado - Seletores avançados - Página Éþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Mas como escrever o CSS? Queremos mudar a cor dos parágrafos que não têm a classe especial. Um jeito seria mudar a cor de todos e sobrescrever o especial depois: p { color: gray; } p.especial { color: black; /* restaura cor do especial */ } No CSSì, há uma outra forma, usando o seletor de negação. Ele nos permite escrever um seletor que pega elementos que não batem naquela regra. p:not(.especial) { color: gray; } Isso diz que queremos todos os parágrafos que não têm a classe especial. A sintaxe do :not() recebe como argumento algum outro seletor simples (como classes, IDs ou tags). Essa propriedade do CSSì possui suporte mais limitado no IE, somente a partir da versão É (nos outros navegadores não há problemas). ä.ó P«u¶o™-hZ««u« Pegue o seguinte HTML de uma lista de elementos: ul liPrimeiro item/li liSegundo item/li liTerceiro item/li liQuarto item/li /ul E se quisermos estilizar elementos especícos dessa lista? Por exemplo, o primeiro elemento deve ter cor vermelha e o último, azul. Com esse HTML simples, usando apenas os seletors que vimos até agora, será bem difícil. A solução mais comum seria adicionar classes ou IDs no HTML para selecioná-los depois no CSS: ul li class=primeiroPrimeiro item/li liSegundo item/li Capítulo ä - CSS Avançado - Pseudo-classes - Página ÉÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript liTerceiro item/li li class=ultimoQuarto item/li /ul É fácil agora usar cores diferentes para o primeiro e último itens da lista. Mas essa técnica exigiu alteração no HTML e exige que lembremos de colocar a classe correta, no ponto correto, toda vez que zermos mudanças nos itens da lista. O CSS tem um recurso chamado de pseudo-classes que são como classes CSS já pré-denidas para nós. É como se o navegador já colocasse certas classes por padrão em certos elementos, cobrindo situações comuns como essa de selecionar o primeiro ou o último elemento. Há duas pseudo-classes do CSSì que representamexatamente o primeiro elemento lho de outro (rst-child) e o último elemento lho (last-child). Essas classes já estão denidas, não precisamos aplicá-las em nosso HTML e podemos voltar para o HTML inicial: ul liPrimeiro item/li liSegundo item/li liTerceiro item/li liQuarto item/li /ul No CSS, podemos usar pseudo-classes quase damesma forma que usaríamos nossas classes normais. Repare que para diferenciar um tipo do outro, mudou-se o operador de ponto para dois pontos: li:first-child { color: red; } li:last-child { color: blue; } O suporte a esses seletores é completo nos navegadores modernos. O first-child vem desde o IEß, Firefox ì e Chrome ¦. E (estranhamente), o last-child só a partir do IEÉ mas desde o Firefox Õ e Chrome Õ. Capítulo ä - CSS Avançado - Pseudo-classes - Página Éó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript •±„-h„†o Um seletor ainda mais genérico do CSSì é o :nth-child() que nos permite passar o índice do elemento. Por exemplo, podemos pegar o terceiro item com: li:nth-child(3) { color: yellow; } Porém, o mais interessante é que o nth-child pode receber uma expressão aritmética para in-dicar quais índices selecionar. É fácil fazer uma lista zebrada, com itens ímpares de uma cor e pares de outra: li:nth-child(2n) { color: green; } /* elementos pares */ li:nth-child(2n+1) { color: blue; } /* elementos impares */ O suporte existe a partir do IEÉ, Firefox ì.¢ e Chrome Õ. P«u¶o™ hZ««u« ou u«±Zo™ Queremosmudar a cor de um link quando o usuário passa omouse por cima. Ou seja, queremosmudar seu visual a partir de um evento do usuário (no caso, passar o mouse em cima). Uma solução ingênua seria criar um código JavaScript que adiciona uma classe nos links quando o evento de mouseover acontece (e remove a classe no mouseout). Entretanto, o CSS possui excelentes pseudo-classes que representamestados dos elementos e, em especial, uma que representa o momento que o usuário está com o mouse em cima do elemento, a :hover. É como se o navegador aplicasse uma classe chamada hover automaticamente quando o usuário passa o mouse em cima do elemento e depois retirasse a classe quando ele sai. Tudo sem precisarmos controlar isso com JavaScript. /* seleciona o link no exato momento em que passamos o mouse por cima dele */ a:hover { background-color:#FF00FF; } Podemos usar hover em todo tipo de elemento, não apenas links. Mas os links ainda têm outras pseudo-classes que podem ser úteis: /* seleciona todas as âncoras que têm o atributo href, ou seja, links */ a:link { Capítulo ä - CSS Avançado - Pseudo-classes - Página Éì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript background-color:#FF0000; } /* seleciona todos os links cujo valor de href é um endereço já visitado */ a:visited { background-color:#00FF00; } /* seleciona o link no exato momento em que clicamos nele */ a:active { background-color:#0000FF; } ä.ì P«u¶o™ uu“u•±™« Pseudo classes nos ajudam a selecionar elementos com certas características sem termos que colocar uma classemanualmente neles. Porém, o que fazer quando precisamos selecionar certo tipo de conteúdo que nem elemento tem? Exemplo: temos um texto num parágrafo: pA Caelum tem os melhores cursos!/p Queremos dar um estilo de revista ao nosso texto e estilizar apenas a primeira letra da frase com uma fonte maior. Como fazer para selecionar essa letra? A solução ingênua seria colocar um elemento ao redor da letra para podermos selecioná-la no CSS: pspanA/span Caelum tem os melhores cursos!/p HTML confuso e difícil de manter. O CSS apresenta então a ideia de pseudo-elementos. São elementos que não existem no documento mas podem ser selecionados pelo CSS. É como se houvesse um elemento lá! Podemos voltar o HTML inicial: pA Caelum tem os melhores cursos!/p E no CSS: p:first-letter { font-size: 200%; } Capítulo ä - CSS Avançado - Pseudo elementos - Página É¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Temos ainda outro pseudo-elemento para selecionar a primeira linha apenas em um texto grande: p:first-line { font-style: italic; } N™ê™« h™•±uuo™« Há ainda um outro tipo de pseudo-elemento mais poderoso que nos permite gerar conteúdo 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 conteúdo é semântico? Queremos que esses colchetes sejam indexados pelo Google? Queremos que sejam lidos como parte do texto pelos leitores de tela? Talvez não. Pode ser um conteúdo apenas visual. Podemos gerá-lo com CSS usando os pseudo elementos aŸer e before. O HTML seria simples: a href=...Link1/a a href=...Link2/a a href=...Link3/a E no CSS: a:before { content: '[ '; } a:after { content: ' ]'; } Ou ainda, imagine que queremos colocar amensagem (externo) ao lado de todos os links externos da nossa página. Usando pseudo-elementos e seletores de atributo, conseguimos: a[href^=http://]:after { content: ' (externo)'; } Isso pega todos os elementos que a que começam com http:// e coloca a palavra externo depois. Capítulo ä - CSS Avançado - Pseudo elementos - Página É¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ä.¦ Eìu§hih†™«: «uu±™§u« u £«u¶o™-hZ««u« Õ) Vamos alterar nossa página de Sobre, a sobre.html. Queremos que as primeiras letras dos parágrafos quem em negrito. Altere o arquivo sobre.css e use a pseudo-classe :first-letter pra isso. p:first-letter { font-weight: bold; } Teste a página! ó) Repare que os parágrafos nessa página Sobre têm uma indentação no início. Agora queremos remover apenas a identação do primeiro parágrafo da página. Poderíamos colocar uma classe no HTML. Ou, melhor ainda, sabendo que esse é o primeiro parágrafo (p) depois do título (h1), usar o seletor de irmãos adjacentes. Acrescente ao sobre.css: h1 + p { text-indent: 0; } Teste novamente. ì) Podemos ainda usar o pseudo-elemento :first-line para alterar o visual da primeira linha do texto. Por exemplo, transformando-a em small-caps usando a propriedade font-variant: p:first-line { font-variant: small-caps; } Teste de novo. ¦) Vamos voltar a mexer na Home principal do site agora. Temos o menu superior (.menu-setores) que é uma lista de links. Podemos melhorar sua usabilidade alterando seus estados quando o usuário passar o mouse (:hover) e quando clicar no item (:active). Adicione ao arquivo estilos.css: .menu-setores a:hover { color: #007dc6; Capítulo ä - CSS Avançado - Exercícios: seletores e pseudo-classes - Página Éä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript } .menu-setores a:active { color: #867dc6; } Teste o menu passando o mouse e clicando nas opções (segure um pouco o clique para ver melhor o efeito). ¢) O hover é útil em vários cenários. Um interessante é fazer um menu que abre e fecha em puro CSS. Temos já o nosso .menu-departamentos na esquerda da página comvárias categorias de produtos. Que-remos adicionar subcategorias que aparecem apenas quando o usuário passar o mouse. Hoje, o menu é um simples ul com vários itens (li) com links dentro: lia href=#Blusas e Camisas/a/li Vamos adicionar no index.htmluma sublista de opções dentro do li de Blusas e Camisas, dessa forma: li a href=#Blusas e Camisas/a ul lia href=#Manga curta/a/li lia href=#Manga comprida/a/li lia href=#Camisa social/a/li lia href=#Camisa casual/a/li /ul /li Por padrão, queremos que essa sublista esteja escondida (display:none). Quando o usuário passar o mouse (:hover), queremos exibi-la (display: block). Altere o arquivo estilos.css com essa lógica. .menu-departamentos ul li ul { display: none; } .menu-departamentos ul li:hover ul { Capítulo ä - CSS Avançado - Exercícios: seletores e pseudo-classes - Página Éß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript display: block; } .menu-departamentos ul li ul li { background-color: #dcdcdc; } Teste a página e a funcionalidade do menu. ä) Para ajudar a diferenciar os links dos submenus, queremos colocar um traço na frente. Podemos alterar o HTML colocando os traços - algo visual e não semântico -, ou podemos gerar esse traço via CSS com pseudo elementos. Use o :before para injetar um conteúdo novo via propriedade content no CSS: .menu-departamentos li li a:before { content: '- '; } Teste a página. (Veja os opcionais a seguir para outras possibilidades.) ä.¢ Eìu§hih†™« ™£h†™•Z†« Õ) A propriedade content tem muitas variações. Uma variação simples, mas útil, é usar caracteres unicode para injetar símbolos mais interessantes. Faça 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 também a propriedade opacity para deixar esse elemento mais transparente e sutil. Capítulo ä - CSS Avançado - Exercícios opcionais - Página É˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript MZ†« ™£cou« o™ U•†h™ou Consulte em uma tabela Unicode outros caracteres e seu código hex correspondente. http://www.alanwood.net/unicode/dingbats.html http://www.alanwood.net/unicode/klinks ó) (avançado) Volte à página Sobre, abra-a no navegador. Em um exercício anterior, colocamos as primeiras linhas em small-caps usando o seletor p:rst-line. Repare que todos os parágrafos foram afetados. E se quiséssemos que apenas parágrafos de início de seção fossem afetados? Podemos pensar assim: que-remos alterar todos os parágrafos que não estão no meio do texto, ou seja, não são precedidos por outro parágrafo (mas sim precedidos por títulos, guras etc). Com o seletor :not() do CSSì, conseguimos: :not(p) + p:first-line { font-variant: small-caps; } Isso signica: selecione as primeiras linhas dos parágrafos que não são precedidos por outros pará-grafos. ä.ä CSSì: f™§ou§-§Zo†¶« Uma das novidades mais celebradas do CSSì foi a adição de bordas arredondadas via CSS. Até então, a única forma de obter esse efeito era usando imagens, o que deixava a página mais carregada e dicultava a manutenção. Com o CSSì há o suporte a propriedade border-radius que recebe o tamanho do raio de arredondamento das bordas. Por exemplo: div { border-radius: 5px; } Capítulo ä - CSS Avançado - CSSì: border-radius - Página ÉÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Podemos também passar valores diferentes para cantos diferentes do elemento: .a{ /*todas as bordas arredondadas com um raio de 15px*/ border-radius: 15px; } .b{ /*borda superior esquerda e inferior direita com 5px borda superior direita e inferior esquerda com 20px*/ border-radius: 5px 20px; } .c{ /*borda superior direita com 5px borda superior direita e inferior esquerda com 20px borda inferior direita com 50px */ border-radius: 5px 20px 50px; } .d{ /*borda superior direita com 5px borda superior direita com 20px borda inferior direita com 50px bordar inferior esquerda com 100px */ border-radius: 5px 20px 50px 100px; } Capítulo ä - CSS Avançado - CSSì: border-radius - Página Õþþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ä.ß CSSì: ±uì±-«„Zo™ë Outro efeito do CSSì é o suporte a sombras em textos com text-shadow. Sua sintaxe recebe o deslocamento da sombra e sua cor: p { text-shadow: 10px 10px red; } Ou ainda receber um grau de espalhamento (blur): p { text-shadow: 10px 10px 5px red; } É possível até passar mais de uma sombra ao mesmo tempo para o mesmo elemento: text-shadow: 10px 10px 5px red, -5px -5px 4px red; ä.˜ CSSì: f™ì-«„Zo™ë Além 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; Capítulo ä - CSS Avançado - CSSì: text-shadow - Página ÕþÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Podemos ainda passar um terceiro valor com o blur: box-shadow: 20px 20px 20px black; Diferentemente do text-shadow, o box-shadow suporta ainda mais um valor que faz a sombra aumentar ou diminuir: box-shadow: 20px 20px 20px 30px black; Capítulo ä - CSS Avançado - CSSì: box-shadow - Página Õþó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Por m, é possível usar a keyword inset para uma borda interna ao elemento: box-shadow: inset 0 0 40px black; ä.É O£Zh†oZou u RGBA Desde o CSSó é possível mudar a opacidade de um elemento para que ele seja mais transparente com o uso da propriedade opacity. Veja esse exemplo com um parágrafo por cima de uma imagem: Colocamos um fundo preto e cor branca no texto. E se quisermos um efeito legal de transparência para deixar a imagem mostrar mais? Capítulo ä - CSS Avançado - Opacidade e RGBA - Página Õþì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript É simples com a opacity que recebe um valor decimal entre þ e Õ: p { opacity: 0.3; } Repare como todo o elemento ca transparente, o fundo e o texto. E se quiséssemos o texto em branco opaco e o fundo comtransparência? No CSSì, podemos usar outra técnica, a de denir uma cor de fundo comvalor de opacidade especíca. No CSSì, além das cores hex normais (kFFFFFF pro branco), podemos criar cores a partir de seu valor RGB, passando o valor de cada canal (Red, Green, Blue) separadamente (valor entre þ e ó¢¢): /* todos equivalentes */ color: #FFFFFF; color: white; color: rgb(255, 255, 255); Porém, existe uma função chamada RGBA que recebe um quarto argumento, o chamado canal Alpha. Na prática, seria como o opacity daquela cor (um valor entre þ e Õ): /* branco com 80% de opacidade */ color: rgba(255,255,255, 0.8); No exemplo da foto, queríamos apenas o fundo do texto em preto transluzente (o texto não). Em vez do opacity, podemos fazer então: Capítulo ä - CSS Avançado - Opacidade e RGBA - Página Õþ¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript p { background: rgba(0,0,0,0.3); color: white; } ä.Õþ P§u€†ì™« Muitos recursos do HTML¢ e do CSSì ainda são experimentais. Isso quer dizer que foram incluídos no rascunho da especicação mas ainda não são ÕþþÛ ociais. As especicações ainda estão em aberto e vai demorar algum tempo até elas serem fechadas. Existem recursos mais estáveis e menos estáveis. Alguns já estão bastante maduros e há bastante tempo na spec, e não são esperadasmaismudanças. Por outro lado, alguns são bem recentes e talvez ainda possa haver mudança até a aprovação nal da especicação. Os navegadores desejam implementar os novos recursos antes mesmo da especicação terminar, para que os desenvolvedores possam começar a usar as novas propriedades e experimentá-las na prática. Entretanto, como a sintaxe nal depois de aprovada pode ser diferente, os navegadores implementam as novas proprie-dades instáveis usando nomes provisórios. Aboa prática é pegar o nome da propriedade e colocarumprexo especíco do fabricante na frente. Quando a especicação car estável, tira-se esse prexo e suporta-se a sintaxe ocial. As bordas arredondadas, por exemplo, hoje são suportadas em todos os navegadoresmodernos como nome normal da propriedade a border-radius. Mas até o Firefox ì.ä, por exemplo, o suporte daMozilla era expe-rimental e a propriedade era chamada de -moz-border-radius nesse navegador. No Chrome até a versão ì, precisávamos usar o prexo deles com -webkit-border-radius. Capítulo ä - CSS Avançado - Prexos - Página Õþ¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Os prexos dos fabricantes mais famosos são: • -webkit-: navegadoresWebkit (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 é necessário usar prexos para certas versões. Se quisermos omáximo de compatibilidade, precisamos colocar vários prexos ao mesmo tempo: p { /* Chrome até versão 3, Safari até versão 4 */ -webkit-border-radius: 5px; /* Firefox até 3.6 */ -moz-border-radius: 5px; /* Todas as versões modernas dos navegadores, incluindo IE e Opera que nunca precisaram de prefixo pra isso */ border-radius: 5px; } Algumas propriedades, como os transforms e transitions que veremos a seguir, até hoje precisamde prexos em todos os navegadores. Será preciso repetir a propriedade ¢ vezes, infelizmente. É o preço que se paga para usar recursos tão novos e ainda experimentais. Nos casos de CSSì que tratamos até agora (border-radius, text-shadow, box-shadow, rgba), todos os navega-dores modernos já suportam sem uso de prexos. Você só precisará deles se quiser suportar versões antigas (nesse caso, consulte as documentações para saber o que é necessário e quando). ä.ÕÕ CSSì: G§Zo†u•±u« OCSSì traz também suporte à declaração de gradientes sem que precisemos trabalhar comimagens. Além de sermais simples, a página camais leve e a renderização camelhor por se adaptar a todo tipo de resolução. Existe suporte a gradientes lineares e radiais, inclusive com múltiplas paradas. A sintaxe básica é: .linear { background: linear-gradient(white, blue); } Capítulo ä - CSS Avançado - CSSì: Gradientes - Página Õþä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript .radial { background: radial-gradient(white, blue); } Podemos ainda usar gradientes com angulações diferentes e diversas paradas de cores: .gradiente { background: linear-gradient(45deg, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); } P§u€†ì™« Aespecicação de gradientes já está em sua versão nal e já é implementada sem prexos em vários browsers. Mas, enquanto a especicação ainda estava em rascunho, antes de ser nal, uma sintaxe diferente nos gra-dientes era usada. Isso quer dizer que versões mais antigas dos navegadores que suportavam gradientes esperam uma sintaxe diferente. Como as especicações em rascunho são implementadas prexadas nos navegadores, é fácil colocar essas regras com sintaxe diferente para esses navegadores. O problema é que o código ca grande e difícil de manter. A versão atual da especicação suporta um primeiro argumento que indica a direção do gradiente: .linear { background: linear-gradient(to bottom, white, blue); } O código anterior indica um gradiente do branco para o azul vindo de cima para baixo. Mas na versão suportada antes do rascunho dos gradientes, o mesmo código era escrito com top ao invés 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, versões bem mais antigas doWebKit - notadamente o Chrome até versão É e o Safari até versão ¢ -, 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 máximo de compatibilidade, você terá que incluir todas essas variantes no código CSS. Capítulo ä - CSS Avançado - CSSì: Gradientes - Página Õþß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript GZ“f†Z§§Z« £§™ IE Z•±†™ O IE só suporta gradientes CSSì a partir da versão Õþ, mas desde o IEä era possível fazer gradientes simples usando um CSS proprietário 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 IEä até IEÉ. O IEÕþ já não aceita mais essa gambiarra e exige que você use a sintaxe ocial do CSSì que vimos no início. Gu§Zca™ ou §Zo†u•±u« É comum também a conguração de um background simples e sólido antes do gradiente, a ser usado pelos navegadores mais antigos. Como eles não entendem gradientes, usarão a cor sólida e terão um design ade-quado e usável. Os navegadores mais novos vão ler a regra do gradiente e ignorar a cor sólida (progressive enhancement): .gradiente { background: #cbebff; background: linear-gradient(45deg, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); } Uma ferramenta bastante útil e recomendada é o Ultimate CSS Gradient Generator da ColorZilla. Ela nos permite criar gradientes CSSì visualmente como num editor de imagens. Além disso, já implementa todos os hacks e prexos para navegadores diferentes. Há até uma opção que permite que enviemos uma imagem com o design de um gradiente e ele identica as cores e gera o código correto. http://www.colorzilla.com/gradient-editor/ Recomendamos fortemente o uso dessa ferramenta para gerar gradientes CSSì. ä.Õó P§™§u««†êu E•„Z•hu“u•± Nesse ponto, você pode estar pensando nos navegadores antigos. Bordas redondas, por exemplo, só funcio-nam no IE a partir da versão É. Até o IE˜ não há como fazer isso com CSS (nem com prexos). O que fazer então? Muitos usuários no Brasil ainda usam IE˜ e até versões mais antigas como IEß e talvez IEä. Capítulo ä - CSS Avançado - Progressive Enhancement - Página Õþ˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript O melhor é não usar esses recursos modernos por causa dos usuários de navegadores antigos? Não! Não vamos sacricar a experiência damaioria dos usuários de navegadoresmodernos por causa do cada vez menor número de pessoas usando navegadores antigos, mas também não queremos esquecer os usuários de navegadores antigos e deixá-los sem suporte. P§™§u««†êu u•„Z•hu“u•± u §Zhu€¶ ou§ZoZ±†™• A ideia é fazer seu site funcionar em qualquer navegador, sem prejudicar os navegadores mais antigos e sem deixar de usar os novos recursos em navegadores novos. Graceful degradation foi o nome da primeira técnica a pregar isso; o objetivo era montar seu site voltado aos navegadores modernos e fazer com que ele degradasse “graciosamente”, removendo funcionalidades não suportadas. A abordagem mais recente, chamada progressive enhancement tem uma ideia parecida mas ao contrário: comece desenvolvendo as funcionalidades normalmente e vá acrescentando pequenasmelhoriasmesmo que só funcionem nos navegadores modernos. Com CSSì, podemos usar progressive enhancement. Não é possível ainda ter um site que dependa hoje totalmente do CSSì. Mas é possível desenvolver seu site e acrescentar melhorias progressivamente usando CSSì. Ou seja, faça um layout que que usável com bordas quadradas mas use bordas redondas para deixá-lo melhor, mais bonito, nos navegadores mais modernos. Saiba mais no blog da Caelum: http://blog.caelum.com.br/cssì-e-progressive-enhancement/ ä.Õì Eìu§hih†™«: ê†«¶Z CSSì Õ) Vamos dar um ar mais atual pra nossa home colocando uns efeitos nos painéis. Use border-radius e box-shadow no painel em si para destacá-lo mais. E use um text-shadow sutil para deixar o título do painel mais destacado. .painel { border-radius: 4px; box-shadow: 1px 1px 4px #999; } .painel h2 { text-shadow: 1px 1px 2px #FFF; } Veja o resultado no navegador. Capítulo ä - CSS Avançado - Exercícios: visual CSSì - Página ÕþÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó) O border-radius pode também ser congurado para bordas especícas apenas e até de tamanhos dife-rentes se quisermos. .busca { border-top-left-radius: 4px; border-top-right-radius: 4px; } ì) No CSSì, podemos usar cores com canal Alpha para translucência usando a sintaxe do RGBA. Faça a sombra do título do painel um branco com ˜þÛ de opacidade. .painel h2 { text-shadow: 1px 1px 2px rgba(255,255,255,0.8); } ¦) O box-shadow também aceita a criação de bordas internas aos elementos além da borda externa. Basta usar a opção inset: box-shadow: inset 1px 1px 4px #999; Teste na sombra dos painéis que zemos antes. ¢) Use gradientes nos painéis 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); } Capítulo ä - CSS Avançado - Exercícios: visual CSSì - Página ÕÕþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript P§u€†ì™« •™ uìu§hih†™ Usamos no exercício a versão ocial da especicação sem prexos que funciona nas últimas versões do Firefox, Chrome, Opera, Safari e Internet Explorer. Note que não estamos suportando versões antigas desses navegadores de propósito. Se quiser, você pode adicionar as outras variantes de prexos para suportá-los. Ou usar uma ferramenta como o Collorzilla Gradient Generator para automatizar: http://www.colorzilla.com/gradient-editor/ Consulte o suporte nos browsers aqui: http://caniuse.com/css-gradients ä.Õ¦ CSSì T§Z•«†±†™•« Com as transitions, conseguimos animar o processo de mudança de algum valor do CSS. Por exemplo: temos um elemento na posição top:10px e, quando passarmos o mouse em cima (hover), queremos que o elemento vá para top:30px. O CSS básico é: #teste { position: relative; top: 0; } #teste:hover { top: 30px; } Isso funciona, mas o elemento é deslocado de uma vez quando passamos o mouse. E se quisermos algo mais sutil? Uma animação desse valor mudando lentamente, mostrando o elemento se deslocando na tela? Usamos CSSì Transitions. Sua sintaxe possui vários recursos mas seu uso mais simples, para esse nosso caso, seria apenas: #teste:hover { transition: top 2s; } Isso indica que queremos animar a propriedade top durante ó segundos. Por padrão, a animação é linear, mas temos outros tipos para animações mais suaves: • linear - velocidade constante na animação; • ease - redução gradual na velocidade da animação; Capítulo ä - CSS Avançado - CSSì Transitions - Página ÕÕÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript • ease-in - aumento gradual na velocidade da animação; • ease-in-out - aumento gradual, depois redução gradual na velocidade da animação; • cubic-bezier(x1,y1,x2,y2) - curva de velocidade para animação customizada (avançado); #teste:hover { transition: top 2s ease; } Para explorar o comportamento dos tipos de animações disponíveis, e como criar uma curva de velocidade customizada para sua animação, existe uma ferramenta que auxilia a criação 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 animação, mesmo tempo, mesmo efeito para todas as propriedades, podemos usar o atalho all (que já é o valor padrão, inclusive): #teste:hover { transition: all 2s ease; } Essa especicação, ainda em estágio inicial, é suportada em todos os navegadores modernos, incluindo o IE Õþ. Mas precisamos de prexos em vários browsers. #teste:hover { -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } Capítulo ä - CSS Avançado - CSSì Transitions - Página ÕÕó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ä.Õ¢ CSSì T§Z•«€™§“« Com essa nova especicação, agora é possível alterar propriedades visuais dos elementos antes impossíveis. Por exemplo, agora podemos alterar o ângulo de um elemento, mostrá-lo em uma escala maior ou menor que seu tamanho padrão ou alterar a posição do elemento sem sofrer interferência de sua estrutura. T§Z•«Z±u .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); } R™±Z±u #menu-departamentos { transform: rotate(-10deg); } Capítulo ä - CSS Avançado - CSSì Transforms - Página ÕÕì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ShZu #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); } SŽuë footer { /* Distorcer o elemento no eixo horizontal */ transform: skewX(10deg); } #social { /* Distorcer o elemento no eixo vertical */ transform: skewY(10deg); } Capítulo ä - CSS Avançado - CSSì Transforms - Página ÕÕ¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript É possível combinar várias transformações no mesmo elemento, basta declarar uma depois da outra: html { transform: rotate(-30deg) scale(0.4); } Essa especicação, ainda em estágio inicial, é suportada em todos os navegadores modernos, incluindo o IE É, mas todas as implementações 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); } ä.Õä Eìu§hih†™«: CSSì ±§Z•«€™§“ u ±§Z•«†±†™• P§u€†ì™« •™« uìu§hih†™« No exercício, optamos por usar sintaxes que funcionam em todos os browsers mas apenas em suas últimas versões. Isso quer dizer que acrescentamos os prexos necessários apenas hoje em dia. Se quiser suportar versões mais antigas, adicione mais prexos. Consulte a compatibilidade e prexos aqui: http://caniuse.com/css-transitions http://caniuse.com/transformsód Õ) Quando o usuário passar o mouse em algum produto dos painéis de destaque, mostre uma sombra por trás com box-shadow. Use também uma transição com transition para que essa sombra apareça suave-mente: Capítulo ä - CSS Avançado - Exercícios: CSSì transform e transition - Página ÕÕ¢

Material do Treinamento DesenvolvimentoWeb 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. ó) Altere a regra anterior para também colocar agora um fundo branco no elemento. Anime esse fundo também, 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; } ì) Mais coisas de CSSì! Ainda quando passar o mouse em cima do item do painel, queremos aumentar o elemento em óþÛ, dando uma espécie de zoom. Use CSS transform pra isso, com scale. Adicione na regra anterior (sem remover o que já tínhamos): .painel li:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } Teste e repare como o scale também é animado suavemente. Isso porque nossa transição estava comall. ¦) Altere a regra anterior do transform pra também fazer o elemento rotacionar suavemente em ¢ graus no sentido anti-horário: .painel li:hover { -webkit-transform: scale(1.2) rotate(-5deg); transform: scale(1.2) rotate(-5deg); } Capítulo ä - CSS Avançado - Exercícios: CSSì transform e transition - Página ÕÕä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¢) (opcional) Faça os elementos ímpares girarem em sentido anti-horário e os pares no sentido horário! No exercício anterior, zemos todos girarem anti-horário. Vamos sobrescrever essa regra para os elemen-tos pares usando o seletor :nth-child: .painel li:nth-child(2n):hover { -webkit-transform: scale(1.2) rotate(5deg); transform: scale(1.2) rotate(5deg); } ä) (opcional) Repare como a animação ocorre apenas quando passamos o mouse em cima, mas quando tiramos, a volta do efeito não é animada. Podemos habilitar a animação na volta do elemento para o estado normalmovendo as regras de transição para o li em si (e não só no :hover). .painel li { -webkit-transition: 0.7s; transition: 0.7s; } ß) (opcional) Umterceiro argumento para a função de transição é a função de animação, que controla como o efeito executa de acordo com o tempo. Por padrão, os efeitos são lineares, mas podemos obter resultados mais interessantes com outras opções como ease, ease-in, ease-out (e até o avançado cubic-bezier()). Por exemplo: .painel li:hover { -webkit-transition: 0.7s ease-in; transition: 0.7s ease-in; } .painel li { Capítulo ä - CSS Avançado - Exercícios: CSSì transform e transition - Página ÕÕß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript -webkit-transition: 0.7s ease-out; transition: 0.7s ease-out; } ä.Õß PZ§Z «Zfu§ “Z†«: u«£uh†€†h†oZou ou «uu±™§u« CSS Quando declaramos uma série de seletores CSS, é bem possível que nos deparemos com situações em que mais de um seletor esteja aplicando propriedades visuais ao mesmo elemento do HTML. Nesse caso é ne-cessário saber qual seletor tem precedência sobre os outros, a m de resolver conžitos e garantir que as propriedades desejadas estejam sendo aplicadas aos elementos corretos. O comportamento padrão dos seletores CSS, quando não há conžitos entre propriedades, é que as proprie-dades de mais de um seletor para um mesmo elemento sejam acumuladas. Veja no exemplo a seguir: Estrutura HTML pTexto do parágrafo em destaque/p pTexto de um parágrafo comum/p Seletores CSS p { color: navy; } p { font-size: 16px; } No exemplo anterior, utilizamos omesmo seletor duas vezes no CSS. Isso faz comque as propriedades sejam acumuladas em todos os elementos selecionados. No caso, todos os elementos da tag p em nosso documento serão exibidos da cor “navy” (azul marinho) e com a fonte no tamanho “Õäpx”. Quando há conžito 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; } Capítulo ä - CSS Avançado - Para saber mais: especicidade de seletores CSS - Página ÕÕ˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Nesse caso, há conžito entre as propriedades font-size declaradas nos seletores. Como os seletores são equivalentes, os parágrafos serão exibidos com a fonte no tamanho “Õäpt”. A declaração anterior, com valor de “Õópt” é sobrescrita pela nova propriedade declarada mais abaixo no nosso CSS. A cor “navy” continua aplicada a todos os parágrafos do documento. E«£uh†€†h†oZou ou Suu±™§u« CSS Seletores equivalentes têm suas propriedades sobrescritas conforme são declaradas. Mas o que acontece quando temos diferentes tipos de seletores? Cada tipo de seletor tem um peso diferente quando o navegador os interpreta e aplica suas propriedades declaradas aos elementos de um documento. Existe uma maneira bem simples de saber como funcionam esses pesos porque eles fazem parte da especicação do CSS. Para car um pouco mais fácil é só pensarmos em uma regra simples: quanto mais especíco 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 genérico. As propriedades declaradas nesse seletor serão apli-cadas a todos os elementos div do nosso documento, não levando em consideração qualquer atributo que eles possam ter. Por esse motivo, o seletor de tag tem valor baixo de especicidade. O seletor de classe, por exemplo .destaque {}, é um pouco mais especíco, nós decidimos quais elementos têm determinado valor para esse atributo nos elementos do HTML, portanto o valor de especicidade do seletor de classe é maior do que o valor de especicidade do seletor de tag. O seletor de id, por exemplo #cabecalho {}, é bem especíco, pois só podemos ter um único elemento com determinado valor para o atributo id, então seu valor de especicidade é omaior entre os seletores que vimos até agora. E quando temos seletores compostos ou combinados? Como calcular essa especicidade? Podemos adicionar um ponto em cada posição do valor de um seletor para chegarmos ao seu valor de es-peci cidade. Para isso vamos utilizar uma tabela para nos ajudar a conhecer esses valores, e a seguir vamos aplicar o calculo a alguns seletores propostos. Seguindo os valores descritos na tabela acima, podemos calcular o valor de especicidade para qualquer Capítulo ä - CSS Avançado - Para saber mais: especicidade de seletores CSS - Página ÕÕÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript seletor CSS, por exemplo: p { /* valor de especificidade: 001 */ color: blue; } .destaque { /* valor de especificidade: 010 */ color: red; } #cabecalho { /* valor de especificidade: 100 */ color: green; } Nos seletores combinados e compostos, basta somar os valores em suas determinadas posições como nos exemplos a seguir: #rodape p { /* valor de especificidade: 101 */ font-size: 11px; } #cabecalho .conteudo h1 { /* valor de especificidade 111 */ color: green; } .conteudo div p span { /* valor de especificidade: 013 */ font-size: 13px; } Quantomaior o valor da especicidade do seletor,maior a prioridade de seu valor, dessamaneira um seletor com valor de especicidade þÕì sobrescreve as propriedades conžitantes para o mesmo elemento que um seletor com valor de especicidade þþÕ. Essa é uma maneira simples de descobrir qual seletor tem suas propriedades aplicadas com maior priori-dade. Por enquanto vimos somente esses três tipos de seletores CSS (tag, classe e id). No decorrer do curso vamos ver outros tipos mais avançados de seletores, e vamos complementando essa tabela para termos uma referência completa para esse cálculo. Capítulo ä - CSS Avançado - Para saber mais: especicidade de seletores CSS - Página Õóþ

CZ£i±¶™ ß Web para dispositivos móveis “A iniciativa da Internet móvel é importante, informações devem ser igualmente disponíveis em qualquer dispositivo” – Tim Berners-Lee ß.Õ S†±u “™f†u ™¶ “u«“™ «†±u¥ O volume de usuários que acessam a Internet por meio de dispositivos móveis cresceu exponencialmente nos últimos anos. Usuários de iPhones, iPads e outros smartphones e tablets têm demandas diferentes dos usuários Desktop. Redes lentas e acessibilidade em dispositivos limitados e multitoque são as principais diferenças. Como atender a esses usuários? Para que suportemos usuáriosmóveis, antes de tudo, precisamos tomar uma decisão: fazer um Site exclusivo - e diferente - focado em dispositivos móveis ou adaptar nosso Site para funcionar em qualquer dispositivo? Vários grandes sites da Internet - como Google, Amazon, UOL, Globo.com etc - adotam a estratégia de ter um Site diferente voltado para dispositivos móveis. É comum usar um subdomínio diferente como “m.” ou “mobile.”, como http://m.uol.com.br. Essa abordagem é a que trazmaior facilidade na hora de pensar nas capacidades de cada plataforma, Desktop emobile, permitindo que entreguemos uma experiência customizada e otimizada para cada situação. Porém, há diversos problemas envolvidos: • Como atender adequadamente diversos dispositivos tão diferentes quanto um smartphone com tela pequena e um tablet com tela mediana? E se ainda considerarmos os novos televisores como Google TV? Teríamos que montar um Site especíco para cada tipo de plataforma?

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript • Muitas vezes esses Sites mobile são versões limitadas dos Sites de verdade e não apenas ajustes de usabilidade para o dispositivo diferente. Isso não frustra o usuário que, cada vezmais, usa dispositivos móveis para completar as mesmas tarefas que antes fazia no Desktop? • Dar manutenção em um Site já é bastante trabalhoso, imagine dar manutenção em dois - um mobile e um normal. • Você terá conteúdos duplicados entre Sites “diferentes”, podendo prejudicar seu SEO se não for feito com cuidado. • Terá que lidar com redirects entre URLs móveis e normais, dependendo do dispositivo. O usuário pode receber de um amigo um link para uma página vista no Site normal; mas se ele abrir esse email no celular, terá que ver a versão mobile desse link, sendo redirecionado automaticamente. E mesma coisa no sentido contrário, ao mandar um link de volta para o Desktop. Uma abordagem que vem ganhando bastante destaque é a de ter um único Site, acessível em todos os dis-positivos móveis. Adeptos da ideia da Web única (One Web) consideram que o melhor para o usuário é ter o mesmo Site do Desktop normal também acessível no mundo móvel. É o melhor para o desenvolvedor também, que não precisará manter vários Sites diferentes. E é o que garante a compatibilidade com a maior gama de aparelhos diferentes. Certamente, a ideia não é fazer o usuáriomóvel acessar a página exatamente damesmamaneira que o usuário Desktop. Usando truques de CSSì bem suportados no mercado, podemos usar a mesma base de layout e marcação porém ajustando o design para cada tipo de dispositivo. Nossa página no Desktop agora é mostrada assim: Queremos que, quando vista em um celular, tenha um layout mais otimizado: Capítulo ß -Web para dispositivos móveis - Site mobile ou mesmo site? - Página Õóó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript C™“™ ou«u•ê™êu§ ¶“ S†±u uìh¶«†ê™ £Z§ZM™f†u¥ A abordagem que trataremos no curso é a de fazer adaptações na mesma página para ser com-patível com CSSì. Como faremos caso queiramos fazer um Site exclusivo para mobile? Do ponto de vista de código, é a abordagem mais simples: basta fazer sua página com design mais enxuto e levando em conta que a tela será pequena (em geral, usa-se width de ÕþþÛ para que se adapte à pequenas variações de tamanhos de telas entre smartphones diferentes). Uma diculdade estará no servidor para detectar se o usuário está vindo deum dispositivomóvel ou não, e redirecioná-lo para o lugar certo. Isso costuma envolver código no servidor que detecte o navegador do usuário usando o User-Agent do navegador. Éuma boa prática também incluirumlink para a versão normal do Site caso o usuário não queira a versão móvel. ß.ó CSS “uo†Z ±í£u« Desde a época do CSSó, há uma preocupação como suporte de regras de layout diferentes para cada situação possível. Isso é feito usando os chamados media types, que podem ser declarados ao se invocar um arquivo CSS: Capítulo ß -Web para dispositivos móveis - CSS media types - Página Õóì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript link rel=stylesheet href=site.css media=screen / link rel=stylesheet href=print.css media=print / link rel=stylesheet href=handheld.css media=handheld / Outra forma de declarar os media types é separar as regras dentro do próprio arquivo CSS: @media screen { body { background: blue; color: white; } } @media print { body { background: white; color: black; } } O media type screen determina a visualização normal, na tela do Desktop. É muito comum também termos um CSS commedia type print comregras de impressão (por exemplo, retirar navegação, formatar cores para serem mais adequadas para leitura em papel etc). E havia também o media type handheld, voltado para dispositivos móveis. Com ele, conseguíamos adaptar o Site para os pequenos dispositivos como celularesWAP e palmtops. O problema é que esse tipo handheld nasceu em uma época em que os celulares eram bem mais simples do que hoje, e, portanto, costumavam ser usados para fazer páginas bem simples. Quando os novos smartpho-nes touchscreen começaram a surgir - em especial, o iPhone -, eles tinham capacidade para abrir páginas completas e tão complexas quanto as do Desktop. Por isso, o iPhone e outros celulares modernos ignoram as regras de handheld e se consideram, na verdade, screen. Além disso,mesmo que handheld funcionasse nos smartphones, como trataríamos os diferentes dispositivos de hoje em dia como tablets, televisões etc? A solução veio com o CSSì e seus media queries. ß.ì CSSì “uo†Z ¤¶u§†u« Todos os smartphones e navegadores modernos suportam uma nova forma de adaptar o CSS baseado nas propriedades dos dispositivos, as media queries do CSSì. Capítulo ß -Web para dispositivos móveis - CSSì media queries - Página Õó¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Em vez de simplesmente falar que determinado CSS é para handheld em geral, nós podemos agora indicar que determinadas regras do CSS devem ser vinculadas a propriedades do dispositivo como tamanho da tela, orientação (landscape ou portrait) e até resolução em dpi. link rel=stylesheet href=base.css media=screen link rel=stylesheet href=mobile.css media=(max-width: 480px) Outra forma de declarar os media types é separar as regras dentro do mesmo arquivo CSS: @media screen { body { font-size: 16px; } } @media (max-width: 480px) { body { font-size: 12px; } } Repare como o atributo media agora pode receber expressões complexas. No caso, estamos indicando que que queremos que as telas com largura máxima de ¦˜þpx tenham uma fonte de Õópx. Você pode testar isso apenas redimensionando seu próprio navegadorDesktop para um tamanhomenor que ¦˜þpx. ß.¦ V†uë£™§± Mas, se você tentar rodar nosso exemplo anterior em um iPhone ou Android de verdade, verá que ainda estamos vendo a versão Desktop da página. A regra do max-width parece ser ignorada! Capítulo ß -Web para dispositivos móveis - Viewport - Página Õó¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Figura ß.Õ: Site atual rodando num celular Android Na verdade, a questão é que os smartphones modernos têm telas grandes e resoluções altas, justamente para nos permitir ver sites complexos feitos para Desktop. A tela de um iPhone ¦S por exemplo é Éäþpx por ä¦þpx. Celulares Android já chegam a Õó˜þpx, o mesmo de um Desktop. Ainda assim, a experiência desses celulares é bem diferente dosDesktops. Õó˜þpx em uma tela de ¦ polegadas é bem diferente de Õó˜þpx em um notebook de Õì polegadas. A resoluçãomuda. Celulares costumamter uma resolução em dpi bem maior que Desktops. Como arrumar nossa página? Os smartphones sabem que considerar a tela como Õó˜þpx não ajudará o usuário a visualizar a página otimi-zada para telas menores. Há então o conceito de device-width que, resumidamente, representa um número em pixels que o fabricante do aparelho considera como mais próximo da sensação que o usuário tem ao visualizar a tela. Nos iPhones, por exemplo, o device-width é considerado como ìóþpx,mesmo coma tela tendouma resolução bem mais alta. Capítulo ß -Web para dispositivos móveis - Viewport - Página Õóä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Por padrão, iPhones, Androids e ans costumam considerar o tamanho da tela visível, chamada de viewport como grande o suciente para comportar os Sites Desktop normais. Por isso a nossa página foi mostrada sem zoom como se estivéssemos no Desktop. A Apple criou então uma solução que depois foi copiada pelos outros smartphones, que é congurar o valor que julgarmos mais adequado para o viewport: meta name=viewport content=width=320 Isso faz com que a tela seja considerada com largura de ìóþpx, fazendo com nosso layout mobile nalmente funcione e nossas media queries também. Melhor ainda, podemos colocar o viewport com o valor device-width denido pelo fabricante, dando mais žexibilidade com dispositivos diferentes com tamanhos diferentes: meta name=viewport content=width=device-width ß.¢ Eìu§hih†™«: “™f†u «†±u Õ) Vamos adaptar nossa home page (index.html) para mobile. Capítulo ß -Web para dispositivos móveis - Exercícios: mobile site - Página Õóß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Comece declarando a meta tag com o viewport dentro do head da index.html: meta name=viewport content=width=device-width Vamos escrever nosso CSS de adaptação em um novo arquivo, chamado mobile.css. Crie esse arquivo e o importe no head do index.html. Use media queries para que ele só seja aplicado em resoluções de no máximo ìóþpx (celulares comuns) link rel=stylesheet href=css/mobile.css media=(max-width: 320px) ó) Nossa página hoje tem o tamanho xo em É¦þpx e é centralizada (com o uso do seletor .container). Para deixarmos a páginamais žexível nos celulares, precisamos remover esse tamanho absoluto e colocar algum que faça mais sentido em telas menores, onde queremos ocupar quase que a tela toda (deixando apenas uma pequena margem): .container { width: 96%; } Já é possível redimensionar a tela para ìóþpx e ver que o site começa a se adaptar. Mas ainda há bastante trabalho pela frente. ì) Próximo passo: vamos ajustar os elementos do topo da página. Vamos centralizar o logotipo na página, esconder as informações (secundárias) sobre a Sacola e ajustar o menu para car abaixo do logo e não mais posicionado à direita. header h1 { text-align: center; } header h1 img { max-width: 50%; } .sacola { display: none; } .menu-setores { position: static; text-align: center; } Lembre-se que, anteriormente, nosso menu estava com position:absolute para 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? ¦) Ajustamos a posição do menu de setores e, automaticamente, os links se posicionaram formando duas linhas. Mas repare como estão próximos uns dos outros. Será que o nosso usuário consegue clicar neles usando seu celular? Vamos aumentar o espaço entre eles: Capítulo ß -Web para dispositivos móveis - Exercícios: mobile site - Página Õó˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript .menu-setores ul li { display: inline-block; margin: 5px; } ¢) Agora queremos ajustar a seção de busca, o menu da esquerda e a imagem de destaque. Como eles são muito grandes, em mobile, é melhor renderizarmos um em cima do outro sem elementos a direita (ima-gem). Vamos ocupar ÕþþÛ da tela com o menu e a busca. A imagem de destaque deverá ser redimensionada para ocupar ÕþþÛ da tela e não estourar o tamanho. .busca, .menu-departamentos, .destaque img { margin-right: 0; width: 100%; } Teste esse passo no navegador redimensionado. ä) Nossa página está cando boa em mobile. Falta apenas ajustarmos os painéis de destaques de produtos. Por hora, eles estão com tamanhos absolutos ocupando metade da tela e mostrando ä elementos, com ì por linha. Vamosmanter o painel comì elementos por linha,mas vamos fazer os dois painéis encaixarem um em cima do outro. Para isso, basta tirarmos a restrição de largura do painel para ele ocupar a tela toda. .painel { width: auto; } Com relação aos produtos nos painéis. Vamos precisar redimensioná-los para encaixar ì em cada linha. Uma boa maneira é colocar cada elemento com ìþÛ do painel, totalizando ÉþÛ, e deixando espaço para as margens. Já a imagem interna de cada produto deverá ocupar ÕþþÛ do seu quadrado (o li que ajustamos), senão as imagens vão estourar o layout em certos tamanhos. .painel li { width: 30%; } .painel img { width: 100%; } Teste a página nal no navegador redimensionado. Temos nossa página mobile! Capítulo ß -Web para dispositivos móveis - Exercícios: mobile site - Página ÕóÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ß) O que acontece em resoluções maiores de ìóþpx? Nosso design volta ao padrão de É¦þpx e camos com scroll horizontal. A maioria dos smartphones tem ìóþpx de largura, mas nem todos, e nosso layout não se ajusta bem a esses outros. Até mesmo aqueles com ìóþpx de largura, ao girar o aparelho em modo paisagem, a resolução é maior (¦˜þpx num iPhone e mais de ¢þþpx em muitos Androids). O melhor era que nosso layout adaptável fosse usado não só em ìóþpx mas em diversas resoluções inter-mediárias antes dos É¦þpx que estabelecemos para o site Desktop. Podemos ajustar nossa media query para aplicar o CSS de adaptação a qualquer tamanho de tela menor Capítulo ß -Web para dispositivos móveis - Exercícios: mobile site - Página Õìþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript que os É¦þpx do Desktop (ou seja, no máximo, ÉìÉpx): link rel=stylesheet href=css/mobile.css media=(max-width: 939px) Teste, novamente, redimensionando o navegador para várias resoluções diferentes. Repare que, como zemos um layout žuido, baseado em porcentagens, os elementos se ajustam a dife-rentes resoluções sem esforço. É uma boa prática usar porcentagens e, sempre que possível, evitar o uso de valores absolutos em pixels. ˜) (opcional) Se você fez os exercícios opcionais anteriores do controle de pause/play no banner, precisamos reposicionar o controle de pause/play: .pause, .play { top: auto; right: auto; left: 10px; bottom: 10px; } ß.ä Ru«£™•«†êuWuf Du«†• Repare o que zemos nesse capítulo. Nossa página, comomesmo HTML e pequenos ajustes de CSS, suporta diversas resoluções diferentes, desde a pequena de um celular até um Desktop. Essa prática é o que o mercado chama de Web Design Responsivo. O termo surgiu num famoso artigo de Ethan Marcotte e diz exatamente o que acabamos de praticar. São ì os elementos de um design responsivo: • layout žuído usando medidas žexíveis, como porcentagens; • media queries para ajustes de design; • uso de imagens žexíveis. Nós aplicamos os ì princípios na nossa adaptação da Home pramobile. A ideia do responsivo é que a página se adapte a diferentes condições, em especial a diferentes resoluções. E, embora o uso de porcentagens exista há décadas na Web, foi a popularização das media queries que permitiram layouts verdadeiramente adaptativos. ß.ß M™f†u-€†§«± Nosso exercício seguiu o processo que chamamos de desktop-rst. Isso signica que tínhamos nossa página codicada para o layout Desktop e, num segundomomento, adicionamos as regras para adaptação amobile. Capítulo ß -Web para dispositivos móveis - ResponsiveWeb Design - Página ÕìÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Na prática, isso não émuito interessante. Repare como tivemos que desfazer algumas coisas do que tínhamos feito no nosso layout para desktop: tiramos alguns posicionamentos e deszemos diversos ajustes na largura de elementos. É muito mais comum e recomendado o uso da prática inversa: oMobile-rst. Isto é, começar o desenvolvi-mento pelomobile e, depois, adicionar suporte a layouts desktop. No código, não há nenhumsegredo: vamos apenas usar mais media queries min-width ao invés de max-width, mais comum em códigos desktop-rst. A grandemudança domobile-rst é que ela permite uma abordagemmuitomais simples e evolutiva. Inicia-se o desenvolvimento pela áreamais simples e limitada, commais restrições, omobile. Ouso da tela pequena vai nos forçar a criar páginas mais simples, focadas e objetivas. Depois, a adaptação pra Desktop com media queries, é apenas uma questão de readaptar o layout. A abordagem desktop-rst começa pelo ambiente mais livre e vai tentando cortar coisas quando chega no mobile. Esse tipo de adaptação é, na prática, muito mais trabalhosa. Nós recomendamos o uso do mobile-rst. E usaremos essa prática no curso a partir das próximas páginas, assim você poderá comparar os dois estilos. ß.˜ Eìu§hih†™« ™£h†™•Z†« Õ) Nosso layout anterior tem dois comportamentos: um layout xo em É¦þpx otimizado para Desktops e outro construído para telas pequenas, mas que é aplicado para qualquer resolução abaixo de ÉìÉpx. Repare que, em resoluções altas (mas menores que É¦þpx), nosso design mobile não ca tão bonito (em-bora continue funcional!). Podemos usar mais media queries para ajustar outros detalhes do layout con-forme o tamanho da tela varia entre ìóþpx e ÉìÉpx. Por exemplo, podemos usar ó colunas no nosso menu quando chegarmos em ¦˜þpx (um iPhone em paisagem): @media (min-width: 480px) { header h1 { margin: 5px 0; } .menu-departamentos { padding-bottom: 10px; margin-bottom: 10px; } .menu-departamentos nav ul { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } Capítulo ß -Web para dispositivos móveis - Exercícios opcionais - Página Õìó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Emtelasumpoucomaiores, como tablets (um iPad tem ßä˜px por exemplo), podemos querer fazer outros ajustes com uma media query: @media (min-width: 720px) { .menu-setores { position: absolute; } .sacola { display: block; } .painel li { width: 15%; } .busca, .menu-departamentos { margin-right: 1%; width: 30%; } .menu-departamentos nav ul { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } .destaque img { width: 69%; } } Teste agora no navegador. Redimensione em diversos tamanhos desde o pequeno ìóþpx até o Desktop grande. Veja a responsividade do nosso design, se ajustando a diversos tamanhos de tela. ó) Acesse sua página mobile no seu smartphone de verdade! ì) (trabalhoso) Adapte o layout das outras páginas (Sobre, Contato e Produto) para mobile, também. Faça uma solução mobile completa! Capítulo ß -Web para dispositivos móveis - Exercícios opcionais - Página Õìì

CZ£i±¶™ ˜ Introdução a PHP “Medir progresso de programação em linhas de código é como medir o progresso da construção de um avião por seu peso.” – Bill Gates ˜.Õ L†fu§±Z•o™ ™ HTML ou «¶Z« †“†±Zcou« Apesar de toda evolução do HTML¢ e dos navegadores atuais, aWeb ainda é um ambiente bastante restrito. O browser não executa qualquer tipo de código e coisas que às vezes são simples de escrever em outras linguagens são bastante complexas de se fazer em HTML ou JavaScript. Por isso, todo projetoWeb sério não é apenas de arquivos HTML, CSS e JavaScript, mas envolve uma infra-estrutura no servidor. Há muitas linguagens e servidores possíveis de serem usados. Como linguagem, se usa PHP, Java, Ruby, Python, Ck. Servidores temos Apache, Tomcat, JBoss, IIS, nginx e outros. Usamos uma linguagem no servidor para executar tarefas como gerar páginas dinamicamente comdados de um banco de dados da aplicação; enviar emails para usuários; processar tarefas complexas; garantir valida-ções de segurança da aplicação; e muito mais. Aqui no curso, vamos usar umpouco de PHP para entender como funciona esse processo. E, principalmente, entender como o front-end (foco do curso) se integra na prática a soluções server-side.

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript JZêZ ê« JZêZSh§†£± Apensar do nome, essas duas linguagens são completamente diferentes. Java é um linguagem voltada mais para servidores, com bastante apelo no mundo corporativo, e mantida pela Oracle. JavaScript é a linguagem daWeb para se escrever funcionalidades dinâmicas numa página. Roda no browser. ˜.ó C™“™ €¶•h†™•Z ¶“ «u§ê†o™§ HTTP Se escrevemos um HTML simples num arquivo .html, basta abri-lo no navegador e pronto, já podemos visualizar a página. Mas quando envolvemos um servidor o processo não é tão simples. Usamos o protocolo HTTP para servir páginas naWeb. É por isso que todo endereço naWeb começa com http://. Quando acessamos um endereço desses na Internet, falamos que estamos fazendo uma requisição ao servidor. Ou seja, pedimos que certo conteúdo seja exibido. Por exemplo, ao acessar http://www.caelum.com.br/apostilas estamos conectando via HTTP ao servidor www.caelum.com.br e requisitando a URL /apostilas. Do outro lado, existe um servidor HTTP esperando novas requisições que é responsável por servir o que o usuário está pedindo. Esse servidor é um programa que instalamos e ca responsável por processar as requisições. A grande questão é que esse servidor não precisa ser algo que simplesmente lê o arquivo HTML e envia seu conteúdo para o cliente. O servidor pode executar código e gerar HTML na hora pro cliente, dinamica-mente. É esse processamento de lógica dinâmica no servidor que queremos fazer com PHP. ˜.ì C™“™ €¶•h†™•Z ™ PHP •™ «u§ê†o™§ Ao usar PHP, podemos escolher diversos servidores compatíveis. O mais famoso de todos é o Apache, que provavelmente você irá encontrar em muitas hospedagens na prática. Mas uma novidade das últimas versões do PHP (¢.¦+) é que ele já vem com um servidor embutido simples que dispensa a instalação de um servidor adicional. É ideal para testes e para usar em desenvolvimento. Ele é muito simples de usar. Basta abrir o terminal, entrar na pasta onde está o projeto e rodar: php -S localhost:8080 Nesse comando, a opção -S indica que queremos o servidor embutido dele, o endereço localhost indica que vamos acessar nosso servidor localmente e o valor ˜þ˜þ é a porta que o servidor vai rodar. Capítulo ˜ - Introdução a PHP - Como funciona um servidor HTTP - Página Õì¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Depois, basta navegar na URL http://localhost:˜þ˜þ/ e nosso servidor vai responder normalmente. Como nosso projeto só tem arquivos .html, veremos as páginas no navegador iguaizinhas como víamos antes, sem novidades. Mas não precisa ser assim. Para executar código do lado do servidor com PHP, basta renomear o arquivo de .html para .php. Por exemplo: sobre.php. Com essa extensão, podemos agora misturar código dinâmico PHP no meio do nosso HTML. Todo código PHP ca dentro de uma tag especial dele, pra diferenciar do código HTML: ?php // código PHP aqui ? E podemos misturar isso com HTML normalmente. O que for tag do PHP vai ser executada pelo servidor PHP. O que não for, vai ser enviado para o browser do jeito que está. h1HTML aqui/h1 ?php // código PHP aqui ? pMais HTML/p Vamos ver muitas coisas com PHP ao longo do curso. Por enquanto, vamos fazer um exercício que apenas mostra o ano atual no rodapé da página de sobre. Para acessar o ano atual, podemos fazer: ?php print date('Y'); ? Chamamos a função date do PHP passando como argumento o formato que queremos a saída. No caso, Y indica que queremos o ano apenas. Veja outros formatos em: http://www.php.net/date A função date devolve a data mas não mostra na tela. O comando print pega esse valor e mostra na tela. ˜.¦ PZ§Z «Zfu§ “Z†«: †•«±ZZca™ o™ PHP u“ hZ«Z O site ocial do PHP é o http://php.net e lá você encontra downloads e código fonte completo. Capítulo ˜ - Introdução a PHP - Para saber mais: instalação do PHP em casa - Página Õìä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript W†•o™ë« Para facilitar a instalação do PHP e dependências no Windows, existe um pacote famoso chamadoWAMP da BitNami. Ele instala o PHP, o MySQL e o servidor Apache em um clique, além de várias dependências. Basta fazer o download e executar o instalador: http://bitnami.com/stack/wamp Depois de instalado, conseguimos acessar o binário do PHP pela linha de comando através de um menu. Vá em Iniciar - BitNami Application Stack - Use Application Stack. MZh u L†•¶ì Costumam vir já com o PHP instalado. Verique apenas se a verão é igual ou superior a ¢.¦, que precisamos pro curso. Se for mais antiga, consulte o gerenciador de pacotes do seu sistema para atualizar. ˜.¢ Eìu§hih†™«: uìuh¶±Z•o™ ™ PHP Õ) Nosso primeiro passo é executar o servidor local do PHP. Para isso, abra o terminal, entre na pasta do projeto e execute o servidor do PHP: $ cd Desktop/mirror-fashion/ $ php -S 0.0.0.0:8080 Abra o navegador e acesse http://localhost:˜þ˜þ. Você deverá ver a página da Mirror Fashion sendo servida pelo PHP agora. O« u•ou§uc™« o™ «u§êu§ f¶†±†• o™ PHP O argumento -S habilita o servidor do PHP. Como argumento, ele recebe um IP e uma porta. Quando passamos þ.þ.þ.þ, estamos habilitando todos os IPs da máquina; isso quer dizer que o servidor é acessível tanto na própria máquina quanto via rede. Isso é útil para testarmos nosso projeto em dispositivos móveis conectados na rede, por exemplo. E“ hZ«Z: †•«±ZZca™ o™ PHP Na Caelum, o PHP já está instalado. Para instalar em casa, veja o apêndice no nal da apostila com guia de instalação. ó) Para testarmos nossa instalação do PHP, vamos implementar um funcionalidade bem simplesmasmuito útil. No rodapé que criamos na página Sobre, colocamos uma informação de copyright. Queremos colo-car o ano atual do lado, mas sem precisar atualizar o valor todo ano. Capítulo ˜ - Introdução a PHP - Exercícios: executando o PHP - Página Õìß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Isto é, queremos saber o ano atual dinamicamente e inserir esse valor na página. Com PHP, isso é muito simples: basta usar a função date. Primeiro renomeie a extensão do arquivo sobre.html para sobre.php. Lembre que um arquivo PHP nada mais é que um HTML com instruções especiais pra rodar no servidor. No rodapé, insira a data atual: div id=rodape img src=img/logo.png copy; Copyright Mirror Fashion ?php print date(Y); ? /div ì) (opcional) A função date recebe como parâmetro o formato que desejamos para nossa data. Teste outros valores, como m ou l. Consulte outros valores na documentação: http://www.php.net/date ¦) (opcional avançado) O texto que descreve a Mirror Fashion fala de sua fundação em ÕÉìó. Acrescente uma frase dinâmica no texto que indica há quantos anos a empresa foi fundada. Dica: pegue o ano atual e subtraia o ano inicial. Como fazer isso em PHP? ˜.ä RuZ£§™êu†±Z“u•±™ ou hoo†™ h™“ †•h¶ou Umrecursomuito comum de aparecer em todo projeto é a criação de um cabeçalho e um rodapé único para o site que são aproveitados em todas as páginas. Cada página individual só muda o miolo. O problema é que, com HTML puro, a única solução é car copiando e colando o código do cabeçalho em todas as páginas. Isso é muito ruim. Se um dia precisarmos mudar um item no menu do cabeçalho, temos zilhões de arquivos pra mexer. O HTML não tem recursos pra que deixemos esse código centralizado em um só lugar. Existem algumas soluções que, ou são muito limitadas ou têm problemas sérios de suporte nos navegadores. Então, do ponto de vista do HTML não há outro jeito: precisamos copiar e colar o código em toda página. Mas, usando uma tecnologia no servidor como PHP, podemos fazer esse “copiar e colar” dinamicamente. Criamos um arquivo .php separado que encapsula o código do cabeçalho. Depois, incluímos esse código em todas as páginas usando o comando include. ?php include(_cabecalho.php); ? Capítulo ˜ - Introdução a PHP - Reaproveitamento de código com include - Página Õì˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Repare que o HTML nal que o browser recebe é o mesmo de antes. A inclusão do cabeçalho acontece no servidor. ˜.ß Eìu§hih†™«: †•h¶ou Õ) A partir do próximo capítulo, vamos desenvolver a página de detalhes de produto completa. Mas o pri-meiro passo nosso é criar a estrutura básica do arquivo. Isto inclui o doctype, tag html, head, body, title. Crie o arquivo produto.php com uma base parecida com essa: !DOCTYPE html html head meta charset=utf-8 titleMirror Fashion/title link rel=stylesheet href=css/reset.css link rel=stylesheet href=css/estilos.css link rel=stylesheet href=css/mobile.css media=(max-width: 939px) meta name=viewport content=width=device-width /head body /body /html Repare que já incluímos algumas tags que vimos antes no curso. Em especial, o charset como UTF-˜, os arquivos CSS de reset e estilos, e a tag viewport para nossa página funcionar bem em mobile. ó) Como todas as páginas fazem parte daMirror Fashion, é muito comum que tenham o mesmo cabeçalho. Tínhamos criadoumcabeçalho bacana na index.php e, para termos omesmo cabeçalho no produto.php, teríamos que copiar e colar o código do header. O HTML sozinho não tem recursos muito interessantes para se reaproveitar pedaços de código entre páginas. Mas no servidor isso é bem fácil de resolver. Com PHP, basta usar a função include. Primeiro, crie um arquivo chamado _cabecalho.php e coloque o conteúdo do cabeçalho que tínhamos na home com a tag header. Agora, na página produto.php, inclua o novo arquivo de cabeçalho logo no início do body: ?php include(_cabecalho.php); ? ì) Teste a página nova acessando http://localhost:˜þ˜þ/produto.php. O cabeçalho deve aparecer incluído. Verique o HTML da página pelo navegador. Capítulo ˜ - Introdução a PHP - Exercícios: include - Página ÕìÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript O que ganhamos fazendo o include comPHP? Qual o trabalho de editar o logo da empresa, por exemplo, se tivermos Õþþ páginas no site? ¦) Faça o mesmo com o rodapé. Crie um novo arquivo _rodape.php com o conteúdo do footer que havíamos criado na Home. Inclua esse arquivo na nova página produto.php logo antes de fechar o body usando o include do PHP. ¢) (opcional) Aplique o cabeçalho e o rodapé que acabamos de criar também naHome e na página de Sobre. Para isso, transforme esses arquivos em PHP renomeando suas extensões e use o include. ˜.˜ PZ§Z «Zfu§ “Z†«: Z†•oZ “Z†« €uì†f††oZou h™“ êZ§†aêu†« Podemos passar variáveis de um arquivo para o outro durante o include. Por exemplo, a página do cabeçalho pode receber um título para imprimir no title ao invés de deixar um valor xo. title?php print $cabecalho_title; ? /title E na página produto.php, denimos a variável antes de dar o include: ?php $cabecalho_title = Produto da Mirror Fashion; include(_cabecalho.php); ? ˜.É Eìu§hih†™« ™£h†™•Z†«: êZ§†aêu†« u“ PHP Õ) Edite o arquivo _cabecalho.php para incluir toda a estrutura inicial do arquivo HTML e não só o topo da página. Coloque desde o doctype, abertura da tag html, head, body até o header em si. !DOCTYPE html html head meta charset=utf-8 titleMirror Fashion/title link rel=stylesheet href=css/reset.css link rel=stylesheet href=css/estilos.css link rel=stylesheet href=css/mobile.css media=(max-width: 939px) meta name=viewport content=width=device-width /head body Capítulo ˜ - Introdução a PHP - Para saber mais: ainda mais žexibilidade com variáveis - Página Õ¦þ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript header class=container !-- conteúdo do header aqui -- /header Agora remova esse pedaço do doctype, html, head e body de dentro das páginas que fazíamos include. A ideia é que todo esse pedaço agora é reaproveitável no include e não apenas o header em si. ó) Mas algumas partes do HTML que estamos incluindo agora no _cabecalho.php devem ser dinâmicas. O title por exemplo não deveria car xo no include, mas deveria ser diferente para cada página. Uma forma de resolver isso é passando variáveis entre as páginas. Na produto.php, antes de incluir o cabeçalho, dena uma variável com o título: ?php $cabecalho_title = Produto da Mirror Fashion; include(_cabecalho.php); ? E no _cabecalho.php, vamos imprimir essa variável dentro do title: title?php print $cabecalho_title; ? /title Repare como agora o título é parametrizável. Dena um título nas outras páginas que fazem uso do incinclude também (Home, Sobre etc). ì) Que outros elementos desse cabeçalho podemmudar entre páginas diferentes além do título? Implemente soluções parecidas usando variáveis pra resolver outros casos de include dinâmico. Exemplo: cada página pode incluir um arquivo CSS próprio, com seu estilo. Não vamos querer listar todos os arquivos CSS no _cabecalho.php. O melhor é cada página declarar qual arquivo .css adicional quer incluir além dos básicos. Na produto.php, podemos querer incluir um produto.css. Vamos usar uma variável pra isso: ?php $cabecalho_css = 'link rel=stylesheet href=css/produto.css'; ? E no _cabecalho.php podemos incluir essa variável no meio do nosso head: ?php print $cabecalho_css; ? ¦) Nem todas as páginas precisam de um arquivo .css extra. Do jeito que zemos, se a variável $cabecalho_css não for denida, um erro acontecerá. Isso é ruim. Uma forma de evitar é tentar imprimir a variável apenas se ela existir, e ignorar isso caso ela não esteja denida. Ou seja, a variável é opcional. Podemos fazer isso no PHP indicando que o erro de variável não encontrada pode ser ignorado. Para isso, usamos o @ na frente da variável: ?php print @$cabecalho_css; ? Capítulo ˜ - Introdução a PHP - Exercícios opcionais: variáveis em PHP - Página Õ¦Õ

CZ£i±¶™ É Progressive enhancement e mobile-rst “Qualquer tolo consegue escrever código que um computador consiga entender. Bons programadores escrevem código que humanos conseguem entender.” – Martin Fowler É.Õ Du«†• “™f†u-€†§«± Quando criamos a home page do projeto não sabíamos ainda otimizar nosso site para dispositivos móveis. Vimos o design e codicamos originalmente pensando nos browsers do desktop. Mais tarde, aplicamos os conceitos de media queries e viewport para ajustar o projeto para telas menores. Esse tipo de žuxo de desenvolvimento émuito comum. Desenvolver para desktop primeiro, que são amaioria dos usuários, e depois ajustar o design para mobile. Mas isso não é o melhor, nem o mais fácil. Muita gente argumenta a favor de uma técnica inversa, mobile-rst. Isso signica fazer o design mobile primeiro, implementar o código para mobile primeiro e, depois, ajustar para o desktop. O resultado nal deve ser um site que funciona tanto no desktop quanto no mobile, como antes, só mudamos a ordem do žuxo de desenvolvimento. Na prática, o quemuita gente descobriu é que criar pensando no ambientemais restritivo (omobile) e depois adaptar para o ambientemais poderoso (desktop) émais fácil que fazer o contrário. desktop-rst acaba sendo difícil por colocar o mobile, que é complicado, só no nal do projeto. Um exemplo prático que passamos na nossa home page. Fizemos antes um menu com CSS usando hover para abrir subcategorias. Isso é algo super comum e funciona muito bem no desktop. Mas é um desastre no mobile, onde não existe hover. Podemos agora repensar nossa home para ser compatível com mobile. Mas se tivéssemos, desde o início, pensando em mobile, talvez nem criássemos o menu hover.

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Outro exemplo: os links domenu são bastante inacessíveis emmobile. As opções estãomuito próximas uma das outras e tocar na opção certa com o dedo (gordo!) é muito difícil. No desktop não há esse problema pois usamos mouse, por isso não pensamos nisso antes. Se tivéssemos começado pelomobile, já teríamos feito os linksmaiores emais espaçados pensando nos dedos gordos (costuma-se recomendar um valor médio de ¢þpx para cada item clicável). E, fazendo tudo maior e mais espaçado, assim como evitando o hover, o site funciona bem no mobile mas, não só isso, funciona muito bem no desktop. Um site bem feito para mobile funciona perfeito no desktop mas o contrário nem sempre é verdade. Por isso o mobile-rst. MZ†« «™f§u “™f†u-€†§«± Não vamos nos estender no assunto aqui no curso mas, se interessar, existe um livro só sobre o tema, chamado Mobile-rst de Luke Wroblewski. Em português, você pode ler mais no livro A Web Mobile do instrutor da Caelum Sérgio Lopes. É.ó I“£u“u•±Zca™ “™f†u Vamos criar a próxima página da nossa loja, que será uma página para mostrar os detalhes de um produto após o usuário clicar em um produto na lista da home. Essa página vai mostrar uma foto grande, mostrar opções de cores e preço, exibir a descrição do produto e permitir que o usuário faça a compra. Nosso designer criou um design para essa página, com estilo mais minimalista e focado no conteúdo a ser exibido. Mas, agora, vamos seguir o princípio do mobile-rst e pensar primeiro em mobile. Eis nosso design aplicado na tela do iPhone para visualizarmos: Capítulo É - Progressive enhancement e mobile-rst - Implementação mobile - Página Õ¦ì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Nem sabemos ainda como será a versão desktop, e não interessa por enquanto. Note como a página foi feita pensada para mobile. Pouca informação, só o essencial, prioritário. Botões grandes e espaçados. Nenhum efeito de hover. Tudo numa coluna só de informações para dar scroll, já que a tela é pequena. É.ì F™§“¶a§†™ ou h™“£§Z Um dos aspectos fundamentais dessa página é permitir que o usuário escolha a variação correta do produto para ele. Repare que ele pode escolher a cor e o tamanho e depois comprar o produto especíco que escolheu. Quando clicar nesse botão de comprar, as escolhas do usuário precisamser enviadas para o servidor processar a compra em si. São, claro, parâmetros que o usuário pode escolher. Esqueça por um instante o design que vimos antes e pense na funcionalidade que estamos tentando im-plementar. Queremos uma maneira do usuário escolher entre diversas opções e enviar sua escolha para o servidor. Falando assim, é quase óbvio que estamos descrevendo um form. Mais: se queremos escolher, por exemplo, a cor da roupa dentre ì opções possívels, temos componentes especícos de formulário para isso. Podemos fazer um combobox com select ou implementar com ì radio buttons. Vamos fazer esse último. form input type=radio name=cor Verde input type=radio name=cor Rosa Capítulo É - Progressive enhancement e mobile-rst - Formulário de compra - Página Õ¦¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript input type=radio name=cor Azul /form Muito simples e funciona. Mas tem várias falhas de acessibilidade e HTML semântico. O texto que descreve cada opção, por exemplo, não deve car solto na página. Devemos usar o elemento label para representar isso. E associar com o respectivo input. form input type=radio name=cor id=verde label for=verdeVerde/label input type=radio name=cor id=rosa label for=rosaRosa/label input type=radio name=cor id=azul label for=azulAzul/label /form Mais ainda, repare que temos que explicar para o usuário o que ele está escolhendo com esses radio buttons. É a frase Escolha a cor” que vemos no design. Como escrevê-la no HTML? Um simples p? Não. Semanticamente, esses ì inputs representam a mesma coisa e devem ser agrupados em um fieldset que, por sua vez, recebe um legend com a legenda em texto apropriada. form fieldset legendEscolha a cor/legend input type=radio name=cor id=verde label for=verdeVerde/label input type=radio name=cor id=rosa label for=rosaRosa/label input type=radio name=cor id=azul label for=azulAzul/label /fieldset input type=submit class=comprar value=Comprar /form Aproveitamos e colocamos o botão de submit para enviar a escolha da compra. Podemos ainda melhorar mais. Em vez de mostrar só o nome da cor (“Verde”) no label, podemos colocar a foto de verdade da roupa naquela cor. Uma imagem vale mais que mil palavras. Mas, claro, isso para quem Capítulo É - Progressive enhancement e mobile-rst - Formulário de compra - Página Õ¦¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript enxerga. Para leitores de tela e outros browsers não visuais, vamos usar o atributo alt= na imagem para manter sua acessibilidade. form fieldset legendEscolha a cor/legend input type=radio name=cor id=verde label for=verde img src=produto-verde.png alt=Produto na cor verde /label input type=radio name=cor id=rosa label for=rosa img src=produto-rosa.png alt=Produto na cor rosa /label input type=radio name=cor id=azul label for=azul img src=produto-azul.png alt=Produto na cor azul /label /fieldset input type=submit class=comprar value=Comprar /form Se implementarmos esse código, sem visual nenhum, e testarmos no browser, teremos uma funcionalidade completa, funcional e acessível. Isso é fantástico. Resolvemos o visual depois. É.¦ P§™§u««†êu u•„Z•hu“u•± No exercício vamos ver como usar CSS para estilizar aquele formulário anterior em algo parecido com o de-sign desejado. Mas o importante é perceber como temosuma página funcional e acessível antes de pensarmos em visual. O papel do HTML é esse. Estruturar o conteúdo da página de maneira semântica e acessível, provendo uma base de funcionalidades para a página sem relação imediata com visual. O CSS e o visual dele são uma segunda camada, que vem em cima do HTML semântico e bem construído. Depois, vamos ver até que um pouco de JavaScript é necessário para implementar outro recurso da página. Mas ele é opcional. Só o HTML, sozinho, seria suciente para uma experiência completa e funcional da página. Capítulo É - Progressive enhancement e mobile-rst - Progressive enhancement - Página Õ¦ä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Esse tipo de pensamento é o progressive enhancement novamente. Construir uma base sólida, simples, portável e acessível e, depois, progressivamente, incrementar a página com recursos mais avançados tanto de estilo com CSS quanto de comportamento com JavaScript. Hoje no mercado há muita falta de prossionais com experiência e completo entendimento das implicações de progressive enhancement. Amadores focamem olhar o design do Photoshop e copiar na página. Prossi-onais focamem experiênciasWeb acessíveis, semânticas e portáveis, onde o design tem um papel decorativo. É.¢ B™ì “™ou u f™ì-«†ñ†• O B™ìM™ou £Zo§a™ o™ WìC Quando alteramos as propriedades de elementos dentro de uma página, precisamos estar cientes de como essas alterações se comportarão na presença de outros elementos. Uma forma de entender o impacto causado pela mudança é pensar no box model ou modelo em caixa em português. Oboxmodel é constituído de quatro áreas retangulares: conteúdo (content), espaçamento (padding), bordas (borders) e margens (margin) conforme a gura abaixo: Essas áreas se desenvolvem de dentro para fora, na ordem listada abaixo: • conteúdo (content): aquilo que será exibido; • espaçamento (padding): distância entre a borda e o conteúdo; • borda (borders): quatro linhas que envolvem a caixa (box); • margem (margin): distância que separa um box de outro. Tendo em mente o box model, precisamos ter atenção na alteração de propriedades de um elemento visua-lizando o impacto em sua apresentação ao lidar com as propriedades listadas acima. B™ì-«†ñ†• Os primeiros a perceberem que o box model do CSS era esquisito foi a MicrosoŸ. Já no IEä em quirks mode eles trocaram o box model para que o width signicasse o tamanho total até a borda. A ideia era boa mas Capítulo É - Progressive enhancement e mobile-rst - Box model e box-sizing - Página Õ¦ß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript o problema foi eles atropelarem a especicação da época, o que acabou criando boa parte dos problemas de incompatibilidade entre navegadores. O IE em standards mode usa o box model ocial e esse é o padrão a partir do IE˜. Mas como a ideia, no m, era boa, isso acabou se transformando no box-sizing do CSSì, que nos permite trocar o box model que queremos usar. Por padrão, todos os elementos têm o valor box-sizing: content-box o que indica que o tamanho dele é denido pelo seu conteúdo apenas -- em outras palavras, é o tal box model padrão que vimos antes. Mas podemos 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 conteúdo com a borda e o padding. É.ä Eìu§hih†™«: £a†•Z ou £§™o¶±™ Õ) Vamos implementar nossa página de produto. O primeiro passo é a construção de um HTML semântico. Use um formulário com radios e labels para a escolha da cor. div class=produto h1Fuzzy Cardigan/h1 h2por apenas R$ 129,00/h2 form fieldset class=cores legendEscolha a cor:/legend input type=radio name=cor value=verde id=verde checked label for=verde img src=img/produtos/foto2-verde.png /label input type=radio name=cor value=rosa id=rosa label for=rosa img src=img/produtos/foto2-rosa.png /label input type=radio name=cor value=azul id=azul label for=azul img src=img/produtos/foto2-azul.png /label /fieldset input type=submit class=comprar value=Comprar /form Capítulo É - Progressive enhancement e mobile-rst - Exercícios: página de produto - Página Õ¦˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript /div Esse código deve car entre os includes do cabeçalho e do rodapé que zemos no capítulo anterior. ó) Teste oHTMLdo exercício anterior. Veja seu funcionamento seminterferência do CSS e do JS que faremos depois. Por que uma estrutura semântica e funcional do HTML é essencial como base da página? Para melhorar a acessibilidade, coloque também atributos alt nas imagens. ì) Vamos estruturar nosso CSS para implementar a funcionalidade de troca de cores. A cada passo, teste no browser para ir acompanhando o resultado. Crie um novo arquivo produto.css na pasta css/ e referencie na página de produto. Primeiro, vamos desenhar as bolinhas coloridas com pseudo-elementos do CSSì usando um truque com bordas redondas innitas: .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; } Próximo 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 boxmodel padrão. Uma solução é trocar o box model com a propriedade box-sizing: .cores label:after { -moz-box-sizing: border-box; box-sizing: border-box; } Capítulo É - Progressive enhancement e mobile-rst - Exercícios: página de produto - Página Õ¦É

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Agora que temos as bolinhas coloridas visuais conguradas, a bolinha do input radio é desnecessária. 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 não selecionados. Podemos usar um seletor avançado para isso: .cores input:not(:checked) + label img { display: none; } Režita sobre esse último seletor. O que ele faz exatamente? Esteja certo de ter entendido cada parte dele antes de prosseguir. Teste a página. Tudo deve estar funcionando, apesar das coisas não estarem ainda posicionadas correta-mente. ¦) Com a troca de imagens funcionando, vamos implementar o posicionamento correto das bolinhas lado a lado. Para isso, use position:absolute já que seus tamanhos são conhecidos. As bolinhas vão ser posicionadas com relação ao eldset cores, então ele precisa estar posicionado. O padding superior é para abrir espaço 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 caramsobrepostas na esquerda. Para corrigir, basta colocar uma coordenada left diferente para cada uma: label[for=verde]:after { left: 0; } label[for=rosa]:after { left: 60px; } label[for=azul]:after { Capítulo É - Progressive enhancement e mobile-rst - Exercícios: página de produto - Página Õ¢þ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript left: 120px; } Teste o resultado. ¢) Um ponto importante de uma solução responsiva é que as imagens se adaptem à resolução. Às vezes usamos imagens maiores e, quando a tela é pequena, a imagem ca “vazando” para fora do elemento pai. Uma forma de corrigir isso é garantir que ela nunca passe o tamanho do pai com max-width: .cores label img { display: block; max-width: 100%; } B¶ •™ F†§u€™ì Nosso max-width: ÕþþÛ não vai funcionar no Firefox. Neste navegador, o elemento fieldset não respeita o comportamento correto de largura de um elemento e, assim, a largura da imagem também ca incorreta (o bug já está registrado em https://bugzilla.mozilla.org/show_bug.cgi? id=óäÕþìß). Para contornar o bug, podemos colocar a propriedade display com o valor table-column no eldset: fieldset { display: table-column; } No entanto, ao fazer isso, quebraremos o nosso layout no Internet Explorer Õþ. Asolução é aplicar essa regra somente no Firefox. Para isso, podemos colocar essa regra dentro de umamedia query que só vai funcionar nesse navegador. Por exemplo: @media (min--moz-device-pixel-ratio:0) { fieldset { display: table-column; } } ä) Comtoda a parte funcional e de posicionamento pronta, vamos estilizar alguns detalhes visuais da página. Primeiro, detalhes de tipograa e espaçamento para toda página de produtos: .produto { Capítulo É - Progressive enhancement e mobile-rst - Exercícios: página de produto - Página Õ¢Õ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript color: #333; line-height: 1.3; margin-top: 2em; } O nome do produto e seu preço também ganham estilo: .produto h1 { font-size: 1.8em; font-weight: bold; } .produto h2 { font-size: 1.2em; font-style: italic; margin-bottom: 1em; } O legend ganha um destaque: .produto legend { display: block; font: bold 0.9em/2.5 Arial; text-transform: uppercase; } E por m, o botão de comprar deve car em evidência: .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 página. ß) (opcional) Melhore a experiência do nosso formulário com alguns pequenos ajustes. Faça o cursor mudar para mãozinha quando passar o mouse em cima das bolinhas com: Capítulo É - Progressive enhancement e mobile-rst - Exercícios: página de produto - Página Õ¢ó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript .cores label:after { cursor: pointer; } Quando selecionamos a bolinha, uma borda escura aparece. Use transition para fazer a borda aparecer suavemente, como um fadein: .cores label:after { border: 6px solid rgba(0,0,0,0); transition: 1s; } E podemos adicionar também um estilo para quando passar omouse em cima da bolinha, comomostrar uma borda mais leve: .cores label:hover:after { border: 6px solid rgba(0,0,0,0.1); } É.ß Eê™¶†•o™ ™ ou«†• £Z§Z ou«Ž±™£ Feito o design mobile-rst, é hora de expandir o site para as versões maiores. Do ponto de vista de design, signica ajustar os elementos paramelhor aproveitar o espaçomaior das telas de tablets e desktops. Do ponto de vista de código, é usar media queries para implementar essas mudanças. Um exemplo: imagine que, em telas maiores que äþþpx, queremos žutuar uma imagem a esquerda: @media (min-width: 600px) { img { float: left; } } Ao desenvolver mobile-rst, usamos muitas media queries do tipo min-width para implementar as mudan-ças para o tablet/desktop. É.˜ Muo†Z ¤¶u§†u« ou h™•±uuo™ Ao escrever medias queries, você precisa escolher algum valor para colocar lá. É o que chamamos de bre-akpoints, os pontos onde seu layout vai ser ajustado por causa de uma resolução diferente. E escrever bons breakpoints é essencial para um design responsivo de qualidade. E o quemais aparece de pergunta de quem está começando comdesign responsivo é: quais os valores padrões de se colocar nasmedia queries? E logo surge uma lista parecida de tamanhos comuns: ìóþpx, ¦˜þpx, äþþpx, Capítulo É - Progressive enhancement e mobile-rst - Evoluindo o design para desktop - Página Õ¢ì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ßä˜px, ÉÉópx, Õóþþpx. O pessoal chama essa prática de device-driven breakpoints, pois são valores gerados a partir de tamanhos de dispositivos. Mas evite esse tipo de breakpoint. Essa lista pensa em meia dúzia de tipos de dispositivos, mas obviamente não atende todos (e os ìäþpx de um Galaxy S¦?). Usar esses valores de media queries não garante que seu design funcionará em todos os dispositivos, mas apenas nos dispositivos “padrões” -- seja lá o que for isso. Prera breakpoints comvalores baseados no seu conteúdo. Ou seja, achar suasmedia queries a partir do seu conteúdo e do seu design. Fica bem mais fácil garantir que sua página funciona em todos os dispositivos. Na prática, faça seu design mobile-rst, abra no navegador pequeno, vá redimensionando a janela até achar um ponto que o design quebra ou ca feio; anote o tamanho da janela e crie um breakpoint lá. Não precisa ser um valor bonitinho como äþþpx. Às vezes sua página vai quebrar justo em ßßópx. Não tem problema. É.É Eìu§hih†™«: §u«£™•«†êu ou«†• Õ) Nosso layout anterior foi feito com mobile em mente, mobile-rst. A parte boa é que, quando abrimos no desktop, tudo funciona muito bem. Mas o espaço maior não é bem aproveitado. Se você redimensionar a janela para um tamanho grande, notará que nosso conteúdo não está centrali-zado na página como o restante. Lembre que criamos uma classe container para isso. Podemos usá-la novamente. Crie uma nova div class=container ao redor do conteúdo da página. Isto é, será uma div pai da div com class produto. ó) Vamos usar media queries para ajusta o design para um estilo ó colunas. Todo o CSS dos exercícios seguintes estará dentro de uma media query que só vai disparar em telas mai-ores. Crie essa media query agora: @media (min-width: 630px) { } ì) Na versão desktop, queremos reposicionar as coisas em ó colunas. Vamos colocar a foto do produto à esquerda posicionada com relação ao .produto. Isso vai afetar o posicionamento das bolinhas então vamos trocar para posicioná-las com float simples. O código é curto mas cheio de detalhes. Acompanhe os comentários para entender o papel de cada item. Dentro da media query anterior, acrescente: (não precisa copiar os comentários) .produto { /* a foto vai se posicionar absolutamente com relação a esse elemento, por isso preciso estar posicionado */ Capítulo É - Progressive enhancement e mobile-rst - Exercícios: responsive design - Página Õ¢¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript position: relative; /* deixo 40% de espaço em branco na esquerda para foto ocupar */ padding-left: 40%; } .cores { /* eu era relative antes; reinicio para static para evitar que a foto se posicione com relação a mim */ position: static; /* reinicio meu padding-top que tinha antes e não preciso mais */ padding: 0; } .cores label img { /* imagem se posiciona absolutamente à esquerda com relação ao .produto */ position: absolute; top: 0; left: 0; } .cores label:after { /* as bolinhas coloridas tinham posição absoluta. não precisamos mais, basta flutuar uma do lado da outra */ position: static; float: left; } Teste a página. ¦) Tudo deve estar reposicionado e funcionando corretamente,mas podemos fazer alguns ajustes adicionais de estilo. As próximas regras devem ser adicionadas dentro damedia query anterior. Você pode até escrever apenas as propriedades dentro dos seletores existentes. Primeiro, para evitar que a imagem vaze para fora do espaço que lhe foi determinado, vamos usar as propriedades max-width e max-height: .cores label img { max-width: 35%; max-height: 100%; } Podemos aumentar um pouco o tamanho das fontes usadas no produto. Como usamos em antes, basta Capítulo É - Progressive enhancement e mobile-rst - Exercícios: responsive design - Página Õ¢¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript aumentar a fonte do elemento pai, o produto e tudo escala proporcionalmente. .produto { font-size: 1.2em; } Último ajuste é uma pequena margem entre as bolinhas coloridas: .cores label:after { margin-right: 10px; } É.Õþ HTML¢ I•£¶± §Z•u No design original, havia a previsão de se criar umamaneira de selecionar também o tamanho da roupa além de sua cor. O tamanho é algo simples em nossa loja. Temos valores possíveis ìä, ì˜, ¦þ, ¦ó, ¦¦ e ¦ä. E há muitas formas corretas e semânticas de implementar isso no formulário. Pode ser um select com esses valores, radio buttons ou, como vamos ver, o novo input range do HTML¢. O input type=range é um componente novo do HTML¢ com bom suporte já nos navegadores que representa um slider numérico. Ele recebe atributos min e max com o intervalo numérico possível. Op-cionalmente, há o atributo step que indica de quanto em quanto o número deve pular (algo bem útil para tamanho de roupa, que só tem números pares). input type=range min=36 max=46 value=42 step=2 name=tamanho O legal de componentes HTML¢ é que eles são nativos dos browsers. Isso signica que não precisamos de trabalho para usá-los ou estilizá-los. Eles já vêm com estilo padrão do navegador em questão o que é bem interessante. A interface padrão é familiar para o usuário. Veja o range no Safari do iPhone: E veja o mesmo componente no IEÕþ doWindows ˜: Visuais totalmente diferentes mas totalmente adaptados à plataforma em questão. Capítulo É - Progressive enhancement e mobile-rst - HTML¢ Input range - Página Õ¢ä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript S¶£™§±u Z™ †•£¶± §Z•u Todos os browsers modernos suportam o input range. Você terá problemas porém em versões mais antigas. O IE só suporta a partir do Õþ, o Android a partir do ¦.ó, e o Firefox no óì. http://caniuse.com/input-range Lembre que aqui no curso estamos estudando novas ideias. Se você precisar suportar os na-vegadores antigos nesse exercício, sempre poderá substituir por um select simples ou um conjunto de radio buttons. Funcionalmente terão o mesmo resultado. É.ÕÕ Eìu§hih†™«: «uu±™§ ou ±Z“Z•„™ Õ) Implemente a funcionalidade de escolher o tamanho da roupa usando um input range do HTML¢, colo-cando o código a seguir logo abaixo do nosso primeiro eldset: fieldset class=tamanhos legendEscolha o tamanho:/legend input type=range min=36 max=46 value=42 step=2 name=tamanho id=tamanho /fieldset Teste seu funcionamento nos browsers modernos. ó) Temos dois eldsets, um para escolher cor e outro, tamanho. Nomobile, eles camum 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: 250px; width: 45%; } É.Õó TZfuZ« O uso de tabelas era muito comum há alguns anos para a denição de áreas. Seu uso para essa nalidade acabou se tornando prejudicial pela complexidade da marcação, o que diculta bastante a manutenção das Capítulo É - Progressive enhancement e mobile-rst - Exercícios: seletor de tamanho - Página Õ¢ß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript páginas. Além disso havia uma implicação direta na denição de relevância do conteúdo das tabelas para os indexadores de conteúdo por mecanismos de busca. Ainda assim, hoje, quando queremos exibir uma série de dados tabulares, é indicado o uso da tag de tabela table. table tr thTítulo da primeira coluna/th thTítulo da segunda coluna/th /tr tr tdLinha 1, coluna 1./td tdLinha 1, coluna 2./td /tr tr tdLinha 2, coluna 1./td tdLinha 2, coluna 2./td /tr /table Note que na primeira linha tr da tabela, as células são indicadas coma tag th, o que é útil para diferenciar seu conteúdo das células de dados. Existem diversasmaneiras de se alterar uma estrutura de uma tabela, como por exemplo indicamos que uma célula td ou th ocupamais de uma linha de altura pormeio do atributo rowspan, ou então que ela ocupa mais de uma coluna de largura com o uso do atributo colspan. Podemos adicionar um título à nossa tabela com a tag caption. Ainda existem as tags thead, tfoot e tbody, que servem para agrupar linhas de nossa tabela. Vale ressaltar que dentro do grupo thead devemos ter apenas linhas contendo a tag th como célula. Outra tag de agrupamento que temos na tabela é a que permite que sejam denidas as colunas, é a tag colgroup. Dentro dessa tag denimos uma tag col para cada coluna, e dessa maneira podemos adi-cionar alguns atributos que inžuenciarão todas as células daquela coluna. A seguir um exemplo completo de como utilizar essas tags dentro de uma tabela. table captionQuantidade e preço de camisetas./caption colgroup col width=10% col width=40% col width=30% col width=20% Capítulo É - Progressive enhancement e mobile-rst - Tabelas - Página Õ¢˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript /colgroup thead tr th rowspan=2 th colspan=2Quantidade de Camisetas/th th rowspan=2Preço/th /tr tr thAmarela/th thVermelha/th /tr /thead tfoot tr td tdTotal de camisetas amarelas: 35/td tdTotal de camisetas vermelhas: 34/td tdValor total: $45.00/td /tr /tfoot tbody tr tdPolo/td td12/td td5/td td$30.00/td /tr tr tdRegata/td td23/td td29/td td$15.00/td /tr /tbody /table É.Õì Eìu§hih†™«: ou±Z„u« Õ) Crie a seção de detalhes logo abaixo da div.produto, mas ainda dentro do container: div class=detalhes h2Detalhes do produto/h2 Capítulo É - Progressive enhancement e mobile-rst - Exercícios: detalhes - Página Õ¢É

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript pEsse é o melhor casaco de Cardigã que você já viu. Excelente material italiano com estampa desenhada pelos artesãos da comunidade de Krotor nas ilhas gregas. Compre já e receba hoje mesmo pela nossa entrega a jato./p /div ó) O estilo é bastante simples, apenas para deixar o texto mais bonito: .detalhes { margin: 2em 0; } .detalhes h2 { font-size: 1.5em; line-height: 2; } .detalhes p { margin: 1em 0; font-size: 1em; line-height: 1.5; max-width: 36em; } @media (min-width: 500px) { .detalhes { font-size: 1.2em; } } ì) Crie uma tabela com características do produto contendo informações técnicas. Adicione dentro da div detalhes: table thead tr thCaracterística/th thDetalhe/th /tr /thead tbody tr tdModelo/td tdCardigã 7845/td /tr tr tdMaterial/td tdAlgodão e poliester/td /tr Capítulo É - Progressive enhancement e mobile-rst - Exercícios: detalhes - Página Õäþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript tr tdCores/td tdAzul, Rosa e Verde/td /tr tr tdLavagem/td tdLavar a mão/td /tr /tbody /table ¦) Estilize a tabela para deixá-la mais agradável. Use o seletor de lhos múltiplos para um estilo zebrado. 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; } É.Õ¦ Eìu§hih†™« ™£h†™•Z†«: €¶•o™ Õ) Para implementarmos o fundo cinza em tela cheia, vamos precisar de um novo elemento pai para conter todos os elementos da página. Crie um div class=produto-back ao redor do div container que tínhamos antes. Apenas para referência, nesse momento, seu HTML deve estar mais ou menos assim: div class=produto-back div class=container Capítulo É - Progressive enhancement e mobile-rst - Exercícios opcionais: fundo - Página ÕäÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript div class=produto ... /div div class=detalhes ... /div /div /div ó) O estilo é bastante simples, apenas usando uma cor e bordas sutis para criar um efeito mais elegante: .produto-back { background-color: #F2F2F2; margin-top: 1em; border-top: 2px solid #ccc; } .cores label img { border: 2px solid #ccc; } Capítulo É - Progressive enhancement e mobile-rst - Exercícios opcionais: fundo - Página Õäó

CZ£i±¶™ Õþ PHP: parâmetros e bancos de dados “Antes do soŸware ser reusável, ele precisa ser usável.” – Ralph Johnson Õþ.Õ S¶f“†««a™ o™ €™§“¶a§†™ Todo formulário criado no HTML tem seus dados enviados para o servidor quando submetido. Cada campo do formulário é enviado como parâmetro na requisição feita ao servidor. No formulário, podemos indicar que página (URL) vai receber os dados preenchidos. É só especicar o atri-buto action. No nosso exemplo, temos um formulário na página produto.php e vamos criar uma próxima página, checkout.php, que vai receber o produto escolhido e deixar o usuário proceder com a compra. No formulário de produto então fazemos: form action=checkout.php Há ainda um outro atributo do formque indica amaneira como os dados são enviado. É o atributo method que pode receber dois valores: GET ou POST. Ambos os métodos enviam os dados do formulário ao servidor, mas o GET faz isso via parâmetros na URL enquanto o POST envia os dados no corpo da requisição (e, portanto, não é visível na barra de endereços). form action=checkout.php method=POST

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Õþ.ó PZ§a“u±§™« h™“ PHP Os dados enviados no formulário são recebidos no PHP e podemos acessá-los através de variáveis do próprio PHP: $_GET e _POST, dependendo de qual foi o método do formulário. Para acessar o valor deumcerto campo preenchido, precisamos saber o nome dele. NoHTMLdo formulário, sempre que criamos um componente, damos um name a ele: input type=text name=mensagem No PHP, podemos acessar cada parâmetro individualmente usando uma sintaxe de arrays: ? = $_GET[mensagem] ? ou ? = $_POST[mensagem] ? P§†•±Z•o™ êZ§†aêu h™“ PHP Até o capítulo anterior, quando queríamos imprimir algo na tela usamos a construção: ?php print $dado; ? Mas o PHP permite uma sintaxe mais curta para declarar um bloco de código quando a única ação é imprimir algo e não há várias linhas de código. ?= $dado ? É uma sintaxe mais curta que a primeira e tem exatamente o mesmo efeito. No próximo exercício, vamos criar uma página simples de checkout que, por enquanto, apenas mostra uma mensagem de conrmação para o usuário seguida dos parâmetros que foram submetidos no formulário. Õþ.ì L†«±Z« ou ou€†•†ca™ •™ HTML Quando falamos de listas em HTML, sempre lembramos da ul e da ol. Essas são listas mais clássicas, mudando apenas que uma não tem ordem e a outra tem. Mas existe uma terceira lista, que semanticamente serve para denir itens. É uma lista de termos e suas respectivas denições. Se quiséssemos criar uma lista das siglas de cursos da Caelum e seu respectivo nome, podemos fazer assim: Capítulo Õþ - PHP: parâmetros e bancos de dados - Parâmetros com PHP - Página Õä¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript dl dtWD-43/dt ddDesenvolvimento Web com HTML, CSS e JavaScript/dd dtWD-47/dt ddProgramação front end avançada com JavaScript e jQuery/dd /dl A lista é a DL e cada termos é representado por um DT seguindo por sua denição em um DD. Õþ.¦ Eìu§hih†™«: h„uhŽ™¶± oZ h™“£§Z Õ) Crie o arquivo checkout.php com uma estrutura básica. !doctype html html head meta charset=UTF-8 titleCheckout Mirror Fashion/title meta name=viewport content=width=device-width /head body h1Ótima escolha!/h1 pObrigado por comprar na Mirror Fashion! Preencha seus dados para efetivar a compra./p /body /html Não vamos usar o menu da Mirror Fashion nessa página, para criar uma experiência de checkout mais imersiva. ó) O formulário na página de produto precisa enviar os dados escolhidos para a página de checkout. Para isso, nosso formulário deve indicar para onde ser submetido. Altere a tag form no arquivo produto.php para apontar para nossa nova página adicionando o atributo action: form action=checkout.php Abra a página de produto no navegador e teste o submit. Repare como a página de checkout é chamada e os parâmetros escolhidos na página anterior vão junto na URL. ì) Os parâmetros enviados no capítulo anterior aparecem na URL. Isso porque nosso formulário, por padrão, é do tipo GET. Podemos trocar para o tipo POST e, assim, os parâmetros serão enviados mas não estarão Capítulo Õþ - PHP: parâmetros e bancos de dados - Exercícios: checkout da compra - Página Õä¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript visíveis na URL. Altere a tag form no arquivo produto.php para enviar via POST adicionando o atributo method: form action=checkout.php method=POST Na página checkout.php podemos pegar os valores submetidos através de variáveis do PHP e exibir esses valores na tela. Adicione na página de checkout as informações de cor e tamanho escolhidos. Use uma lista de denições DL com DT/DD pra isso: h2Sua compra/h2 dl dtCor/dt dd?= $_POST[cor] ? /dd dtTamanho/dt dd?= $_POST[tamanho] ? /dd /dl Teste acessando um produto e clicando em comprar. Os valores escolhidos devem aparecer na página de checkout, através dos parâmetros escolhidos. Teste várias vezes, com escolhas diferentes, pra ver como nossa página de checkout é dinamicamente construída com os parâmetros enviados. ¦) Imagine que vamos ter vários produtos diferentes na loja, todas enviando as compras pra nossa página de checkout. E lá queremos saber qual o nome do produto está sendo comprado (além da cor e do tamanho). Podemos passar mais um parâmetro para a página de checkout com o nome do produto. Use um input hidden pra passar essa informação. Na página produto.php, adicione dentro do form um input hidden: input type=hidden name=nome value=Fuzzy Cardigan Por m, na página checkout.php, adicione a impressão do parâmetro nome dentro da lista de denições que zemos antes: dtProduto/dt dd?= $_POST[nome] ? /dd Teste o funcionamento do hidden fazendo uma nova compra de produto. Õþ.¢ Eìu§hih†™« ™£h†™•Z†« Õ) Na página produto.php,mude o action do formulário para GET ao invés do POST que temos hoje. Teste tudo de novo. O que muda? Qual a diferença? O que precisa ser alterado no checkout? ó) Além do nome do produto, passe também o preço do produto escolhido através de um input hidden. Imprima essa informação na DL da página de checkout. Capítulo Õþ - PHP: parâmetros e bancos de dados - Exercícios opcionais - Página Õää

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Crie ainda um outro input hidden pra passar o ID. Õþ.ä BZ•h™ ou oZo™« u SQL Na maioria dos sistemasWeb, os dados do negócio cam separados em um banco de dados ao invés de car escritos diretamente no HTML. Em uma loja virtual como a nossa, os produtos seriam cadastrados nesse banco de dados externo e depois seus dados são exibidos na página produto.php. Um banco de dados é como uma grande planilha do Excel que possui várias tabelas dentro. Cada tabela tem colunas com campos especícos e muitas linhas com os dados cadastrados. Podem existir relações entre as tabelas. Figura Õþ.Õ: Exemplo de uma tabela com produtos da loja virtual Para manipular os dados dessa tabela, usamos uma linguagem separada conhecida como SQL. Seu papel é permitir que façamos buscas nas tabelas por certos tipos de dados e que possamos inserir, remover e atualizar dados. É uma linguagem a mais pra aprender, mas bem diferente das que vimos até agora como PHP ou JavaScript. O SQL serve apenas para acessar bancos de dados e é bem mais simples. Por exemplo, se queremos acessar todas as informações da tabela com nome produtos, fazemos: SELECT * FROM produtos O comando SELECT indica que estamos selecionamos dados. O asterisco indica que queremos todos os dados. E o FROMprodutos aponta o nome da tabela. Podemos selecionar apenas um dado especíco. Por exemplo, apenas os nomes dos produtos: SELECT nome FROM produtos Capítulo Õþ - PHP: parâmetros e bancos de dados - Banco de dados e SQL - Página Õäß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Vamos ver outros recursos do SQL mais pra frente. Mas não é foco do curso. Para se aprofundar no tema, recomendamos esse curso online do Alura: http://www.alura.com.br/cursos-online-introducao/banco-de-dados-sql Õþ.ß MíSQL u £„£MíAo“†• Existem muitos bancos de dados no mercado, como MySQL, Oracle, SQL Server, DBó, Postgre, SQLite. Todos eles aceitam comandos SQL que vimos antes, com pequenas variações 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.com Para ajudar a visualizar e administrar o MySQL podemos instalar alguma interface gráca compatível. O próprio MySQL tem um produto chamado Workbench que é um programa Desktop pra isso. Mas uma opção muito comum de encontrar no mercado e em empresas de hosting é o phpMyAdmin. Ele é um administrador de MySQL escrito em PHP para Web e que roda num servidor normal e pode ser acessado direto no navegador. Isso faz dele uma ferramenta versátil e útil para acessar bancos de dados remotos. Vamos usar o phpMyAdmin no curso. Basta baixar o zip no site deles e subir um servidor php na pasta dele, como zemos na pasta do nosso próprio projeto. http://www.phpmyadmin.net/ Õþ.˜ PZ§Z «Zfu§ “Z†«: †•«±ZZca™ o™MíSQL u“ hZ«Z O MySQL pode ser baixado em https://dev.mysql.com/downloads/mysql/ Lá, escolha seu sistema operacional (Windows,Mac, Linux) e baixe o pacote correto. Basta executá-lo que a instalação acontecerá. Importante: Se você instalou o WAMP no primeiro capítulo de PHP da apostila, não precisa instalar o MySQL agora. Õþ.É B¶«hZ« •™MíSQL h™“ PHP Sabendo usar um banco de dados e a escrever SELECTs para extrair dados dele, o próximo passo é aprender a fazer isso de dentro da nossa página PHP. Isto é, queremos pegar dados no banco de dados e imprimir na tela usando PHP. Capítulo Õþ - PHP: parâmetros e bancos de dados - MySQL e phpMyAdmin - Página Õä˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Precisamos ver como conectar no MySQL e disparar comando SQL usando PHP. C™•uìa™ A conexão com o banco de dados pode ser feita com a função mysqli_connect: $conexao = mysqli_connect(localhost, root, , wd43); Essa função recebe onde de conectar (localhost), o usuário (root), a senha (em branco) e o nome do banco de dados disponível (wd¦ì). Ela abre a conexão se tudo der certo e devolve uma variável $conexao que representa a conexão aberta. A f¶«hZ Próximo passo é mandar o MySQL processar um certo comando SQL, como nossa busca SELECT de antes. Pra isso, usamos a função mysqli_query que recebe a conexão (que abrimos antes) e o SQL da busca: $dados = mysqli_query($conexao, SELECT * FROM produtos); Essa função devolve uma variável $dados com o retorno que a busca der. DZo™« •™ PHP Último passo é transformar os dados da tabela em algo usável no PHP. Uma maneira comum é transformar os dados num array com mysqli_fetch_array: $produto = mysqli_fetch_array($dados); A variável $produto é um array PHP com os dados do primeiro produto da busca indexados pelo nome da coluna no banco de dados. Isso quer dizer que podemos acessar, por exemplo, o preço do produto fazendo $produto[preco] e assim por diante para cada coluna. Õþ.Õþ Ru€†•Z•o™ Z« f¶«hZ« h™“ WHERE Hámuitas opções possíveis no SQL para renarmos a busca. O SELECT * que zemos antes retorna todos os dados da tabela inteira, o que pode ser muita coisa. Imagine que estamos interessados nos dados apenas de um produto especíco, de uma certa linha. Podemos indicar ao SELECT que queremos os dados do produto de um certo ID, que é uma coluna numérica que temos no banco de dados para identicar o código individual de cada produto. Fazemos isso no SQL com a cláusula WHERE. Capítulo Õþ - PHP: parâmetros e bancos de dados - Renando as buscas com WHERE - Página ÕäÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript SELECT * FROM produtos WHERE id = 4 Esse código devolve todas as colunas do produto cujo id for ¦, e apenas ele. Õþ.ÕÕ Eìu§hih†™«: £„£MíAo“†• Õ) Vá no terminal e encontre a pasta do phpmyadmin: $ cd /caelum/cursos/43/phpmyadmin Dentro dela, rode um servidor PHP em uma porta diferente: $ php -S 0.0.0.0:8000 Vá no navegador e acesse: http://localhost:˜þþþ Você deverá ver o phpMyAdmin. Coloque usuário root e deixe a senha em branco para entrar. ó) A primeira tela do phpMyAdmin pode ser assustadora de tantas opções. Ele tem muitos recursos. Na parte esquerda cam os bancos de dados disponíveis na máquina. Localize e clique no banco WD¦ì que corresponde aos dados do nosso curso. Capítulo Õþ - PHP: parâmetros e bancos de dados - Exercícios: phpMyAdmin - Página Õßþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Podemos importar os dados do curso pra esse banco. Eles estão no arquivo dados.sql na pasta do curso. Para importar, vá nomenu Import no topo do phpMyAdmin. Clique em Browse para selecionar o arquivo no seu computador e depois clique em Go. Após a importação, selecione a tabela produtos dentro de WD¦ì nomenu da esquerda. Ele devemostrar os dados que estão dentro da tabela, suas colunas e linhas. Observe o comando SELECT que o phpMyAdmin gerou para obter os dados: SELECT * FROM `produtos` LIMIT 0 , 30 Õþ.Õó Eìu§hih†™«: PHP h™“MíSQL Õ) No topo do arquivo produto.php abra a conexão como banco de dados e selecione os dados do produto: ?php $conexao = mysqli_connect(127.0.0.1, root, , WD43); $dados = mysqli_query($conexao, SELECT * FROM produtos); Capítulo Õþ - PHP: parâmetros e bancos de dados - Exercícios: PHP com MySQL - Página ÕßÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript $produto = mysqli_fetch_array($dados); ? Repare que criamos uma variável $produto no PHP que contém os dados do produto. Ela é um array e podemos acessar as diferentes colunas através do nome. Altere os títulos na página para usar os dados dinâmicos do banco: h1?= $produto[nome] ? /h1 h2por apenas ?= $produto[preco] ? /h2 Altere também, no nal da página, o local onde mostramos a descrição do produto: p?= $produto[descricao] ? /p Teste nossa página de produto no navegador e repare que os dados vêmdinamicamente do banco. Observe o código fonte HTML nal gerado, como é idêntico ao que tínhamos antes. ó) Queremos que nossa página seja capaz de exibir os dados de qualquer produto do banco. Para escolher qual produto mostrar, vamos usar um parâmetro na URL com o código do produto, o ID. Altere o código da busca que zemos antes para incluir a cláusula WHERE no nal baseada no id do produto passado como parâmetro: SELECT * FROM produtos WHERE id = $_GET[id] Teste a página no navegador passando ids diferentes com parâmetro na URL: produto.php?id=ó. ì) A imagem do produto também é diferente para cada produto. Abra a pasta img/produtos/ e repare nas várias imagens que estão lá. Elas seguem um padrão. O nome contém o código do produto e as três variações de cor. Podemos gerar o endereço das imagens no HTML usando o ID que vem do PHP. Altere os caminhos das imagens na página de produto pra passar o ID dinamicamente no endereço da foto: img src=img/produtos/foto?= $produto[id] ?-verde.png Teste a página no navegador passando ids diferentes com parâmetro na URL: produto.php?id=¦. ¦) (opcional) O title da página é um fator muito importante para motores de busca (SEO). O ideal é ter títulos descritivos e únicos em cada página. Numa loja virtual como a nossa, o nome do produto deve fazer parte do título da página. Altere o título da página pra puxar o nome do produto do banco de dados dinamicamente. ¢) (opcional) Mude os input hidden que zemos no capítulo anterior com nome/preço pra pegar valores dinâmicos do banco de dados usando PHP. Capítulo Õþ - PHP: parâmetros e bancos de dados - Exercícios: PHP com MySQL - Página Õßó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Õþ.Õì B¶«hZ ou “¶†±™« §u«¶±Zo™« Podemos fazer uma busca demuitos resultados removendo o WHERE e fazendo o SELECT simples de antes: SELECT * FROM produtos Mas também podemos restringir o número de resultados. Imagine que a tabela é imensa, de milhares de registros, mas queremos apenas os primeiros Õþ agora. No MySQL, isso pode ser feito com o comando LIMIT na busca: SELECT * FROM produtos LIMIT 0, 10 Isso signica que queremos Õþ resultados contando a partir do primeiro (þ). Podemos trocar o primeiro número pra acessar informações em outras partes do banco. Õþ.Õ¦ O§ou•Zca™ o™« §u«¶±Zo™« Outro recurso interessante do banco de dados é devolver as informações ordenadas de acordo com certo critério. Se quisermos os produtos em ordem alfabética pelo nome dele: SELECT * FROM produtos ORDER BY nome Podemos ainda escolher o sentido da ordenação 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 DESC E, por m, misturar tudo isso num SQL complexo: SELECT * FROM produtos ORDER BY data DESC LIMIT 0, 10 Õþ.Õ¢ Eìu§hih†™«: “Z†« f¶«hZ« h™“ PHP Õ) A nossa home page lista os produtos mas, do jeito que zemos, está tudo estático com dados de mentira. Vamos alterar para fazer uma busca no banco de dados e retornar os produtos a serem exibidos. É muito parecido com o que zemos na página de produto; a diferença é que vamos listar vários produtos de uma vez ao invés de um só. Em primeiro lugar, precisamos transformar nossa página num arquivo PHP, para poder usar o banco de dados nela. Renomeie o arquivo index.html para index.php. Capítulo Õþ - PHP: parâmetros e bancos de dados - Busca de muitos resultados - Página Õßì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript No index.php, localize o painel novidades e apague todos os li que listam produtos com dados está-ticos. No lugar, escreva um código PHP que faz a busca dos produtos no banco de dados e percorre essa lista com um laço while: ol ?php $conexao = mysqli_connect(127.0.0.1, root, , WD43); $dados = mysqli_query($conexao, SELECT * FROM produtos); while($produto = mysqli_fetch_array($dados)): ? li a href=produto.php?id=? = $produto[id] ? figure img src=img/produtos/miniatura? = $produto[id] ? .png alt=? = $produto[nome] ? figcaption? = $produto[nome] ? por ? = $produto[preco] ? /figcaption /figure /a /li ?php endwhile; ? /ol Repare como rezemos o li de antes mas usando todos os dados dinâmicos do banco de dados. Teste a home no navegador e veja a busca dinâmica acontecendo. Conra o código fonte HTML gerado, igual ao que tínhamos antes. ó) A busca que zemos antes como SELECT traz todos os dados da tabela. Isso é potencialmente bem grande numa loja de verdade. O ideal é restringir a busca apenas pelos dados necessários. Pra isso, no MySQL, podemos usar o comando LIMIT passando o máximo de resultados que estamos interessados. Altere o código anterior para incluir o LIMIT no SQL da busca: SELECT * FROM produtos LIMIT 0, 6 Teste novamente a home. ì) Repare que a ordem que os produtos vêm não é a ordem que gostaríamos. No painel novidades, queríamos que viessem ordenados pelo produto mais recente ao mais antigo. Podemos fazer isso adicionando uma cláusula de ordem no SQL com ORDER BY. Altere a busca anterior para incluir uma ordenação com base no campo data de maneira decrescente: SELECT * FROM produtos ORDER BY data DESC LIMIT 0, 6 Capítulo Õþ - PHP: parâmetros e bancos de dados - Exercícios: mais buscas com PHP - Página Õß¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Teste novamente a home e veja o resultado. ¦) (opcional) Implemente omesmo recurso de busca dinâmica no outro painel, o de produtosmais vendidos. A única diferença é que queremos ordenar os elementos a partir da quantidade de vendas. Use o campo vendas no ORDER BY pra isso. ¢) (opcional) Teste outros valores para o LIMIT nas buscas. Oprimeiro número indica ošset, ou seja a partir de qual item estamos interessados. Usar ì,ä indica que queremos os itens do terceiro ao nono. Teste também outras ordenações. Além do DESC, temos o ASC. Õþ.Õä Eìu§hih†™« ™£h†™•Z†« Õ) Em vez de passar os dados do produto para o checkout via input hidden, a soluçãomais comum na prática é só passar o ID do produto sendo comprado. E a página de checkout, para obter os dados (nome, preço, etc), faz novamente uma busca no banco de dados. Essa solução é mais segura pois impede que o usuário altere os dados no HTML (como o preço). Só o ID é passado como parâmetro e os dados sempre vêm do banco de dados. Implemente essa solução no seu projeto. Capítulo Õþ - PHP: parâmetros e bancos de dados - Exercícios opcionais - Página Õß¢

CZ£i±¶™ ÕÕ Bootstrap e formulários HTML¢ “O trabalho é a melhor das regularidades e a pior das intermitências” – Victor Marie Hugo ÕÕ.Õ B™™±«±§Z£ u €§Z“uë™§Ž« ou CSS Uma tendência em alta no mundo front-end é o uso de frameworks CSS com estilos base para nossa página. Ao invés de começar todo projeto do zero, criando todo estilo na mão, existem frameworks que já trazem toda uma base construída de onde partiremos nossa aplicação. Existem muitas opções mas o Twitter Bootstrap talvez seja o de maior notoriedade. Ele foi criado pelo pessoal do Twitter a partir de código que eles já usavam internamente. Foi liberado como opensource e ganhou muitos adeptos. O projeto cresceu bastante em maturidade e importância no mercado a ponto de se desvincular do Twitter e ser apenas o Bootstrap. http://getbootstrap.com O Bootstrap traz uma série de recursos pra gente: • Reset CSS • Estilo visual base pra maioria das tags • Ícones • Grids prontos pra uso • Componentes CSS • Plugins JavaScript

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript • Tudo responsivo e mobile-rst Como o próprio nome diz, é uma forma de começar o projeto logo com um design e recursos base sem perder tempo com design no início. ÕÕ.ó E«±†™ u h™“£™•u•±u« fZ«u Para usar o Bootstrap, apenas incluímos seu CSS na página: link rel=stylesheet href=css/bootstrap.css Só isso já nos traz uma série de benefícios. Umreset é aplicado, e nossas tags ganhamestilo e tipograa base. Isso quer dizer que podemos usar tags como um HÕ ou um P agora e elas terão um estilo característico do Bootstrap. Além disso, ganhamos muitas classes com componentes adicionais que podemos aplicar na página. São várias opções. Por exemplo, pra criarumtítulo comuma frase de abertura em destaque, usamos o jumbotron: div class=jumbotron div class=container h1Ótima escolha!/h1 pObrigado por comprar na Mirror Fashion./p /div /div No exercício a seguir vamos usar vários outros componentes. ÕÕ.ì A £a†•Z ou h„uhŽ™¶± oZM†§§™§ FZ«„†™• Neste capítulo, vamos desenvolver a página de checkout da Mirror Fashion. Após escolher o produto dese-jado, o usuário cai nessa página para efetivar a compra. Nossa loja foi otimizada pra compra direta, sem carrinho de compras. O cliente escolhe o produto e compra direto, com um clique. Só precisamos coletar os dados de dele, do pagamento e da entrega. O foco dessa nova página então é a coleta de informações para efetivação da compra. Um grande formulá-rio complexo com os campos necessários. Vamos usar o Bootstrap para desenvolver essa página com mais facilidade e rapidez. Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Estilo e componentes base - Página Õßß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Figura ÕÕ.Õ: Site visto no Desktop E, como aprendemos antes, vamos desenvolver tudo mobile-rst. Nesse momento, portanto, ainda não teremos o design Desktopmostrado acima, mas uma versãomobile em uma coluna. Veremos como adaptar a versão Desktop com Bootstrap depois. Capítulo ÕÕ - Bootstrap e formulários HTML¢ - A página de checkout da Mirror Fashion - Página Õß˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Figura ÕÕ.ó: Site visto no Mobile ÕÕ.¦ Eìu§hih†™ ™£h†™•Z: †•ih†™ o™ h„uhŽ™¶± «u“ PHP Õ) Se você não fez os capítulos comPHP, crie agora sua página checkout.html comHTMLsimples pra poder seguir esse capítulo. Não há dependência obrigatória de PHP no curso. !doctype html html head meta charset=UTF-8 titleCheckout Mirror Fashion/title meta name=viewport content=width=device-width /head body h1Ótima escolha!/h1 pObrigado por comprar na Mirror Fashion! Preencha seus dados para efetivar a compra./p h2Sua compra/h2 dl dtProduto/dt ddFuzzy Cardigan/dd dtCor/dt Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Exercício opcional: início do checkout sem PHP - Página ÕßÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ddverde/dd dtTamanho/dt dd40/dd dtPreço/dt ddR$ 129,00/dd /dl /body /html Teste a página simples no navegador. ÕÕ.¢ Eìu§hih†™«: £a†•Z ou h„uhŽ™¶± Õ) Abra a página de checkout no navegador e veja que está com o estilo padrão do navegador. O primeiro passo é incluirmos o arquivo CSS do bootstrap na nossa página. Você vai ver uma mudança sutil no estilo da página, principalmente nos aspectos tipográcos. Coloque no head da página de checkout o CSS do bootstrap: link rel=stylesheet href=css/bootstrap.css Teste novamente a página. ó) O primeiro componente pronto do bootstrap que vamos usar é o jumbotron. É basicamente a abertura do site, contendo sua chamada principal. Para usá-lo basta criar um div com a classe jumbotron. Envolva as chamadas de abertura que já tínhamos com HÕ e P em dois DIV. O primeiro div contém class=jumbotron e o segundo, class=container. div class=jumbotron div class=container !-- h1 e p que já tínhamos -- h1Ótima escolha!/h1 pObrigado..../p /div /div Abra a página e note que um estilo diferente aparece. Teste redimensionar o navegador e veja que o ta-manho da fonte e espaçamento do componente se ajustamautomaticamente. O Bootstrap usa responsive design automaticamente em seus componentes. Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Exercícios: página de checkout - Página Õ˜þ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Para saber mais do jumbotron: http://getbootstrap.com/components/kjumbotron ì) Use um outro componente do Bootstrap, o panel para organizar a seção que mostramos as informações da compra do cliente. Cuidado com o exercício, com os nomes das classes, que confundem bastante. Adapte o HTML do Hó “Sua compra” e do DL que temos para se adequar ao componente de panel: div class=panel panel-default div class=panel-heading h2 class=panel-titleSua compra/h2 /div div class=panel-body !-- ... o dl que já temos hoje aqui ... -- /div /div Repare como os nomes das classes, apesar de seremmuitos, fazem sentido para isolar cada parte do painel. Teste novamente a página no navegador e veja o resultado. Temos um painel arredondado com título em destaque no topo. Para saber mais sobre painéis do Bootstrap: http://getbootstrap.com/components/kpanels ¦) Repare no exercício anterior do jumbotron que o div container é responsável por centralizar e dar espa-çamento na tela. Muito parecido aliás com o container que havíamos criado antes em nosso projeto, mas agora é uma classe do Bootstrap. Crie um outro div container pra conter o panel que acabamos de criar e veja como ele ca melhor posi-cionado no centro da tela. div class=container !-- ... panel aqui ... -- /div Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Exercícios: página de checkout - Página Õ˜Õ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¢) Dentro do panel-body, logo no topo, acima da lista de deniçõesDL, vamos colocar uma foto do produto escolhido e na cor escolhida. O segredo é gerar o endereço da imagem levando em conta os parâmetros do ID e da cor: img/produtos/foto?= $_POST[id] ?-?= $_POST[cor] ?.png Com Bootstrap, podemos ainda acrescentar algumas classes nessa imagem para obter resultados interes-santes. A classe img-responsive faz a imagem car žexível e nunca estourar o tamanho do pai. E a classe img-thumbnail faz a imagem car centralizada com uma borda de destaque. Adicione a imagem do produto logo acima da lista dl dentro do div panel-body: img src=img/produtos/foto?= $_POST[id] ?-?= $_POST[cor] ? .png alt=?= $produto[nome] ? class=img-thumbnail img-responsive Teste novamente a página. Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Exercícios: página de checkout - Página Õ˜ó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript I“Zu“ «u“ PHP Para o exercício de Bootstrap em si, você pode usar uma imagem estática sem envolver o PHP para gerar o endereço: img src=img/produtos/foto1-verde.png alt=Fuzzy Cardigan class=img-thumbnail img-responsive ä) (opcional) No painel, troque a classe ÕÕ.ä F™§“¶a§†™« Z €¶•o™ Quando solicitamos que o usuário informe seu nome, seu endereço de email, se ele quer receber uma news-letter, qualquer informação, precisamos utilizar os elementos corretos. Para isso, vamos conhecer os formu-lários HTML: a tag form. Já usamos alguns antes. Agora vamos ver a fundo seus desdobramentos. A±§†f¶±™« o™ F™§“ form action=/efetivar.php method=POST /form O formulário exemplicado anteriormente apresenta o atributo obrigatório action. O valor desse atributo é o endereço para onde as informações do formulário serão enviadas, e esse valor depende inteiramente de como é feita a aplicação que receberá essas informações no lado do servidor. O segundo atributo, method, especica o método do HTTP pelo qual essa informação será transmitida. O valor post, demaneira simplista, signica que queremos inserir as informações desse formulário, salvá-la de alguma maneira. Outro valor possível para esse atributo, o get, é utilizado quando queremos obter alguma coisa a partir das informações que estamos transmitindo, por exemplo, um formulário de busca. C™“£™•u•±u« Porém, neste exemplo, não temos nenhum elemento para capturar as informações. Na verdade, somente a marcação da tag form não mostra nenhum elemento visível no navegador. Vamos supor que precisemos de uma informação como o nome do visitante do nosso site para guardar em um banco de dados. Vamos adicionar alguns elementos ao nosso formulário anterior: Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Formulários a fundo - Página Õ˜ì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript form action=/efetivar.php method=POST label for=nomeNome:/label input type=text name=nome id=nome input type=submit /form LZfu Adicionamos a marcação do elemento label. Esse elemento é uma tag de conteúdo, e seu texto é exibido de maneira comum dentro do nosso formulário, a única diferença é que essa marcação faz uma ligação com outro elemento qualquer em nosso formulário. Note que nosso label tem o atributo for, que recebe o valor nome. Quando clicamos com o mouse sobre o texto marcado com a tag label, o elemento que tem o atributo id com o mesmo valor que o atributo for do label é selecionado para que possamos interagir com ele. No exemplo, esse elemento vinculado ao label é um campo de texto que declaramos com a tag input. Essamarcação label é de extrema importância para a usabilidade e acessibilidade dos nossos formulários. I•£¶± A maioria dos elementos que utilizamos nos formulários para capturar informações dos usuários são da tag input. No exemplo anterior, utilizamos duas variações dessa tag. Os tipos diferentes de inputs são determinados pelo valor do seu atributo type, e no exemplo nós utilizamos dois muito comuns. A seguir, vamos detalhar os tipos aceitos para essa tag. text input type=text name=nome_usuario Provavelmente o tipomais comum de input, o que tem o atributo type=text”, é utilizado quando queremos que o usuário envie uma informação textual simples, pois esse elemento não permite a entrada de quebras de linha. Ao enviarmos o formulário, a informação digitada pelo usuário é acessível no lado do servidor por meio do atributo name, utilizado para identicar cada informação contida nos parâmetros da requisição. Para ter acesso à informação digitada quando tratamos o formulário com algum tipo de script, para validar o conteúdo por exemplo, é necessário obter o conteúdo da propriedade value do objeto no DOM. password O input que recebe o atributo type=password” é similar ao anterior, do tipo text, com a diferença de que ele não exibe exatamente o texto digitado pelo usuário, e sim uma série de símbolos * ou outro, dependendo do navegador e sistema operacional. Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Formulários a fundo - Página Õ˜¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript input type=password name=senha checkbox O elemento input do tipo checkbox exibe uma caixa para marcação, é muito utilizado quando temos uma opção que pode ser marcada como sim ou não, por exemplo “Aceito os termos de contrato do usuário”, ou “Manter a sessão ativa” em formulários de login. Apesar de muito utilizado com o valor true, é possível determinar qualquer valor para o checkbox. input id=contrato name=contrato type=checkbox value=sim label for=contratoAceito os termos do contrato./label radio p input type=radio name=idade id=idade5 value=5 label for=idade5Menos de 5 anos/label /p p input type=radio name=idade id=idade10 value=10 label for=idade10Menos de 10 anos/label /p p input type=radio name=idade id=idade15 value=15 label for=idade15Menos de 15 anos/label /p p input type=radio name=idade id=idade20 value=20 label for=idade20Menos de 20 anos/label /p Quando desejamos que o usuário escolha somente uma entre uma série de opções, podemos utilizar elemen-tos input do tipo radio. Quando há mais de um elemento desse tipo com o mesmo valor no atributo name, somente um pode ser selecionado. button input type=button name=mostra_dialogo value=Clique aqui! O elemento input com o atributo type=button” renderiza um botão dentro do formulário, mas esse botão não tem nenhuma função direta nele e é comumente utilizado para disparar eventos para a execução de scripts. O texto do botão é determinado pelo valor do atributo value. submit Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Formulários a fundo - Página Õ˜¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript input type=submit name=enviar value=Enviar O elemento input com o atributo type=submit” é similar ao botão, mas quando acionado esse elemento inicia a chamada que envia as informações do formulário para o endereço indicado no atributo action do form. image input type=image name=botao src=images/enviar.png width=20 height=18 É possível substituir o botão de envio do formulário por uma imagem, possibilitando criar um visual mais atrativo para o formulário. reset input type=reset name=reset value=Limpar O input comtype=reset” elimina os valores entrados anteriormente nos elementos de um formulário, per-mitindo que o usuário limpe o mesmo. †•£¶± u f¶±±™• A tag input dos tipos button, submit e reset pode ser substituída pela tag button. Neste caso, o texto do botão passa a ser indicado como conteúdo da tag. Ainda assim é necessário especicar o valor do atributo type, inclusive se ele for button: button type=button name=enviarClique aqui/button le input type=file name=anexo Quando é necessário que o usuário envie um arquivo para a aplicação no lado do servidor é necessário o uso do input do tipo le. Para o correto envio dos arquivos, muitas vezes também é necessário adicionar o atributo enctype=multipart/form-data na tag form. hidden input type=hidden name=codigo value=abc012xyz789 Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Formulários a fundo - Página Õ˜ä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Muitas vezes precisamos enviar e receber informações que não têm utilidade direta para o usuário e, portanto, não devem ser exibidos no formulário. Para essa nalidade, existe o input do tipo hidden, que somente carrega em si um valor. Tuì±Z§uZ Quando desejamos que o usuário insira uma quantidade grande de informações textuais, incluindo quebras de linha, é necessário o uso da tag textarea textarea name=texto/textarea Suuh±, O£±§™¶£ u O£±†™• Quando desejamos que o usuário selecione entre diversas opções, com a possibilidade de žexibilizar a ma-neira com que ele interage com o componente do formulário, podemos utilizar a tag select. select name=cidades option value=bsbBrasília/option option value=rjRio de Janeiro/option option value=spSão Paulo/option /select Em sua conguração padrão, o controle select exibe o que conhecemos como menu drop-down, permi-tindo que somente uma das opções possa ser selecionada. Caso seja adicionado o atributo multiple, é pos-sível selecionar mais de uma opção da mesma maneira que selecionamos diversos arquivos no explorador do sistema operacional. select multiple name=cidades option value=bsbBrasília/option option value=rjRio de Janeiro/option option value=spSão Paulo/option /select Caso necessário, dependendo do número de opções apresentadas ao usuário, pode ser interessante agrupá-las: select name=bairro optgroup label=Brasília option value=asan_bsbAsa Norte/option option value=asas_bsbAsa Sul/option /optgroup optgroup label=São Paulo option value=vlmariana_spVila Mariana/option Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Formulários a fundo - Página Õ˜ß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript option value=centro_spCentro/option /optgroup optgroup label=Rio de Janeiro option value=botafogo_rjBotafogo/option option value=centro_rjCentro/option /optgroup /select ÕÕ.ß N™ê™« h™“£™•u•±u« o™ HTML¢ Com a nova especicação do HTML, é possível utilizar uma série de novos componentes que facilitam bas-tante o desenvolvimento de formulários. Até o momento em que essa apostila foi escrita, muitos compo-nentes são incompatíveis com os navegadores, mas mostram, na maioria dos casos, um campo de texto permitindo a entrada de qualquer tipo de informação. A maioria dos novos tipos de componentes de formulário foram criados para permitir que o navegador adapte o método de entrada para o mais adequado em cada um dos casos. Alguns desses componentes já são compatíveis com navegadores de dispositivos móveis. email input type=email name=email Oinput do tipo email permite que os dispositivosmóveis, principalmente, exibamumteclado adaptado para facilitar esse tipo de entrada. Por exemplo, o iPhone exibe um teclado com o caractere @ e com as opções de domínio .com. Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Novos componentes do HTML¢ - Página Õ˜˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript number input type=number max=100 step=5 O input do tipo number, além de exibir um teclado numérico em dispositivos móveis, nos navegadores modernos exibe um controle que permite incrementar ou decrementar o valor do campo clicando em uma seta para cima ou para baixo. Além dessa diferença visual, é possível determinar valores mínimos, máximos e se há uma escala de valores válidos. No exemplo anterior, o elemento deve aceitar números múltiplos de ¢ com o limite do valor “Õþþ”. url input type=url name=endereco Oelemento input comtipo url permite que os dispositivos exibamum teclado como, no exemplo do iPhone, opções como www e .com. range input type=range name=volume Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Novos componentes do HTML¢ - Página Õ˜É

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript O elemento input do tipo range exibe um controle deslizante nos navegadores modernos, permitindo uma interação mais agradável quando precisamos de um valor numérico em escala. O controle guarda um va-lor numérico em seu atributo value. Assim como o input do tipo number, é possível especicar um valor mínimo, máximo e uma escala. A renderização mais comum desse controle, em um Chrome: date, month, week, time, datetime e datetime-local input type=date name=validade Os controles de “date picker” são feitos para coletar uma informação de data ou hora. São várias as possibili-dades de formato de data ou hora necessárias. No navegador Opera, quando utilizado esse tipo de controle, o usuário pode selecionar uma data a partir de um calendário. É possível especicar datas mínima emáxima. Em geral, os navegadores devem oferecer alguma funcionalidade de escolha de datas para o usuário, como o Chrome: Ou o iPhone: Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Novos componentes do HTML¢ - Página ÕÉþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript color input type=color name=cor_olhos O elemento input do tipo color permite que seja exibido um “color picker” para o preenchimento do seu valor. O Chrome no Mac, por exemplo, exibe o color picker padrão do sistema: Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Novos componentes do HTML¢ - Página ÕÉÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript search input type=search results=10 O input do tipo search exibe um campo especíco para busca. O atributo “results” determina quantas últi-mas buscas serão armazenadas e lembradas, além de exibir uma lupa dentro do campo (Safari e Chrome). tel input type=tel name=telefone O input do tipo tel foi especicado para coletar um número de telefone. Em dispositivos com teclados virtuais como smartphones e tablets, é comum o teclado ser adaptado para exibir apenas opções relevantes à entrada de números telefônicos, como no iPhone: ÕÕ.˜ N™ê™« Z±§†f¶±™« HTML¢ u“ uu“u•±™« ou €™§“¶a§†™ Na especicação do HTML¢ estão denidos novos atributos pra os elementos de formulário, visando imple-mentar algumas necessidades comuns que antes não eram possíveis de serem atendidas puramente com a marcação do formulário. autofocus Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Novos atributos HTML¢ em elementos de formulário - Página ÕÉó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Sua presença indica que aquele campo deve iniciar com foco quando a página for carregada. O usuário já pode começar a digitar algo sem nenhum clique. input name=nome autofocus placeholder input type=text name=nome placeholder=Insira seu nome Oatributo placeholder exibe o texto contido em seu valor dentro do elemento do formulário caso o seu valor seja vazio. autocomplete, list e datalist É possível implementar uma funcionalidade de sugestão de valores com mais facilidade. input type=text list=cidades autocomplete=on datalist id=cidades option value=Brasília option value=Rio de Janeiro option value=São Paulo /datalist A implementação 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 formulários, dando prioridade a valores adicionados em inputs com o mesmo valor no atributo name. Existem diversas maneiras de utilizar os componentes de formulários, tanto os novos do HTML¢ como os já existentes. Mesmo coma oportunidade de inovar e criar uma interação totalmente diferente do usuário com um formulário, é importantemanter omesmométodo que adotamos anteriormente. Amarcação correta do formulário facilita muito o uso dele em diversos navegadores e em outros tipos de clientes também, como por exemplo navegadores especiais para decientes visuais. ÕÕ.É Íh™•u« h™“ í£„†h™•« O Bootstrap traz um conjunto de ícones prontos para uso chamado de Glyphicons. Esses ícones são dispo-nibilizados através de uma fonte de texto customizada. Eles desenharamos ícones e exportaramcomo uma fonte normal. Para usarmos com Bootstrap é bem simples: span class=glyphicon glyphicon-thumbs-up/span Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Ícones com glyphicons - Página ÕÉì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript São Õ˜þ ícones no total, das mais diversas razões. Basta olhar o nome da documentação e usar na página. Figura ÕÕ.ì: Alguns dos ícones http://getbootstrap.com/components/kglyphicons A vantagem de se usar fontes para ícones é que o desenho ca escalável, como uma letra. Ele não perde qualidade em nenhum tamanho ou resolução por ser vetorial. E, assim como uma letra, podemos aplicar efeitos de texto como sombras e cores. A desvantagem é que cada ícone só pode ter um path no desenho e uma única cor. Não é possível usar ícones complexos com fontes. Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Ícones com glyphicons - Página ÕÉ¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ÕÕ.Õþ Eìu§hih†™«: €™§“¶a§†™« Õ) O formulário de compra possui muitos campos para o usuário preencher sobre si, sobre a entrega, paga-mento etc. Para simplicar, vamos organizar em ¦ eldsets: • Dados pessoais • Cartão de crédito • Endereço de entrega • Endereço de cobrança Vamos criar o form logo depois do panel, e ainda dentro do container. Neste form, crie os ¦ eldsets usando legend para identicar cada um. No nal, um botão cuidará do envio dos dados (vamos usar um btn-primary do Bootstrap). form fieldset legendDados pessoais/legend /fieldset fieldset legendCartão de crédito/legend /fieldset fieldset legendEndereço entrega/legend /fieldset fieldset legendEndereço cobrança/legend /fieldset button type=submit class=btn btn-primary Confirmar Pedido /button /form ó) O primeiro eldset, dos Dados Pessoais, deve conter os campos Nome, Email, CPF e um checkbox para o usuário optar ou não por receber spam. Implemente os campos dentro do primeiro eldset. Use as classes do Bootstrap para formulários. Use também um input email do HTML¢. Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Exercícios: formulários - Página ÕÉ¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript fieldset legendDados pessoais/legend div class=form-group label for=nomeNome completo/label input type=text class=form-control id=nome name=nome /div div class=form-group label for=emailEmail/label input type=email class=form-control id=email name=email /div div class=form-group label for=cpfCPF/label input type=text class=form-control id=cpf name=cpf /div div class=checkbox label input type=checkbox value=sim name=spam checked Quero receber spam da Mirror Fashion /label /div /fieldset Repare que cada campo possui um input e um label. Para agrupá-los, usamos um div form-group do Bootstrap. Cada input deve ter uma classe form-control. Teste a página e observe o estilo padrão que ganhamos apenas por usar o Bootstrap. ì) O eldset de dados do cartão tem dois campos apenas: um com código do cartão e outro com data de validade. Neste último, usaremos o input month do HTML¢. Implemente os campos do segundo eldset: fieldset legendCartão de crédito/legend div class=form-group label for=numero-cartaoNúmero - CVV/label input type=text class=form-control id=numero-cartao name=numero-cartao /div div class=form-group label for=validade-cartaoValidade/label Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Exercícios: formulários - Página ÕÉä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript input type=month class=form-control id=validade-cartao name=validade-cartao /div /fieldset ¦) No eldset de endereço de entrega, temos campo pra rua, CEP, cidade e estado. Implemente esse eldset: fieldset legendEndereço entrega/legend div class=form-group label for=rua-entregaRua, número e complemento/label input type=text class=form-control id=rua-entrega name=rua-entrega /div div class=form-group label for=cep-entregaCEP/label input type=text class=form-control id=cep-entrega name=cep-entrega /div div class=form-group label for=cidade-entregaCidade/label input type=text class=form-control id=cidade-entrega name=cidade-entrega /div div class=form-group label for=estado-entregaEstado/label select name=estado-entrega id=estado-entrega class=form-control option value=SPSão Paulo/option option value=RJRio de Janeiro/option !-- ... coloque outros estados aqui se quiser ... -- /select /div /fieldset Oeldset seguinte, do endereço de cobrança, é idêntico nos campos,mudando apenas os names e IDs dos campos. Implemente esse eldset e cuidado com os nomes dos campos que são diferentes do anterior: fieldset legendEndereço cobrança/legend div class=form-group label for=rua-cobrancaRua, número e complemento/label input type=text class=form-control id=rua-cobranca name=rua-cobranca /div Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Exercícios: formulários - Página ÕÉß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript div class=form-group label for=cep-cobrancaCEP/label input type=text class=form-control id=cep-cobranca name=cep-cobranca /div div class=form-group label for=cidade-cobrancaCidade/label input type=text class=form-control id=cidade-cobranca name=cidade-cobranca /div div class=form-group label for=estado-cobrancaEstado/label select name=estado-cobranca id=estado-cobranca class=form-control option value=SPSão Paulo/option option value=RJRio de Janeiro/option /select /div /fieldset ¢) Adicione o atributo placeholder do HTML¢ nos campos email e CPF com dicas de preenchimento: input type=email class=form-control id=email name=email placeholder=email@exemplo.com ... input type=text class=form-control id=cpf name=cpf placeholder=000.000.000-00 Adicione o atributo autofocus do HTML¢ no input nome: input type=text class=form-control id=nome name=nome autofocus ä) Vamos incentivar o clique no botão de pedido com um ícone além do texto. Use os glyphicons do Bo-otstrap pra isso. Dentro do botão, apenas adicione a linha que declara o ícone: button type=submit class=btn btn-primary span class=glyphicon glyphicon-thumbs-up/span Confirmar Pedido /button Para saber mais sobre os ícones do Bootstrap: http://getbootstrap.com/components/kglyphicons ß) Use outras classes do Bootstrap para ajustarmais detalhes. No botão, adicione a classe btn-lg para deixar o botão maior. Ainda no botão, acrescente também a classe pull-right para deixá-lo alinhado à direita. Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Exercícios: formulários - Página ÕÉ˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Veja mais opções de botões com Bootstrap: http://getbootstrap.com/css/kbuttons ˜) (opcional) Faça placeholders também nos campos CEP e número do cartão. É) (opcional) O Bootstrap tem outros recursos para formulários, como os input groups. Teste trocando o código do campo email para isso: div class=form-group label for=emailEmail/label div class=input-group span class=input-group-addon@/span input type=email class=form-control id=email name=email /div /div Implemente também em outros campos, inclusive usando ícones do glyphicons. Veja mais opções do Bootstrap para formulários: http://getbootstrap.com/css/kforms ÕÕ.ÕÕ PZ§Z «Zfu§ “Z†«: ™¶±§™« €§Z“uë™§Ž« CSS O Bootstrap não é o único framework CSS domercado. É talvez omais famoso e commais usuários, mas há muitas outras opções que às vezes podem ser até melhores para seu caso. Três opções famosas: • Foundation: Da Zurb, fortemente baseado em mobile e responsivo. http://foundation.zurb.com/ • Semantic UI: tem nomes de classes mais simples e semânticos que os outros. http://semantic-ui.com/ • Pure: Do Yahoo, outra alternativa, mais recente. http://purecss.io/ De maneira geral, esses frameworks permitem fazer as mesmas coisas, mas cada um com seu estilo. Um botão principal por exemplo: !-- Bootstrap -- button class=btn btn-primary btn-lgClique aqui/button !-- Foundation -- button class=large buttonClique aqui/button !-- Semantic UI -- button class=large ui buttonClique aqui/button !-- Pure -- button class=pure-button pure-button-primary pure-button-largeClique aqui/button Capítulo ÕÕ - Bootstrap e formulários HTML¢ - Para saber mais: outros frameworks CSS - Página ÕÉÉ

CZ£i±¶™ Õó Componentes complexos do Bootstrap e mais HTML¢ “Nove pessoas não conseguem fazer um bebê em um mês.” – Fred Brooks, sobre a adição de mais programadores para um projeto acabar antes Õó.Õ G§†o §u«£™•«†ê™ o™ B™™±«±§Z£ Umas das diculdades mais comuns de um projeto front-end é o posicionamento de elementos, sobretudo em designs multi coluna. A solução mais comum é uso de grids, uma ideia antiga que veio dos próprios designers. Divide-se a tela em colunas e vamos encaixando os elementos dentro desse grid. Todo framework CSSmoderno traz um grid pronto para utilização. Todo codigo CSS necessário para correto posicionamento já foi escrito e só precisamos usar as classes certas. OBootstrap tem um grid pronto e várias classes para usarmos. O grid o Bootstrap trabalha coma ideia de Õó colunas e podemos escrever nosso código escolhendo quantas colunas ocupar. Alguns exemplos:

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Essas classes de coluna são as que denem o tamanho de cada elemento na página com base nas Õó partes do grid padrão. Em código: div class=row div class=col-md-4 ... /div div class=col-md-8 ... /div /div No código anterior, deixamos o primeiro DIV ocupando ¦/Õó da tela e o outro, ˜/Õó. Repare que, para o grid funcionar, ao redor das colunas usamos um div com class row. Ele é necessário. Podemos ainda criar grids dentro de grid, sempre obedecendo a divisão de Õó colunas em cada. Por exemplo: div class=row div class=col-md-4 ... /div div class=col-md-8 div class=row div class=col-md-6 ... /div div class=col-md-6 ... /div /div /div /div Esse exemplo criou um segundo grid dentro da coluna da direita do primeiro. Nesse segundo grid há duas colunas ocupando metade cada uma (ä/Õó). Mas como um grid está dentro do outro, na prática, ele vai ocupar metade do tamanho do div que tem ˜/Õó de tamanho. Ru«£™•«†ê™ Um dos pontos mais interessantes dos grids é que eles são responsivos. Isso quer dizer que podemos aplicar diferentes layouts de colunas no nosso código aomesmo tempo e cada um deles vai valer só em determinada situação. Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Grid responsivo do Bootstrap - Página óþÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Nos códigos anteriores, por exemplo, usamos classes como col-md-ä. O md nessa classe signica que vamos ocupar ä colunas do grid apenas em telas maiores que ÉÉópx de largura. Em telas menores, automaticamente nosso grid será de uma coluna só. E, claro, temos classes pra outros tamanhos de tela também. No Bootstrap temos essas famílias de classes de grids já prontas: • col-xs- : Extra small. ßä˜px • col-sm- : Small (tablets). = ßä˜px • col-md- : Medium (Desktops). = ÉÉópx • col-lg- : Large (Desktops). = Õóþþpx Podemos aplicar mais de uma classe ao mesmo tempo no mesmo elemento: div class=row div class=col-xs-6 col-sm-4 ... /div div class=col-xs-6 col-sm-8 ... /div /div Nesse exemplo, nosso grid divide no meio (ä pra cada lado) em telas muito pequenas mas depois divide em ¦ e ˜ pra telas um pouco maiores. Õó.ó Eìu§hih†™«: §†o« Õ) Nosso design mobile-rst funciona muito bem em telas pequenas. Mas conforme vamos aumentando o browser, notamos que tudo ca meio grande. O panel e o form esticam ÕþþÛ, o que é um exagero em telas maiores. Vamos usar grids do Bootstrap para transformar nosso design em ó colunas em telasmaiores. Por padrão, o Bootstrap já trazmedia queries para adaptação em ßä˜px. A ideia é deixar o panel ocupar ¦/Õó e o form ocupar ˜/Õó. São três alterações necessárias: • 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 formulário. Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Exercícios: grids - Página óþó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Faça essas alterações e cuidado com o resultado nal e os milhões de divs misturados. O código deve car mais ou menos assim: div class=container div class=row div class=col-sm-4 div class=panel panel-default !-- ... painel todo aqui ... -- /div /div form class=col-sm-8 !-- ... todos os campos aqui ... -- /form /div /div Teste a página e redimensione para um tamanho em torno de ßä˜px pra ver o resultado. ó) Repare que o Bootstrap ajusta várias coisas responsivamente pra gente de maneira automática. Além de aplicar as classes do grid, repare como os tamanhos e fontes aumentam de acordo com a resolução, sem precisarmos fazer nada. Faça os testes. ì) Quando aumentamos bastante a tela, tudo ainda se ajusta na proporção de ¦ pra ˜ que denimos. Mas o formulário ca grande demais. Em telas maiores, talvez seja legal deixar o formulário em ó colunas. Vamos usar outras classes do grid do Bootstrap que se aplicam em layouts maiores que ÉÉópx. Vamos dividir o formulário em ó partes iguais, ou seja ä/Õó (lembre que o grid do Bootstrap tem Õó partes como base). Conseguimos isso tudo usando a classe col-md-ä. As mudanças necessárias são: • Crie um div com classe row ao redor dos ó primeiros eldsets; • Crie outro div com classe row ao redor dos ó últimos eldsets; • Aplique a classe col-md-ä em todos os ¦ eldsets. No nal, a estrutura deve estar parecida com essa: form .... div class=row fieldset class=col-md-6 .... /fieldset Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Exercícios: grids - Página óþì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript fieldset class=col-md-6 .... /fieldset /div div class=row fieldset class=col-md-6 .... /fieldset fieldset class=col-md-6 .... /fieldset /div button .... /form Teste a página e redimensione para um tamanho em torno de ÉÉópx pra ver o resultado. ¦) (opcional) É possível usarmais de uma classe de grid aomesmo tempo nomesmo elemento. Por exemplo: dividimos a tela em ¦/Õó para o painel e ˜/Õó para o formulário. Mas se, em telas maiores, você quiser mudar essa proporção para ì/Õó e É/Õó, basta adicionar as classes col-lg-ì e col-lg-É em conjunto as que tínhamos antes. Implemente essa mudança no projeto. Exemplo: form class=col-sm-8 col-lg-9 A série col-lg- aplica em resoluções acima de Õóþþpx. Para saber mais sobre os grids do Bootstrap: http://getbootstrap.com/css/kgrid ¢) (opcional) Além de alterar o grid nas diferentes resoluções, o Bootstrap também permite esconder/exibir certos elementos apenas em uma resolução especíca. Por exemplo: imagine que, para otimizar o espaço pequeno no design para smartphone, vamos esconder a imagem do produto. Podemos fazer isso adicionando a classe hidden-xs na img. Isso vai esconder o elemento em resoluções menores que ßä˜px. Para saber mais sobre as classes auxiliares para responsivo do Bootstrap: http://getbootstrap.com/css/ kresponsive-utilities Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Exercícios: grids - Página óþ¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Õó.ì VZ†oZca™ HTML¢ Entre as muitas novidades de formulários que vimos no HTML¢, há ainda toda uma parte de validação de dados com restrições expressas diretamente no código HTML. §u¤¶†§uo Podemos indicar na marcação do formulário quando um campo é de preenchimento obrigatório. input type=text name=nome required Esse atributo permite uma validação fraca no lado do cliente. £Z±±u§• Conseguimos também especicar um formato requerido através do atributo pattern, adicionando uma ex-pressão regular como valor: input type=text pattern=^@w{2,} name=usuario_twitter O atributo pattern também permite uma validação fraca do campo. VZ†oZca™ •™ CSS Amaioria dos novos componentes de formulário e os atributos que funcionamcomo validadores de campos na verdade somente aplicam uma pseudo-classe especíca no campo que não está atendendo ao padrão ou requisito especicado. Essa pseudo-classe é a :invalid, e pode ser utilizada para dar um retorno visual imediato caso o usuário não esteja atendendo aos requisitos dos campos do formulário. :invalid { outline: 1px solid #cc0000; } Essa validação é fraca pois de maneira direta não é possível impedir que o usuário envie as informações do formulário, mesmo que incompletas ou incorretas. É possível porém alterar o botão de submit e deixá-lo desabilitado caso seja possível selecionar algum elemento por essa pseudo-classe no formulário. Essa vericação e alteração do elemento submit pode ser feita por JavaScript e jQuery de maneira simples. Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Validação HTML¢ - Página óþ¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Õó.¦ PZ§Z «Zfu§ “Z†«: h™•±§™Z•o™ Z« êZ†oZcou« HTML¢ Aideia da nova validação doHTML¢ é permitir que os navegadores já possuamuma forma simples de prover validações sem que os desenvolvedores precisem recorrer a complicadas bibliotecas JavaScript (algo comum em muitas páginas). No entanto, muitas vezes, as opções padrão do navegador não são exatamente o que precisamos, e queremos mudar o comportamento da validação ou executar validações personalizadas e diferentes. Podemos, então, usando JavaScript, desabilitar a validação padrão e fazer a nossa própria: document.querySelector('form input').oninvalid = function(evt) { // cancela comportamento padrão do browser evt.preventDefault(); // checa validade e mostra alert if (!this.validity.valid) { alert(Nome obrigatório!); } }; Isso nos permite trocar, por exemplo, todo o visual e forma de apresentação dos erros. E, o melhor, caso o usuário esteja com JavaScript desabilitado, será executada a validação padrão sem problemas. Um ótimo fallback. (nas soluções tradicionais de validação dom jQuery, por exemplo, tudo se perde quando o usuário desabilita JavaScript). Outra forma de desabilitar a validação, afetando o formulário inteiro, é colocando o atributo novalidate na tag form. Além de desabilitar completamente a validação do navegador, podemos apenas trocar a mensagem de erro mas ainda usar o mecanismo e design padrão: document.querySelector('input[type=email]').oninvalid = function() { // remove mensagens de erro antigas this.setCustomValidity(); // reexecuta validação if (!this.validity.valid) { // se inválido, coloca mensagem de erro this.setCustomValidity(Email inválido); } }; Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Para saber mais: controlando as validações HTML¢ - Página óþä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript S¶£™§±u •™« •ZêuZo™§u« A validação HTML¢ está implementada no Chrome, Firefox, Safari, Opera e IEÕþ. Dos navega-dores móveis, temos suporte em Chrome, Firefox, Opera, IE e Blackberry: http://caniuse.com/form-validation Se você quiser suportar navegadores mais antigos, recomendamos o uso de um polyll: https://github.com/aFarkas/webshim Õó.¢ Eìu§hih†™«: êZ†oZca™ h™“ HTML¢ Õ) Adicione o atributo required nos campos Nome e CPF. Teste submeter o formulário sem preencher esse campos. ó) Algumas validações já são implícitas apenas por usarmos o input type correto. Por exemplo, tente sub-meter o formulário preenchendo o Email com um valor inválido (com dois @ por exemplo). ì) Podemos estilizar no CSS quando um campo está inválido: .form-control:invalid { border: 1px solid #cc0000; } ¦) (opcional avançado) Implemente uma mensagem customizada para erro de email de inválido usando a API JavaScript das validações HTML¢. document.querySelector('input[type=email]').oninvalid = function() { // remove mensagens de erro antigas this.setCustomValidity(); // reexecuta validação if (!this.validity.valid) { // se inválido, coloca mensagem de erro this.setCustomValidity(Email inválido); } }; Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Exercícios: validação com HTML¢ - Página óþß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Õó.ä C™“£™•u•±u« JZêZSh§†£± o™ B™™±«±§Z£ Além de componentes CSS puro do Bootstrap como panel e jumbotron, temos outros componentes mais avançados que envolvem interatividade e JavaScript. Há muita coisa disponível por padrão no Bootstrap, pelo menos os componentes mais comuns como janela modal, galeria de imagens, dropdowns, menus de navegação e mais. http://getbootstrap.com/javascript/ No exercício, vamos usar dois: o menu superior (navbar) e janelas modais. Õó.ß Eìu§hih†™«: •ZêfZ§ u JZêZSh§†£± Õ) Um componente muito famoso do Bootstrap é seu menu superior, chamado de navbar. O HTML é um pouco mais complexo pois se trata de um menu completo, mas é relativamente fácil. Implemente um navbar em nossa página acima do jumbotron, logo no topo da página: nav class=navbar navbar-default div class=navbar-header a class=navbar-brand href=/Mirror Fashion/a /div ul class=nav navbar-nav lia href=#Sobre/a/li lia href=#Ajuda/a/li lia href=#Perguntas frequentes/a/li lia href=#Entre em contato/a/li /ul /nav Teste o resultado no navegador. ó) Repare que o menu não gruda no jumbotron por ter uma margem por padrão. Sem problemas, com um CSS bem simples podemos customizar o componente. Remova a margem da navbar adicionando esse CSS: style .navbar { margin: 0; } /style Além disso, adicione no nav a classe navbar-static-top. Teste novamente. Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Componentes JavaScript do Bootstrap - Página óþ˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ì) Teste o menu em resoluções menores. Note que o Bootstrap ajusta automaticamente o navbar em telas menores. Por padrão, o comportamento é mudar o menu de horizontal para vertical em mobile. Veja esse comportamento redimensionando o browser. ¦) Uma outra solução para menus em telas pequenas é de juntar as opções em uma espécie de dropdown que só abre quando ativado. Isso é, criar um botão para ativar o menu (geralmente com o famoso ícone do sanduíche). É bem simples fazer isso com Bootstrap, a funcionalidade está toda pronta. Para fazer o menu colapsar em telas pequenas, basta adicionar ó classes no ul: a collapse e a navbar-collapse. ul class=nav navbar-nav collapse navbar-collapse Se você testar agora, vai notar que o menu some nas telas menores. Para exibi-lo, precisamos fazer o próximo passo: criar o ícone que ativa o menu. Dentro do navbar-header, logo abaixo do a, crie um botão de ativação. O botão é apenas o texto “menu” mas possui a classe navbar-toggle. Além disso, dois outros parâmetros conguram seu funcio-namento com o collapse que usamos antes: button class=navbar-toggle type=button data-target=.navbar-collapse data-toggle=collapse menu /button Se testar agora, vai notar que o menu aparece mas não funciona quando clicado. É porque essa funciona-lidade no Bootstrap é implementada com JavaScript. A boa notícia é que não precisamos escrever uma linha de código JS sequer, mas para tudo funcionar precisamos adicionar o JavaScript do Bootstrap. No m da página, logo antes de fechar o /body, chame o arquivo do Bootstrap e do jQuery: script src=js/jquery.js/script script src=js/bootstrap.js/script Teste novamente e veja o plugin funcionando. Usamos o JavaScript do Bootstrap implicitamente. ¢) Há muitas opções possíveis para o navbar. Por exemplo, podemos inverter as cores e usar um esquema mais escuro apenas trocando a classe navbar-default pela classe navbar-inverse. Para saber mais sobre o navbar: http://getbootstrap.com/components/knavbar ä) Por falar em customizações, 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 pelo arquivo dele no head: link rel=stylesheet href=css/bootstrap-flatly.css Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Exercícios: navbar e JavaScript - Página óþÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ß) (opcional) Use ícones do glyphicons no menu. Basta colocá-los dentro dos itens que quiser. Algumas sugestões: span class=glyphicon glyphicon-home/span span class=glyphicon glyphicon-question-sign/span span class=glyphicon glyphicon-list-alt/span span class=glyphicon glyphicon-bullhorn/span Outra sugestão é trocar a palavra “menu” que usamos no navbar colapsado pelo ícone do sanduíche: span class=glyphicon glyphicon-align-justify/span Se quiser mudar a cor do ícone, basta usar CSS e a propriedade color: .navbar .glyphicon { color: yellow; } Consulte outros na documentação: http://getbootstrap.com/components/kglyphicons ˜) (opcional) Troque a classe navbar-static-top pela navbar-xed-top. Repare que o menu ca xo no topo mesmo com scroll. Você talvez queira aplicar um padding no body pro conteúdo não subir: body { padding-top: 70px; } É) (opcional) No navbar-header, use um logo da Mirror Fashion em vez de texto. Õó.˜ Eìu§hih†™«: “™oZ Õ) Entre os vários componentes prontos do Bootstrap, temos as janelas modais, recurso bastante usado em muitos sites. Vamos criar um modal para mostrar perguntas frequentes do cliente. Sua implementação é bastante simples. Primeiro, denimos o conteúdo da janela em um div separado comclasse modal. A estrutura é um pouco complexa, exigindo vários elementos, mas é bastante autoexplicativa. Coloque o código abaixo logo depois da div com a classe container. div class=modal id=faq div class=modal-dialog div class=modal-content div class=modal-header h3 class=modal-titlePerguntas frequentes/h3 /div Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Exercícios: modal - Página óÕþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript div class=modal-body h4Posso pagar com boleto?/h4 pNope./p h4Qual o prazo de entrega?/h4 p28 min ou seu dinheiro de volta./p h4Por que só posso comprar 1 produto por vez?/h4 pFoco, meu caro, foco./p /div /div /div /div O detalhe importante é o ID do modal (faq no nosso caso). É por ele que identicaremos como abrir o modal. No nosso caso, queremos que o modal abra ao clicarmos no item “Perguntas recentes” no navbar superior que criamos antes. Basta alterar o link pra apontar a âncora para o ID do modal e usar data-toggle=modal: a data-toggle=modal href=#faqPerguntas frequentes/a Teste a funcionalidade do modal. Para saber mais do modal: http://getbootstrap.com/javascript/kmodals ó) (opcional) Para fechar omodal, a única opção é clicar fora dele. Podemosmelhorar a usabilidade criando um botão no topo do modal que faz seu fechamento. Dentro do modal-header, adicione logo no início um botão: button type=button class=close data-dismiss=modaltimes;/button ì) (opcional) Podemos trocar o efeito de aparição do modal apenas adicionando uma classe simples no div que tem a classe modal. Adicione a classe fade. Õó.É PZ§Z «Zfu§ “Z†«: u•ê†™ ou u“Z†« h™“ PHP Muitas situações práticas exigem o envio de um email numa aplicação Web. Pode ser uma mensagem num formulário de contato, um email de conrmação de compra, uma noticação de certa operação executada, e muito mais. Com HTML/JS puro não é possível enviar emails em nome da aplicação. É preciso do servidor. E isso é muito fácil de fazer com PHP através da função mail. http://php.net/mail Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Para saber mais: envio de emails com PHP - Página óÕÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ?php mail(contato@caelum.com.br, Curso bom!, Escrevendo pra pedir desconto no próximo!); ? O primeiro argumento é o TO, o segundo é SUBJECT e o terceiro a mensagem. E•±§uZ ou u“Z† Enviar o email pelo PHP é fácil mas ele chegar efetivamente do outro lado é outra história. Para combater spams, a maioria dos provedores de email coloca diversas barreiras a quem deseja enviar emails. É preciso usar autenticação de segurança, estar atrás de um IP conável e muito mais. No curso eemcasa, é bempossível que seus testes não funcionem. Muitos provedores domésticos bloqueiam as portas de envio de email e muitos servidores de email não aceitam mensagens de IPs dinâmicos. Na prática, para garantir o envio do email, use um provedor de conança. O código PHP é aquele que vimos sempre,mas executá-lo numa hospedagem conável vai garantir que seu email chegue. Em casa é difícil de funcionar. Õó.Õþ Eìu§hih†™« ™£h†™•Z†«: u“Z† ou h™•€†§“Zca™ Õ) Crie uma nova página efetivar.php que vai ser responsável por conrmar a compra. Por enquanto, tem apenas uma frase simples: h1Obrigado por comprar na Mirror Fashion!/h1 Altere o formulário da checkout.php pra submeter pra essa pagina nova: form action=efetivar.php method=POST ó) Na efetivar.php, escreva o envio do email usando alguns dos parâmetros enviado no formulário de chec-kout: ?php mail($_POST[email], Compra efetuada na Mirror Fashion, $_POST[nome], sua compra foi efetivada. Obrigado); ? Teste o envio do email. ì) (opcional) Implemente um design bacana pra essa página de conrmação de compra. Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Exercícios opcionais: email de conrmação - Página óÕó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Õó.ÕÕ D†«h¶««a™ u“ Z¶Z: ™« £§™fu“Z« o™ B™™±«±§Z£ u ¤¶Z•o™ •a™ ¶«a-™ Capítulo Õó - Componentes complexos do Bootstrap e mais HTML¢ - Discussão em aula: os problemas do Bootstrap e quando não usá-lo - Página óÕì

CZ£i±¶™ Õì jQuery “O primeiro problema para todos, homens e mulheres, não é aprender, mas desaprender” – Gloria Steinem Por conta das diculdades enfrentadas pelos programadores JavaScript para páginas Web, foi criada uma biblioteca que traz diversas funcionalidades voltadas à solução dos problemas mais difíceis de serem contor-nados com o uso do JavaScript puro. A principal vantagem na adoção de uma biblioteca de JavaScript é permitir uma maior compatibilidade de um mesmo código com diversos navegadores. Uma maneira de se atingir esse objetivo é criando funções que vericamquaisquer características necessárias e permitamque o programador escreva um código único para todos os navegadores. Além dessa vantagem, o jQuery, que é hoje a biblioteca padrão na programação front-end para Web, traz uma sintaxe mais “žuida” nas tarefas mais comuns ao programador que são: selecionar um elemento do documento e alterar suas características. Õì.Õ Q¶u§í - A €¶•ca™ g O jQuery é uma grande biblioteca que contém diversas funções que facilitama vida do programador. Amais importante delas, que inicia a maioria dos códigos, é a função g. Com ela é possível selecionar elementos com maior facilidade, maior compatibilidade, e com menos código. Por exemplo: // JavaScript puro var cabecalho = document.getElementById(cabecalho);

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript if (cabecalho.attachEvent) { cabecalho.attachEvent(onclick, function (event) { alert(Você clicou no cabeçalho, usuário do IE!); }); } else if (cabecalho.addEventListener) { cabecalho.addEventListener(click, function (event) { alert(Você clicou no cabeçalho!) }, false); } // jQuery $(#cabecalho).click(function (event) { alert(Você clicou no cabeçalho!); }); Note como a sintaxe do jQuery é bemmenor, e a biblioteca se encarrega de encontrar omodomais compatível possível para adicionar o evento ao elemento cujo id é cabecalho. Existem diversas funções que o jQuery permite que utilizemos para alterar os elementos que selecionamos pela função g, e essas funções podem ser encadeadas, por exemplo: $(#cabecalho).css({margin-top: 20px, color: #333333}) .addClass(selecionado); No código acima, primeiramente chamamos a função $ e passamos como argumento uma String idêntica ao seletor CSS que utilizaríamos para selecionar o elemento de id cabecalho. Na sequência chamamos a função css e passamos um objeto como argumento, essa função adicionará ou alterará as informações desse objeto como propriedades de estilo do elemento que selecionamos com a função $. Em seguida chamamos mais uma função, a addClass, que vai adicionar o valor “selecionado” ao atributo class do elemento com o id “cabecalho”. Dessa maneira, é possível fazer muito mais com muito menos código, e ainda por cima de uma maneira que funciona em diversos navegadores. Õì.ó Q¶u§í Suuh±™§« Umdosmaiores 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 ganharão determinado es-tilo. Infelizmente muitos desses seletores não funcionam em todos os navegadores. Contudo, no jQuery, os temos todos à nossa disposição. Por exemplo, se quisermos esconder todas as tags td lhas de um tbody, basta: Capítulo Õì - jQuery - jQuery Selectors - Página óÕ¢

Material do Treinamento DesenvolvimentoWeb 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 parágrafos $('p').text('alô :D'); Mais exemplos: $('div p:first'); // o primeiro elemento p imediatamente filho de um div $('input:hidden'); // todos os inputs invisíveis $('input:selected'); // todas as checkboxes selecionadas $('input[type=button]'); // todos os inputs com type=button $('td, th'); // todas as tds e ths Lembre-se de que a função que chamamos após o seletor é aplicada para todos os elementos retornados. Veja: // forma ineficiente alert($('div').text() + $('p').text() + $('ul li').text()); // forma eficiente :D alert($('div, p, ul li').text()); A função text() é chamada para todos os divs, ps, e lis lhos de uls. Õì.ì F†±§™« h¶«±™“†ñZo™« u £™§ DOM Existem diversos seletores herdados do css que servem para selecionar elementos baseados no DOM. Alguns deles são: Capítulo Õì - jQuery - Filtros customizados e por DOM - Página óÕä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript $('div p'); // ps imediatamente filhos de div $('p + p'); // ps imediatamente precedidos por outro p $('div:first-child'); // um elemento div que seja o primeiro filho $('div:last-child'); // um elemento div que seja o último filho $('div *:first-child'); // um elemento que seja o primeiro filho direto de uma div $('div *:last-child'); // um elemento que seja o ultimo filho direto de uma div $('div p:nth(0)'); // o primeiro elemento p filho de uma div $('div:empty'); // divs vazios Õì.¦ U±††±a§†™ ou †±u§Zca™ o™ Q¶u§í O jQuery traz também entre suas diversas funcionalidades, uma função que facilita a iteração em elementos de um Array com uma sintaxe mais agradável: $(#menu-departamentos li).each(function (index, item) { alert(item.text()); }); A função each chamada logo após um seletor executa a função que passamos como argumento para cada um dos itens encontrados. Essa função precisa de dois argumentos. O primeiro será o “índice” do elemento atual na coleção (þ para o primeiro, Õ para o segundo e assim por diante), e o segundo será o próprio elemento. Também é possível utilizar a função each do jQuery com qualquer Array: var pessoas = [João, José, Maria, Antônio]; $.each(pessoas, function(index, item) { alert(item); }) Nesse caso, chamamos a função each diretamente após o $, pois essa implementação éummétodo do próprio objeto $. Passamos dois argumentos, o primeiro é o Array que queremos percorrer e o segundo a função que desejamos executar para cada um dos itens do Array. Õì.¢ CZ§Zh±u§i«±†hZ« ou uìuh¶ca™ Para utilizarmos o jQuery em nossos projetos com maior segurança, devemos tomar alguns cuidados. Capítulo Õì - jQuery - Utilitário de iteração do jQuery - Página óÕß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript I“£™§±Zca™ Antes de mais nada é necessário incluir o jQuery em nossa página. Só assim o navegador executará seu código para que possamos utilizar suas funcionalidades em nosso código. Por isso é necessário que a tag script do jQuery seja a primeira de todas na ordem de nosso documento: script src=scripts/jquery-1.7.js/script !-- só podemos utilizar o jQuery após sua importação -- script src=scripts/meuscript.js/script script src=scripts/meuoutroscript.js/script Eìuh¶±Z§ «™“u•±u Z£o« hZ§§uZ§ Como estamos constantemente selecionando elementos do documento e alterando suas características, é importante garantir que os elementos que pretendemos utilizar já tenham sido carregados pelo navegador. A melhor maneira de garantir isso é somente executar nosso script após o término do carregamento total da página com a função $ dessa maneira: $(function() { $(#cabecalho).css({background-color: #000000}); }) Essa função $ que recebe uma função anônima como argumento garante que o código dentro dela só será executado ao m do carregamento de todos os elementos da página. Õì.ä MZ†« £§™o¶±™« •Z „™“u Uma técnica comum de se implementar com JavaScript é a de permitir mais conteúdo ser mostrado na tela a partir de algum clique ou até ao se passar o mouse em cima. Na nossa página, exibimos ä produtos em cada painel de destaque. Poderíamos criar um botão para “Mostrar mais” produtos que exiba outros ä. Para implementar, a maneira mais simples é inserir esses produtos adicionais no HTML e escondê-los com CSS usando display:none. Aí colocamos o botão de Mostrar Mais e, via JavaScript, exibimos quando o usuário clicar. Capítulo Õì - jQuery - Mais produtos na home - Página óÕ˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript CZ§§uZ“u•±™ ou h™•±uuo™ h™“ AZì No nosso exercício, vamos apenas esconder ou exibir o conteúdo usando CSS e JavaScript. Em alguns casos, pode ser interessante baixar conteúdo novo do servidor no momento do clique. Esse tipo de página usa Ajax para requisitar novos dados ao servidor e inseri-los dinamicamente na página via JavaScript. Ajax e outras técnicas de JavaScript avançadas são tópicos do curso WD-¦ß da FormaçãoWeb da Caelum: http://www.caelum.com.br/curso/wd¦ß Õì.ß Eìu§hih†™«: Q¶u§í •Z „™“u Õ) Aumente a quantidade de produtos exibidos nos painéis da home para Õó. Para isso, basta alterar o parâ-metro na busca (ao lado do LIMIT). Teste novamente a página e veja que são mostrados muitos produtos. Depois, vamos esconder a metade e mostrar apenas se o usuário quiser ver. ó) Crie um button no nal de cada DIV painel, logo após a lista ol. Esse será o botão responsável por exibir os produtos. button type=buttonMostra mais/button No estilos.css, esconda esse botão por padrão. Ele só vai ser exibido quando os produtos adicionais esti-verem colapsados. .painel button { display: none; } Repare como ainda não zemos a funcionalidade em JavaScript para mostrar os produtos. Mas a página é usável e válidamesmo nesse caso. A ideia é que, na falta de JavaScript, todos os produtos sejamexibidos e o botão esteja escondido. ì) Implemente a funcionalidade de compactar o painel de produtos para mostrar apenas os ä primeiros por padrão. Vamos fazer isso com CSS, através de uma nova classe painel-compacto. São duas coisas: esconder os produtos a mais, e exibir o botão que vai fazer a funcionalidade. .painel-compacto li:nth-child(n+7) { display: none; } .painel-compacto button { display: block; } Capítulo Õì - jQuery - Exercícios: jQuery na home - Página óÕÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Essa classe, claro, só vai fazer efeito se adicionarmos ela na página. Para testar, vá no div comclasse painel e adicione a classe painel-compacto do lado. ¦) Estamos sem JavaScript ainda na página. E, já que adicionamos a classe painel-compacto direto no HTML, quebramos a experiência do usuário nesse caso. Perceba que os produtos adicionais cam es-condidos e botão aparece. Mas nada funciona! Péssima experiência. Claro que, nesse caso, é porque não implementamos ainda. Mas imagine o cenário onde, mesmo com tudo implementado, o JavaScript não carrega, acontece um erro ou o usuário desabilitou. ¢) Vamos implementar a funcionalidade em JavaScript. O primeiro passo é remover a classe painel-compacto do HTML. Como ela é uma classe atrelada a funcionalidade JS, vamos adicioná-la com jQuery, apenas se o JS for executado. Primeiro, vamos importar o jQuery na home. Inclua a seguinte linha imediatamente antes da importação do home.js: script src=js/jquery.js/script Agora, no home.js, faça: $('.novidades').addClass('painel-compacto'); O resultado visual parece o mesmo. Mas režita sobre as implicações de progressive enhancement, essen-cial para um projeto de qualidade. Ainda no home.js, implemente o evento de clique no botão. Ele deve remover a classe painel-compacto, fazendo o produto aparecer: $('.novidades button').click(function() { $('.novidades').removeClass('painel-compacto'); }); Teste a funcionalidade. ä) (opcional) Implemente a mesma funcionalidade para o painel da direita, o mais-vendidos. ß) (opcional avançado) Em vez de escrever o código óx para suportar os ó painéis, podemos generalizá-lo e resolver as duas coisas de uma vez. $('.painel').addClass('painel-compacto'); $('.painel button').click(function() { $(this).parent().removeClass('painel-compacto'); }); ˜) (opcional trabalhoso) Podemos estilizar o botão de mostrar mais produtos com regras CSSì que apren-demos. Uma sugestão: Capítulo Õì - jQuery - Exercícios: jQuery na home - Página óóþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript .painel button { /* posicionamento */ float: right; margin-right: 10px; padding: 10px; /* estilo */ background-color: #333; border: 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; /* animação*/ 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%; Capítulo Õì - jQuery - Exercícios: jQuery na home - Página óóÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript left: 50%; margin-left: -5px; /* animação */ transition: 0.3s; } .painel button:hover:after { border-top-color: #393939; } Õì.˜ O uu“u•±™ ™¶±£¶± o™ HTML¢ Na página de produto havíamos criado um input range para selecionar o tamanho da roupa. O problema é que não há feedback visual de qual valor está selecionado. Podemos então criar um outro elemento visual na página apenas para mostrar o valor atualmente selecionado no range. Vamos usar JavaScript pra isso. Na prática, escutamos o evento onchange do range e toda vez que ele mudar de valor, pegamos o valor mais atual e copiamos pra esse novo elemento visual exibir. Mas que tag usar pra representar esse elemento cujo valor é resultado do valor escolhido no range? NoHTML¢, temos uma tag nova comvalor semântico exato pra essa situação: o outputrepresenta a saída de algum cálculo ou valor simples obtido a partir de um ou mais componentes de um formulário. Ele tem um atributo for** que aponta de qual elemento saiu o valor. output for=tamanho name=valortamanho42/output Visualmente, é como se fosse um DIV simples. Depois vamos estilizar esse componente do jeito que quiser-mos com CSS. A grande sacada é o valor semântico da tag e o que ela representa. O valor em si está como ¦ó estaticamente. O que precisamos é atualizar esse valor toda vez que o valor do input range mudar. Pra isso, precisamos de JavaScript. E vamos implementar com jQuery no exercício a seguir. Õì.É Eìu§hih†™«: “™«±§Z•o™ ±Z“Z•„™ o™ £§™o¶±™ h™“ Q¶u§í Õ) Na página produto.php, adicione o elemento output do HTML¢ logo após o input range, ainda dentro do eldset de escolha de tamanho. output for=tamanho name=valortamanho42/output Repare que esse elemento não tem visual especíco e também não atualiza seu valor sozinho. Vamos implementar isso via JavaScript, usando jQuery. Capítulo Õì - jQuery - O elemento output do HTML¢ - Página óóó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó) A atualização do valor no output deve ser feita via JS. É bastante simples: quando o input rangemudar de valor (evento oninput), pegamos seu valor e jogamos no output. Para escrever o JS você pode criar um novo arquivo produto.js e importá-lo na página. Ou, como o código é bem pequeno, se preferir, pode escrever direto num elemento script na página. O importante é importar o jQuery antes do nosso código, como zemos antes: script src=js/jquery.js/script O nosso código é: $('[name=tamanho]').on('input', function(){ $('[name=valortamanho]').val(this.value); }); Teste o funcionamento no slider no range, veja se o output atualiza de valor corretamente. IEÕþ Para suportar o IEÕþ, precisamos colocar o evento onchange. O correto no HTML¢ seria usar o evento oninput, que até funciona melhor nos browsers modernos. Se quiser suportar os dois no jQuery, podemos atrelar dois eventos à mesma função de uma só vez: $('[name=tamanho]').on('change input', function(){ ... Além disso, como o elemento output não é corretamente reconhecido pelo navegador, alterar a propriedade value dele não vai ter o resultado esperado. Para o nosso código funcionar nele, precisamos mexer diretamente no texto do elemento: $('[name=valortamanho]').text(this.value); ì) Estilize o output para ter um design mais ajustado a nossa página de produto: .tamanhos output { display: inline-block; height: 44px; width: 44px; line-height: 44px; text-align: center; Capítulo Õì - jQuery - Exercícios: mostrando tamanho do produto com jQuery - Página óóì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript border: 3px solid #666; border-radius: 50%; color: #555; } Õì.Õþ F™§“¶a§†™« o†•a“†h™« h™“ Q¶u§í É muito comum em lojas virtuais que se possa usar o mesmo endereço tanto para entrega quanto para co-brança, evitando digitar duas vezes o mesmo conteúdo. Vamos implementar isso no nosso checkout usando JavaScript para copiar os dados de um formulário para o outro. O segredo é criar um botão que, quando clicado, pega os dados dos campos do Endereço de Entrega e joga nos campos correspondentes no Endereço de Cobrança. Pra isso, vamos usar no jQuery a função val() que serve tanto pra ler o valor de um campo quanto para mudar o valor: // lê o valor do campo $('#rua-entrega').val(); // muda o valor do campo $('#cidade-entrega').val('Abacaxi do Norte'); Õì.ÕÕ Eìu§hih†™«: ZêZ«h§†£± •™ h„uhŽ™¶± Õ) Crie um botão que será responsável por copiar os dados de um endereço para outro. Esse código deve estar dentro do elemento legend do “Endereço de cobrança”. button class=btn btn-default btn-xs type=buttonMesmo endereço/button Aproveite e adicione um id endereco-cobranca no fieldset que contém os campos de cobrança. Va-mos usar esse id depois no JS. fieldset id=endereco-cobranca class=col-md-6 Teste e veja o botão no formulário. Repare o que cada classe do Bootstrap faz. ó) A funcionalidade de copiar os dados consiste em adicionar um evento de clique no botão que criamos no exercício anterior. Ao disparar esse evento, pegamos o valor de cada componente do endereço de entrega e copiamos para o componente correspondente no endereço de cobrança. Com jQuery, é muito simples: Capítulo Õì - jQuery - Formulários dinâmicos com jQuery - Página óó¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript $('#endereco-cobranca button').click(function(){ $('#rua-cobranca').val($('#rua-entrega').val()); $('#cep-cobranca').val($('#cep-entrega').val()); $('#cidade-cobranca').val($('#cidade-entrega').val()); $('#estado-cobranca').val($('#estado-entrega').val()); }); Teste o funcionamento desse botão. Preencha o endereço de entrega e clique em copiar para o endereço de cobrança. ì) (opcional) Use um ícone do glyphicons dentro do botão pra estilizar. Sugestão: span class=glyphicon glyphicon-refresh/span ¦) (opcional avançado) Se você garantir que os campos dos dois formulários são os mesmos e os nomes seguem uma regra (ex. “rua-entrega/rua-cobranca”), podemos fazer um código mais genérico que não precise listar todos os campos um por um. Estude o código a seguir. Ele troca os valores de todos os campos do form de cobrança a partir do valor equivalente no form de entrega. Descobrimos o nome do campo pegando seu nome com “cobranca” e fazendo replace por “entrega”. $('#endereco-cobranca .form-control').val(function(){ var original = $('#' + this.name.replace('cobranca', 'entrega')); return original.val(); }); ¢) (opcional avançado e trabalhoso) Aindamais elaborado seria fazer um formulário que, conforme o usuá-rio digita no campo de entrega, já edita automaticamente o campo correspondente de cobrança. Usamos os eventos oninput e onchange no JavaScript. $('#endereco-cobranca .form-control').each(function(){ var original = $('#' + this.name.replace('cobranca', 'entrega')); var copiado = $(this); copiado.val(original.val()); original.on('change input', function() { copiado.val(original.val()); }); }); $('#endereco-cobranca').attr('disabled', 'disabled'); Capítulo Õì - jQuery - Exercícios: javascript no checkout - Página óó¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript B†•o†• h™“ A•¶Z§.JS Esse recurso de atrelar o valor de um campo a outro émuitas vezes chamado de binding. A nossa solução nesse exercício é caseira e manual, apesar de funcionar bem. Existem frameworks completos para se trabalhar com binding em JS. Um deles, bastante usado e famoso, é o Angular.JS que vemos no curso de JavaScript avançado da Caelum. http://www.caelum.com.br/curso-javascript-jquery/ Õì.Õó P¶†•« Q¶u§í Além de usar os componentes JavaScript que vêm prontos no Bootstrap, podemos baixar outros prontos. São plugins feitos para o jQuery ou para o Bootstrap que trazem novas funcionalidades. A grande riqueza do jQuery é justo sua vasta gama de plugins disponíveis. Há até um diretório no site deles: http://plugins.jquery.com/ Cada plugin é um arquivo JavaScript que você inclui na página e adiciona uma funcionalidade especíca. Muitos exigem que escrevamos um pouco de código pra congurar seu uso; outros são mais plug and play. Você vai precisar consultar a documentação do plugin especíco quando for usar. Õì.Õì Eìu§hih†™«: £¶†• Õ) Umplugin que podemos usar na nossa página é máscaras numéricas para digitar em campos como CPF ou CEP. Isso ajuda bastante o usuário. Para usar esse plugin, basta invocar seu arquivo JavaScript no nal da página do checkout, logo após a chamada do jQuery e do bootstrap.js: script src=js/inputmask-plugin.js/script ó) Cada campo que for usar uma máscara numérica precisa denir o atributo data-mask com o formato a ser usado. No input do CPF, adicione o atributo: data-mask=999.999.999-99 ì) Nos campos de CEP, adicione no input o atributo: data-mask=99999-99 ¦) Nos campos do número do cartão com código de vericação, podemos usar: Capítulo Õì - jQuery - Plugins jQuery - Página óóä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript data-mask=9999 9999 9999 9999 - 999 Õì.Õ¦ Eìu§hih†™« ™£h†™•Z†« Õ) Refaça os exercícios da home da validação da busca e do banner usando jQuery. Tente ver como o código ca bem menor e mais legível. Capítulo Õì - jQuery - Exercícios opcionais - Página óóß

CZ£i±¶™ Õ¦ Integrações com serviçosWeb “Pessoas viviam em fazendas, depois foram viver nas cidades. Agora todos nós vamos viver na Internet” – Sean Parker Õ¦.Õ Wuf ó.þ u †•±u§Zcou« Boa parte do grande poder daWeb, de estarmos conectados o tempo todo, é o de permitir a integração entre as páginas. AWeb nasceu com esse conceito de tudo interligado, por meio dos links. Mas a talWeb ó.þ trouxe ideias aindamais complexas. Interligar páginas e serviços diferentes, criando novos resultados a partir de outras páginas. São mapas do Google Maps espalhados em vários sites por aí. Ou os onipresentes botões de curtir do Face-book. E muitos outros exemplos. Õ¦.ó †€§Z“u« Uma das formas de se fazer esse tipo de integração é com o uso da tag iframe. Ela nos permite embutir o conteúdo de uma outra página no meio da nossa muito facilmente: iframe src=outrapagina.html/iframe Podemos incluir páginas internas ou externas. E quando se trata das externas, é fácil usar esse recurso para incluir componentes reaproveitáveis de outros serviços. Como mapas.

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Õ¦.ì Viou™ u“f¶±†o™ h™“ Y™¶T¶fu O YouTube provê uma integração muito fácil com nossas páginas. Podemos incluir um vídeo qualquer pra ser tocado diretamente em nossa página. Basta entrar no YouTube e copiar o endereço de um iframe que eles disponibilizam para ser embutido na nossa página. Vamos fazer isso em nosso projeto. Õ¦.¦ Eìu§hih†™«: †€§Z“u Õ) Acesse o vídeo institucional da Mirror Fashion: http://youtu.be/TbþäabHE¦hY Vamos embutir o vídeo em nossa página Sobre, no meio do texto explicativo. Para obter o código de embutir no YouTube, localize a opção Share/Compartilhar e vá na aba Embed. Ele vai te dar o código HTML do iframe. iframe width=420 height=315 src=//www.youtube.com/embed/Tb06abHE4hY frameborder=0 allowfullscreen/iframe Copie o código do iframe e cole na página Sobre onde achar melhor. Teste a página. Õ¦.¢ Eìu§hih†™ ™£h†™•Z: G™™uMZ£« Õ) O Google Maps possui recurso parecido de embutir um mapa completo através de um iframe. Abra o GoogleMaps no seu navegador e acesse um endereço que usaremos para o site daMirror Fashion. Clique em compartilhar e copie o código que aparece na opção HTML (é um iframe). Capítulo Õ¦ - Integrações com serviçosWeb - Vídeo embutido com YouTube - Página óóÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó) Na página sobre.html, adicione o iframe copiado no ponto que achar mais conveniente para exibir pro usuário: iframe width=425 height=350 frameborder=0 scrolling=no marginheight=0 marginwidth=0 src=http://maps.google.com.br/maps?q=Jacarezinhoamp;output=embed/iframe Abra a página e veja o mapa lá. Õ¦.ä B™±a™ ou h¶§±†§ o™ FZhuf™™Ž Boa parte dos sites atuais possui a funcionalidade de curtir do Facebook. É um botão simples mas integrado com a rede social que permite aos usuários curtirem a página atual e compartilhar essa informação em seus pers. É uma poderosa ferramenta demarketing, já que permite a recomendação pessoal de produtos e serviços de maneira viral. Incluir essa funcionalidade no nosso site é bastante simples. OFacebook provêumcódigo JavaScript eHTML para copiarmos na nossa página, onde podemos passar diversas congurações. O botão é representado por um div vazio cheio de parâmetros: div class=fb-like data-send=false data-layout=box_count data-width=58 data-show-faces=false/div Mas só esse div vazio, obviamente, não fará o botão aparecer. Precisamos também importar um arquivo JavaScript deles e rodá-lo: div id=fb-root/div script(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = http://connect.facebook.net/pt_BR/all.js#xfbml=1; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));/script Capítulo Õ¦ - Integrações com serviçosWeb - Botão de curtir do Facebook - Página óìþ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Esse código é colocado uma vez só no nal da página. Podemos ter vários botões na mesma página. Melhor que digitar esse código é usar a documentação no site do Facebook que nos permite customizar o botão e já dá o código pronto para ser copiado: https://developers.facebook.com/docs/reference/plugins/like/ Õ¦.ß Eìu§hih†™«: FZhuf™™Ž Õ) Congure o script do Facebook na página de Produto. Antes de fechar a tag body, adicione: div id=fb-root/div script(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = http://connect.facebook.net/pt_BR/all.js#xfbml=1; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));/script ó) O botão em si é um div que devemos colocar na página onde queremos exibi-lo. Para nós, coloque logo após os elementos de título e preço do produto. div class=fb-like data-href=http://mirrorfashion.net/loja data-send=false data-layout=box_count data-width=58 data-show-faces=false/div Teste a página e veja o botão renderizado. ì) (opcional) Posicione o botão melhor na página usando CSS. Õ¦.˜ PZ§Z «Zfu§ “Z†«: O£u•G§Z£„ u ëuf «u“a•±†hZ Na rede social é possível adicionar uma indicação de uma página da Web para que todos os seus amigos possam ver também, mas a essência do compartilhamento não está só em mostrar aos seus amigos o que você está vendo agora. Para o Facebook é muito importante obter informações mais precisas sobre o que é aquilo que você está compartilhando. Capítulo Õ¦ - Integrações com serviçosWeb - Exercícios: Facebook - Página óìÕ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Para garantir que essas informações sejam mais acessíveis, o Facebook criou uma série de pequenas regras que permitem uma integração bem avançada com a rede social, o chamado protocolo OpenGraph. Além do benefício claro de conseguir mostrar mais informações sobre a página que você quer comparti-lhar, a rede social ainda se benecia dessas informações para compor seu perl como consumidor. Essas informações associam o seu perl aos assuntos que você mais compartilha e são utilizadas para campanhas publicitárias e sugestões de conteúdo cada vez mais precisas. Mu±Z ±Z« Para fazer com que sua página seja compatível com essa troca de informações pelo Facebook é necessário que algumas tags sejam inseridas na sua página. A implementação dessas tags partem do princípio que o HTML pode ser estendido, como vimos no capítulo sobre os fundamentos da Internet e XML. meta property=og:title content=Fuzzy Cardigan meta property=og:type content=product meta property=og:url content=http://mirrorfashion.net/loja/produto.html meta property=og:image content=http://mirrorfashion.net/loja/img/produto-detalhe1.png meta property=og:site_name content=Mirror Fashion meta property=og:description content=O Fuzzy Cardigan é fantástico para a meia estação, quando o friozinho começa a chegar. Seu estilo parisiense combina com o charme da estação. As tags meta acima demonstram como as informações sobre determinado produto pode ser disponibilizada no Facebook. Essas informações fazem com que o compartilhamento de um usuário possa mostrar infor-mações para outros que vão levá-los a clicar no conteúdo e compartilhar também. As informações requeridas são: • og:title - o título da informação como ela deve ser compartilhada; • og:type - a categoria à qual o objeto descrito na página deve ser incluído; • og:image - o caminho de uma imagem que será utilizada para exibir o objeto no Facebook; • og:url - o caminho ao qual o usuário será levado ao clicar em um compartilhamento. Outras informações mostradas no exemplo são opcionais. Para uma lista completa de quais os tipos possíveis de categorização de informações, acesse http://developers. facebook.com/docs/opengraph/ktypes Além dessas informações exemplicadas, também é possível indicar um arquivo de áudio em mpì ou de vídeo em žash ou mp¦ para ser exibido diretamente no mural dos usuários que compartilham o conteúdo. Capítulo Õ¦ - Integrações com serviçosWeb - Para saber mais: OpenGraph e web semântica - Página óìó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Quando um usuário compartilha uma página de um projeto seu, e o projeto tem uma uma aplicação regis-trada no Facebook, é possível enviar mensagens de “update” para todas as pessoas que já compartilharam um link seu. Para isso é preciso adicionar o ID da aplicação como meta informação: head !-- informações obrigatórias -- meta property=fb:app_id content=0000000000 /head Para facilitar o compartilhamento é recomendado adicionar um botão de “Like” na página. Se o endereço da sua página for adicionado ao campo de compartilhamento de status de um usuário do Facebook, o me-canismo de compartilhamento vai obter essas informações e mostrar uma prévia ao usuário. Õ¦.É Eìu§hih†™« ™£h†™•Z†«: O£u•G§Z£„ Õ) Adicione as tags doOpenGraph para customizar a forma como a página será compartilhada no Facebook. meta property=og:title content=Fuzzy Cardigan meta property=og:type content=product meta property=og:url content=http://mirrorfashion.net/loja/produto.html meta property=og:image content=http://mirrorfashion.net/loja/img/produto-detalhe1.png meta property=og:site_name content=Mirror Fashion meta property=og:description content=O Fuzzy Cardigan é fantástico para a meia estação, quando o friozinho começa a chegar. Seu estilo parisiense combina com o charme da estação. Teste novamente o compartilhamento da página no Facebook! Õ¦.Õþ PZ§Z «Zfu§ “Z†«: Të†±±u§ Você também pode acrescentar o botão de postar tweet. Basta seguir a documentação do Twitter: https://dev.twitter.com/docs/tweet-button O botão em si é um link que será transformado pelo script: a href=https://twitter.com/share class=twitter-share-button data-count=verticalTweet/a E o script deve ser colocado no nal da página também: Capítulo Õ¦ - Integrações com serviçosWeb - Exercícios opcionais: OpenGraph - Página óìì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript script !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){js=d.createElement(s);js.id=id; js.src=http://platform.twitter.com/widgets.js; fjs.parentNode.insertBefore(js,fjs);}}(document,script,twitter-wjs); /script Õ¦.ÕÕ PZ§Z «Zfu§ “Z†«: G™™u+ Podemos também colocar o botão de +Õ do Google+. Para obter o código, basta ir em: http://www.google.com/webmasters/+Õ/button/ O botão é um div vazio, parecido com o do Facebook: div class=g-plusone data-annotation=inline/div E o script deve ser colocado no nal da página: script type=text/javascript window.___gcfg = {lang: 'pt-BR'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); /script Além disso, o Google+ possui metadados próprios diferentes daqueles do OpenGraph: !-- Update your html tag to include the itemscope and itemtype attributes -- html itemscope itemtype=http://schema.org/Product !-- Add the following three tags inside head -- Capítulo Õ¦ - Integrações com serviçosWeb - Para saber mais: Google+ - Página óì¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript meta itemprop=name content=Fuzzy Cardigan meta itemprop=description content=O Fuzzy Cardigan é fantástico para a meia estação, quando o friozinho começa a chegar. Seu estilo parisiense combina com o charme da estação. meta itemprop=image content=http://mirrorfashion.net/loja/img/produto-detalhe1.png Õ¦.Õó Eìu§hih†™« ™£h†™•Z†«: Të†±±u§ u G™™u+ Õ) Acrescente o botão do Twitter na página. Obtenha o código em: https://dev.twitter.com/docs/ tweet-button Ou use o botão vertical com: a href=https://twitter.com/share class=twitter-share-button data-count=verticalTweet/a Além disso, no nal da página, importe o script do Twitter: script !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){js=d.createElement(s);js.id=id; js.src=http://platform.twitter.com/widgets.js; fjs.parentNode.insertBefore(js,fjs);}}(document,script,twitter-wjs); /script ó) Coloque também o +Õ do Google, cujo código está em: http://www.google.com/webmasters/+Õ/button/ Õ¦.Õì F™•±u« h¶«±™“†ñZoZ« h™“ @€™•±-€Zhu Fontes na Web sempre foram um problema. Só podemos declarar no font-family fontes que estejam dis-poníveis na máquina quando o usuário visualizar a página, o que restringe bastante as opções. Porém, desde o CSS ó.Õ é possível incorporar novas fontes declarando a propriedade @font-face indicando a URL onde o navegador pode baixar aquela fonte: @font-face { font-family: Minha Fonte; src: url(minhafonte.ttf); } E, surpreendentemente, essa funcionalidade existe desde o Internet Explorer ¦. Capítulo Õ¦ - Integrações com serviçosWeb - Exercícios opcionais: Twitter e Google+ - Página óì¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Mas nem tudo são žores. O suporte entre navegadores é um imenso problema. Cada um suporta um tipo de arquivo. Fontes true type, por exemplo, padrão entre designers, só é suportado a partir do IEÉ. O IE usava fontes em formato EOT, outros navegadores TTF, o iPhone só SVG e ainda surgiu um terceiro formato WOFF, que agora faz parte da especicação. Õ¦.Õ¦ Su§ê†c™« ou ëuf €™•±« Lidar com essas diferenças entre navegadores é um problema, e isso sem contar a diculdade de se obter as fontes legalmente em vários formatos e servi-las corretamente e de maneira otimizada. Ultimamente surgiramserviços de web fonts de terceiros, que oferecem toda a infraestrutura necessária para usarmos fontes na Web sem problemas e sem precisarmos instalar nada. As fontes são servidas direto dos servidores do serviço em uso da maneira correta e rápida. Um dos mais famoso é o Typekit: http://typekit.com/ É um serviço pago mas com preços acessíveis e planos com todo tipo de fonte. Eles têm um catálogo imenso com fontes famosas e de altíssima qualidade. E a alternativa gratuita mais famosa é o GoogleWeb Fonts: https://www.google.com/fonts É provido pelo Google apenas com fontes abertas e gratuitas. Seu catálogo é, portanto, mais limitado, mas possui excelentes opções e émuito fácil de ser integrado a uma páginaWeb, bastando importar um CSS deles e usar a fonte. Õ¦.Õ¢ Eìu§hih†™«: G™™uWuf F™•±« Õ) Vamos usar duas fontes do Google Web Fonts na nossa página inicial. Uma fonte base PT Sans e outra para os títulos dos painéis, Bad Script. Importe as fontes via CSS no topo do nosso Index: link href='http://fonts.googleapis.com/css?family=PT+Sans|Bad+Script' rel='stylesheet' Use as fontes no estilos.css referenciando-as pelo nome: body { font-family: 'PT Sans', sans-serif; } .painel h2 { font-family: 'Bad Script', sans-serif; } Abra a página no navegador e veja as mudanças visuais. Capítulo Õ¦ - Integrações com serviçosWeb - Serviços de web fonts - Página óìä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ó) (opcional)Navegue no catálogo de fontes doGoogle em https://www.google.com/webfonts e escolhauma outra fonte para usarmos no título da página de produtos. Capítulo Õ¦ - Integrações com serviçosWeb - Exercícios: GoogleWeb Fonts - Página óìß

CZ£i±¶™ Õ¢ Otimizações de front-end “A esperança...: um sonho feito de despertares” – Aristóteles Estudos de diversas empresas ao redor do mundo já provaram que sites rápidos, além de mais prazerosos de usar, trazem mais conversões, vendas e usuários felizes. A Amazon, por exemplo, descobriu que cada Õþþms de melhora na velocidade de carregamento da página trazia um crescimento de ÕÛ em seu faturamento. O Yahoo! provou que cada ¦þþms de melhora em sua homepage provoca um aumento de ÉÛ no tráfego dos usuários. A Mozilla tornou suas páginas ó.ós mais rápidas e, com isso, causou um aumento de Õ¢Û nos downloads do Firefox. São äþ milhões de downloads a mais por ano. O Google descobriu que aumentar o tempo de carregamento da página de busca de þ.¦s para þ.És ao subir o número de resultados de Õþ para ìþ diminuía o tráfego em óþÛ. Até a Caelum já fez experimentos em seu Site. No nosso caso, uma página que tinha tempo de carregamento de äs em comparação com uma de ós causava uma perda de Õ˜Û na taxa de conversões. O±†“†ñZca™ e h™†«Z ou £§™§Z“Zo™§u« Um dos maiores erros a se cometer com relação à performance é pensar que é um problema exclusivo da programação da parte server-side do projeto. Certamente um código ruim no servidor pode causar imensos gargalos de performance. Uma busca mal feita no banco de dados, um algoritmo pesado de executar etc. Na esmagadoramaioria das situações, a realidade é que o processamento server-side é responsável pormenos de ÕþÛ do tempo total de carregamento de uma página. A maior parte dos gargalos de performance está em práticas client-side!

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Umestudo que zemos comÕþþ Sites de participantes de uma conferência de tecnologia de alto nível técnico - a QCon SP de óþÕÕ - trouxe dados interessantes. Nessa amostra, o tempomédio de carregamento da página era de És (com casos bem graves, demorando mais de ìþs). Mesmo assim, ß¢Û dos Sites executavam em menos de ¦þþms no servidor. Os outros ˜s são gastos em outros pontos, muito ligados a práticas client-side que veremos. Õ¢.Õ HTML u HTTP - C™“™ €¶•h†™•Z ZW™§oW†ouWuf¥ Apesar de que conhecer profundamente o funcionamento do protocolo HTTP não seja estritamente neces-sário para a criação de páginasWeb, entender como as coisas funcionam internamente nos ajuda a entender uma série de técnicas e conceitos, resultando em maior qualidade na criação de páginas, além de contribuir para a conança do programador ao enfrentar um novo desao. A primeira coisa que devemos levar em consideração ao conhecer o ciclo de comunicação entre o navegador (cliente) e o servidor, é que o cliente deve conhecer a localização da página (recurso) que ele deseja obter e exibir ao usuário nal. O cliente deve ser informado de qual o endereço do recurso necessário em deter-minado momento, normalmente o usuário nal provê essa informação entrando um endereço na barra de endereços do navegador, ou clicando em um link. Esse endereço é conhecido como URL (Universal Resource Locator), por exemplo: http://209.85.227.121:80/index.html O endereço exemplicado é composto por ¦ partes básicas. A primeira delas é o protocolo de comunicação a ser utilizado para a obtenção do recurso. No exemplo acima o protocolo requerido é oHTTP.Acomunicação entre um cliente (geralmente o navegador) e um servidor pode ser feita com o uso de diversos protocolos, por exemplo o FTP (File Transfer Protocol) para a transferência de arquivos, ou o protocolo le, de leitura direta de arquivo quando desejamos obter um recurso acessível diretamente pelo computador sem utilizar uma conexão com um servidorWeb. Hoje em dia, os navegadores não precisam que explicitemos o protocolo HTTP em sua barra de endereços, sendo ele o padrão para as requisições de páginasWeb. A segunda e terceira partes, entre // e /, são o endereço IP do servidor (onde está hospedado o recurso que queremos) e a porta de comunicação com o servidor. Os servidores Web utilizam a porta ˜þ por padrão, então no exemplo poderíamos ter omitido essa informação que a comunicação seria feita com sucesso. O endereço IP é um código composto de ¦ octetos representados em formato decimal separados por um ponto, é um número um tanto difícil de ser memorizado, (a próxima geração de endereços IP, criada para evitar o m dos endereços disponíveis é formada por ˜ grupos de ¦ dígitos hexadecimais separados por “:”, por exemplo: 2001:0db8:85a3:08d3:1319:8a2e:0370:7344) por isso aWeb utiliza servidores de nomeação de domínios (DNS), para que o usuário nal possa informar um nome em vez de um número e uma porta, por exemplo www.caelum.com.br. Capítulo Õ¢ - Otimizações de front-end - HTML e HTTP - Como funciona aWorldWideWeb? - Página óìÉ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript A quarta parte é o caminho do recurso que desejamos obter dentro do servidor. No nosso exemplo estamos solicitando o arquivo index.html, que é o nome padrão de arquivo para a página inicial de um Site, e, nesse caso, também poderia ser omitido. A adoção desses valores padrões permite que para obtermos a página inicial do site da Caelum, por exemplo, os usuários nais digitem somente www.caelum.com.br na barra de endereços de seu navegador. O h†h™ HTTP Conhecemos um pouco sobre URLs, e as utilizaremos quando formos adicionar links e recursos externos em nossos documentos, mas o que acontece quando clicamos em um link ou digitamos um endereço no na-vegador e clicamos em “ir? Essas ações disparamuma chamada, dando início ao ciclo HTTP. Essa chamada é o que chamamos de request (requisição). A correta comunicação entre os dois lados do ciclo depende de uma série de informações. UmHTTP request leva consigo todos os dados necessários para que o lado do servidor tome a decisão correta sobre o que fazer. Existem algumas ferramentas que permitem que observemos quais são essas informações. O protocolo HTTP pode ser utilizado por uma série de aplicações, para uma série de nalidades. Nosso foco é no uso do HTTP para páginas da Web que podemos acessar de um navegador. Alguns navegadores incluem ferramentas de inspeção da página em exibição, e a maioria dessas ferramentas consegue nos mos-trar o conteúdo da requisição HTTP. Uma dessas ferramentas é o complemento Firebug, disponível para o navegador Firefox. Na imagem estão destacadas as informações mais relevantes da requisição. A primeira delas é a palavra GET. GET é um dos métodos suportados pelo protocolo HTTP para realizar a comunicação, e ele deve ser utilizado quando queremos obter um recurso que o servidor tem acesso. Caso o servidor encontre o recurso que queremos, ele retorna para o cliente uma response (resposta) contendo o recurso que desejamos. Outras informações importantes são o endereço do recurso que desejamos obter (Host) e o tipo de recurso que o cliente espera obter (Accept). No exemplo, esperamos encontrar uma página HTML pelo endereço www.caelum.com.br. Com essas informações, o servidor processa o pedido e prepara uma response (resposta). Essa resposta contém uma série de informações importantes para que o cliente possa tomar as decisões necessárias e, no caso de sucesso na comunicação, exibir o recurso para o usuário. Capítulo Õ¢ - Otimizações de front-end - HTML e HTTP - Como funciona aWorldWideWeb? - Página ó¦þ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript As informações mais importantes, no nosso caso, são o código da resposta e o tipo do recurso encontrado (Content-Type). No nosso exemplo, o código óþþ indica que o recurso foi localizado comsucesso e incluído na resposta. Todas essas informações que vimos até aqui fazem parte dos cabeçalhos da requisição e da resposta. São informações irrelevantes para o usuário, porém essenciais para o correto tratamento das informações solici-tadas. As informações que serão exibidas no navegador para o usuário estão contidas no corpo da resposta. No nosso exemplo, assim como em toda requisição solicitando uma páginaWeb, o corpo da resposta contém as informações marcadas para exibição correta no navegador. Õ¢.ó P§†•hi£†™« ou £§™§Z“Zca™ o†«±§†f¶ioZ Uma página Web é uma aplicação distribuída. Isso signica que há uma comunicação via rede entre dois pontos. No caso, o navegador e o servidor da página. E, como toda aplicação distribuída, há alguns princípios básicos de performance. Quando há comunicação remota envolvida, em geral, queremos: Diminuir o volume de dados trafegados entre as partes. e Diminuir o número de chamadas remotas. Õ¢.ì Fu§§Z“u•±Z« ou o†Z•o«±†h™ - YS™ë u PZuS£uuo O primeiro passo é saber o que melhorar. Há diversas boas práticas pregadas na literatura de performance Web. Melhor ainda é a existência ferramentas automatizadas para diagnóstico que analisamsua página e dão dicas sobre o quê e como melhorar. Há até uma nota de þ a Õþþ para você saber o quão bem está nas práticas de otimização. Capítulo Õ¢ - Otimizações de front-end - Princípios de programação distribuída - Página ó¦Õ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript As mais famosas ferramentas são duas extensões, a YSlow feita pelo pessoal do Yahoo! e a PageSpeed feita pelo Google. Ambas são extensões para o Firefox e para Chrome - mas rodam melhor no Firefox. Para instalá-las, primeiramente, você vai precisar do Firebug, depois é só baixá-las nos respectivos sites: http://developer.yahoo.com/yslow/ http://code.google.com/speed/page-speed/download.html O PageSpeed tem até uma versão online que analisa suas páginas que já estejam publicadas em algum ende-reço na internet: https://developers.google.com/pagespeed/ YS™ë Abra o Firebug e clique no YSlow. Ele te mostra uma nota para as otimizações da página e sugestões do que melhorar. Dê uma olhada nas regras. Note que há algumas que envolvem programação no servidor, como congurar compressão GZIP ou acertar os headers HTTP. É uma boa conversar comos programadores do projeto para também fazerem esses acertos no servidor, além do que você já vai fazer no client-side. Várias regras dizem respeito a otimizações que já podemos implementar como comprimir/minicar nossos CSS e JavaScript, algo que veremos no tópico seguinte. PZuS£uuo Abra o Firebug e vá na aba do PageSpeed. Ele lhe mostra uma nota para a página e diversas práticas de otimização. Aquelas que estão em vermelho são as que você deveria fazermas não fez. Amarelos são algumas sugestões e verdes são as que você está bem - mas às vezes há mais sugestões até nessas. PZ§Z «Zfu§ “Z†«: WufPZuTu«±.™§ Outra ferramenta interessante e online é a WebPageTest.org. Ela também nos dá notas e sugestões de me-lhoria. Um diferencial bem interessante é que ela executa a página em navegadores reais em diversos lugares domundo e nos dámétricas de tempo de carregamento, e até um vídeomostrando a performance de acordo com o tempo. Se você já tem a página publicada em algum endereço, é bem interessante testar essa ferramenta também. Õ¢.¦ C™“£§u««a™ u “†•†€†hZca™ ou CSS u JZêZSh§†£± Durante todo o curso, aprendemos diversas boas práticas de codicação CSS e JavaScript. E, como toda programação, um ponto importante é manter a legibilidade do código. Dar bons nomes a variáveis, escrever bons comentários, escrever código identado, com bom espaçamento visual etc. Capítulo Õ¢ - Otimizações de front-end - Compressão e minicação de CSS e JavaScript - Página ó¦ó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Entretanto, nada disso é necessário no momento do navegador renderizar a página. Um comentário no código é completamente inútil na hora da execução. Assim como espaços, identação ou nomes de variáveis legíveis. Mais que isso, todas essas práticas adicionam bytes e mais bytes aos arquivos CSS e JavaScript. Arquivos esses que vão ser baixados pelos navegadores de todos os nossos usuários com o único objetivo de executá-los. Porque então gastar dados trafegando comentários e outras coisas inúteis? Uma otimização muito importante e extremamente fácil de se implementar com as ferramentas atuais é o que chamamos de minicação dos arquivos CSS e JavaScript. Rodamos um programa compressor nos nossos arquivos para tirar todos esses bytes desnecessários para simples execução. O resultado são arquivos CSS e JavaScript completamente idênticos em funcionalidade mas sem bytes de comentários, espaços etc. Até variáveis longas são reescritas com nomes mais curtos - como apenas ‘a’, ‘b’ etc. Mas repare que não estamos defendendo que você deva escrever seu código retirando comentários, identação etc. A boa prática continua sendo escrever código legível e bem documentado. Queremos apenas que, antes de colocar o site no ar, os arquivos sejam minicados. E, com as ferramentas automáticas de hoje em dia, é muito fácil fazer isso. YUI C™“£§u««™§ Há diversas ferramentas para compressão de CSS e JavaScript. Uma das mais famosas é o YUI Compressor do Yahoo!. Por ser em Java, é multiplataforma e fácil de se usar. Ele comprime tanto código CSS quanto código JavaScript. Você pode baixá-lo em http://developer.yahoo.com/yui/compressor/ Ele é uma ferramenta de linha de comando, o que torna muito fácil automatizar sua execução antes do site ser colocado no ar, por exemplo. Usá-lo é bem simples: java -jar yuicompressor-x.y.z.jar script.js -o script-min.js Este comando vai ler o arquivo script.js, minicar seu conteúdo e gravar o resultado em script-min.js. O mesmo poderia ser feito com arquivos CSS. Tu«±Z•o™ ™•†•u Diversos sites oferecem uma interface Web para o YUI - e outros compressores. São úteis para você testar e ver logo o impacto sem instalar nada, mas são mais chatos para se automatizar. http://refresh-sf.com/yui/ Capítulo Õ¢ - Otimizações de front-end - Compressão e minicação de CSS e JavaScript - Página ó¦ì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Õ¢.¢ C™“£§u««a™ ou †“Zu•« Imagens são também fortes candidatas a otimizações. Quão importante será fazer isso? O HTTPArchive.org armazena informações históricas coletadas mensalmente sobre os Õß mil sites mais acessados da Internet mundial. Com base nelas, compila alguns grácos e dados interessantes. E, com relação a imagens, os estudos mostram que mais de äþÛ do peso de uma página está nelas: Figura Õ¢.Õ: Participação de cada tipo de arquivo no tamanho total das páginas Se conseguir otimizar um pouco as imagens, o resultado nal será de grande impacto para a página! O±†“†ñZcou« ™««í A otimizaçãomais direta relacionada a isso é diminuir a qualidade das imagens. Quando você salva um JPG, pode escolher o grau de compressão, obtendo imagens menores mas sacricando um pouco a qualidade. Chamamos esse tipo de otimização 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 otimizações podem acabar sendo imperceptíveis para o olho humano - ainda mais o olho ágil e desatento dos usuários Web que varrem as páginas rapidamente e podem nem perceber que uma imagem está com menos denição. Você pode otimizar fotos JPG manualmente no seu editor de imagens favorito e chegar a um meio termo entre qualidade e tamanho nal. Ou então, pode tentar o excelente serviço online JPEGMini que promete diminuir o tamanho das suas imagens diminuindo a qualidade de maneira praticamente imperceptível. Eles usamum algoritmo que promete simular as características da percepção do olho humano, o que lhes permite piorar a qualidade da imagem apenas em pontos que são pouco percebidos pelo nosso olhar. http://www.jpegmini.com/ Capítulo Õ¢ - Otimizações de front-end - Compressão de imagens - Página ó¦¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Du«†• ™±†“†ñZo™ Outra estratégia boa é pensar bem na hora de fazer o design - ou convencer o designer a pensar bem. Será que realmente precisamos daquele monte de imagens na página? Será que aquele ícone precisa ser truecolor ou podia ser salvo em grayscale? Um ponto importante é que o crescimento e adoção de CSSì tem trazido novas possibilidades de design em CSS puro que antes só erampossíveis comimagens. Bordas redondas, gradientes, sombras, etc. Usando CSS, conseguimos o mesmo efeito evitando colocar mais imagens na página. Pense bem no seu design e na forma como o codica. Ele pode ser um fator de peso na performance da sua página. O±†“†ñZcou« ™««u«« A otimização mais simples e ecaz com imagens é o que chamamos de compressão lossless. É diminuir o tamanho da imagem sem perder absolutamente nada na qualidade. Isso é possível porque os formatos da Web (JPEG, PNG, GIF) em geral guardam em seus arquivos mais informações do que as necessárias para renderizar a imagem. Uma foto JPEG por exemplo tem diversos metadados embutidos como horário da foto e até coordenadas de GPS, se a câmera suportar essa funciona-lidade. Ou ainda PNG exportados pelos editores como Photoshop levam diversos metadados extra e muitas vezes até uma miniatura da imagem embutida no mesmo arquivo. Tudo isso pode ser interessante para se organizar os arquivos pessoais, montar seus álbuns etc. Mas são completamente irrelevantes para a renderização na página. Podemos usar ferramentas automáticas para retirar esses bytes extra de imagens sem perda alguma de qua-lidade. A ferramenta mais famosa é o Smush.it do Yahoo: http://smush.it E o próprio JPEGMini já faz isso também para nossas fotos JPEG. E ™€€†•u¥ Usar o Smush.it é uma das formasmais simples e ecientes de se otimizar as imagens. Caso você queira usar algo direto no computador, recomendamos dois programas com interfaces grácas locais: MAC: http://imageoptim.pornel.net/Windows: http://luci.criosweb.ro/riot/ Se o objetivo é automatizar a otimização, você provavelmente vai querer ferramentas de linha de comando. E há várias delas disponíveis (inclusive as usadas pelo Smush.it). Procure por: optipng, pngout, pngcrush, advpng, jpegoptim, gifsicle. Capítulo Õ¢ - Otimizações de front-end - Compressão de imagens - Página ó¦¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Õ¢.ä D†“†•¶†§ ™ •u“u§™ ou §u¤¶u«±« Todas as práticas que vimos até agora tinham como objetivo diminuir o tamanho das requisições, o volume do tráfego de dados. Há ainda outro ponto que levantamos sobre aplicações distribuídas: diminuir o número total de requests. No YSlow, na aba Components, você pode ver todos os componentes de página que acabou de fazer. Cada imagem, arquivo JavaScript, CSS e até vídeos e Flash são requisições feitas ao servidor. Isso sem pensar no próprio HTML da página e em possíveis requests extras numa aplicação Ajax. Cada requisição envolve uma chamada para o servidor o que gera um overhead bastante grande. A maior parte do tempo de um request é gasto em tarefas de rede (DNS, SSL, TCP/IP etc). Se você já otimizou o tamanho dos requests, verá que uma pequena parte apenas é gasta no download dos bytes. Fora o próprio gargalo de rede, existe uma limitação no número de requisições que um navegador faz simul-taneamente a um mesmo servidor. Esse número varia bastante, mas chega a ser bem baixo em navegadores antigos (apenas ó conexões). Hoje, nos navegadoresmaismodernos, gira em torno de ä a ˜ conexões. Parece um número alto - e realmente foi uma grande evolução -, mas se você começar a contar todos os arquivos externos que está usando, vai ver que há chances de uma página mediana fazer dezenas de requests. O HTTPArchive reporta uma média de mais de ˜þ requests sendo feitos na página: Figura Õ¢.ó: Número e volume médio de requests Ou seja, mesmo com ˜ conexões simultâneas, o volume de requests é bem maior o que vai atrasar o car-regamento total da página. Em alguns casos (como arquivo JS), o navegador ca travado até que todos os downloads terminem. Diminuir o número de requisições é essencial. Capítulo Õ¢ - Otimizações de front-end - Diminuir o número de requests - Página ó¦ä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Õ¢.ß J¶•±Z§ Z§¤¶†ê™« CSS u JS No caso de arquivos CSS e JavaScript, a boa prática é juntar diversos arquivos em um número menor para minimizar requisições. Ao usar jQuery, por exemplo, importamos a biblioteca em si e, em geral, criamos um script a mais da nossa aplicação que vai usá-lo. É muito comum também (como veremos no curso WD-¦ß) usarmos diversos plu-gins como jQuery para fazer várias tarefas avançadas. São todos requests amais que vão sobrecarregar nossa página. Se vamos usar, por exemplo, jQuery comì plugins emais ó arquivos da aplicação, poderíamos simplesmente juntar todos em Õ ou ó arquivos. Novamente, a boa prática não é escrever um código todo misturado de uma vez só em um arquivo de milhares de linhas. Faça seu código com boas práticas e execute alguma rotina que junte automaticamente esses arquivos pra você antes de subir no servidor. O próprio jQuery faz isso. Usamos um arquivo chamado jquery.jsmas se você for olhar o projeto ocial, verá que esse é apenas um arquivo gerado a partir de outros óó arquivos separados, que foramcriados demaneira independente para melhor organizar e encapsular as funcionalidades do projeto. Amesma dica vale para arquivos CSS. Você pode organizar seu código em arquivos diferentes (por exemplo, um com tipograa, outro com estrutura de layout e outro com estilos visuais), porém, na hora de subir a aplicação no ar, a boa prática é diminuir o número de arquivos e juntar quantos puder. Õ¢.˜ I“Zu S£§†±u« Juntar arquivos texto como JS e CSS é muito fácil, basta copiar os conteúdos seguidamente. E as imagens? Já vimos que elas costumam ser o componente mais pesado das páginas. Em designs complexos, são responsá-veis também por um grande número de requisições. Conseguimos juntar imagens? É possível, e essa técnica é chamada de sprites, que é um processo muito mais complicado. Juntar imagens consiste em criar um arquivo só e posicionar diversas imagens dentro. Depois, usando CSS, “recorta-se” os pedaços da imagem que devem ser mostradas em cada parte da página. Diversos grandes sites usam essa técnica. O Google por exemplo, tem uma única imagem em sua home: Capítulo Õ¢ - Otimizações de front-end - Juntar arquivos CSS e JS - Página ó¦ß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Criar a imagem é o primeiro passo, e um dos mais chatos. Há algumas ferramentas que tentam automa-tizar (como o sprite.me), mas em geral o processo é bastante manual. Abre-se um editor de imagens e se posicionam as imagens para obter o resultado nal. E, principalmente, nesse processo de juntar as imagens no editor, devemos prestar bastante atenção no posi-cionamento que precisa ser anotado precisamente. A posição (X,Y) de cada imagem dentro da sprite, além do tamanho (width, height) de cada uma. Essas informações serão valiosas para escrever o CSS. Utilizamos a propriedade background do CSS do elemento como na técnica de Image Replacement, mas é preciso especicar a posição da imagem em relação ao ponto inicial do elemento. PZ§Z «Zfu§ “Z†« - DZ±Z URI Ainda pensando em minimizar o número de requisições para imagens, háuma outra técnica conhecida como Data URIs. A ideia é que você pode embutir conteúdos binários (como imagens) dentro de arquivos textos (como páginas HTML ou arquivos CSS). Basta converter os bytes da imagem para uma string comum que segue o formato de codicação chamado Base ä¦. Esse processo de conversão é feito por algum programa que converta para baseä¦ ou diretamente no servidor por meio de código Java, PHP etc. Há alguns serviços online que ajudam nessa tarefa, também. Imagine que queremos colocar o seguinte logo da Caelum em nossa página: Capítulo Õ¢ - Otimizações de front-end - Image Sprites - Página ó¦˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Com HTML normal, faríamos: img src=logo-caelum.png Isso vai causar uma requisição para o arquivo logo-caelum.png. Usando data URIs, vamos embutir o código baseä¦ da imagem direto na tag HTML: img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKEAAAAyCAQAAACeqnPQAAA JAUlEQVRo3u3baZBVxRXA8d8wbAO4oiKKC4pGo7hQYpByCcYF3LXigiAhBgWNWmiMUVFBQEstU4UEIz GKC6jjluAeDaWJo5aCREARcIuAiCiMghGBYTj58C6P++C9YWAWBDn3w3u3u2/f7v/te/qc032hicEmq xC1fFSYbLAmNnlpYmKtw0sfEzd9iINrB1XzOD5uibdieayU72N07BnC4Gq1o73rParMx2Z5we16O0Tj WuxnS93d6sC6QDi5pvCOiKHxeiyLfDI6hMlraUGJa32Ut+5P9VBUS/08Rwhd6wJhjg5svU7wWsRF8V5 UJd9ndGJV0svsVJ2V5vl8NUVw9A8dYaq5e8eYauP7SQyPhbF2EaIKPTwmW2OZ/tppmLx0XfT3mBVJ3i UbBcLd4rV4P5bEa3HdWvEdGi/FiqieVIGwpdeSGhc4K2+JTt4RvtVqIxmF/SIiYnY0rBLf1nFXVEb1p SDCYuOSOp/TumDril3myo3kRa7eKOwZ82LdpCDCm5M6f6t+5IegC/eJl2PdpQDCjomeu49NCmFVM/Kl sTSi9hD+QwhzbL3JIcx/FMfwWF/Ji7BzUvPJ/CgQtohnI2oX4V1CeJIfBcI2MSmithFmjOkLfhQIO8S ciNpGuH9S+yE/AoTtY1FE7SM8JQmFNdnkEbaKmRF1gfBCIUxZz/YeZpC73Ki7HfLml+isvxF+7ySNqk BY4md2Xu3atg5Pne3scOzlEnc4x1bZ6452o5udkTijhRGWxFsRdYPwGiE8sZ4In8u2cYGzV8srdoNlq V7M1KcAwp9bLpyWc/VE4c3s2ShhqkGWJnWV64COyrO1T9K+CoRF8XhEXSHsJ4R31gtgkX8b540kvrRU 21TebonPvcIM48xM+nJHEi7LRdhVrIFweg7C0jWolOtrYU7KLNsWRHhzRN0hPFUIy2oUUN3SQCHclk1 pYqpQ6U7bJSnHmiWEq2uAcIVb7KyNodmo0UeOtqWjTBXC8AIIe0fUJcIDk/scXCMd3szXwuPZ85uFyp SuK9Ldf4Xwne3XG+Ffsuejkwe/d1ZvLhMm5EW4eyyuW4RFvhDC+esBbjeXeshwPTTylPBKkr6X5cI12 XJHmZD053kH1GAU7pc97yaEZ1Lly4QleRGOjahbhNwrhIfWGeB5FmXb+R/vCP9KcvoIFZqBfT2dlBmv S4HppHoIK1PKZh8h3J4q//DKvq0G8ISIukd4THK3dQvpn5FV4h9m27sS4UhhPFoZabkQPnRWzrrL+iB cksrdXQiDUin350XYND6qD4S8KoRPNK82wK18LsxNLLd9vZ+D8FXhJTf4VgjzXJxjE9YnwoER9YPwiO SOw6qN8HQh9Mue/zwH4X3ZPnxroBZ5rq8fhG3j+/pCyPBkxe6X1UQ4RFhim9Sk9GkK4cXJfDmigM9SH YTzawHhoxH1h7CRN5L7PpB1nvLJKQaCW4XFtkzlfJRCmDGUXl3j9S2E8Egh3JLK30PUGOGOUVGfCGlt UnLv2Y7NW6KDV4TQBWcKkXLYDs95kVfO8mNWW7pvrkFehFtZIcxKlX6kFhBeE1G/CGmRNT/CM3pn/Yo SHV2gNOsRPIotzBU+S7Z07JrgX4Vwa3MS37tbYoq0NMBX9s+LMKP5wjAt0DYxUGqGsCg+qX+ENHCZ+S llstAM0xKzJJJZu3syVnomLtcUE1QIK3IQcmjijYSFXk6cu9C7AMKuKhNt/LUQlptXQ4THRWwIhJnxc 5t5eX31+S7P8aT7WJLNm+Ci1RCyRdKtVdtLntGhAEIuTkygTNTnGGNriPCJDYcwMxqP8EcvetcCC73h bpfqYos1yu2tv8fd7dcaa+v0PPPvns41zLNGuMSuqfR9dbffqhgfaOVapR7UR2uc5DjbZ/NOcKJdcuz S3+ioJJVyvJMyd6jDqWQdEG7UkqwSx2aENUNYuhlhTRHO3oywZgh3iahvhP2zR6cqW3dIjfYWbuvqTGi +FqSxgxXbI98utBDn1D/CUKZUqdK1+Mhne74G3d5H2KeWEL7pJXNM1yYvwuEbAuFpa6Q1zf4ryrtdqTj HJGmWd6RUhbBpKqco50xOTrqWFkm5Btoq1iyV11hxCuHbGxphmUHeV+Fvyciba7xJ2qCXMnTwmSt8rVx PcIDplvhstYX1O80zLWdUr0Q4wIOesswMuyVqZIHFXrGjYtOcAAa4H0PM9aV7NEaxMcr9z1VglHnmJMt dDY2x0HdGZsIaoc5swioR3pvowm0w3ccOtJ/lOmtisb64yvXoZzo6CaNsY6gPwFRDNXeTuakwwXne1Ng RylPRnJUIb1HpLC1NNATtLXKUnbxqGO5zN5joV3b1thIlvtINV3hNc+0st6dOXtDQDiochN+ZpK1Dzc8 MhBCxIRC+ZayxxtoZ010OPtADE43IBq1WIdwGnVXIuFrbo3XOKuCj7neYQyzVOQ/CF8Fwo3GlceBSM9D NHOxgSVZ5/MIyvTEuaVUnLZOXuUfiIo5zHXgqs8K3oRCmX+TpSTR6ur7YV6m5HvHTHIRNk98mzrUguW6 BXtk6pvg0eSj5EI4Fw/wdj7sTmRWcxhopd7Ceydrchd4zyhf64hPdU238g2lGWOxUfOtMcJM3fngI+2X V+LPmKMqDsKnjhO3QQqXjsnWUGgIOTUW210Q4Fn/1T3C+8kTLXe9hvXC27+yNmfphYrKo2sfu+vvKjhp Capítulo Õ¢ - Otimizações de front-end - Image Sprites - Página ó¦É

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Y4jR8YgB4MKO9K9RBuH+lFPx0J1zuIAc5SOvVEDY0y2G43sd5R2FT21roVi0MsSg1c/czwdZ2tzi12Sg /wh4WOdYuyjwGunrbXFvhahPQUbgIVxpvR0daaid/9iROSx79KFPspbO5+sJkMbrOEBb8gOxrC8z3pXk GoCx5ITO/p3jdDO9on5qRv9Ak9Xuybyz1jdNzDJonlfvYOam0dr7QDgOSbfGD3YcG/qTSUm8nkZxGPkj WtNuZapqnXWO8EiVGKleuHzr60LtGu82LaKXMMpUeyOjswWLPGF0HI3EdP2PMlbXtPSzWZpVdltfyq1q aF/wcqGXqfyNPprynXD9nu1WhuM0f0xaWZrr6vjoPZvMn3YXkRPe4bG2F/g9S7CNMkQtgRwAAAABJRU5 ErkJggg== O resultado é assustador e parece até pior com relação a tamanho, mas lembre-se de que estamos economi-zando os bytes da imagem. E essa string dentro do HTML, após o GZIP, costuma ter um tamanho muito próximo ao que seria a imagem binária original. Você pode usar essa técnica também em arquivos CSS, dentro de background-image por exemplo. Omaior problema dessa técnica é que ela não é suportada em todos os navegadores. Todos osmaismodernos suportam, já o IEä e IEß e mesmo o IE˜ possui algumas limitações. Além disso, o processo de geração dessa string baseä¦ costuma exigir um pouco de conhecimento de programação no servidor. Õ¢.É PZ§Z «Zfu§ “Z†« A Caelum tem vários posts no Blog sobre o assunto, sendo o principal: http://blog.caelum.com.br/por-uma-web-mais-rapida-óä-tecnicas-de-otimizacao-de-sites/ Õ¢.Õþ Eìu§hih†™«: ™±†“†ñZcou«Wuf Õ) Rode as ferramentas de análise do PageSpeed Online e doWebPageTest: https://developers.google.com/pagespeed/ http://webpagetest.org/ Analise o resultado. Veja possíveis pontos de melhora. ó) Nossos banners principais na home são fotograas imensas, mas estão em PNG. O formato ideal para eles é JPG, que traz uma qualidade satisfatória com muito menos kbytes. Faça a conversão dos banners de PNG para JPG e compare os resultados. ì) Comprima as imagens do projeto para economizarmos no tamanho. Os PNGs e GIFs podem ser comprimidos sem perdas no Smush.it do Yahoo: http://smushit.com Um serviço alternativo é o http://kraken.io Os JPEGs podem ser comprimidos diminuindo sua qualidade e o seu tamanho sem muita perda de qua-lidade. Uma ótima ferramenta pra isso é o JPEGMini: http://jpegmini.com Capítulo Õ¢ - Otimizações de front-end - Para saber mais - Página ó¢þ

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript ¦) Criamos vários arquivos CSS e JavaScript na nossa home. Podemos juntá-los para obter um ganho de performance. Nos CSS, temos dois arquivos: estilos.css e mobile.css. Podemos juntá-los num único arquivo. (dica: o mobile.css é importado com media query; para juntá-lo no arquivo principal, você precisará escrever a media query corretamente dentro do CSS) Nos JavaScripts, podemos, por exemplo, juntar o jQuery e o jQuery UI num único arquivo. ¢) Comprima os arquivos CSS e JavaScript. ä) Depois dessas otimizações, teste novamente no PageSpeed eWebPageTest. Houve alguma melhora? Capítulo Õ¢ - Otimizações de front-end - Exercícios: otimizaçõesWeb - Página ó¢Õ

CZ£i±¶™ Õä Apêndice - LESS “Não podemos solucionar problemas usando a mesma forma de raciocínio que usamos quando os criamos.” – Albert Einstein LESS é uma linguagem baseada em CSS (mesma ideia, sintaxe familiar) com recursos que fazem falta no CSS em algumas situações. É também chamado de pré-processador pois, na verdade, é usado para gerar um arquivo CSS no nal. Alguns dos recursos apresentados pela linguagem são variáveis, suporte a operações aritméticas, sintaxemais compacta para representar hierarquias e mixins. Õä.Õ VZ§†aêu†« Você já precisou usar a mesma cor no CSS em vários pontos diferentes? Um título e um botão com mesma cor, por exemplo? O CSS tem uma solução pra evitar copiar e colar, que seria o uso de classes. Mas, muitas vezes, usar essa mesma classe em tantas tags diferentes não é uma boa ideia. Programadores estão acostumados com variáveis pra isso, mas o CSS não tem nada parecido. Mas o LESS sim! @corprincipal: #BADA55; #titulo { font-size: 2em; color: @corprincipal; } button { background-color: @corprincipal;

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript color: white; } Repare no uso da @corprincipal que não é CSS puro, mas tem uma sintaxe bem parecida e familiar. Depois de compilado, o LESS vira esse CSS: #titulo { font-size: 2em; color: #BADA55; } button { background-color: #BADA55; color: white; } Õä.ó C™•±Z« Sabe quando você tem aquele elemento principal com Éäþpx mas que precisa de um padding de ì¢px e duas colunas lá dentro de tamanhos iguaismas deixando óþpx entre elas? Qual o tamanho de cada colunamesmo? ¦ì¢px. Aí você coloca no CSS: .container { padding: 35px; width: 960px; } .coluna { width: 435px; } E quando alguém mudar o tamanho do padding, você torce pra lembrarem de refazer a conta da coluna - que, aliás, seria (Éäþpx – ì¢px * ó – óþpx) / ó = ¦ì¢px. No LESS, você pode fazer a conta direito na propriedade e o resultado nal é calculado: .coluna { width: (960px - 35px * 2 - 20px) / 2; } Melhor ainda, junte com as variáveis que vimos antes e você nem copia e cola valores! @total: 960px; @respiro: 35px; @espacamento: 20px; Capítulo Õä - Apêndice - LESS - Contas - Página ó¢ì

Material do Treinamento DesenvolvimentoWeb 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! Õä.ì H†u§Z§¤¶†Z Você tem um #topo com um título hÕ dentro e uma lista ul de links. E quer estilizar todos esses elementos. Algo assim: #topo { width: 100%; } #topo h1 { font-size: 2em; } #topo ul { margin-left: 10px; } E se você precisar mudar o id do #topo? Ou trocá-lo por um header semântico? Tem que mexer em ì lugares (e torcer pra ninguém ter usado em outro canto). Fora que o código ca desorganizado já que essas três regras não necessariamente precisamestar agrupadas no arquivo e podiamestar espalhadas por aí, apesar de serem todos sobre nosso cabeçalho. No LESS, podemos escrever regras de maneira hierárquica, uma dentro da outra, e ele gera os seletores de parent. O mesmo CSS acima podia ser no LESS: #topo { width: 100%; h1 { font-size: 2em; } ul { margin-left: 10px; } } Capítulo Õä - Apêndice - LESS - Hierarquia - Página ó¢¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Podemos usar vários níveis de hierarquia (mas não abuse!), deixando nosso códigomais estruturado, žexível e legível. Õä.¦ F¶•cou« ou h™§u« u £Z„u±Z« Z¶±™“a±†hZ« Provavelmente você já viu algum design que tem uma cor base principal e algumas cores secundárias com-binando. Talvez uma versãomais light dessa cor base é usada como fundo e uma cormais saturada no botão. Você então pega o código de cada cor no Photoshop e coloca no CSS. E, se precisar mudar a cor, deve gerar as outras secundárias, certo? No LESS, você pode usar funções pra gerar essas cores: @corbase: #BADA55; body { background: lighten(@corbase, 20%); } h1 { color: @corbase; } button { background: saturate(@corbase, 10%); } Vai gerar cores óþÛ mais lights e ÕþÛ mais saturadas: body { background:#dceca9; } h1 { color:#bada55; } button { background:#bfe44b; } Você ainda tem: darken, desaturate, fadein, fadeout, spin, mix e até funções matemáticas como round. Õä.¢ RuZ£§™êu†±Z“u•±™ h™“ “†ì†•« Uma das coisas mais legais do LESS é sua capacidade de criar as próprias funções, que ele chama de mixins. É útil quando você tem que repetir a mesma coisa várias vezes, como nas propriedades CSSì que precisam de prexos, tipo uma borda redonda. Capítulo Õä - Apêndice - LESS - Funções de cores e palhetas automáticas - Página ó¢¢

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Você pode denir um mixin recebendo argumento o tamanho da borda e cuspindo as versões pros diversos navegadores: .arredonda(@raio: 5px) { -webkit-border-radius: @raio; -moz-border-radius: @raio; border-radius: @raio; } Parece uma classe CSSmas ele recebe uma variável como parâmetro (que pode ter um valor default também). 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 são innitas! Pense num mixin pra te ajudar a gerar aqueles gradientes CSSì chatos ou um mixin próprio .botaoBonito que gera botões legais só recebendo uma cor base e um tamanho. Õä.ä Eìuh¶±Z•o™ ™ LESS No site do LESS, você pode baixar a versão standalone dele. Você pode rodá-lo apenas incluindo um JavaS-cript na página que faz o parsing dos arquivos .less quando ela carrega. Capítulo Õä - Apêndice - LESS - Executando o LESS - Página ó¢ä

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript script src=less.js type=text/javascript/script Com isso, podemos incluir diretamente nosso arquivo .less usando uma tag link, colocada antes da tag que carrega o less.js: link rel=stylesheet/less type=text/css href=styles.less / Para melhor performance, o ideal seria gerar o CSS antes usando o compilador. Há uma versão em linha de comando usando Node.JS, mas como é JavaScript, você pode rodá-lo em qualquer canto - até no Java com Rhino. Há também programas visuais pra instalar, como o LESS.app e dá pra testar código rapidamente online mesmo no LessTester.com. No Windows, você pode usar o WinLESS que é um compilador com interface gráca e bem fácil de usar: http://winless.org/ Õä.ß PZ§Z «Zfu§ “Z†«: §uh¶§«™« ZêZ•cZo™« u Z±u§•Z±†êZ« A linguagem LESS tem recursos ainda mais avançados. Dá pra fazer mixins mais complicados com uma espécie de if/else por exemplo e até usar patternmatching. Você encontra todos os detalhes na documentação ocial. Além do LESS, existem outros pré-processadores CSS no mercado. O Sass (http://sass-lang.com/) é muito famoso nomundo Ruby e tem zilhões de funções, tornando-omais poderoso que o LESSmasmais complexo também. Há também o Stylus (http://learnboost.github.io/stylus/), que simplica ainda mais a sintaxe. Õä.˜ Eìu§hih†™«: LESS Õ) Atualmente, nosso arquivo estilos.css possui várias regras que usam o seletor de hierarquia (espaço). Essas regras podem ser escritas de formamais compacta comLESS. Então vamos usar LESS para escrevê-lo. Neste exercício, vamos usar a versão Javascript do LESS, que transforma nosso código em CSS dentro do navegador. Crieuma nova pasta no seu projeto chamada less e copie o estilos.css para lá. Emseguida, renomeie-o para estilos.less. Por m, altere o index.html para usar o estilos.less. Troque a linha link rel=stylesheet href=css/estilos.css por link rel=stylesheet/less href=less/estilos.less E inclua a seguinte linha antes de fechar a tag body para carregar o pré-processador LESS: Capítulo Õä - Apêndice - LESS - Para saber mais: recursos avançados e alternativas - Página ó¢ß

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript script src=js/less.js/script Teste a página no navegador. Ela deve continuar com a mesma aparência de antes. ó) Vamos começar a migrar nosso código CSS para LESS.Umseletor bastante repetido no código é .painel. Agrupe todas as regras que usamesse seletor numúnico seletor no LESS.Ocódigo nal deve car parecido com este: .painel { /* regras que estavam em .painel {...} */ li { /* regras que estavam em .painel li {...} */ :hover { /* regras que estavam em .painel li:hover {...} */ :nth-child(2n) { /* regras que estavam em .painel li:nth-child(2n):hover {...} */ } } } h2 { /* regras que estavam em .painel h2 {...} */ :before { /* regras que estavam em .painel h2:before {...} */ } } a { /* regras que estavam em .painel a {...} */ } .mostra-mais { /* regras que estavam em .painel .mostra-mais {...} */ } } Teste novamente no navegador. A página não deve mudar, mas veja que o código ca mais organizado e curto! ì) A cor #333333 (cinza escuro) se repete algumas vezes no nosso estilo. Vamos isolá-la numa variável para facilitar a manutenção: @escuro: #333333; Procure os lugares que usam a cor e use a variável no lugar. Por exemplo: Capítulo Õä - Apêndice - LESS - Exercícios: LESS - Página ó¢˜

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript body { color: @escuro; /* outras regras */ } .mostra-mais { background: @escuro; /* outras regras */ } Experimente trocar o valor da variável e veja o efeito: para mudar a cor de vários elementos da página agora basta mexer num único lugar! ¦) Vamos deixar o nosso código de transições mais limpo isolando os prexos num único lugar. Para isso, vamos criar um mixin: .transicao(@propriedades, @tempo) { -webkit-transition: @propriedades @tempo; -moz-transition: @propriedades @tempo; -ms-transition: @propriedades @tempo; -o-transition: @propriedades @tempo; transition: @propriedades @tempo; } Agora altere o código que escala e rotaciona as fotos dos produtos quando omouse passa em cima: apague as declarações transition e coloque no lugar .transicao(all, 0.7s); Faça o mesmo com os gradientes dos painéis: .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 */ } Capítulo Õä - Apêndice - LESS - Exercícios: LESS - Página ó¢É

Material do Treinamento DesenvolvimentoWeb 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 código desse mixin. ¢) (opcional) Podemos melhorar nosso mixin de gradiente fazendo uma versão que só recebe uma cor e calcula a segunda automaticamente, fazendo ela ser ÕþÛ mais escura que a cor dada. Podemos ainda fazer com que essa nova versão já aproveite o mixin já existente, passando a segunda cor calculada para ele: .gradiente-automatico(@cor1) { .gradiente(@cor1, darken(@cor1, 10%)); } Faça o teste nos gradientes dos painéis: use essa versão do mixin e veja o efeito ser aplicado automatica-mente. Capítulo Õä - Apêndice - LESS - Exercícios: LESS - Página óäþ

CZ£i±¶™ Õß Apêndice - Subindo sua aplicação no cloud “Perder tempo em aprender coisas que não interessam, priva-nos de descobrir coisas interessantes” – Carlos Drummond de Andrade Õß.Õ C™“™ u«h™„u§ ¶“ £§™êuo™§ Existemmuitos servidores comsuporte a PHP eMySQL nomercado, tanto nacionais quanto internacionais. Na hora de escolher um provedor de hospedagem, leve em conta preço, qualidade do serviço, atendimento, suporte e reputação da empresa. Há vários serviços disponíveis, mas em geral você deve escolher entre duas opções. Há os planos clássicos de hospedagem onde você paga um valor xo por mês e tem direito a usar os recursos de uma máquina compartilhada com outros usuários. Costumam ter um valor mais baixo mas limitações técnicas caso seu site tenho um pouco mais de acessos. E há planos de cloud computing onde o objetivo é não ter restrições técnicas com relação ao volume de acessos. Sua aplicação pode começar pequena e crescer indenidamente sem problemas, em um ambiente escalável que cresce elasticamente conforme suas necessidades. Nesse cenário, você paga por quanto usar dos recursos em cada mês, e não uma mensalidade xa. Costuma ter um valor mais alto que hospedagens clássicas, mas traz um ambiente bem mais robusto. Õß.ó O JuZ«±†h C™¶o L™hZëuf Nesse capítulo, vamos usar a plataforma de Cloud da Locaweb, umas das principais empresas de TI do Brasil. Eles têm um produto chamado Jelastic Cloud que nos permite subir uma máquina com PHP e MySQL em instantes, e enviar um ZIP com nosso projeto para ser executado.

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Saiba mais sobre o produto, inclusive os preços atuais, em: http://www.locaweb.com.br/produtos/jelastic-cloud.html Há um trial de Õ¦ dias que podemos usar para testar nosso projeto sem limitações. Õß.ì C§†Z•o™ Z h™•±Z Acesse o site do cloud Locaweb e localize a caixa de iniciar trial. Coloque seu email e clique no botão: 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 ativação. Você deve cair no Painel de Controle principal. Clique no botão no topo que diz Criar ambiente. Na janela de criação, selecione a aba PHP e o servidor Apache com o armazenamento MySQL. Dê também um nome a esse ambiente: Dentro de alguns instantes seu ambiente será criado e você vai receber um email de conrmação. Esse email é importante por conter a senha de acesso aoMySQL. Õß.¦ I“£™§±Z•o™ oZo™« •™MíSQL Criado o ambiente, nós teremos acesso a um banco de dadosMySQL vazio. No email que você recebeu, estão usuário, senha e endereço do banco de dados. Capítulo Õß - Apêndice - Subindo sua aplicação no cloud - Criando a conta - Página óäó

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Acesse o MySQL pelo endereço dado. Ele é do formato https://mysql-[nomeprojeto].jelasticlw.com.br/ Você vai ter acesso aumphpMyAdmin, igual usamos durante o curso. Coloque o usuário e senha que recebeu no email sobre o MySQL para acessar. Dentro do phpMyAdmin, localize a aba superior Importar. Selecione a opção “Procurar no computador” e aponte o arquivo dados.sql que usamos no curso. No m da página, clique em Executar. Tudo dando certo, você deve ver o banco de dados WD¦ì criado na coluna da esquerda, com nossa tabela produtos populada. Õß.¢ P§u£Z§Z•o™ ™ £§™u±™ Volte pro código do seu projeto. Precisamos fazer uma alteração nos códigos que acessam o banco de dados no index.php e no produto.php. Altere a linha que abre a conexão com mysqli_connect e passe a usar o endereço, usuário e senhas providos no email: Capítulo Õß - Apêndice - Subindo sua aplicação no cloud - Preparando o projeto - Página óäì

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript $conexao = mysqli_connect(mysql-[nomeprojeto].jelasticlw.com.br, root, [senha], WD43); Cuidado que o endereço a ser usado não possui http na frente, é apenas o nome do servidor. E cuidado com o ultimo argumento, o nome do banco, pra ser em maiúscula. Õß.ä E•ê†Z•o™ ™ £§™u±™ u †•†h†Z†ñZ•o™ «u§ê†o™§ Entre na pasta do projeto na sua máquina e crie um arquivo ZIP com todo seu conteúdo (todos os arquivos e subpastas de imagens, css, js etc). Dê o nome que quiser a esse arquivo. De volta ao painel no Jelastic Cloud, localize o Gerenciador de Instalação no meio da página e clique em Upload: Indique o endereço do ZIP que criou com seu projeto e dê um nome a esse upload, como Site da Mirror Fashion: Aguarde o upload nalizar e você verá a aplicação listada no Gerenciador de Instalação. Na linha da aplicação, há um ícone que permite fazer a instalação do ZIP em algum ambiente criado. Clique nele e selecione o ambiente que criamos antes: Uma janela se abre perguntando qual “contexto” você quer instalar. Isso quer dizer se queremos criar uma subpasta no servidor só pra esse projeto. Você pode deixar em branco pra criar na raiz do servidor mesmo. Clique em Instalar: Capítulo Õß - Apêndice - Subindo sua aplicação no cloud - Enviando o projeto e inicializando servidor - Página óä¦

Material do Treinamento DesenvolvimentoWeb com HTML, CSS e JavaScript Aguarde alguns instantes até a instalação ser completada. Aí é só acessar a aplicação no navegador usando o endereço cadastrado, que tem o formato: http://[nomeprojeto].jelasticlw.com.br/ Capítulo Õß - Apêndice - Subindo sua aplicação no cloud - Enviando o projeto e inicializando servidor - Página óä¢

Caelum html-css-javascript-php

Mais conteúdo relacionado

Mais procurados

Semelhante a Caelum html-css-javascript-php

Mais de TrioBlack Trioblack

Caelum html-css-javascript-php