UNIVERSOS ideias

Gravar dados de qualquer formulário em PHP [ Parte I ]

Rodrigo — Wed, 25 Jan 2012 21:56:20 +0000

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.

EM SQL:

CREATE database banco1;

Se tiver o phpmyadmin instalado poderá ser utilizada no modo visual a criação do banco de dados.

TABELA:

Também é necessário criar uma tabela nesse banco de dados e será dado o nome de cadastro a ela, com os campos:

id, nome, email, assunto e telefone.

EM SQL:

CREATE TABLE cadastro (id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, nome VARCHAR(60) NOT NULL, email VARCHAR(60) NOT NULL, assunto VARCHAR(100) NOT NULL, telefone VARCHAR(14) NOT NULL) ENGINE = InnoDB;

O próximo passo é criar a página que contém o formulário:





Gravar dados de qualquer formulário em PHP [ Parte I ]



	
    	
        	Nome:
        	
        
    	
        	Email:
        	
        
    	
        	Assunto:
        	
        
    	
        	Telefone:

IMPORTANTE:
Os nomes dos campos do formulário devem ser os mesmos da coluna da tabela para esse primeiro exemplo.

GRAVAR.PHP

O arquivo gravar.php ficará responsável por pegar essas variáveis se conectar ao banco e fazer a inserção no banco de dados:

 $val) {

/* Separo os campos e gravo em uma variável( na verdade uma nova matriz de dados) chamado de $campos[] */
$campos[]   = $campo;

/* Faço o mesmo com o conteúdo, porém utilizo as funções: mysql_real_espace_string para evitar que seja realizado uma tentativa de burlar o banco de dados utilizando injeção de SQL e strip_tags eliminar as tags HTML */

$conteudo[] = mysql_real_escape_string(strip_tags($val));

}

/* Crio a SQL que irá ser inserida no banco de dados   */
$insert = "INSERT INTO $tabela(".implode(',',$campos).") VALUES('".str_replace(",","','",implode(',',$conteudo))."')";

/* Faço a inserção no banco de dados e caso haja algum erro na inserção, será retornado através da função mysql_error() */
mysql_query($insert) or die ('ERRO: '.mysql_error());

/* Caso não haja erros exibi a mensagem de sucesso.  */
echo 'Dados gravados com sucesso';

}

/* Chamo a função gravar passando o parâmetro que é o nome da tabela */
echo gravar('cadastro');

?>

Caso queira fazer download dos arquivos. Clique Aqui, porém os arquivos estão sem os comentários.

Essa é a primeira de uma série de quatro postagens que irei realizar sobre gravar dados no banco de dados utilizando o PHP. Na próxima postagem irei mostrar como deixar essa função mais completa, com outros recursos. Até a próxima.

Você sabe denunciar spam?

Rodrigo — Wed, 11 Jan 2012 11:15:53 +0000

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?

1.1 Motivo 1:

O link do email pode ser um caso de phising*, dessa forma redirecionar a endereços que podem inserir vírus, dentre outros problemas.

* phising É uma fraude eletrônica quando um site ou email tenta se “passar” por um site ou email verdadeiro de alguma outra empresa, produto ou serviço.

1.2 Motivo 2:

Ao clicar nesses links você está confirmando que esse email é verdadeiro, válido e utilizado por alguém, ou seja, será mesmo que seu email foi removido ou adicionado a uma lista de emails segura que posteriormente será vendida para quem tiver interesse?

2 – Caso seja constado que é uma prática de phising, a empresa ao qual o conteúdo do email está tentando forjar precisa ser avisada, onde será necessário procurar um email de contato no site oficial da empresa e encaminhar uma cópia do email (novamente sempre enviando com cópia para o email mail-abuse@cert.br) falso para um representante da empresa, pois normalmente são emails com conteúdo de phising são de grandes empresas ou marcas, dessa forma eles terão maior poder para contra-atacar ações como essa.

E se o servidor for americano?

