Substituto para iframe

Eu uso bastante iframe para sites com muitas páginas, mas com conteúdos internos, basicamente para puxar um menu. Por exemplo, se um site tem 20 páginas e o cliente pede para inserir um novo link no menu, se este menu estiver no código de cada página, serão 20 alterações, pois você terá que mudar o menu em todas as páginas (mesmo que com copy e paste). E corre o risco de esquecer alguma. Com iframe, eu faço um arquivo HTML para o menu, com seus CSS e um iframe em cada página. Basta alterar a página do menu e todas as páginas irão puxar o atual. Você pode colocar um CSS também para iframe. No caso, se o menu alterado for maior na vertical ou horizontal, basta alterar no CSS e o iframe de todas as páginas muda também. Continuar lendo

Solução para Illustrator CC lento, e Dreamweaver CC sem “properties”

Comecei a usar o Adobe Creative Cloud. É fantástico ter todos os softwares da Adobe, que são muito bons, sem ter que escolher um pacote com menos softwares por causa do preço. É verdade que o valor da assinatura ainda é um pouco salgado, mas creio que a tendência seja diminuir, em virtude do grande número de associados (assim espero). As vantagens extras, como o Behance e uso de fontes adicionais, além de sempre ter os programas atualizados também são excelentes.

Bom também é o suporte Adobe. Recentemente tive um problema com meu Illustrator. Instalei o pacote CC e tudo funcionou sem problemas. Até que ficou disponível uma atualização na nuvem. Após esta atualização (para versão 17), o Illustrator apresentou alguns problemas. Trabalhando com Mac, o comando “Quit” não funcionava, sendo sempre necessário usar “Force Quit”. Outro problema foi um “delay” em todos os comandos que eu realizava. Por exemplo, ao mover um objeto, nada acontecia. Quando eu “deletava” este objeto, era realizado o comando anteiror e ele se movia.

Entrei na “Adobe Community” e relatei o meu problema (veja aqui). Rapidamente recebi uma resposta afirmando ser necessário instalar as fontes Verdana e Tahoma, e tudo isso se resolveria. A princípio achei estranho, pois tinha certeza que essas fontes estavam instaladas. Mesmo assim eu as instalei novamente. Para minha surpresa elas não apareceram como “duplicadas” no Font Book. E o problema foi solucionado.

Além disso, eu tinha outro problema com meu Dreamweaver. Quando um elemento era selecionado, nada aparecia no barra de “Properties”. Instalando as fontes, esse problema também foi resolvido.

Modo de cores em imagens

Saber trabalhar com o ‘modo de cores’ de uma imagem é tão importante quanto saber utilizar a resolução correta. Existem vários ‘modos de cores’ para se usar em uma imagem, vamos aos mais conhecidos:

Cores em CMYK
São as 4 cores de escala de gráfica. Toda imagem colorida a ser impressa em off-set deve estar com cores em CMYK.
[DICA: não apenas as imagens, mas todas as cores usadas no documento que não serão "especiais" devem estar em CMYK].
CMYK é a sigla em inglês para as 4 cores: Cyan (azul), Magenta, Yellow (amarelo) e Black (preto). Você pode estar se perguntando o por quê do preto (em inglês black) ser representado pelo K em vez do B. Um dos motivos é porque o preto é considerado a cor chave (Key), onde as demais cores são alinhadas a partir dela. Já ouvi falar também que se fosse usado “B” para o preto, poderia ser confundido com Blue (azul). Estas 4 cores formam todas as outras cores, a partir da porcentagem de cada uma. Por exemplo, o vermelho vivo possui 100% de magenta e 100% de amarelo (0% das demais cores). 0% de todas as cores formam o branco (ou a cor do papel) e 100% de todas as cores formam um preto total (que acaba sendo até mais forte que apenas o 100% preto, por estar “calçado” pelas outras cores).

Cores em RGB
Este padrão de cores está relacionado às cores e um monitor, que trabalha com Red, Green e Blue (vermelho, verde e azul), daí sua sigla. A diferença das cores de RGB para CMYK , é que ele trabalha como luz, ou seja, 0% de todas as cores formam o preto e 100% de todas as cores formam o branco. Quando um arquivo está em RGB, podemos aplicar mais efeitos e filtros em softwares como Photoshop, e mesmo pintar com várias técnicas, como por exemplo no Painter. Apenas não esqueça de converter a imagem final para CMYK se a saída for off-set. Se a imagem for usada em veículos eletrônicos, a cor usada é o RGB, pois oferece mais brilho, cores mais vivas (principalmente tons de azul), pois o modo de cor é o mesmo usado pelo monitor.

