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 06

Publicado em: 2007-07-26 — 21.503 visualizacoes

Teste seus conhecimentos está de volta.

Estou reconsiderando minha decisão de não mais publicar a série “Teste seus Conhecimentos”. Recebi e continuo recebendo muitos emails com pedidos para não parar de publicar os desafios da Série. Em consideração aos meus leitores e em nome da divulgação de conhecimentos que são minhas primeiras prioridades vou continuar, não sem antes tecer alguns comentários e conclusões a respeito.

Publicar o nome dos que resolvem o desafio

A idéia aqui era a de incentivar e motivar a procura da solução “premiando” quem encontrasse a solução com a publicação do seu nome.

Lamentavelmente isto não funciona da forma idealizada. Copiar uma solução existente sem ter a mínima noção do que está fazendo, para ter seu nome publicado é uma tentação para uns poucos incapazes com necessidade de afirmação.
Assim, não haverá mais a lista de nomes dos que resolvem o desafio.

Estes desafios são uma bobagem

Recebo emails de leitores indignados com os testes propostos nos desafios e pedindo para não mais publicar “estas barbaridades”.

Alegam estes leitores, que os códigos não são acessíveis, não são semânticos, contrariam isto e aquilo das Web Standards.
Vocês querem saber qual a minha opinião a respeito? Eu também acho isto tudo e concordo com estas colocações mas, não entendo a falta de visão destes que assim argumentam. Será que não dá para perceber que estes desafios visam a desenvolver habilidades no trato com a dupla (X)HTML + CSS, fixando conceitos e descobrindo modos e maneiras de obter efeitos? Ora bolas! Faça-me um favor quem tiver procurando semântica nos desafios. Passe longe! Vá explorar o site do W3C!

Tabuleiro de xadrez com CSS

tabuleiro de xadrez

Este desafio consiste em reproduzir o tabuleiro de xadrez mostrado na figura acima usando somente (X)HTML + CSS. Proibido o uso de imagem. A solução deve funcionar em navegadores Standards como Firefox e Opera. Internet Explorer pode ficar fora!

Caso você queira usar as mesmas cores que eu usei aqui vão elas:

  • Pano verde: #006935;
  • Borda do tabuleiro: #bb8330; (estilo:ridge)
  • Casas claras : #f3ba60;
  • Casas escuras: ##8e5354;
  • Peças brancas : #fff;
  • Peças escuras: #000;

Se você tem um espaço na Internet e quiser hospedar sua solução, publique o endereço nos comentários desta matéria. Assim, quem não conseguir solucionar poderá consultar sua solução e não creio que alguém irá ser ingênuo o suficiente para copiar uma solução pronta e publicar como sua.

A minha solução será publicada daqui a uns 30 dias

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

Esta matéria foi publicada em: 2007-07-26 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2007/07/26/teste-seu-conhecimento-06/trackback no seu site.