Use o Google Tradutor e não deixe de denunciar.

Esse é o fim dessa postagem que apesar de curta visou alertar e de certa forma tentar reduzir essa prática de spam que é um grande problema.

Envio de email marketing e mensuração

Rodrigo — Thu, 17 Nov 2011 12:24:34 +0000

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?

É preferível refazer ou gastar dinheiro tempo e não obter nenhum resultado? Faça essa pergunta a vocês mesmo e qual seria a melhor resposta que você se daria?

Muitos erros que observo é que as pessoas tendem a “se verem” utilizando ou recebendo um email marketing, mas o que importa é como o seu publico irá reagir, o que é mais importante o que você acha ou o que o seu publico espera? Então é muito importante que você colha informações de fora, de pessoas neutras e se necessário refaça a campanha, é melhor refazer agora do que não ter um resultado insatisfatório ou não ter resultado nenhum.

ENVIO E MENSURAÇÂO:

Ao enviar a campanha, faça a sua mensuração, avalie quantos abriram os emails, se foram até o site, quanto tempo estão gastando na página, compraram? Não compraram? Adicionaram aos favoritos? Etc… Eu posso até brincar dizendo: “Descubra qual é a cor da calcinha ou da cueca” de quem está recebendo a campanha.

Escolher um bom horário para envio e enviar a campanha particionada pode ajudar: entre 10:00 e 12:00 e entre 14:00 e 16:00 horas são bons horários para envio, entretanto isso precisa ser analisado caso a caso, pois varia de publico alvo da campanha.

Evasão do email marketing:

Não entenda as evasões de publico como um erro da campanha, mas aprenda a entender o porquê isso aconteceu e procure “resgatar” a simpatia com essa pessoa. O primeiro passo é criar uma página mais agradável de saída, onde ao clicar em “sair” da lista, ele seja direcionado a uma página que irá agradecer ao usuário por participar por todo esse tempo e que sente infelizmente ao vê-lo deixar de participar, ou seja, dessa forma fica mais “suave” e simpática a forma como fazê-lo deixar a campanha e não as aquelas páginas: “removido com sucesso”, dessa forma a campanha está demonstrando que você é só mais um pra ela e que sua saída não é importante.

Nota: A saída de uma pessoa é tão importante quanto uma compra, pois o que motivou uma pessoa a comprar não precisa ser necessariamente o oposto para que uma pessoa tenha se evadido de receber essa propaganda, ou seja, é importante entender o que aconteceu e saber o porquê dessa saída.

Não a perca, resgate-a de volta:

Ainda nesse principio, não perca essa pessoa que evadiu da campanha, prepare um email questionando o motivo e o que pode ser feito para tê-la de volta a receber emails de suas campanhas, mas não faça um envio automático ao final do descadastramento, envie dentro de dois ou três dias e avalie, colha essas informações.

Custos:

Vejo que muitas pessoas preferem reduzir o maior número de custos possíveis com email marketing, mas sinceramente se a sua campanha não está preparada para gastar entre R$ 1.000,00 e R$ 1.500,00 reais, o objetivo (explicado na primeira postagem) de sua campanha está errado e nunca será alcançado.

Finalizo a última postagem sobre campanha de email marketing e espero que tenham aproveitado e principalmente ajudado a criar uma campanha com maiores probabilidades de sucesso. Dúvidas ou modelos de páginas mais agradáveis bem como ajuda com elaboração de textos é só deixar um comentário.

Criação e desenvolvimento de um email marketing correto + 6 dicas de como desenvolver um

Rodrigo — Thu, 10 Nov 2011 13:13:16 +0000

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:

O desenvolvimento efetivo do email marketing deve-se tomar cuidado com alguns detalhes:

1 – O tamanho da largura não deve passar de 600pixel, a altura poderá ser usado maior, porém, nada de abusos (1200 pixels de altura, por exemplo).

