html5 e css3 - Domine a Web do futuro, Notas de estudo de Informática

Baixe html5 e css3 - Domine a Web do futuro e outras Notas de estudo em PDF para Informática, somente na Docsity!

© 2012, Casa do Código Todos os direitos reservados e protegidos pela Lei nº9.610, de 10/02/1998. Nenhuma parte deste livro poderá ser reproduzida, nem transmitida, sem auto- rização prévia por escrito da editora, sejam quais forem os meios: fotográficos, eletrônicos, mecânicos, gravação ou quaisquer outros.

Casa do Código Livros para o programador Rua Vergueiro, 3185 - 8º andar 04101-300 – Vila Mariana – São Paulo – SP – Brasil

Sumário

Õ O desenvolvimento web hoje Õ Õ.Õ Por quê você deve aprender HTML e CSS................ ó Õ.ó O estado dos navegadores......................... ó Õ.ì A complicação dos prefixos proprietários................ ì Õ.¦ A longa e sinuosa estrada deste livro................... ¦

ó Os primeiros passos com o nosso site ß ó.Õ Escrevendo HTML, de dentro para fora................. ˜ ó.ó Adicionando formatações básicas..................... Õþ ó.ì Bordas e margens.............................. Õó ó.¦ Um pouco de cor sempre é bom...................... Õ¦ ó.¢ Primeiro contato com imagens....................... ՘ ó.ä Adicionando elementos secundários................... óó ó.ß Faça para sua cidade também!....................... ó¢

ì HTML¢: o que mudou? óß ì.Õ Escrevendo menos e fazendo mais..................... óß ì.ó Atributos personalizados.......................... óÉ ì.ì Tags novas para elementos antigos.................... óÉ ì.¦ Refatoração da página de São Paulo.................... ìÕ ì.¢ Seja pragmático............................... ì¦

¦ O que todo desenvolvedor precisa saber sobre CSS ì¢ ¦.Õ A incompatibilidade dos browsers e a razão dos resets de CSS.... ì¢ ¦.ó Compreendendo o Box model....................... ì˜ ¦.ì Utilizando pseudo elementos........................ ¦Õ ¦.¦ Desenhando uma faixa com “before” e “after”.............. ¦Õ ¦.¢ Decorando mensagens........................... ¦¢

Casa do Código Sumário

˜ Efeitos ÕþÕ: Trabalhando com animações e transições Õ¦É ˜.Õ Transformando elementos......................... Õ¢þ ˜.ó Os efeitos rotate, scale, skew e translate em uma galeria de fotos... Õ¢þ ˜.ì Transições de estilos............................. Õ¢¢ ˜.¦ Transições na galeria de fotos....................... Õ¢ä ˜.¢ Um detalhe importante sobre transições e JavaScript.......... Õäþ ˜.ä Transformações em ìD........................... ÕäÕ ˜.ß Girar formulários com apenas um clique................. ÕäÕ ˜.˜ Utilizando animações............................ Õßþ ˜.É Começando com keyframes........................ Õßþ

É O universo fora dos desktops e notebooks Õߢ É.Õ O que é “Responsive Web Design” e porquê você deve se preocupar. Õßä É.ó O funcionamento dos media queries................... Õßß É.ì Não é uma questão de aparelhos...................... Õߘ É.¦ Por um futuro melhor............................ ÕßÉ

Õþ Ferramentas - Frameworks, Plugins e Pré-processadores ՘Õ

Õþ.Õ Twitter Bootstrap.............................. ՘ó Õþ.ó HTML¢ Boilerplate............................. ՘ì Õþ.ì Plugins em JavaScript............................ ՘¦ Õþ.¦ Modernizr.................................. ՘¦ Õþ.¢ Polyfills.................................... ՘¢ Õþ.ä Pré-processadores.............................. ՘ä Õþ.ß É tudo CSS e HTML............................. ՘É

ÕÕ Não pare por aqui ÕÉÕ

Índice Remissivo ÕÉì

