Torneio de Programação em Javascript - Terceira fase

[Jonathan Queiroz]

Depois de alguns membros sugerindo um Torneio de Programação, resolvemos fazer um em JavaScript

Equipe de organização do Torneio:

• .Andreia.

• fercosmig

• Jonathan Queiroz

• MLeandroJr!

• Rafael Spilki

Em caso de dúvida você pode consultar os organizadores do evento

Regras do Torneio:

• Níveis do Evento
  • O evento será divido em três categorias: Nível Básico, Nível Intermediário e Nível Avançado
  • Cada categoria será dividida em um ou mais desafios
  • Os desafios terão pontuações diferentes a depender da dificuldade
  • Todos os membros iniciam no Nível Básico, que é a categoria de base
  • Os pontos irão se acumular em todas as categorias e será criado um Ranking
  • Será determinado um número de pontos para cada categoria.
    • O membro que atingir determinado número de pontos estará classificado para participar da categoria seguinte, no próximo torneio !
  • O(s) melhor(es) classificado(s) de cada categoria participarão do grupo Vencedores de Desafio durante 90 dias (como descrito nas regras) e ganharão um número de pontos pré-determinado
    • A depender do número de membros e da dificuldade do desafio será determinado o número de membros que passarão para a fase seguinte
  • Serão avaliados os seguintes ítens:
    • Funcionalidades do programa
      • O programa deverá possuir o máximo de funcionalidades possível
    • É um dos ítens que mais conta pontos para o usuário

• Lógica de Programação
  • É recomendado que o programa seja bem construído e estruturado

• Design
  • Sabemos que isso é um torneio de JavaScript, não de HTML/CSS, mas bons aplicativos na internet devem possuir um design no mínimo regular.

• Além disso, é interessante (mas não obrigatório) que o usuário saiba unir HTML/CSS com JavaScript (a partir do famoso DHTML)

Pontuação

• Os primeiros lugares (até a terceira posição) terão uma pontuação pré-determinada

• Contudo, poderão ser avaliados outros usuários que consigam elaborar um bom script

• Estes terão sua pontuação avaliada pelos organizadores do evento

Premiação

• Os melhores classificados entrarão no grupo Vencedores de Desafios por um período de 90 dias, como já foi descrito acima

• O melhor classificado terá direito a um curso do IPED à sua escolha

Contato

• Em caso de dúvida, você pode consultar os organizadores do evento

• E-mail para contato dos organizadores: desafioscriptbrasil@gmail.com

Programação

• Não é válido o uso de frameworks, tais como jQuery. Deverão ser utilizados apenas os recursos nativos da linguagem

Divulgação dos scripts e licença

• Os scripts e screenshots utilizados no torneio ficarão acessíveis a todos
  • Os organizadores do evento se encarregarão de hospedar o(s) arquivo(s) e postar o link no fórum
• Caso o membro deseje, poderá ser criado um site a fim de dar continuidade ao projeto, desde que o mesmo respeite todas as regras do fórum

• Todos os arquivos utilizados deverão ser livres

Como podem ver, o torneio é dividido em três fases !

A fase atual é o Nível Avançado

Nível Avançado

O Nível Avançado é composto de um desafio.

Terceiro Desafio (Cancelado)

Desafio: Animação Livre

Descrição:

O usuário deverá criar qualquer script relacionado a animações. É válido o uso de imagens livres que não contenham animações. Por exemplo, não serão aceitas imagens .gif animadas. Afinal, o objetivo do desafio é a criação de animações com Javascript.

Pontuação para 1º lugar (ouro): 100 pontos

Pontuação para 2º lugar (prata): 70 pontos

Pontuação para 3º lugar (bronze): 50 pontos

Pontuação para demais posições: Será avaliada pelos organizadores do evento. O membro poderá (ou não) conseguir pontos

Data de Entrega (prazo máximo): 13/11/2009, até as 23:59

Obs.:

Qualquer usuário cadastrado poderá participar desse desafio, mesmo que não tenha participado das etapas anteriores.

Primeira fase: http://scriptbrasil.com.br/forum/index.php?showtopic=131528

Segunda fase: http://scriptbrasil.com.br/forum/index.php?showtopic=138353

Quarta fase: http://scriptbrasil.com.br/forum/index.php?showtopic=145773

Observações

• As regras dessa etapa sofreram modificações, que incluem principalmente informações sobre licença. É recomendável a leitura de Divulgação dos scripts e licença, que contém as modificações desde a última fase.
• Os scripts enviados pelos membros estão sendo postados nesse tópico: Scripts do Torneio de Javascript
• Mais informações, como pontuação de membros, estão disponíveis no Anúncio do Torneio de Javascript