2 – O desenvolvimento do email marketing deve ser feito em HTML simples e utilizando tabelas para diagramar o conteúdo, pois os leitores de emails são bastante limitados e o tradicional uso do Tableless não irá ajudar nesse caso, na verdade irá atrapalhar e algumas tags que são utilizadas para dar relevância em um site, não devem (precisam) sem utilizadas em um email marketing como, por exemplo, tags de titulo (h1, h2, etc..), para sua construção pode se utilizar somente as tags span, p, strong, em, a, e img.

3 – Uso de alt e title em todas as imagens, tanto os leitores de emails quanto os webmails bloqueiam as imagens sendo necessária a aceitação por parte do usuário e caso ele não aceite, ficará uma tela em branca no lugar que deveriam ficar as imagens, portanto as imagens deverão sempre estar acompanhadas da sua descrição dentro dos parâmetros de alt e title.

4 – Todas as células da tabela devem ter os parâmetros: align=”left” valign=”top”, para que o conteúdo seja carregado sempre da esquerda para direita e de cima para baixo. Algumas células poderão incluir o alinhamento no centro ou à direita, porém o valign deverá ser sempre no top (até porque ele não funciona corretamente no webmail da Hotmail nas demais opções).

5 – Alinhamento de imagens, não é sempre, mas em vários casos é necessário que as imagens também tenham um align left (sendo esse utilizado em praticamente todo tipo de newsletter como forma de tentar garantir que as imagens não se desloquem dentro da célula) ou right.

6 – Toda a formatação do email marketing deverá ser realizada pelo CSS inline, portanto no próprio elemento, apenas muita atenção à utilização dessa formatação que deve ser muito simples (cores, tamanho e estilo de fonte), margens tanto internas quanto externas devem ser evitadas, pois não funcionam corretamente.

Bom, essa é a finalização da segunda postagem sobre como construir uma campanha de email marketing de sucesso, na próxima postagem irei abortar os testes antes do envio (correções se necessário), a mensuração e como trabalhar as pessoas que desistiram de receber esse conteúdo.

Projetando uma campanha de email marketing de sucesso

Rodrigo — Sun, 06 Nov 2011 00:14:39 +0000

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?

O primeiro passo é entender melhor seu produto e seu publico, e se nesse ponto existir dificuldades, nada melhor do que procurar um especialista (um profissional na área), pois outro erro que enxergo é: “consigo fazer tudo sozinho ou quero fazer tudo sozinho para reduzir o custo”, porém qual o problema em procurar um profissional? O custo gasto com uma consultoria bem realizada é o menor dos problemas e esse custo retornará com um melhor direcionamento da campanha e com certeza a campanha terá maior sucesso.

O que deve ter um bom planejamento?

Um bom planejamento antes de tudo deve ter um objetivo. Qual é o objetivo da campanha? É divulgar? Atrair novos clientes? Cuidar dos clientes que já tem? Informar? Bom, seja qual for o objetivo, ele deverá estar muito bem especificado e toda a campanha deverá se voltar a ele.

Envolvimento dos elementos da campanha, se a campanha tem um objetivo que também pode ser explorados através do site ou através das redes sociais, então nada melhor do que explorar esses elementos em conjunto, por exemplo: Se o objetivo é realizar uma promoção relâmpago em algum produto no site, então deve-se preparar o site voltado a esse produto, onde ao disparar o email marketing e as pessoas comecem a receber e acessar o site, poderá conferir que é uma promoção que está acontecendo naquele momento dessa forma a pessoa se sentirá beneficiada por receber esse aviso, dando a entender uma certa vantagem ao ter assinado esse canal de comunicação.

Encerro a primeira das três postagens que farei em relação a uma boa campanha de email marketing. Comentários sempre são bem vindos, mesmo com críticas.

Até a próxima postagem.

Hacks para Internet Explorer, Firefox, Chrome

Rodrigo — Tue, 01 Nov 2011 12:43:10 +0000

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:

