E hoje eu precisava validar um site no Internet Explorer 6 (die, die, die). Belezinha, com o navegador aberto fui conferir a versão, para ver se era o que eu precisava. Depois de clicar em Help -> About, vejam a confirmação de que era a PRAGA do IE6:
O erro confirmou: é o 6, né.
E o erro se repetiu a cada vez que eu ia ver a versão dele… o IE estava sendo rodando usando o aplicativo de browsers do Spoon.
Beleza, IE!
Hola!
Talvez alguns de vocês que me acompanham no twitter (@gserrano) ou acompanham o Chris (@chrisloki) já saibam, mas não moro mais no Rio Grande do Sul (Tchê!) e estou morando a uma semana em São Paulo, trabalhando na MM Café na equipe de interface, trabalhando na equipe do Chris 😀
E em uma tarde da semana passada estava eu sugando informações do Chris, que me mandou alguns links sobre Javascript Orientado a Objetos.
Lembrei de um post dele aqui no O Desenvolvedor, que vale a leitura: utilizando Prototype para criar classes em Javascript.
Li os exemplos que o Chris me passou e resolvi colocar em prática, criei um mini-game de jogo de dados. Bom, chamar de "mini-game" é um exagero, criei apenas uma interface e tres "objetos".
O funcionamento é bastante simples, não explicarei a teoria da orientação a objetos, apenas a prática e o código.
Utilizei 3 objetos e algumas poucas funções, os objetos são:
O dado tem uma única função, que se chama jogar. Eis o código dele:
function dado(){
this.lados = 6;
this.valor = 1;
this.joga = function(){
this.valor = getrand(this.lados);
return this.valor;
}
}
Cada dado tem dois valores: número de lados (o padrão é 6) e o valor, utilizado cada vez que ele é jogado. A função "jogar" gera um número randômico de 1 até o número de lados, neste caso de um a seis, retornando o valor jogando e alterando o valor do objeto dado.
Os objetos chips e cash são muito parecidos, apenas armazenam o valor de "dinheiro" ou de "fichas" do jogador, e possuem funções em comum (repeti elas no código, talvez esta não seja a melhor opção), vamos aos códigos:
function chips(){
this.valor = 0;
this.soma = function(x){
this.valor = this.valor + x;
$("#chips").html(this.valor);
}
this.subtrai = function(x){
if(this.valor<x){
$("#feedback").html("<h1>Warning!</h1><br />Você não tem fichas para isso, malandro!")
}else{
this.valor = this.valor – x;
$("#chips").html(this.valor);
}
}
}
function cash(){
this.valor = 0;
this.soma = function(x){
this.valor = this.valor + x;
$("#cash").html(this.valor);
}
this.subtrai = function(x){
if(this.valor<x){
$("#feedback").html("<h1>Warning!</h1><br />Você não tem dinheiro para isso, malandro!")
}else{
this.valor = this.valor – x;
$("#cash").html(this.valor);
}
}
}
A função "subtrai" verifica se o número que será subtraído (das fichas ou do dinheiro) não é maior do que o existente, evitando criar jogadores endividados! 😀
Estas poucas linhas são a base de funcionamento do "jogo". Com dois botões e algumas mensagens de feedback, podemos fazer o usuário jogar o dado e apostar e comprr mais fichas, eis o código "onload" da página:
$(document).ready(function(){
//Inicializa, cria dado e cash
var dado1 = new dado();
var u_chips = new chips();
u_chips.soma(100);
var u_cash = new cash();
u_cash.soma(50);
//Quando joga
$("#acao").click(function(){
$("#valor").html("Você jogou " + dado1.joga());
if(dado1.valor <= dado1.lados/2){
u_chips.subtrai(4);
$("#feedback").html("<h2>Perdeu!</h2><br />Você pagou 4 chips para a banca.")
}else{
u_chips.soma(3);
$("#feedback").html("<h2>Ganhou!</h2><br />Você recebeu 3 chips da banca.")
}
});
$("#buy_chips").click(function(){
if(u_cash.valor >= 25){
u_cash.subtrai(25);
u_chips.soma(50);
}else{
$("#feedback").html("<h1 class="red">Warning!</h1><br />Você não tem dinheiro para isso, malandro!")
}
});
});
Quando a página é inicializada, crio um objeto para cada classe (dado, cash, chips) e adiciono as chips e cash (isso vai atualizar a interface automaticamente, devido as funções soma e subtrai).
Quando o usuário clica em jogar, através da função jogar do dado criado, verifico se o númeor é maior ou menor que a metade do valor máximo do dado (o número de lados) e novamente com as funções soma e subtrai, retiro ou adiciono fichas pro usuário.
A função "buy" subtrai do cash e adiciona nas chips.
Simples, prático e fácil de entender!
O joguinho está simples, não armazena naada em banco e pode se tornar divertido com "desafios" a outros jogadores, armazenar fichas e cash, integração com o twitter… eu só queria mesmo iniciar a brincadeira, utilizem os códigos a vontade. 🙂
Quer saber mais sobre javascript orientado a objetos, por quem entende de verdade do que tá falando? Acessa aí:
Agradecimento ao Chris pelas explicações e referências que me passou 🙂
Não sou bom com SQL – nunca fui, nunca quis me aprofundar e tenho um certo bloqueio com relação a isso.
Mas, algumas vezes tenho que mexer com isso, e sempre me deparo com alguns erros bobos ou algumas coisas mais complexas.
No caso, incrivelmente as questões bobas não me atrapalharam, mas quebrei a cabeça quando tinha uma tabela com uma estrutura mais ou menos semelhante a essa (vou suprimir as colunas que não interessam para o problema):
Minha necessidade era agrupar os registros por esse f_id e retornar a data mais recente de cada grupo.
À princípio estava tentando fazer um SELECT e agrupar por GROUP BY, dando um ORDER BY depois, mas percebi que uma vez usado o GROUP BY nada garante qual é o registro que ele vai usar quando der um ORDER BY.
Vi então que a coisa seria mais séria, e que teria que usar SUBSELECTS… estava quebrando a cabeça e o Alexandre (@kurko) me ajudou após um pedido de SOS pelo twitter, e a seguinte query abaixo me salvou!
SELECT u.f_id, u.nome, ( SELECT adddate FROM usuario AS t WHERE t.f_id=u.f_id ORDER BY t.adddate DESC LIMIT 1) as data FROM usuario AS u GROUP BY u.f_id ORDER BY u.f_id
Espero que seja de utilidade!
Fazem algumas semanas que resolvi utilizar um plugin jQuery (não lembro qual) que utilizava a jQuery UI, um framework com diversas classes prontas para trabalhar com jQUery, uma verdadeira mão na roda!
Como utilizei apenas o plugin pronto, fiz as alterações necessárias mas não havia realmente trabalhando com o framework. Em um projeto recente em que estou trabalhando, fui procurar uma nova forma de fazer uma navegação com accordion (já havia utilizado um plugin eficiente de jQuery anteriormente) e encontrei novamente com o jQuery UI.
Deixei a preguiça de lado e fui verificar como funcionava o jQuery UI, gostei bastante! Apesar de estar apenas iniciando os estudos pareceu bem fácil de utilizar.
Essa foi a única parte que até o momento eu realmente utilize, um completo framework CSS que permite personalização fácil e vem com muitas, MUITAS classes prontas.
No site do jQuery UI existe um gerador de tema, que permite configurar o seu framework de CSS de forma rápida:
Theme Generator (clique para ampliar)
O gerador de temas gera um framework CSS, que facilita no desenvolvimento com o restante dos utilitários.
Existem diversas classes prontas, para:
E mais algumas, que ainda não explorei… 🙂
Falar de CSS me embrou de uma idéia interessante, que instiga algumas boas práticas no desenvlvimento das folhas de estilos: CSS orientado a objetos
Ah, a parte de
Além das facilidades na parte do CSS o framework facilita muito a criação de efeitos de interação.
O melhor de tudo é a simplicidade com a qual funciona tudo, por exemplo para criar um elemento que possa ser arrastado, com apenas uma linha isto é feito:
$("#draggable").draggable();
Para os outros comandos a facilidade é a mesma. Isso associado aos diversos estilos dos temas pode acelerar muito o desenvolvimento de interfaces amigáveis!
Mais facilidades com pouco código, existem algumas ferramentas prontas como:
Testei o accordion, as personalizações possíveis são bacanas! Nos testes que fiz do accordion o funcionamento foi bom em IE (inclusive o 6 – exceto com listas de conteúdo), FF (perfeito) e Chrome (perfeito).
Os comando apra animação com o jQuery são bastante evoluídos e permitem fazer muita coisa, mas para efeitos padrão de interface o framework de user interface facilita com alguns efeitos prontos e bastante customizaveis:
Escrevi o post como uma introdução e estímulo aos usuários da biblioteca jQuery para estudar e utilizar a jQuery UI e facilitar ainda mais a vida!
Vou reproduzir uma técnica que vi outro dia sobre como deixar uma imagem parecida com um selo, com aquela borda picotada.
É simples, e a própria explicação do que vamos fazer hjá demonstra o que vamos manipular: a borda do elemento CSS.
Como você faria para criar uma marcação html dessa forma?
Poderia ser criada uma imagem, mas e se você precisar alterar a imagem e o texto várias vezes?
Com o código abaixo, fica fácil; basicamente, deve-se colocar a imagem como background de uma div, e essa div com borda tracejada. O valor ali de cima, fica dentro de um <p>
<div class="stamp"> <p>99¢</p> </div>.stamp { width: 500px; height: 414px; background: #fff url(george.jpg) no-repeat; border: 12px dashed #1b1a19; } .stamp p { color: #fff; margin: 10px 10px 0 0; font: bold 60px Georgia, "Times New Roman", Times, serif; text-align: right; }
Pronto!