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.
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?
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.
Sitemap – O que são?
Complementando o “post” anterior, o que são Sitemaps e porque devo utilizar?
Os Sitemaps são uma forma fácil para informar os mecanismos de pesquisa sobre seus sites ou páginas disponíveis para indexação. Em sua composição mais simples, um Sitemap é um arquivo XML(Extensible Markup Language) que relaciona os URLS de um site junto com metadados adicionais sobre cada URL (quando ele foi atualizado pela última vez; com que freqüência ele é alterado; qual a sua importância em relação a outros URLs no site) para que os mecanismos de pesquisas possam indexar o site de maneira mais inteligente.
Em geral, indexadores descobrem páginas com base em links no site e outros sites. Os Sitemaps complementam esses dados para permitir que os indexadores com suporte para Sitemaps peguem todos os URLs no Sitemap e aprendam sobre esses URLs usando os metadados associados. O uso do protocolo de Sitemap não garante que as páginas da Web sejam incluídas nos mecanismos de pesquisa, mas fornece dicas para que os indexadores sejam mais eficientes na indexação do seu site.
O Sitemap 0.90 é oferecido de acordo com os termos da Attribution-ShareAlike Creative Commons License e é amplamente empregado, contando com o apoio da Google, Yahoo e Microsoft.
Antes de fazermos um Sitemap, faço uma breve explicação sobre o que é XML:
XML (Extensible Markup Language) é um simples e flexível formato de texto derivado de SGML (ISO 8879). Originalmente concebido para responder aos desafios da publicação eletrônica em larga escala, o XML também tem um grande papel cada vez mais importante na troca de ampla variedade de dados na Internet e outros locais.
Como se escreve um XML?
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<raiz>
<filho1>
<filho2>
</filho2>
</filho1>
</raiz>
Exemplo simples de um XML:
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<cadastro>
<codCliente>01</codCliente>
<nomeCliente>XML 01</nomeCliente>
</cadastro>
Entenda o código:
Esta primeira linha do documento é uma declaração XML e deve sempre ser incluída, pois define a versão XML do documento. Neste caso estamos especificando a versão 1.0 da XML.
<?xml version=”1.0″ encoding=”iso-8859-1″?>
Esta linha define o primeiro elemento do documento – o elemento raiz. (nó raiz)
<cadastro>
Estas duas linhas definem os elementos filhos da raiz:
<codCliente>01</codCliente>
<nomeCliente>XML 01</nomeCliente>
Agora que já aprendemos sobre XML, vamos criar nosso sitemap:
<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″>
<url>
<loc>http://www.meusite.com.br/</loc>
<lastmod>2005-04-26</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
Definições de tag em XML:
TAG: <urlset>
USO: Obrigatório
Descrição: Executa o encapsulamento do arquivo e faz referência ao padrão de protocolo atual.
TAG: <url>
USO: Obrigatório
Descrição: Tag pai de cada entrada de URL. O restante das tags são as tags filhas dessa tag.
TAG: <loc>
USO: Obrigatório
Descrição: URL da página. Esse URL deve começar com um protocolo (como http) e terminar com uma barra final, caso seja exigido pelo seu servidor. Esse valor deve conter menos de 2.048 caracteres.
TAG: <lastmod>
USO: Opcional
Descrição: A data da última modificação do arquivo. Essa data deve estar no formato de data e hora do W3C. Esse formato permite omitir o horário, se desejar, e usar AAAA-MM-DD.
Lembre-se de que esta tag é separada do cabeçalho If-Modified-Since (304) que o servidor pode retornar, e os mecanismos de pesquisa podem usar as informações de ambas as fontes de forma diferente.
TAG: <changefreq>
USO: Opcional
Descrição: A freqüência com que a página é alterada. Esse valor fornece informações gerais para os mecanismos de pesquisa e pode ser que ele não corresponda exatamente à freqüência de indexação da página. Os valores válidos são:
always
hourly
daily
weekly
monthly
anual
never
O valor “always” deve ser usado para descrever os documentos que sempre são alterados quando acessados. O valor “never” deve ser usado para descrever os URLs arquivados.
Observe que o valor dessas tag é considerado uma dica e não um comando. Mesmo que os indexadores de mecanismo de pesquisa possam considerar essas informações ao tomar decisões, pode ser que indexem as páginas marcadas como “horárias” com menos freqüência do que isso e talvez façam a indexação de páginas marcadas como “anualmente” com mais freqüência do que isso. Os indexadores podem indexar páginas marcadas como “nunca” periodicamente, para que possam lidar com alterações inesperadas nessas páginas.
TAG: <priority>
USO: Opcional
Descrição: A prioridade desses URL em relação a outros URLs do mesmo site. Os valores válidos vão de 0.0 a 1.0. Esse valor não afeta o modo como as páginas são comparadas às páginas em outros sites — apenas permite que os mecanismos de pesquisa saibam quais páginas você considera mais importantes para os indexadores.
A prioridade padrão de uma página é 0.5.
Observe que não é provável que a prioridade atribuída a uma página influencie a posição dos URLs nas páginas de resultados de um mecanismo de pesquisa. Os mecanismos de pesquisa podem usar essas informações quando selecionam entre URLs no mesmo site. Use essa tag para aumentar a probabilidade de a maioria das páginas importantes estarem presentes em um índice de pesquisa.
Além disso, observe que a atribuição de uma prioridade alta a todos os URLs no site provavelmente não o ajudará. Como a prioridade é relativa, ela só é usada para priorizar os URLs do seu site.
Escape de entidade
É necessário que o arquivo Sitemap use a codificação UTF-8 (esse procedimento pode ser feito no momento em que você salvar o arquivo). Assim como em todos os arquivos XML, quaisquer valores de dados (inclusive os URLs) devem usar códigos de escape de entidade para os caracteres listados abaixo:
E comercial & &
Aspas simples ‘ '
Aspas duplas ” "
Maior que > >
Menor que < <
Além disso, todos os URLs (inclusive o URL do Sitemap) devem terminar com um caractere de escape e ser codificados de modo que possam ser lidos pelo servidor Web em que estão localizados. No entanto, se estiver usando qualquer tipo de script, ferramenta ou arquivo de log para gerar os URLs (qualquer mecanismo, exceto digitá-los manualmente), isso geralmente é feito para você. Verifique se os URLs seguem o padrão RFC-3986 para URIs, o padrão RFC-3987 para IRIs e o padrão XML.
Observe a seguir o exemplo de um URL que usa um caractere não-ASCII (ü) e um caractere que requer escape de entidade (&):
http://www.meusite.com.br/ümlat.php&q=name
Consulte a seguir os seguintes dados: o mesmo URL, a codificação ISO-8859-1 (para hospedagem em um servidor que usa esse tipo de codificação) e o escape do URL:
http://www.meusite.com.br/%FCmlat.php&q=name
Consulte a seguir os seguintes dados: o mesmo URL, a codificação UTF-8 (para hospedagem em um servidor que usa esse tipo de codificação) e o escape do URL:
http://www.meusite.com.br/%C3%BCmlat.php&q=name
Observe abaixo a mesma URL, mas também com escape de entidade:
http://www.meusite.com.br/%C3%BCmlat.php&q=name
CSS 3.0 O que é e o que eu ganho com isso?
O que é?
CSS é uma sigla de Cascading Style Sheet, ou folha de estilos em cascata. CSS é uma linguagem de marcação usada para definir padrões de comportamentos, estilo visual e elemento de navegação para Web Sites!
Desde seu “nascimento” até os dias de hoje, essa linguagem evoluiu bastante até chegar a sua versão CSS 2.1, onde alcançou uma grande gama de definições e implantações.
Hoje ainda está sendo discutida pelo Grupo de Trabalho do CSS, a versão 3.0, como o grupo de trabalho trabalha em um método de consenso, ainda demora em sair à versão definitiva do CSS 3.0, enquanto isso nós já podemos testar alguns itens que estão sendo discutido (somente em alguns navegadores).
Exemplo:
Bordas com cantos arredondados através de CSS sem uso de imagens:
Para quem utiliza o Mozilla / Firefox ou Safari 3, consegue ver esse resultado usando apenas usando CSS, com o código:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Para quem utiliza o navegador Internet Explorer(testei na versão 8.0 final), ainda não é possível testar esse resultado, pois o CSS 3.0 como já comentado está em fase de discussão ainda.
O que eu ganho com a vinda do CSS 3.0?
O seu site ficará ainda mais leve e com recursos muito mais ricos. O único problema é esperar pela implantação oficial para poder usar e ter a certeza de que todos os navegadores interpretação da mesma maneira.
Para acompanhar o desenvolvimento e informações sobre o CSS 3.0
Acesse o link-> http://www.css3.info/
O que é SEM, SEO e SMO?
SEM
Marketing em Sites de Busca / Search Engine Marketing
Search Marketing é a área de marketing on-line responsável pelas estratégias e técnicas que envolvem a geração e o aumento de tráfego proveniente de ferramentas de busca, assim como a promoção e proteção de marca nos resultados das mesmas.
SEO
Otimização de Sites / Search Engine Optimization
SEO ou Otimização de Sites nada mais é do que um conjunto de técnicas implementadas dentro e fora de um site que tem como objetivo potencializar a presença de um site nos resultados naturais (orgânicos) nos sites de busca.
- 70% dos cliques nos resultados de busca são gerados nos resultados naturais;
- 64% dos usuários de sites de busca não passam da primeira página de resultados;
- 90% dos usuários de sites de busca abandonam uma busca se não encontram o que procuram nas 3 primeiras páginas;
- 55% dos usuários de sites de busca clicam em apenas 1 (um) resultado e 80% em no máximo 3 (três).
Prós e Contra do SEO
VANTAGENS
- Aumento de tráfego;
- Construção da marca;
- Foco em prospects;
- Aumento de conversões;
- Buscadores em ascensão.
DESVANTAGENS
- Limitações na criatividade;
- Resultado em longo prazo.
SMO
Social Media Optimization / Marketing em Redes Sociais
O objetivo é ampliar as referências a seu site em comunidades e redes sociais, em uma espécie de marketing para buscadores.
Assim é possível aumentar a popularidade e o número de links para o site, aumentando sua relevância para os mecanismos de busca, além de conseguir tráfego direto.
Algumas formas de utilizar estratégias de SMO de forma honesta, segura e eficaz:
- Faça com que seu site seja fácil de ser “tagueado” e adicionado aos favoritos;
- Crie conteúdo único e interessante;
- Encoraje os usuários a usarem seu conteúdo.
Prós e Contra do SMO
VANTAGENS
- Potencial viral;
- Mídia espontânea;
- Tráfego instantanêo;
- Good-will.
DESVANTAGENS
- Falta de controle;
- Visibilidade temporária.
Links Patrocinados / Sponsored Links
Links patrocinados é um sistema de anúncios em resultados de ferramentas de busca, onde o anunciante paga uma determinada quantia por clique. Os anúncios somente são apresentados para buscas de termos selecionados previamente pelo anunciante.
Prós e Contra dos Links Patrocinados
VANTAGENS
- Resultado mensurável;
- Pagamento por clique;
- Alta segmentação;
- Branding;
- Aproveitar sazonalidade;
- Momento da decisão;
- Resultados imediatos.
DESVANTAGENS
- Dificil diferenciação;
- Custos crescentes;
- Possibilidade de fraude.
Web Marketing pode ser o sucesso que procura para promover seu projeto, produtos ou marca na Internet!
W3C e a importância da acessibilidade
W3C
Para muitos que ainda não conhecem a W3C(http://www.w3c.org) é um consórcio internacional no qual organizações filiadas, uma equipe em tempo integral e o público trabalham juntos para desenvolver padrões para a Web. A missão do W3C é de Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo.
Basicamente, o W3C cumpre sua missão com a criação de padrões e diretrizes para a Web. Desde 1994, o W3C publicou mais de 110 desses padrões, denominado Recomendações do W3C. O W3C também se envolve em educação e divulgação, desenvolve softwares e atua como fórum aberto para discussões sobre a Web. Para que a Web atinja todo o seu potencial, as tecnologias mais fundamentais da Web precisam ser compatíveis entre si e permitir que todos os equipamentos e softwares usados para acessar a Web funcionem juntos. O W3C chama essa meta de “Interoperabilidade da Web”. Ao publicar padrões abertos (não-exclusivos) para línguas e protocolos da Web, o W3C procura evitar a fragmentação do mercado e, conseqüentemente, a fragmentação da Web.
É de extrema importância ter o seu Web site ou sistema online validado pela W3C para que seu projeto fique disponíveis a todas as pessoas, independentemente do seu equipamento, software, infra-estrutura de rede, idioma nativo, cultura, localização geográfica ou capacidade física ou mental.
Como testar se meu site é validado?
-> acesse o link: http://validator.w3.org/
Acessibilidade
Não é de hoje, mas para os que ainda não sabem, deficientes visuais e deficientes motores utilizam a Internet assim como qualquer outra pessoa, porém eles ainda enfrentam uma grande barreira, devido ao grande número de sites que ainda não possuem um desenvolvimento recomendado pela W3C e que seja Acessível, cabe a nós desenvolvedores utilizarmos tecnologia e cuidados no desenvolvimento para que não excluirmos essas pessoas. A acessibilidade não é toda complicada e pode ser utilizada para quaisquer tipos de web site.
Em respeito às pessoas, a Grupo Universos só desenvolve projetos validados pelas recomendações internacionais da W3C, atingindo de tal forma excelência em desenvolvimento web. Também recomendamos o uso da acessibilidade em todos os projetos para ter uma Internet Acessível para todos, de nada adianta existir uma Inclusão Digital se os web sites ainda não são preparados para todos.
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