Existem também formas de Hack que podem ser utilizado no seu CSS padrão que será lido apenas pelos navegadores XYZ:

Uso de formatação somente para Internet Explorer:

1

#elemento { atributos: valor\9 }

Exemplo:

#bloco { padding-top: 25px\9;  }

A formatação acima será lida somente pelo navegador Internet Explorer (todas as versões).

Uso de formatação somente para o Internet Explorer 9 (é, acreditem, até mesmo essa “nova” versão do IE dá problemas “as vezes”):

1

:root #elemento { atributos:valor \0/IE9; }

Exemplo:

:root #bloco { margin-left: 50px \0/IE9;  }

A formatação acima será lida somente pelo Internet Explorer 9

Hack para Google Chrome:

É difícil acontecer, mas não impossível, o navegador da Google também “apronta” as vezes e é necessário fazer algumas correções através de Hack:

@media screen and (-webkit-min-device-pixel-ratio:0){

#elemento { atributos: valor; }

}

Exemplo:

@media screen and (-webkit-min-device-pixel-ratio:0){

#bloco { margin: 5px 20px 10 0; }

}

Essa formatação somente será lida pelo Google Chrome.

E para finalizar o post, é claro que também existem Hack para o Firefox, mas sinceramente se você leu o post até aqui para usar Hack para o Firefox, acredito que seja preciso rever seu CSS:

@-moz-document url-prefix() { #elemento { atributos: valor; } }

Exemplo:

@-moz-document url-prefix() {

#bloco  { display: none; }

}

A linha acima apesar de estranha será lida somente pelo Firefox

Algumas leituras recomendadas:

http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx (em inglês, informações sobre comentários condicionais).

http://hacks.mozilla.org/ (Não você não vai aprender Hacks para o Firefox nesse site e sim descobrir o que está sendo realizado para o Firefox e o que poderá utilizar tanto de HTML quanto de CSS).

Até a próxima postagem. Dúvidas ou sugestões, bem como complementos para o post, me envie um comentário.

Suporte ao Internet Explorer 6, ainda é necessário?

Rodrigo — Thu, 13 Oct 2011 00:21:20 +0000

: 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).

Para quem desenvolve em HTML, poderá pegar um framework que funciona muito bem no ie6, eu indico o http://52framework.com/, ele é um pouco complicado de entender no começo (inclusive em um próximo post poderei dizer melhor como utilizá-lo), mas extremamente útil para resolver alguns problemas que o projeto possa ter ao ser exibido em um navegador tão antigo, podendo causar uma péssima impressão ao usuário (que por inocência, comodismo ou por falta interesse mesmo) não atualizou seu navegador “só” nesses últimos dez anos.

E para quem não desenvolve em html5? (senta no chão e chora?): Na verdade basta aguardar os próximos posts que irei fazer demostrando algumas técnicas (ódeio escrever, mas são hacks) que podem ser utilizadas para quem desenvolve em xhtml (como eu) e não utiliza html5 ainda.

Tableless – Uso, Prática e Validação

Rodrigo — Tue, 21 Jul 2009 01:01:13 +0000

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”

Rodrigo — Fri, 29 May 2009 03:01:16 +0000

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

Rodrigo — Fri, 29 May 2009 01:22:59 +0000

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%
}

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    Adobe Flash CS4 Professional 2009-05-21T19:25:16-03:00 2009-05-28T22:12:13-03:00 2009-05-28T22:12:13-03:00 xmp.iid:E4D60591DE4BDE11B4A1AD2E7C4A877D xmp.did:E4D60591DE4BDE11B4A1AD2E7C4A877D xmp.did:6823CA215546DE11A3988B60EAE2E33E xmp.iid:31407BC75F4ADE119D74E069E2B7B7C0 xmp.did:31407BC75F4ADE119D74E069E2B7B7C0 xmp.did:6823CA215546DE11A3988B60EAE2E33E application/x-shockwave-flash

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.