Bibliografia ÕÉä Versão: Õ¢.ó.ÕÕ

v

Õ.Õ. Por quê você deve aprender HTML e CSS Casa do Código

Õ.Õ P™§ ¤¶x ê™hx ouêu Z£§u•ou§ HTML u CSS

Caso você seja um designer sem muita experiência com desenvolvimento, ou um programador mais acostumado a trabalhar com linhas de comando e compilado- res do que navegadores, me deixe explicar um pouco a importância de se aprender HTML e CSS. Se você estiver trabalhando ou pretende trabalhar com tecnologia, acredito que boa parte - ou tudo - dos seus projetos será utilizado através de um na- vegador. Seja um sistema interno de um banco, uma rede social, um grande portal de notícias ou sites para campanhas de publicidade, o meio comum hoje em dia é a web, e é bastante interessante ter uma ótima base de conhecimento sobre desen- volvimento front-end (um dos termos usados para se referenciar a interface de uma aplicação) para contribuir para o sucesso dos projetos que você estiver participando. Por isso, recomendo muito que você aprenda sobre o que faz a web funcionar. Além de livros como este, existem diversos cursos e sites para você aprender mais a respeito ou aprender outras tecnologias relacionadas. Imagine cuidar de um parque de servidores sem ter bons conhecimentos de sistemas operacionais e de topologia de redes, ou trabalhar em propaganda impressa sem entender sobre as cores ou o papel usado.

Õ.ó O u«±Zo™ o™« •ZêuZo™§u«

Todo o HTML e o CSS que escrevemos ganha vida dentro dos navegadores utilizados por quem acessa nossas páginas e sites, por isso é bastante importante ter um bom entendimento de como eles funcionam e, principalmente, dos buracos no meio do caminho. Desde os tempos do Mosaic (que eventualmente se tornou o Netscape) e das primeiras versões do Internet Explorer em ÕÉÉ¢ sempre enfrentamos uma guerra de incompatibilidade entre os nevagadores e a necessidade de padrões para garantir a interoperabilidade da web entre clientes diferentes. Enquanto essa briga pode custar alguns cabelos nossos, ela também impulsiona a evolução das tecnologias que fazem os navegadores funcionar. O Google Chrome mudou a perspectiva sobre o processo de atualização contínua, garantindo que a maioria dos seus usuários possuam a úl- tima versão do navegador, e o Firefox começou a adotar um processo similar. E o componente de debug e inspeção do Firefox, o Firebug, definiu o modelo básico para que os outros navegadores implementassem ferramentas similares. Atualmente, o Google Chrome costuma ser o campeão dos testes de compatibi- lidade com as últimas especificações, sempre seguido de perto das últimas versões do Firefox, Safari e Opera. Boa parte das inclusões do HTML¢ e CSSì já estão dis-

ó

Casa do Código Capítulo Õ. O desenvolvimento web hoje

poníveis nesses navegadores por completo ou através de prefixos proprietários. O Internet Explorer, atualmente na versão É (no momento da escrita desse livro a ver- são Õþ está em desenvolvimento), ainda se encontra bem atrás dos demais, mas as promessas para a sua próxima versão são interessantes. Os perigos moram nos casos onde precisamos ir além das últimas versões e tra- balhar com mais antigas, como versões do Firefox anteriores a ˜ e os famigerados Internet Explorer ä e ß. A diferença entre os navegadores e a performance do JavaS- cript em comparação com as suas últimas versões é assombrosa, mas em alguns casos a audiência desejada se mantém presa a esses navegadores, por complicações para se atualizar o navegador ou até o sistema operacional - As últimas versões do Internet Explorer não são compatíveis com o Windows XP por exemplo, o que atrapalha a atualização em alguns ambientes corporativos. Por isso, é importante definir as fronteiras dos navegadores que você pretende trabalhar, e se aproveitar das técnicas adequeadas ou das soluções existentes para problemas relacionados a eles.

