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

Você está no BLOG do Maujor. IR PARA O SITE

Teste seu conhecimento 06

Publicado em: 2007-07-26 — 16.348 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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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 http://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