29 comentários na matéria: “Teste seu conhecimento 06”

  1. EADNo Gravatar disse:

    Olá blog mto bom com assuntos interessantes
    parabéns

  2. Paulo AugustoNo Gravatar disse:

    Se não era pra usar fonte… Nao entendi. No meu só aparecem ? ? ? ? no lugar as peças…

  3. BrunoNo Gravatar disse:

    Também fiquei curioso, se não há uso de fontes especiais por que aparecem pontos de interrogação ao invés das peças?

  4. NETONo Gravatar disse:

    MUITO BOM!!

    gandia

  5. GilmarNo Gravatar disse:

    A solução foi publicada em 30/07/2007 e está no link contido no comentário número 11 do Newton de Góes Horta.

    E onde estava escrito isso???? E porque vc não respondeu minha pergunta? No meu browser(FF) ficou tudo com “?” ao invés das peças….

  6. MaujorNo Gravatar disse:

    A solução foi publicada em 30/07/2007 e está no link contido no comentário número 11 do Newton de Góes Horta. 😉

  7. GilmarNo Gravatar disse:

    Reponde ai Maujor…..

  8. GilmarNo Gravatar disse:

    Acessei o site que foi passado nos comentários(http://www.ici.curitiba.org.br/ici/swf/xadrez_maujor.html) e ficou tudo com “?” ao invés das peças do tabuleiro.
    Tem alguma coisa errada com meu firefox?

  9. Guto FerreiraNo Gravatar disse:

    Minha solução

  10. Fernando FilhoNo Gravatar disse:

    Infelizmente não vou fazer o desafio, mas acho boa a intenção. Concordo plenamente com o Maujor, acima de tudo é um aprendizado.

    Para mim é extraordinario, me formo no final do ano e sempre vasculho a internet em busca de materias desse nivel, tenho 4 messes para a intrega do meu projeto final e todas as informações são validas, criei ate um blog onde vou postar todos os dasafios e truques durante meu projeto!

    Parabens aos que conseguiram e talento para os que ainda estão tentando!

  11. JuniorNo Gravatar disse:

    Maujor,
    O link que você passou também está dando erro na minha máquina. É alguma fonte que eu não tenho?
    Fica tudo com “?” no Firefox….

  12. AlexNo Gravatar disse:

    Se não são fontes porque não funcionaram? É a codificação da página que está errada????

  13. AdMiNTEC.netNo Gravatar disse:

    Parabéns pelo artigo e pelo Blog. Votos de maiores sucessos na web 2.0

  14. JoséNo Gravatar disse:

    Olha o meu http://www.garagemdaweb.com.br/xadres/xadres.html
    Como já tinham feito com ul li fiz com table’s.

  15. EdnilsonNo Gravatar disse:

    “Editado pelo Maujor:
    Não! Não há uso de fontes neste desafio.”

    Por isso não entendi o que aconteceu…

  16. AlexNo Gravatar disse:

    @Ednilson
    As peças do tabluleiro são uma fonte que precisa ser instalada para que seja exibida corretamente.

    Maujor editou:
    Errado! As peças do tabuleiro NÃO são fontes, conforme eu já disse no comentário número 1 (um)

  17. EdnilsonNo Gravatar disse:

    Estranho que formatei minha máquina e agora não aparecem mais as peças… apenas quadradinhos (ou “?” no firefox)… Alguem sabe o que pode ser isso?

    []s

  18. RodrigoNo Gravatar disse:

    Bingo… meu erro foi usar unidade “px” ao invés de “em”.
    Parabéns Newton.

  19. Newton de Góes HortaNo Gravatar disse:

    Minha contribuição ao desafio encontra-se em:

    http://www.nghorta.com/wp_aplicacoes/xadrez.html

  20. RodrigoNo Gravatar disse:

    Ta mas qual é a idéia? Redimensionar redimensiona, mas as casas e o tabuleiro não. Ao redimensionar as letras, o tabuleiro todo tem que redimensionar? Como se fosse um “zoom” total?

  21. Felipe 'chronos' PrenholatoNo Gravatar disse:

    Ah Rodrigo, testei aqui e seu tabuleiro não redimenciona as letras 🙂

  22. Felipe 'chronos' PrenholatoNo Gravatar disse:

    engraçado que eu imaginei construir as peças com divs :], não sabia da existência destas fontes :).

    Parábens a todos.

  23. RodrigoNo Gravatar disse:

    Achei os códigos 😀

    Maujor disse:
    Link: http://www.ici.curitiba.org.br/ici/swf/xadrez_maujor.html

  24. RodrigoNo Gravatar disse:

    Acho que até conseguiria resolver o desafio. Mas não consegui achar os códigos html especiais que fazem o desenho das peças.

  25. JoaresNo Gravatar disse:

    hehehe… foi dar uma de sabido se deu mal…

    Nesse fim de semana eu faço o meu… Tá de boa!

  26. MaujorNo Gravatar disse:

    @Edenilson
    Solução não correta, pois todas as peças têm a mesma cor.
    Se for corrigir aproveite para acertar a ‘quebra do tabuleiro’ ao redimensionar o tamanho de fonte (Ctrl + + no FFox).

  27. EdnilsonNo Gravatar disse:

    Esse foi facil.. hehehehe.. mandei minha resposta por email… abraço

  28. Pedro RogérioNo Gravatar disse:

    Existem os caracteres especiais que fazem isso, agora só não lembro quais são eles!!!

  29. Peter GasstonNo Gravatar disse:

    Hmmm… este desafio depende em ter a fonte certo, nao depende? Acho que nao tenho essa fonte…

    Editado pelo Maujor:
    Não! Não há uso de fontes neste desafio.

Comentário:





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

Subscribe without commenting

topo