Õ.ì A h™“£†hZle™ o™« £§u€†ì™« £§™£§†u±[§†™«

Para quem está acompanhando a crista da onda, diversas propriedades e funciona- lidades novas não se encontram completamente definidas e implementadas nos na- vegadores, mas isso não nos impede de utilizar versões “experimentais” delas. Para isso, cada navegador costuma expor essas novidades com prefixos específicos para diferenciar da implementação final. O que a princípio pode soar como uma ótima idéia, se tornou um fardo para todos os desenvolvedores: escrever as mesmas linhas de CSS (até) ¦ vezes, assim:

.button { /* Prefixo para o Firefox. / -moz-transition: all 0.2s linear; / Prefixo para o Chrome, Safari, Safari Mobile e Android. / -webkit-transition: all 0.2s linear; / Prefixo para o Opera. / -o-transition: all 0.2s linear; / Versão final, ainda nao suportada em todos os browsers */ transition: all 0.2s linear; }

Enquanto hacks como esse podem parecer desnecessários e culpados por sujar o código, é preciso entender a importância deles. Já estamos desfrutando e testando

ì

Casa do Código Capítulo Õ. O desenvolvimento web hoje

um pouco de JavaScript para finalizar alguns dos nossos exemplos, e ai o jQuery (http://jquery.com/) entrará em ação. Mas não tema! Caso tudo isso pareça demais para você, fique seguro que iremos entrar em detalhes sobre resets de CSS e sobre o -prefix-free. Por enquanto, posso te garantir que eles irão ajudar bastante o nosso trabalho ao decorrer deste livro. Abaixo, segue o mínimo necessário de código HTML que iremos precisar. Você pode baixar este template em http://lucasmazza.github.com/template.zip.

Para o CSS específico de cada exemplo, você pode criar um arquivo com um nome relacionado ao que estiver fazendo e adicionar uma referência a ele, logo abaixo do normalize.css. Assim, no exemplo de animações, você pode criar um arquivo animacoes.css e colocar uma tag link dentro da tag head.

Trabalhando com animações!

¢

Õ.¦. A longa e sinuosa estrada deste livro Casa do Código

Com isso em mãos, hora de começar a trabalhar no que realmente interessa!

ä

ó.Õ. Escrevendo HTML, de dentro para fora Casa do Código

cidade. Nós vamos criá-la do zero, e a versão final ficará assim:

Figura ó.Õ: O nosso site sobre lugares de São Paulo que não se pode deixar de visitar.

A versão final da nossa página também está disponível online em http:// saopaulo.herokuapp.com.

ó.Õ E«h§uêu•o™ HTML, ou ou•±§™ £Z§Z €™§Z

Vamos começar pela parte mais importante da página, o conteúdo. Que no caso, são os ì lugares que você não pode deixar de visitar em São Paulo. O primeiro, a Avenida Paulista, ficará assim:

Passear na Avenida Paulista!

Um dos principais centros financeiros da cidade, a avenida Paulista também possui diversas opções de entretenimento. Endereço do Museu de Arte de São Paulo, MASP, do Teatro Gazeta e muitos outros, a região é de fácil acesso graças as diversas linhas de ônibus que cruzam a avenida e a linha de metrô que passa por baixo dela.

A Avenida Paulista sempre é assunto. O que será que estão falando a

˜

Casa do Código Capítulo ó. Os primeiros passos com o nosso site

respeito no Twitter?

O que temos aqui? Primeiro, um título secundário utilizando a tag h2, acompa- nhado de dois parágrafos com texto, delimitados pela tag p. Dentro dos parágrafos, além do próprio texto, temos outras tags para definir mais elementos. Uma delas é a tag em, utilizada para indicar ênfase, que terá o seu texto exibido em itálico na página. O outro elemento, é um link para se navegar aos resultados de busca do Twitter para o termo “Av. Paulista”, é criado pela tag a (derivada da palavra âncora em inglês, an- chor). O atributo href indica qual o endereço que o link aponta, e o target indica que o link deve ser aberto em uma nova página. Estas são algumas das principais tags utilizadas para se definir elementos de conteúdo, então você irá vê-las bastante por aqui.

Seguindo em frente, podemos adicionar o resto do nosso conteúdo, outros ó lu- gares. Um deles é a região da Vila Madalena, e o último é o Parque do Ibirapuera.

Os bares da Vila Madalena

Depois de um dia de trabalho, nada melhor do que um bom chopp, um petisco e uma conversa em uma mesa de bar. Opções de sobra na região das ruas Aspicuelta, Fradique Coutinho e Wisard.

Veja quais os melhores bares e restaurantes da região no

Guia da VEJA São Paulo.

O Parque do Ibirapuera

Um dos cartões postais da cidade, o parque dispõe de mais de 1,5 km{^2} de área verde, lagos artificiais e pistas de cooper e ciclismo. E se isso não fosse o suficiente, o parque costuma ser palco de diversos eventos culturais ao longo do ano.

Veja no mapa

É

Casa do Código Capítulo ó. Os primeiros passos com o nosso site

isso, adicionamos uma tag div em volta de todo o HTML que criamos dentro do body, com uma classe chamada container

E o CSS para centralizar esta div na página:

.container { margin: 0 auto; width: 960px; }

A propriedade width fixa a largura para 960px, adequando o conteúdo a telas de pelo menos Õþó¦px de largura, como tablets e netbooks. A margem superior e inferior está com 0 , e as margens laterais em auto cuidam de centralizar o elemento na página. O próximo passo é melhorar a exibição dos textos, ajustando um pouco o estilo das fontes com o seguinte código, que deve ser adicionado acima do CSS anterior:

body { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; line-height: 1.6; }

Aqui, estamos trocando a família de fontes utilizadas para uma lista de ¦ fon- tes diferentes que são utilizadas da seguinte maneira: caso a primeira fonte listada não esteja disponível no sistema operacional do usuário, o navegador tentará utili- zar a próxima e assim sucessivamente. A Lucida Grande será a fonte utilizada pelo Mac OS X ao exibir a nossa página, enquanto a Lucida Sans Unicode será vista por usuários do Windows, já que este sistema operacional não possui a primeira fonte da nossa lista. Em casos mais extremos, Verdana será utilizado ou o navegador irá exibir uma fonte sem serifa por padrão. Uma forma de se contornar isso é instalando diversas fontes diferentes por conta própria, mas não podemos contar com isso. En- quanto o line-height de 1.6, sem nenhuma medida específica - como px ou em - indica para a altura das linhas ficarem com ÕäþÛ da altura da fonte. Caso ela esteja em 16px, o line-height será 25px. Caso a altura da fonte mude, a altura da linha de

ÕÕ

ó.ì. Bordas e margens Casa do Código

texto irá acompanhar essa mudança, respeitando a regra de sempre ser 1.6 da altura da fonte. Não estamos alterando a altura da fonte por enquanto - a propriedade font-size, para utilizar o valor padrão do navegador, que costuma ser de 16px em desktops e notebooks, enquanto outros aparelhos ou navegadores com configura- ções diferentes possuem um tamanho padrão diferente. Outro detalhe importante, é que estamos adicionado estes estilos a tag body. Desta forma, todos os elementos da página irão herdar essas regras “padrões” da nossa página, e podemos alterá-las conforme a necessidade de cada elemento.

Figura ó.ì: O container de Éäþpx de largura e a alteração de fonte.

ó.ì B™§oZ« u “Z§u•«

Se analisarmos com mais detalhe o nosso conteúdo, estamos falando sobre ì luga- res diferentes, onde cada um possui um título e uma descrição. Para essa definição transparecer no nosso código, podemos colocar os elementos de cada lugar dentro de um novo elemento, para agrupar cada um.

Esta alteração não tem impacto nenhum no visual da nossa página, mas nos dá por onde adicionar um estilo para cada um dos ì lugares, já que agora existe um

Õó