[Matheus Matos]

Aew Jonathan!

Até que enfim hein!

Legal a idéia da animação, só não vou dizer que vou participar porque eu disse na segunda fase, e não participei, vai que isso acontece de novo... :blush:

Mas tentarei na medida do possível!

Vlw

Matheus Matos

[Matheus Matos]

aí galera... desculpem o up mais ninguém mais vai participar não? Postem aí quem vai... só tem fera aqui.. cadê o Romerito, KaKarotto, Fiote, Raficha todo mundo?

Vamos lá! Quero ver animação de novo no fórum! :lol:

Vlw

Matheus Matos

[KaKarotto]

Aeeeee lançada a parada!

Eu não vou participar dessa vez como eu já tinha comentado antes.

Masss, se me sobrar tempo vou fazer o meu script para mostrar ao final do torneio.

Esse é sem dúvida o mais difícil dos desafios, vão perceber que animação é uma coisa bem difícil de fazer em javascript sem bibliotecas.

Também vou analisar os scripts, ou seja, farei parte da banca examinadora =D.

Boa sorte à todos!!

[Matheus Matos]

Galera, queria perguntar uma coisa a vocês, falo, a organização do torneio. Como o KaKarotto falou, animação é um pouco dificil de se fazer sem uma biblioteca. Pergunto a vocês, eu, posso criar minha propria biblioteca? O Que viria a ser um framework e quem sabe posso até distribuir depois...

E aí? É valido né? :blush:

Vlw

Matheus Matos

[Jonathan Queiroz]

A criação de uma própria biblioteca não faz muito sentido até porque é algo um tanto amplo. Uma biblioteca não costuma envolver somente animação voltada a um único script. Uma biblioteca provavelmente teria vários recursos a mais, já que seu objetivo é ser útil em diversos casos, não apenas um específico.

No entanto, se achar interessante, pode sim (deve) organizar as funções de animação, etc.

Por exemplo, você pode trabalhar com POO a fim de organizar funções de animação criadas por você e úteis para o script a fim de facilitar o trabalho.

Mas, como dito acima, criar um framework de propósito geral não faz muito sentido, visto que as funções criadas serão específicas para esse script.

[KaKarotto]

Muita teoria, quero ver na prática se vai sair mesmo hein! ^_^

Minha opinião é o seguinte. Claro, para o aprendizado é muito interessante a criação de uma biblioteca, no seu caso seria uma biblioteca para animação, certo?

Essa na verdade é a melhor forma de se começar uma biblioteca, pensando em resolver um problema em específico e estendendo-a para outros usos, foi mais ou menos assim que o jQuery surgiu.

Como o Jonathan falou, pode utilizar conceitos de de Orientação a Objetos e ir reutilizando suas funções ( métodos ) afim de facilitar o desenvolvimento.

É válido e tem meu apoio total. o/

[Matheus Matos]

Bem, antes do torneio de javascript ser lançado, falo, a terceira fase, tinha pensado na criação de uma biblioteca para animação, tinha pensando em algo mais indivudal, como funções do tipo:

1. andarPara-cima: 10px em 2seg
2. moverPara-diagonal-esq-baixo: 2px em 1seg

E por aí vai, criei de doze à quinze funções dessas, digo, projetei, não terminei de fazer todas. Essas funções seriam aplicadas, mais ou menos parecido com o css, no meu estilo, assim:

@id-do-elemento {andarPara-cima:10px em 2seg; moverPara-diagonal-esq-baixo:20px em 2seg;}

Após o lançamento do desafio aqui no SB, pensei em criar uma biblioteca apenas para animação, como um programa de animações em GIF, ou seja, em um js o usuário colocaria em uma lista a quantidade de imagens e todas elas linkadas, provavelmente em um array, acima disso, váriaveis apenas pedindo a taxa de frames por segundo padrão, ou se prefere colocar quantos segundos vai ser exibida cada imagem. No html, basta definir um id padrão em uma div, que a animação rolaria assim que o carregamento do documento fosse terminado. Se quiser, o usuário poderá criar botões de Play, Pause, Inicío e Final, que seria definidos pelo evento onclick.

Hm.. falando assim fica meio bastante teórico como o Kakarotto falou, mas gostaria da opinião de vocês para qual desenvolver, ou tentar fazer os dois em um só?

Espero respostas!

Vlw

Matheus Matos

[KaKarotto]

