Gravar dados de qualquer formulário em PHP [ Parte I ]
Vêm amigos do Blog Grupo Universos (é não ficou “bão” esse inicio da postagem, então leia assim: Olá pessoal), iniciarei novamente uma seqüência de postagens sobre como recuperar dados de um formulário e gravar no banco de dados utilizando o php como linguagem de programação. Nesta minha primeira postagem irei mostrar como recuperar todos os dados de um formulário, independente da quantidade de campos e gravá-las no banco passando como parâmetro somente o nome da tabela do banco de dados.
O detalhe dessa postagem é que eu irei diferenciar dos inúmeros Blogs ao qual sempre vejo postagens da mesma forma (alguns até são cópias de outros) o método de executar uma gravação no banco.
Você já pensou ou ao menos deve ter passado por sua cabeça: “Porque não criar uma função que recupere todos os dados de um formulário independente da quantidade de campos?”, se não pensou, pense agora, todos os formulários, seja para cadastro ou envio de itens por email são particularmente comuns em qualquer desenvolvimento web. Para desenvolver um é necessário criar um formulário, anotarem os nomes de todos os campos, recuperarem todas as variáveis, pegar o nome da tabela, pegar o nome das colunas e então fazer toda essa ligação. Além desse trabalho todo é preciso lembrar um ponto importante: E quando um formulário ou tabela no banco de dados sofre uma atualização? Nem preciso responder a essa pergunta sobre o que é preciso fazer quando isso acontece, não é mesmo?
BANCO DE DADOS:
Para iniciar, será preciso criar um banco de dados, lembrando que nesse exemplo será utilizado o mysql como plataforma de gerenciamento de banco de dados.
Você sabe denunciar spam?
Que spam é um grande problema, todas as pessoas que diariamente recebem emails com inúmeras propagandas sabemos, mas e denunciar um spam, você sabe fazer? Sabe por onde começar? O que deve fazer?
Primeiro passo é responder a pergunta: Porque devo denunciar um spam?
A resposta é tão simples quanto à pergunta, normalmente estamos acostumados a apagar o email ou (pior, explicarei o “por que” no decorrer da postagem) clicar para “deixar” de receber aquele tipo de conteúdo, entretanto fazendo somente essa ação, você está ignorando um problema que é mundial e o que é preciso fazer é mudar essa visão e buscar melhorar esse trafego de email.
Continuando, como então deve ser denunciado um spam?
Para denunciar um spam, não é tão simples, mas também não é algo que dificulte ou atrapalhe o seu dia, levará menos de 10 minutos e você já terá ajudado em muito ao denunciar, primeiro você deve verificar de onde partiu essa mensagem, normalmente são servidores de empresas (às vezes clandestinos) que disparam os emails em massa, o que leva a duas analises diferentes:
1 – Para identificar o servidor de email que está disparando o email é necessário olhar o remetente e pausar (nunca clicar) o mouse sobre os famosos links de remoção, onde será possível identificar o endereço de onde está partindo a mensagem, se aparentar ser um site confiável, você deve entrar em contato avisando que nunca solicitou nenhum tipo de mensagem com o conteúdo, sempre enviando com cópia para o email: mail-abuse@cert.br, dessa forma o cert.br poderá tomar notificar os provedores de disparo de email e criar estatísticas para o mesmo, portanto se houve reincidências, o servidor poderá ser bloqueado.
Porque não devo clicar em um link de remoção?
Envio de email marketing e mensuração
1 Definindo tema e publico alvo (acessar a postagem anterior)
2 Criação e desenvolvimento (acessar a postagem anterior)
3 Envio e mensuração (essa postagem aqui)
Última postagem da “serie” criar uma campanha de email marketing de sucesso e como prometido eu trago algumas outras informações que vão dos testes que precisam ser realizados antes do envio e sua mensuração.
O primeiro passo é não tentar fazer tudo sozinho como já mencionado na primeira postagem sobre campanha de email marketing, ou seja, não tente pegar um programa da Internet de envio de email, “crackeá-lo” e ficar com o computador ligado durante toda a madrugada enviando email. Uma campanha de email marketing vai além do envio, é preciso avaliar, entender e persuadir.
TESTES:
Primeiramente é necessário contratar uma empresa especializada em envio de email marketing e ela sendo especializada terá um software que possibilitará os testes de envio, faça o envio de sua campanha para seu email diversas vezes até verificar que o email marketing está correto, envie para emails de gmail, Hotmail e Yahoo, teste nos programas de email Microsoft Outlook, Windows Live Mail, Thunderbird e corrija as falhas caso existam.
Ainda como forma de teste, envie email a amigos, amigas ou empresas que tenha maiores afinidades, mas sem avisá-lo (a) e que conheça o seu o seu negócio ou a sua empresa e pergunte a ele (a) qual foi à reação ao receber o email, se ele chegou à caixa de entrada, dessa forma poderá colher informações que melhor vão direcionar sua campanha de email, mesmo que ela tenha que ser refeita.
Dica: Colete o maior número de opiniões possíveis, mensure-a e somente após avaliar, verifique se a campanha pode ser disparada dessa forma ou se ela precisa ser refeita.
Refazer a campanha?
Criação e desenvolvimento de um email marketing correto + 6 dicas de como desenvolver um
Esse é a segunda das três postagens prometidas sobre email marketing.
1 Definindo tema e publico alvo (acessar a postagem anterior)
2 Criação e desenvolvimento (essa postagem aqui)
3 Envio e mensuração (acesse a postagem)
A criação é muito importante em uma campanha de email, onde deve observar principalmente o layout. Como alguns leitores de email (principalmente o Microsoft Outlook) são bastante limitados, portando a criação do layout deve ser sempre simples e ao mesmo tempo em que elegante e atraente e esse é o ponto mais difícil, pois como conseguir esse equilíbrio? Essa postagem visa responder a essa pergunta de forma bem clara, bem como dar dicas de uma boa estrutura (o que pode e o que não pode ser utilizado em um email marketing para que seja exibido nos principais programas de email como também nos provedores de email gmail e Hotmail), sem deixar de atrativo o email marketing.
O primeiro passo após definido o tema do email marketing conforme mencionado na postagem anterior deve observar três principais características que um layout de email marketing deve ter para a sua concepção, pois um dos maiores erros que tenho visualizado é a questão de algumas pessoas acreditarem que email marketing é a mesma coisa que uma página sendo aberta em um navegador, entretanto são elementos totalmente distintos e como elementos distintos, devem ser observados de formas diferentes:
1 – Plano de fundo: O primeiro quesito é o plano de fundo de um email marketing, esse deve ser em sua grande maioria sempre na cor branca dado que imagens de fundo não funcionam nos leitores de email e principalmente porque isso acaba agredindo visualmente a pessoa que recebe por mais bonito que seja a imagem. Se for utilizar um fundo com cor, de preferência a cores solidas e claras, existem muitas maneiras de chamar a atenção da pessoa e não é colocando um titulo com “tamanho 42” na cor vermelha em um fundo preto que irá ser.
Uso de degrade em plano de fundo podem até ser utilizado, desde que observado os locais onde melhor serão possíveis de utilizar e o degrade deve sempre ir para o branco. Por exemplo: O topo inicia em cinza claro indo para o branco e o rodapé vem do branco indo para a cor cinza, deixando o centro na cor branca. Para visualizar um exemplo. Clique Aqui.
2 – Conteúdo: Não conte uma história do seu produto ou serviço enviando um email marketing com conteúdo extremamente longo dizendo que você faz isso há 10 anos, esse é outro erro grave que vejo, quantas pessoas irão parar para ler toda a história que contou no email? Seja breve, direto, chame a atenção em uma frase e destaque-a, por exemplo, se quero divulgar um produto de informática (um Tablet PC), é possível descrever o produto em uma frase e ainda torná-lo objeto de desejo, veja o exemplo : “Novas formas de curtir a Internet sem mouse e teclado ao alcance de seus dedos” ou também: “Curta mais a Internet usando somente os dedos”, ou seja, em uma frase simples eu simplesmente descrevi a principal característica de um Tablet PC.
Seguindo essa mesma linha, outro detalhe no conteúdo é não tente transformar um email marketing em uma loja virtual colocando muitos produtos, saiba quem é o seu publico e foque nos principais produtos.
Porque foque em seu publico? Existe diferença entre um publico e outro?
Com certeza existe diferença, por exemplo, caso o alvo é um publico feminino significa que precisa de um pouco mais de variedade de produtos, visto que mulheres normalmente tendem a procurar mais, entretanto como afirmado anteriormente não adianta mandar uma lista com 10 produtos, isso na verdade irá deixar a pessoa mais confusa e acabar não escolhendo nenhum produto, dessa forma uma melhor maneira de mostrar variedade chamando a atenção e sem deixar a pessoa confusa é demonstra uma variedade de uma mesma linha e alertar para que também tenha outras linhas, por exemplo:
Um email marketing de cosméticos, trás seis produtos no centro sendo um batom, uma sombra, um rímel, um lápis para olhos, um lápis par lábios e um blush, veja que todos os produtos no exemplo são para o rosto (onde um poderá complementar o outro), mas se a empresa também tem cosméticos para o corpo, poderá colocar ao fim desses seis produtos a chamada: “Não deixe de conferir também nossa linha de cosméticos para o corpo. Clique Aqui”, ou seja, dessa forma é chamada a atenção para duas linhas diferentes dentro de um email marketing sem contar uma história, sem agredir visualmente e sobrecarregar o email marketing.
Mas e se o publico for masculino?
Quando o alvo é um publico masculino, o email marketing deverá ser totalmente diferente, normalmente nós (homens) gostamos de menos variedade e mais informação e detalhes (características) do produto, portanto o email marketing deverá ter foco em um ou no máximo dois produtos.
Como seria então esse email marketing?
Ele tem que ter mais fotos do produto (quatro é um bom número), onde a disposição no centro do email marketing é o de colocar uma foto de um ângulo do produto e uma descrição curta, mais abaixo outra foto e uma descrição que complemente a anterior.
Por exemplo, suponhamos que saiu um notebook exclusivo para “gamers”, ele deveria vir uma foto do produto e algumas descrições como processador, memória, tela e duração da bateria, abaixo viria uma segunda foto (de cor diferente da primeira) que descreveria: “esse notebook tem nas cores vermelha, preta e branca”, em uma terceira foto pode ter algumas chamadas como: “preparado para agüentar todo tipo de jogo com placa gráfica de 1gb de memória” e na ultima foto viriam o preço e algo como: “somente por esse email frete grátis, vai perder essa?”, sendo acrescidos ou não de algo como: “Leve também: mochila para carregar seu notebook”, que seria uma chamada para um produto adicional.
Veja que a construção do email marketing é totalmente diferente da anterior (que tem o foco em publico feminino).
Ao construir um email marketing com essas características é possível que ele tenha maior sucesso.
3 – Itens obrigatórios: Ao criar um email marketing nunca deve se esquecer alguns itens obrigatórios e que devem constar em todo email marketing que é a opção de visualizar o email marketing corretamente caso aconteça do email marketing por quaisquer motivos não puder ser visualizado no email da pessoa e a opção para que o usuário deixe de receber o email marketing de forma fácil e simples (e não aquelas famosas mensagens: “Responda esse email com assunto remover” e que nunca resolvem efetivamente, essa opção tem que ser resolvida em um clique e sem o usuário precisar digitar seu email.
Desenvolvimento do email marketing:
Projetando uma campanha de email marketing de sucesso
Tenho visto diversos erros em campanhas de e-mail marketing e então resolvi escrever sobre o assunto para melhor direcionar pessoas que querem fazer campanhas de e-mail marketing. Essa será uma seqüência de três postagens, onde abordarei:
1 Definindo tema e publico alvo (essa postagem aqui)
2 Criação e desenvolvimento
(acesse a postagem)
3 Envio e mensuração (acesse a postagem)
O ponto de partida é um alerta as pessoas que fazem a tradicional conta do um milhão: “compro um milhão de emails, se 1% retornar, estou rico”, entretanto se formos analisar a fundo é possível que não retorne nem mesmo 1%, pois desse um milhão, quantos são válidos? Quantos efetivamente irão receber, já que muitos provedores de email tem se atualizado e melhorado seus sistemas de filtragens de spam, além disso, você tem a sua campanha vista por várias pessoas dessa lista como um ato desesperado e totalmente errado de divulgação, sem mencionar que sua campanha poderá ser denunciada por práticas de spam. E então, será que compensou?
Então como planejar melhor a campanha?
Suporte ao Internet Explorer 6, ainda é necessário?
- ie6
Após algum tempo sem escrever por falta de tempo, estou retornando e começo com um artigo polêmico: “IE6 nunca morre?”. Infelizmente para nossa infelicidade é verdade, o IE6 ainda está presente em quase 2% dos computadores de todo o Brasil com acesso a internet, esses são dados da própria Microsoft no site: http://www.ie6countdown.com/, que para quem não conhece, é um site que demonstra o quanto o ie6 ainda é utilizado no mundo, sendo que o ie6 já tem 10 anos (isso, você não leu errado, 10 anos) e ainda é “uma pedra no sapato” para nós desenvolvedores web.
E meus projetos ainda devem dar suporte ao ie6? Sinceramente preferiria dizer que não, entretanto haverá “casos e casos”, por exemplo, se o seu projeto ou o projeto de seu cliente não terá uma visibilidade (divulgação) nacional ou internacional, esse tipo de suporte se fará desnecessário, uma vez que a probabilidade de diversas pessoas utilizando o ie6 acessarem o projeto é pequena, mas se for o contrario, o projeto poderá precisar de maiores cuidados, inclusive eu já vi alguns projetos com mais de 60 mil visitas apenas por usuários de ie6.
E como dar esse tipo de manutenção? Vamos recorrer (sinceramente não gosto desse termo) as famosas “gambiarras” e tudo que nós (principalmente) brasileiros sabemos muito bem fazer (entenda isso como saber sobreviver as mais diversas condições, ou seja, desenvolver e criar sobre condições inimagináveis).
Tableless – Uso, Prática e Validação
Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas. Uma vez que tabelas foram criadas para exibir dados tabulares e o código HTML (xhtml) para disposição de conteúdo na página, esse é propósito do código HTML. Existem as práticas de desenvolvimento recomendas pela W3C, dentre elas práticas do uso CSS.
O termo ganhou bastante força no Brasil, não sendo tão bem acompanhado pelo restante do mundo.
As vantagens do uso das práticas de desenvolvimento em Tableless estão dentre elas a diminuição do tempo no carregamento da página e consequentemente o seu conteúdo é mostrado mais rapidamente. Outra boa vantagem para citar é a melhora da acessibilidade e também podendo ser vistos em dispositivos moveis, sem a necessidade da instalação de novos recursos ou uso de uma versão em especifico.
Embora a W3C tenha uma gama de recomendações em desenvolvimento e até mesmo o uso e pratica do Tableless, seu validador deixa por passar uma validação de um site com tabelas, aparentando até mesmo uma falha, já que a W3C não recomenda o uso de tabelas, entretanto ganhamos um novo aliado para recomendações e validações, o site é esse aqui: http://w3tableless.com, ainda na versão experimental, mas já se consegue validar e testar se o seu site é Tabless e uma novidade é que ele valida também o grau de Tabless no seu site, se ele não usar nenhuma tabela do inicio ao fim é validado como 100% Tableless, se você usa uma ou outra tabela, ele acusa e diz que seu site ainda não é 100% Tableless. Bem, claro que não posso deixar de fazer a minha propaganda, testei e validei o site da grupouniversos.com e vejam o resultado:
Bem é isso, práticas de Tableless e sua importância para o mercado! Não deixe de práticar.
Adobe Flash e não “Flesh”
Bem pessoal sempre levantaram uma questão da pronuncia correta do software da Adobe, o Adobe Flash, muitas pessoas sempre me questionaram eu pronunciar Flash e não “Flesh”. Bem para sanar esse problema, encontrei um vídeo no youtube de uma das pessoas que trabalham com Flash de dentro da própria Adobe em uma conferencia em San Francisco, no qual ele pronuncia claramente: Flash(com a) e não “Flesh”, vocês podem conferir o vídeo abaixo. Recomendo ligar o som bem alto para escutar a pronuncia correta: Adobe FLASH.
Explicando: Adobe Flash é nome próprio e por isso é diferente do “Flash” da câmera fotográfica, por exemplo, no qual pronunciamos “Flesh”.
Criando um jogo Adobe Flash + Actionscript 3.0 (Prog) Part IV
Bem esse é o último post do jogo Quebra-Cabeça. Espero que esse seja o primeiro de muitos jogos a serem desenvolvidos e postados aqui no blog.
Conforme comentado anteriormente, nesse post falaremos mais de Actionscriot, mas antes de iniciarmos os códigos vamos criar o último item de Design do jogo que será as telas de “Start Game”, “Venceu” e “Perdeu”.
Então primeiro eu vou criar uma nova camada acima da Camada de Informações chamada de “Tela de Informações”.
Na sequência também já crio um novo keyframe no quadro 2 da camada Tela de Inicio, afinal não iremos precisar colocar nenhum conteúdo no quadro 1.
Depois com a ferramenta retângulo (Rectangle Tool) vou desenhar um retangulo de forma que ele cubra todos os demais objetos(a cor do retângulo é irrelevante, podendo usar quaisquer cores):
Converto o retângulo em símbolo do tipo MovieClip, para converter o retângulo, com o objeto selecionado:
Menu Modify, Convert to Symbol… ou uso o atalho F8.
Name: telainicio
Registration: Canto superior esquerdo
Vou dar um nome para o retângulo na instance name para que possa encontrá-lo através de Actionscript. Então seleciono o retângulo e coloco como nome na instance name.
Por último com a ferramenta de texto, vou criar uma caixa de texto vazia.
Com as seguintes configurações:
Dynamic Text
Character
Family: _typewriter
Size: 25.0 pt
Cor: cinza (#CCCCCC)
Essas configurações de fonte, tamanho e cor são apenas uma sugestão, podendo se trabalhar com quaisquer outras fontes, tamanhos ou cores.
Centralizo o texto. E por ultimo coloco o seguinte nome da instance name da caixa de texto:
Agora sim vamos para a parte de Actionscript, clico no quadro 2 da Layer Actionscript e em seguida abro o painel de Action:
Menu Windows, Action ou uso o atalho F9.
Agora vamos começar a digitar o Actionscript de todo o jogo. Como o código final agora é bastante grande já vou colocá-lo comentado(ao copiar o código tome cuidado com as aspas, pois ele as inverte).
stop(); // para o script no quadro atual
import flash.utils.*; // importo uma galeria de utilidades do flash
texto_inicio.text=”Como jogar?\n\n\nMonte o quebra-cabeça encaixando as peças antes que o tempo acabe!\n\nPara começar apenas clique na tela.\n\nIniciar Jogo”; // adiciono o texto no texto_inicio;
var soma:Number = new Number(); // crio uma variável chamado soma e tipo ela como número(só pode receber números)
addEventListener(MouseEvent.MOUSE_DOWN, iniciar); //crio um ouvinte de evento quando houver o clique, inicia a função iniciar
function iniciar(Event:MouseEvent):void { //crio a função iniciar, com parâmetro de mouse com retorno nenhum (void)
tempo.text=”2:0″; // gravo dentro do tempo o valor de 2:0, lembrando que esse valor é apenas uma string
soma=0; // seto o valor inicial de soma para 0
pontos.text=”0″; // gravo dentro de pontos o valor de 0, lembrando que esse valor é apenas uma string
inicio.visible=false; //coloco o quadro do inicio como invisível
texto_inicio.visible=false; // faço o mesmo com o texto que está no inicio
inicio.mouseEnabled=false; //Essa função desabilita o mouse sobre o quadro inicio, para que não atrapalhe enquanto trabalho no quebra cabeças
texto_inicio.mouseEnabled=false; //faço o mesmo com o texto, pois se clicar no texto também ocorre o mesmo problema
for (var i = 1; i < 17; i++) { // crio uma repetição, dizendo que i deve iniciar em 1 e enquanto ele for menor que 17 (temos 16 peças), ele aumenta 1
var Totalpecas=getChildByName(“peca”+i); /* crio uma nova variável com o nome de Totalpecas e pego o nome da peça, lembra que demos os nomes de peca1, peca2 e assim por diante, então ele vai pegar o nome “peca” + i(valor de i que vai se repetir 1, 2,3, até 16 */
Totalpecas.x = Math.floor( Math.random() * (stage.stageWidth-100) ); /* coloco cada peça em uma posição x randômica, para que as peças não fiquem sempre na mesma posição dentro do tamanho máximo do meu stage e subtraio o valor de 100, para que as peças não fiquem muito nos cantos, senão assim seria muito fácil */
Totalpecas.y = Math.floor( Math.random() * (stage.stageHeight-100) ); //faço o mesmo com a posição y
Totalpecas.mouseEnabled=true; /* “ligo” a opção do mouse, agora vem a pergunta, porque fiz isso se o padrão é ser true? Simples, mais abaixo no script eu desligo(seto como false) essa opção em determinado ponto e explicarei mais abaixo */
}
var segundos:Number=0; // crio a variável segundos para criar o cronometro e coloco o valor de 0
var minuto:Number=2; // faço o mesmo para minutos, mais com o valor de 2, ou seja tem 2 minutos para montar o quebra-cabeças
var contador:Timer=new Timer(1000); /*crio uma variável chamada contador e tipo como sendo do tipo Timer e coloco o valor padrão de 1000 milisegundos, ou seja, 1 segundo. A cada um segundo ele volta a função para verificar como está o tempo atual */
contador.addEventListener(“timer”, funcTempo); // crio o ouvinte de evento do contator e chamo a função funcTempo
contador.start(); //inicio o Timer, quando se cria uma função do tipo Timer, é necessário que se inicie ela
function funcTempo(ObjTempo:TimerEvent) { /* crio a função funcTempo, passando o parâmetro como sendo do tipo TimerEvent, ou seja evento de tempo */
if (segundos>0) { // executo uma condição onde pergunto se segundos é maior que 0
segundos–; // se for, ele regride 1
} else { // senão
minuto–; //quem regride são os minutos
segundos+=59; //ao regredir um minuto, os segundos volta a valer 59
}
if (soma==80) { //executo uma segunda condição, se a soma for igual a 80(os pontos do jogador), caso o jogador ganhe!
texto_inicio.text=”Você Venceu, Parabéns\n\n\nVocê fez: “+soma+”pontos\n\n\n\nJogar Novamente?”; /* mudo o texto de texto_inicio, \n significa linha de baixo ou pular linha */
inicio.visible=true; //volto a visibilidade do quadro inicio
texto_inicio.visible=true; //também volto a visibilidade do texto
inicio.mouseEnabled=true; //também devolvo a função do mouse de clicar no quadro inicio
texto_inicio.mouseEnabled=true; // faço o mesmo com o texto
removeEventListener(MouseEvent.MOUSE_OVER, pecas); //removo o ouvinte pecas(veja mais abaixo)
removeEventListener(MouseEvent.MOUSE_DOWN, pegar); //também removo o ouvinte pegar
removeEventListener(MouseEvent.MOUSE_UP, soltar); //e o soltar (veja a explicação abaixo)
inicio.addEventListener(MouseEvent.MOUSE_DOWN, iniciar); // volto a adicionar o ouvinte de texto para o quadro inicio
texto_inicio.addEventListener(MouseEvent.MOUSE_DOWN, iniciar); //faço o mesmo com o texto
contador.stop(); //se o jogador ganhou, paro o contator
contador.removeEventListener(“timer”, funcTempo); /* e removo o ouvinte de evento, isso é necessário por dois motivos, 1 – descarrega da memoria, liberando espaço, 2 – irá zerar o contador, caso o jogador queira jogar novamente. */
}
if (minuto==0&&segundos==0) { // crio uma outra condição, caso o jogador não consiga montar as peças a tempo, ou seja, perdeu
texto_inicio.text=”Você perdeu, tente novamente\n\n\nVocê fez: “+soma+”pontos\n\n\n\nTentar Novamente?”; // adiciono o seguinte texto
inicio.visible=true; // devolvo a visibilidade do inicio
texto_inicio.visible=true; //faço o mesmo com o texto
inicio.mouseEnabled=true; // e também devolto a função de clicar no quadro inicio
texto_inicio.mouseEnabled=true; //faço o mesmo com o texto
removeEventListener(MouseEvent.MOUSE_OVER, pecas); //removo o ouvinte de evento pecas
removeEventListener(MouseEvent.MOUSE_DOWN, pegar); //também removo o ouvinte pegar
removeEventListener(MouseEvent.MOUSE_UP, soltar); // e o ouvinte soltar
contador.stop(); // paro o contator
contador.removeEventListener(“timer”, funcTempo); /* e removo o ouvinte de evento, isso é necessário por dois motivos, 1 – descarrega da memoria, liberando espaço, 2 – irá zerar o contaro, caso o jogador queira jogar novamente. */
inicio.addEventListener(MouseEvent.MOUSE_DOWN, iniciar); //volto a adicionar o ouvinte de texto para o quadro inicio
texto_inicio.addEventListener(MouseEvent.MOUSE_DOWN, iniciar); //também faço o mesmo com o texto_inicio
}
tempo.text=minuto+”:”+segundos; //retorno o valor para a caixa de tempo dos minutos e segundos restantes
}
removeEventListener(MouseEvent.MOUSE_DOWN, iniciar); /*enquanto não acontece nenhuma das condições acima, eu removo o ouvinte de evento iniciar */
addEventListener(MouseEvent.MOUSE_OVER, pecas); /*crio um novo ouvinte de evento, dessa vez com a propriedade MOUSE_OVER, ou seja quando o usuário passar o mouse sobre o(s) objeto(s) ele irá chamar a função pecas*/
}
function pecas(evt:Event):void { //crio a função pecas e passo o parâmetro evt do tipo Event
switch (evt.target.name) { // recupero o nome do objeto em qual o usuário está no momento passando o mouse por cima e pergunto:
case “tempo” : /* caso seja o tempo(campo dynamic de texto), ele não faz nada, imagina você puder ficar arrastanto a contagem de tempo, sem contar que isso poderia prejudicar o script, além de ocasionar erro. */
break; // pare aqui
case “pontos” : // caso seja pontos(campo dynamic de texto), ele também não irá fazer nada
break; //pare aqui
case “espaco1″ : //lembra das nossas peças invisiveis, não é porque elas estão invisiveis que não podem ser selecionadas, fiz isso para as 16.
break;
case “espaco2″ :
break;
case “espaco3″ :
break;
case “espaco4″ :
break;
case “espaco5″ :
break;
case “espaco6″ :
break;
case “espaco7″ :
break;
case “espaco8″ :
break;
case “espaco9″ :
break;
case “espaco10″ :
break;
case “espaco11″ :
break;
case “espaco12″ :
break;
case “espaco13″ :
break;
case “espaco14″ :
break;
case “espaco15″ :
break;
case “espaco16″ :
break;
default : //bem caso não seja nenhuma dessas opções, será o que precisamos
evt.target.addEventListener(MouseEvent.MOUSE_DOWN, pegar); /*não me importa qual peça ele pegou, o importante é que ele selecionou e ao selecionar, ele dispara a função pegar */
evt.target.addEventListener(MouseEvent.MOUSE_UP, soltar); // o mesmo irá ocorrer quando ele soltar a peça
break; //pare aqui
}
}
function pegar(Obj:Event):void { // crio a função pegar
Obj.target.startDrag(); // inicio a opção de poder arrastar a peça enquanto segura o botão do mouse apertado
Obj.target.alpha = 0.6; //também digo que a minha transparência é de 60%
}
function soltar(Obj:Event):void { //crio a função soltar
Obj.target.stopDrag(); //faço o objeto parar aonde o jogador soltou o botão do mouse
var espaco=”espaco”+Obj.target.name.substring(4,6); /*recupero os dois ultimos digitos do nome da peça(exemplo: seleciono a peca1, ele retorna 1, seleciono a peca15, ele retorna apenas 15, isso foi possivel graças ao substring, onde o valor 4, significa que eu quero que ignore os 4 primeiros caracteres pegue apenas a partir do quinto e o número 6 significa que eu quero que pare no máximo até o caracter 6 */
Obj.target.alpha = 1; //volto a transparencia da peça para 100%
var alvo = getChildByName(espaco); /* De posse da informação dos dois ultimos caracteres, eu crio uma variável que vai pegar a string acima “espaco” e vai adicionar os dois ultimos caracteres recuperados, formando assim o então espaco1, espaco2…. até o espaco16 */
if (Obj.target.hitTestPoint(alvo.x+50,alvo.y+50,true)) { /* Depois eu executo uma condição se a peça que o jogador está tentando encaixar está realmente sobre o espaço correto com uma margem de erro de 50, afinal acertar a posição exata de x e y poderia ser algo extremamente complicado */
soma+=5; //caso ele acerte soma +5 pontos
pontos.text = soma+”pts”; // retorno essa informação dentro do dynamic text pontos
Obj.target.mouseEnabled=false; /*a peça já foi encaixada, então desativo a opção de movimenta-la, para não ter um espertinho querendo fazer milhões de pontos */
Obj.target.x=getChildByName(espaco).x; //travo a peça na posição do espaço certo em x
Obj.target.y=getChildByName(espaco).y; //e no y
removeEventListener(MouseEvent.MOUSE_DOWN, pegar); // removo o ouvinte de evento pegar, descarregando da memoria
removeEventListener(MouseEvent.MOUSE_UP, soltar); //faço o mesmo com o ouvinte soltar
} else {
removeEventListener(MouseEvent.MOUSE_DOWN, pegar); /* se ainda não conseguiu encaixar no espaço correto, eu também descarrego o ouvinte da memoria para tornar o jogo mais rápido */
removeEventListener(MouseEvent.MOUSE_UP, soltar); //faço o mesmo com o soltar
}
}
Assim finalizo a última parte do Jogo: Quebra-Cabeças, algumas outras informações:
O meu aquivo .fla ficou com 320Kb
O swf ficou com apenas: 17,9Kb
Ele consome entre 6352Kb e 6380Kb de memóra, ou seja é possivel rodar até mesmo em computadores muito lentos e com pouca memória ram.
Por último o size report do jogo:
quebra-cabecas.swf Movie Report
——————————–
Metadata
——–
Bytes Value
—– —–
1049 <rdf:RDF xmlns:rdf=”http://www.w3.org/1999/02/22-rdf-syntax-ns#”> <rdf:Description rdf:about=”" xmlns:xmp=”http://ns.adobe.com/xap/1.0/”> <xmp:CreatorTool>Adobe Flash CS4 Professional</xmp:CreatorTool> <xmp:CreateDate>2009-05-21T19:25:16-03:00</xmp:CreateDate> <xmp:MetadataDate>2009-05-28T22:12:13-03:00</xmp:MetadataDate> <xmp:ModifyDate>2009-05-28T22:12:13-03:00</xmp:ModifyDate> </rdf:Description> <rdf:Description rdf:about=”" xmlns:xmpMM=”http://ns.adobe.com/xap/1.0/mm/” xmlns:stRef=”http://ns.adobe.com/xap/1.0/sType/ResourceRef#”> <xmpMM:InstanceID>xmp.iid:E4D60591DE4BDE11B4A1AD2E7C4A877D</xmpMM:InstanceID> <xmpMM:DocumentID>xmp.did:E4D60591DE4BDE11B4A1AD2E7C4A877D</xmpMM:DocumentID> <xmpMM:OriginalDocumentID>xmp.did:6823CA215546DE11A3988B60EAE2E33E</xmpMM:OriginalDocumentID> <xmpMM:DerivedFrom rdf:parseType=”Resource”> <stRef:instanceID>xmp.iid:31407BC75F4ADE119D74E069E2B7B7C0</stRef:instanceID> <stRef:documentID>xmp.did:31407BC75F4ADE119D74E069E2B7B7C0</stRef:documentID> <stRef:originalDocumentID>xmp.did:6823CA215546DE11A3988B60EAE2E33E</stRef:originalDocumentID> </xmpMM:DerivedFrom> </rdf:Description> <rdf:Description rdf:about=”" xmlns:dc=”http://purl.org/dc/elements/1.1/”> <dc:format>application/x-shockwave-flash</dc:format> </rdf:Description> </rdf:RDF>
Frame # Frame Bytes Total Bytes Scene
——- ———– ———– —————-
1 15165 15165 Scene 1 (AS 3.0 Classes Export Frame)
2 3261 18426
Scene Shape Bytes Text Bytes ActionScript Bytes
————————- ———– ———- ——————
Scene 1 604 249 3214
Symbol Shape Bytes Text Bytes ActionScript Bytes
————————- ———– ———- ——————
telainicio 34 0 0
peca16 72 0 0
peca15 88 0 0
peca14 88 0 0
peca13 69 0 0
peca12 98 0 0
peca11 109 0 0
peca10 104 0 0
peca9 88 0 0
peca8 87 0 0
peca7 103 0 0
peca6 99 0 0
peca5 83 0 0
peca4 64 0 0
peca3 82 0 0
peca2 81 0 0
peca1 65 0 0
espaco16 0 0 0
espaco15 0 0 0
espaco14 0 0 0
espaco13 0 0 0
espaco12 0 0 0
espaco11 0 0 0
espaco10 0 0 0
espaco9 0 0 0
espaco8 0 0 0
espaco7 0 0 0
espaco6 0 0 0
espaco5 0 0 0
espaco4 0 0 0
espaco3 0 0 0
espaco2 0 0 0
espaco1 0 0 0
Mascara_quadrado 32 0 0
img_fundo 37 0 0
Font Name Bytes Characters
———————- ——— ————–
_typewriter 35
ActionScript Bytes Location
—————— ——–
3214 Scene 1:Frame 1
Bitmap Compressed Compression
———————– ———- ——– ———–
quebra-cabecas.jpg 10004 230400 JPEG Quality=80
Abraços e até o próximo jogo.
Participo:
Como comentei no post anterior (anteriormente em…)
Hacks, em uma tradução mais coloquial podemos dizer que são as nossas tradicionais “gambiarras” (tenta explicar o que é essa palavra para um americano ou japonês). Portanto utilizar de gambiarras para fazer algo funcionar não é algo muito bom, entretanto alguns navegadores (leia Internet Explorer) “teimam” em renderizar os elementos em posições ou estruturas diferentes das que foram formatadas, devido à construção dos pixels e entendimento dos espaçamentos e posicionamento (principalmente).
Eu sou totalmente contra o uso de Hackes, pois acredito que possa ser possível criar formatações que funcione em todos os navegadores de forma uniforme, entretanto às vezes acontecem formatações inesperadas como “quebra” de um elemento ou em alguns casos (como já aconteceu comigo) o desaparecimento do elemento.
A primeira maneira de hack e talvez seja a melhor dentre os piores é o uso dos “Comentários condicionais”, onde é possível atribuir uma folha de estilos secundaria ao qual somente será incorporada caso o navegador seja da versão em que o comentário foi condicionado.
Como o navegador que costuma gerar mais problemas é o Internet Explorer, irei começar com ele:
Comentário condicional para IE6 e IE7:
IE 6:
IE 7:
Dica: lt = menor que(less than), lte = menor ou igual a(less than or equal too)
Ao adicionar essas linhas dentro da sua tag HEAD, os arquivos ie6.css e ie7.css somente serão incorporados à sua página, caso o usuário esteja utilizando o Internet Explorer 6 ou Internet Explorer 7 (respectivamente aos arquivos).
Dentro desses arquivos é possível subscrever a formatação de um elemento, fazendo com que esse elemento no navegador X tenha um comportamento diferente.
Exemplos:
div#teste { width: 50px; height: 50px; background: #999999; margin-top: 5px; }Na demonstração acima tem um elemento de divisão (uma div) com as dimensões de 50 pixels de altura e 50 pixels de largura uma cor de fundo cinza e uma margem de 5 pixels no topo e supostamente essa margem no topo não corresponde de forma igual nos navegador IE 6 e IE 7, dessa forma basta ir nesse arquivos e adicionar o mesmo elemento:
div#teste { magin-top: 10px !important; }E adicionar uma nova margem ao mesmo elemento. O uso do “!important” ao contrário do que muitos afirmam que é um Hack, o “!important” não é um Hack, é dar aquela formatação uma importância maior do que qualquer outra formatação (inclusive formatação “inline” do elemento).
É necessário sempre o uso do “!important” nos arquivos de CSS direcionados para os navegadores?
Na verdade não, irá depender de como está à ordem de incorporação dos seus CSS. Por exemplo:
Nesse exemplo acima não será necessário o uso do “!important”, devido ao CSS padrão ser incorporado primeiro aos CSS de “Hack”, portanto, tudo que estiver no CSS de “Hack” irá sobrescrever os elementos.
Mas se fosse o contrário:
Nesse segundo caso já seria necessário o uso do “!important”, pois o que estiver no CSS de “Hack” será sobrescrito pelo CSS padrão.
Também é possível adicionar um comentário condicional para incorporar um css para navegadores diferentes do Internet Explorer:
Dessa forma o css somente será incorporado se o navegador não for o Internet Explorer.
Outras formas de Hack:
… Continue lendo