Tons de Cinza (grayscale)
Os tons de cinza são as porcentagens do preto, que variam de 0% (branco) até o 100% (preto). Basicamente, uma imagem em garyscale possui apenas uma cor, com variações desta mesma cor, que no seu monitor aparecerá como preto. Mas se esta mesma imagem for importada em um software como Illustrator ou InnDesign, você pode aplicar uma cor a ela, e a imagem terá apenas os tons da cor aplicada. Esta é uma tática usada quando o material produzido possui apenas uma cor, que pode não ser o preto.

Bitmap
Ao contrário dos tons de cinza, uma imagem com modo bitmap não tem variações (porcentagens) da cor. A imagem é representada apenas com preto e branco, ou seja, pixel COM cor, pixel SEM cor. A quantidade de pixels próximos e/ou afastados é que formam as tons da imagem. Uma boa analogia é um desenho feito com “pontilismo”, onde usa-se apenas o ponto preto para representá-la.

Duotone
Quando uma imagem está com tons de cinza, no photoshop é possível se usar “duotone”. Com o duotone, você pode utilizar de 2 a 4 cores para representar uma imagem, criando imagens duotônicas (duas cores), tritônicas (três cores) e quadritônicas (quatro cores). Se a saída for em off-set, e não possuir cores especiais, você deve converter a imagem finalizada para CMYK. Além disso, imagens com modo de cor duotone só podem ser salvas como PDF, PSD e EPS, então talvez você precise converter o final para RGB se desejar usá-las como JPG ou PNG.

Index color (cores indexadas)
Antigamente, quando a maioria das pessoas usavam internet por acesso discado, era essencial que as imagens tivessem o menor peso possível em termos de memória. Uma imagem colorida com cores indexadas deixa o arquivo menor, sendo mais rápida sua visualização e com menos bits para transferência e carregamento. Um arquivo com cores indexadas possui uma tabela de cores, onde é armazenada apenas as cores presentes na imagem.

[DICA FINAL: Imagens coloridas devem estar em CMYK para impressão em off-set; e em RGB (ou Index) para uso em internet ou outros veículos digitais.]

Redirecionar Página com HTML

Há pouco tempo precisei de um comando para que uma página HTML pudesse redirecionar automaticamente para outra página. O site de um cliente possuía uma página chamada “produtos.html“. No decorrer de uma atualização, precisei usar alguns comandos e a página precisou ser salva em PHP, passando a se chamar “produtos.php“. O problema é que após anos do site no ar, outros sites e usuários já possuíam o link para a antiga página HTML, e seria um problema se não encontrassem a página anterior e nem mesmo a atual.

Para resolver isso, a solução que encontrei foi simples. Eu mantive o arquivo antigo HTML (produtos.html), com o mesmo nome, mas em branco. Entre as tags HEAD inseri o comando <meta http-equiv=”refresh” content=”1″; url=”produto.php”>

Com esse comando, quem possuía o link antigo é redirecionado à nova página em PHP. O número 1, em content, significa que o redirecionamento acontece após um segundo.

Como evitar SPAM nos comentários do seu Blog (WordPress)

Spans não vêm apenas em e-mails. Quando se tem um blog, com comentários disponíveis, é comum você receber vários comentários que não são pertinentes a seu post. São spans (propagandas de outros sites, produtos, ou apenas brincadeiras). Isso sempre irrita, pois temos que “moderar” sobre estes comentários, apagando-os, a toda hora, em vez de gastar nosso tempo com comentários verdadeiros.

Geralmente estes spans são gerados por “robôs”, que entram em vários blogs para deixar sua mensagem. Procurei algumas soluções e encontrei um “plugin” que está sendo eficiente até agora. Este plugin gera um “Captcha“, ou seja, aquela imagem com letras e números que você tem que digitar o equivalente em um campo. Isso resolve, pois um “robô eletrônico” não tem olhos para ver a imagem, interpretá-la e digitar o equivalente no campo correpondente (pelo menos, por enquanto). O nome do plugin é “SI Captcha Anti-spam”.

No painel de controle do Worpress, clique em “plugin” e “adicionar novo”.

No campo pesquisar, digite o nome do plugin (SI Captcha Anti-spam). É o primeiro que aparece. Selecione “instalar agora” (como já instalei, na minha imagem aparece como ‘instalado’).

 Selecione “instalar agora”. Depois de instalado, é necessário ativá-lo. Após ativá-lo, você pode configurar as opções, que ficam em plugins (Opções SI Captcha). O plugin é gratuito, mas se você gostou dele e foi útil, pode fazer uma doação ao desenvolvedor.