Não entendi sua dúvida Matheus, tentar fazer os dois em um só ?

Como assim ? Os dois o que ?

[flavio]

:blink: ... então... não entendi o objetivo do desafio... alguém me explica? :wacko:

[Jonathan Queiroz]

O objetivo é a criação de qualquer script relacionado à animação.

[Matheus Matos]

O objetivo é a criação de qualquer script relacionado à animação.

hm... agora eu que me confundi. Qualquer script relacionado a animação?

Então pode ser algo como o JQuery, falo, tipo animação de um slide, de uma 'aparição' animação de um menu, essas coisas. Ou é pra se fazer uma animação em javascript. Uma animação em frames, tipo um filme, um desenho, onde temos que desenhar cada quadro e fazer ela rodar em javascript? Explica aí Jonathan...

Não entendi sua dúvida Matheus, tentar fazer os dois em um só ?

Como assim ? Os dois o que ?

É como falei, antes do desafio, queria fazer uma biblioteca de animação para elementos mesmo, ceilá, tipo, para um link andar pelo documento, um menu, uma imagem ficar rodando na tela, ceilá, tornar os sites mais animados.

Após o lançamento do desafio, pensei em criar uma biblioteca para facilitar animações do tipo fps (frames por segundos), ou seja, o usuário poderia definir a taxa de quadros/frames por segundo, teria disponivel, botões como Retroceder, Pausar, Parar, Iniciar e Avançar e por aí vai.

Vlw

Matheus Matos

[KaKarotto]

AAAAAAAAAAAAAAAAAHHHHHHHHHHH

Manjei.

Bom, a minha opinião é que faça a forma sobre como os elementos html se comportam no documento. Vai aprender muito mais js assim.

A forma das imagens, por mais legal que seja, depende muito dos conhecimentos do cara que monta as imagens. No javascript mesmo não há nenhuma dificuldade, é uma coisa até simples de fazer sem necessidade de criação de bibliotecas.

A necessidade de biblioteca seria ao movimentar elementos do dom, porque muitas funções se repetem, aí é interessante criar um objeto encapsulado com funções que possa utilizar e reutilizar.

Olha só pessoal, animação é qualquer coisa que se mova. Pode ser uma simples galeria de imagens com slideshow =)

Aí já dei uma idéia pra quem tá sem nenhuma =)

Se o problema for idéias, peçam aqui que eu tenho um monte. Outros membros que não participarão mas querem dar uma idéia também são bem-vindos . =D

[Matheus Matos]

Grande KaKarotto!

Hm... estou ficando animado pra fazer essa coisa... hehe...

Só o torneio que tá meio parado... cadê? ninguém vai participar não? fora o flavio que já se manisfestou pelo menos para entender do que se trata o desafio...

Vamooo lá!

Vlw

Matheus Matos

[flavio]

... fora o flavio que já se manisfestou pelo menos para entender do que se trata o desafio...

