Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Teste seu conhecimento #17

Publicado em: 2013-01-14 — 16.251 visualizacoes

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.

quadros do banner

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:

paleta

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!

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2013-01-14 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2013/01/14/teste-seu-conhecimento-17/trackback no seu site.

17 comentários na matéria: “Teste seu conhecimento #17”

  1. Marcos XavierNo Gravatar disse:

    Ficaram legais os trabalhos. Parabéns a galera que participou e ao Maujor pela iniciativa.
    Pena que não vou poder buscar o livro!Mas valeu.

  2. MaujorNo Gravatar disse:

    Os exemplos estão em http://maujor.com/blog/pg_apoio/desafio17/maujor.html

  3. Arnaldo SouzaNo Gravatar disse:

    Gostaria de ver os exemplos, não participei por que quando fui ver, já estava muito em cima, como estou sabendo dos desafios nos próximos eu participo.

  4. Kleber GalúcioNo Gravatar disse:

    Sensacional o projeto, Mestre!!! Continue nos estimulando assim! Abraço

  5. MaujorNo Gravatar disse:

    PREMIAÇÃO
    “O escolhido” foi o trabalho do:
    Luiz Henrique Zanão Kota que receberá um livro via correio no local de sua escolha.

    Segundo as regras seriam sorteados 3 trabalhos, mas resolvi premiar todos os demais participantes. São eles:

    Gabriel Malaquias
    João Victor Santos
    Jonas Sene Torres
    Lucas Trevisan Leal
    Marcos Xavier
    Rafael Crispim Ignácio

    que poderar pegar um livro autografado comigo conforme as regras do desafio.

    Entrem em contato via email.

  6. Marcos XavierNo Gravatar disse:

    Enviado. Muito bom poder participar descobri coisa nova!!

  7. Lucas TrevisanNo Gravatar disse:

    Maujor, enviado novamente pra outra opção de email.

  8. MaujorNo Gravatar disse:

    @João
    Pode usar o caractere para o cifrão.

  9. joaoNo Gravatar disse:

    Maujor, o cifrão pode ser com o caractere ‘$’ ou teria que ser desenhado tambem?

    obrigado.

  10. MaujorNo Gravatar disse:

    @Lucas
    Não chegou!
    Envie para css.maujor@gmail.com

  11. Lucas TrevisanNo Gravatar disse:

    Acabei de enviar o meu. Espero que chegue tranquilo 🙂

  12. MaujorNo Gravatar disse:

    @Gabriel Malaquias
    Recebido!

  13. Gabriel MalaquiasNo Gravatar disse:

    Enviei agora, espero que tenha dado certo :). Obrigado

  14. MaujorNo Gravatar disse:

    @Gabriel Malaquias
    Não recebi! Envie outra vez. Tente css.maujor[arroba]gmail[ponto]com.

  15. Gabriel MalaquiasNo Gravatar disse:

    Enviei o meu ! Maujor, você não vai confirmar recebimento ou sera que o meu não chegou ?

  16. Gabriel MalaquiasNo Gravatar disse:

    Terminando o meu já ! Logo vou enviar

  17. Márcio PassosNo Gravatar disse:

    Muito bom, já estou pensando em como fazer. A história do desenvolvimento web no Brasil deveria ser dividida:
    – Antes, e depois do Maujor… agradecemos aquele clube de pescaria, né? rs… até

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo