Teste seu conhecimento #17

Desafio encerrado. Resultado neste link.

A proposta para esse desafio é criar um banner de 728x90px que foi desenvolvido originariamente em FLASH.
No mês de janeiro de 2013 o Google lançou uma campanha para promover o Google Engage, criando um banner em FLASH que fornecia um link para visitar a home daquele projeto.

Conheci o banner ao navegar por alguns sites que se utilizam do programa AdSense, pois o banner era inserido com aquela ferramenta.

Observando atentamente o funcionamento do banner vi que seria possível criar algo se não semelhante, pelo menos muito parecido usando apenas HTML5+CSS.
Bingo! Vou lançar um desafio. E aqui estamos.

A missão

Sua missão, caso decida aceitá-la é criar um banner semelhante a esse mostrado nesse link (abre em nova janela). O banner possui quatro quadros e foi desenvolvido para um ciclo apenas. Ao visitar o link que mostra o banner, recarregue a página para acionar o ciclo único do banner. No item seguinte fornecemos imagens dos quatro quadros, (sem animações, é claro. Seu trabalho deverá ser animado, é claro.)

Imagens orientativas

Com o objetivo de facilitar seu trabalho de tomada de screenshots do banner fornecemos a seguir uma imagem orientativa dos quadros do banner. Clicando sobre a imagem você poderá visualizá-la em tamanho aumentado.

Cores e fontes

Com o objetivo de servir como referência, não há obrigatoriedade de uso, as cores e fontes que você poderá usar para desenvolver seu trabalho são as seguintes:

Cores

A paleta de cores, além das cores preta, branca e tons de cinza, é mostrada a seguir:

Fontes

Você tem duas opções para uso das fontes no seu trabalho:

Opção 1
Usar três famílias de fontes:
Fonte: ‘Source Sans Pro’ — Use para todos os textos exceto indicado ao contrário a seguir.
Fonte: ‘Bowlby One SC’ — Use na palavra ADWORDS colorida mostrada no quadro 2.
Para inserir essas duas fontes no seu trabalho, importe-as do Google web fonts (abre em nova janela) inserindo na seção HEAD do documento um link, conforme instruções naquela página.
Fonte genérica serif: Use na palavra Google colorida mostrada no quadro 4.

Opção 2
Usar fontes das famílias genéricas serif e sans-serif, conforme sua escolha.

Nota: Não use fontes que não sejas aquelas indicadas nas duas opções anteriores. Escolha uma das opções e siga com ela.

Regras gerais

O objetivo do desafio é criar um banner nas dimensões 728x90px, usando somente HTML5 e CSS, o mais semelhante possível ao banner original. Não se trata de reprodução “pixel perfect” ou mesmo “animations perfect”. Dê o máximo de si, sem se estressar e terá concluído seu trabalho, pois a idéia é exercitar e aprender se divertindo e ainda arriscar ganhar um livro do Maujor.
Seu trabalho será válido ainda que um efeito ou animação tenha ficado diferente ou somente parecido com o original. Procure chegar o mais próximo possível do original.

1-) Nâo use JavaScript ou imagens de qualquer tipo ou natureza.

2-) O único link admitido na seção HEAD do documento é para as fontes do Google, conforme explicado no item anterior.

3-) A marcação HTML5 é livre, mas deverá obrigatoriamente validar no W3C (abre em outra janela).

4-) As CSS não precisam validar.

5-) Não use a tag a na marcação. Crie o botão do quadro 4 com o elemento button sem links.

6-) Use somente as fontes conforme as opções 1 e 2 anteriores.

7-) Seu trabalho deve ser enviado por email para: maujor[AT]maujor[PT]com e no assunto escreva: desafio17. Envie somente um arquivo .html (com as CSS incorporadas ao arquivo) não zipado e nomeado com o seu nome, separe nome e sobrenomes com hífen (por exemplo: jose-maria-da-silva.html).

7.1-) O recebimento e triagem dos emails é automatizado e baseados nas regras acima. Se você usar underscore no nome do arquivo ou usar letra maiúscula, ou assunto diferente do indicado, ou enviar mais de um arquivo, etc., o script bloqueia a chegada do seu email e eu nunca vou saber que você enviou um trabalho. De toda forma acusarei o mais breve possível o recebimento dos trabalhos.

Premiação

Escolherei a meu exclusivo critério um trabalho que será declarado “o escolhido”. O autor do “escolhido” receberá em qualquer endereço no Brasil um exemplar do meu livro “CSS3” autografado e livre de qualquer despesa.

Sortearei 3 (três) trabalhos entre todos os trabalhos recebidos que satisfizerem as regras do desafio. Aos autores desses trabalhos ou aos seus representantes entregarei pessoamente no meu endereço em Copacabana – Rio de Janeiro um exemplar de um dos meus livros devidamente autografado. O título do livro a entregar será combinado com os sorteados.

Prazo

O prazo final para entrega dos trabalhos é 15/02/2013 e a divulgação dos resultados será 18/02/2013

Ah sim! Você tem UM MÊS para criar seu trabalho, portanto se não participar não alegue falta de tempo. 🙂
Gostaria muito de receber sua contribuição. Obrigado. 😀

Boa sorte e divirta-se!