pô... estou ficando sem prestigio por aqui, hein! :(

[Jonathan Queiroz]

kkk

Mas na verdade o Matheus quis dizer que ninguém se manifestou, exceto você.

[Matheus Matos]

pô... estou ficando sem prestigio por aqui, hein! :(

kkk...

nada, é como o Jonathan falou, quis dizer que apenas você se manifestou, embora seja para perguntar sobre o desafio! :lol:

[Rafael Spilki]

Ihhhhh rapaziada! Na boa? Não tenho conhecimento técnico suficiente pra avaliar/contribuir com esse torneio!

Saiu completamente da minha já minúscula área de conhecimento JS...

Pra não me chamarem de preguiçoso, fim-de-semana passado tentei dar uma estudada e fazer alguma coisinha mesmo que tosca... Poderíamos, pra manter a coisa num nivel mais elegante, dizer que o meu projeto ficou uma belíssima bos**.

O pior é que por conta disso eu estava pensando até em me inscrever no torneio pra estudar mais a respeito... mas estou muito sem tempo por aqui ainda.

Acho que dessa vez vou ter que me afastar usando alguma desculpa médica qualquer, do tipo: "essa tendinite tá me matando"!!!

Rola uma dispensa? Antecedida por um encarecido pedido de desuclpas?

Prometo uma coisa: estarei ligadaço aqui até pra aprender sobre o assunto, ok?

[]'s

Editado Outubro 21, 2009 por Rafael Spilki

[Mestre SAM]

eita, agora q eu vi q comecou a terceira temporada.

não ia ser dado um aviso particular pros participantes das edicoes anteriores?

pra não acontecer o mesmo q na segunda etapa, onde muita gente só viu q o torneio

tinha começado quando já estava no final ?

bom, reclamacoes a parte. hehe.

eu to aceitando sugestoes "ideias" pra animar.

se a galera participar, acredito q teremos bons resultados, independente das notas.

:)

[Matheus Matos]

éh, concordo com o Mestre, poderia divulguar mais o torneio para a galera só não ficar sabendo no final...

aliás vou colocar na minha assinatura, pode né Jonathan?

[Jonathan Queiroz]

Rafael, tudo bem cara. Espero contar com você aqui no fórum !

Mestre SAM, foi mau cara !

Tínhamos esquecido das MP's. Mas havia o anúncio global. Editei também minha assinatura.

Matheus, pode sim colocar o link na assinatura.

Outra coisa.. Matheus, sabe aquelas funções do tipo "moverPara-diagonal-esq-baixo". Dá pra fazer de outras formas também. Uma boa seria o trabalho com os operadores de bit de Javascript, infelizmente muito pouco utilizados.

Infelizmente pra explicar aqui fica complicado.

Mas seria algo assim:

• Cima - 1 (representação binária = 0001)
• Esquerda - 2 (representação binário = 0010)
• Baixo - 4 (representação binária = 0100)
• Direita - 8 (representação binária = 1000)

E esses números seriam constantes de sua classe de animação. Note que em cada posição um bit está setado na base binária. Assim pode-se combinar essas posições com operador de bit or (| em Javascript - não se deve confundir com o operador lógico or - ||). Por exemplo, se queremos combinar cima e esquerda podemos utilizar 0011 (em decimal, 3). Assim vão estar setados o bit que representa que deve ir para cima (o último) e o que indica esquerda (antepenúltimo). Podemos então utilizar o operador de bit |, assim: 1 | 2 = 3. Pra verificar quais bits estão setados pode-se utilizar outros operadores de bit.

Sei que é bem estranho explicar assim, mas não é o foco do tópico. Então fica pra outra hora. Não tenho nenhum link a indicar e o fato de isso não ser muito utilizado (em javascript é muito incomum) atrapalha um pouco. Mas recomendo uma procura sobre o sistema binário, operadores de bit, etc.

Se for possível vou desenvolver também um script de animação e postar aqui depois do torneio.

[KaKarotto]

Mestre Sam, algumas idéias:

Idéias para animação:

- Galeria de fotos com slideshow

- Uma página estática com layout dinâmico, com os divs se movendo para formar outro layout.

- Menu que abre e fecha ( slide ) com ou sem fadeout...

- Uma abertura para uma página apenas com letras, alterando a posição, o tamanho e as cores...

- Efeito de um objeto quicar.

- Um campo de futebol com mudança de posicionamento ( 433 , 442 ) de forma que os jogadores se movam no campo para as novas posições.

- Um gráfico com algumas torres, que crescem ou diminuem de tamanho conforme seus valores.

Um calendário que pode ser inserido com animação, um dia após o outro..

Qualquer coisa com animação....

Matheus, eu já faria da forma OOP.

Tipo um objeto que tenha métodos: MoveLeft, MoveDown, MoveUp, MoveRight.

Eu criaria uma "Classe" tipo $animate(), que recebe um objeto html e implemente esses métodos...

Aí poderia estender essa classe ou criar uma herança para criar outro tipo de animação que herde os atributos de $animate.

[Matheus Matos]

putz... o cara mecher com fera é fogo...

Jonathan, entendi (parcialmente) o que você quis dizer. Achei interessante isso de operadores bit. Pelo que vi, dessa forma fica mais fácil fazer se mover na diagonal. Legal, agora você tá sem paz, porque vou te abusar mais do que já te abuso no MSN... vai te que me ensinar esses operadores... :lol:

KaKarotto, legal, como o caso do Jonathan, eu entendi parcialmente o que falou. Criar uma classe animate? Tá bom! Não entendi direito... pode me explicar melhor? Ficaria muito grato.

Diante mão, muito obrigado à vocês que estão tentando me ajudar. Sério mesmo, só que dificil é eu enteder... rsrsrs

Vlw

Matheus Matos

[KaKarotto]

Ok Matheus, eu exagerei.

Mas vamos direcionar essas dúvidas para o fórum de Js, abre um tópico lá, comentando sobre como vai fazer suas animações pro desafio . =)

É capaz até empolgar os outros membros.

ABraço.

[Romerito]

só agora consegue postar aqui, po tambem quero participar mas ando meio sem tempo e sem ideias,

mas vou fazer o possivel pra participar, abraço!