Adicionem o novo domínio do blog aos seus favoritos! www.crashcomputer.com.br

Postagens para o marcador ‘Coding’

   domingo, 20 de maio de 2018

Configurando uma RouterBoard Mikrotik



PéssimoRuimMédioBomExcelente (7 votos, média: 5,00 de 5)

Não sou profundo conhecedor de Mikrotik, o que aprendi foi lendo tutoriais, alguns manuais e batendo cabeça. :wall:

Estou fazendo este post, mais para que fique registrado (e um backup) das configurações que uso.

Posso ter feito alguma coisa errada? Sim… Pode ser feito de uma maneira melhor em mais inteligente? Muito provável que sim… Mas o que importa é: Do jeito que está, funciona bem pra mim. :D

Se alguém tiver sugestão de melhoria, pode comentar. Se tiver crítica, também é bem vinda. :good:

Resumo do meu cenário e necessidades:

Tenho duas placas Mikrotik, uma velha RB153 e a RB433UAH.

  • Uma porta WAN com IP fixo, não é necessário PPPoE, o modem está em modo Router.
  • Pelo menos duas portas ethernet. Uma será encaminhada ao switch que distribui internet na oficina e outra será exclusiva para o DVR.
  • Fazer o translado do IP utilizado pelo modem para o IP que utilizo em minha rede
  • Inicialmente dois cartões de rádio, um em 2.4GHz e outro em 5.8GHz ambos como Acess Point. (No futuro um terceiro cartão de 5.8GHz)
  • Controle de banda automático (só aplica-se na RB433UAH)
  • O gerenciamento de portas deverá ser feito na Mikrotik

Os parágrafos em laranja se referem aos comandos presentes no menu a esquerda da tela.

Muita coisa das configurações estão nas imagens, que explica mais do que o texto.

Pra configurar a Mikrotik é necessário o WinBox.

Nota: como meu modem está no modo Router e não quis mexer nisso pois empresa de fibra ótica enviou assim, foi preciso configurar um IP em DMZ nele (no modem), IP este que será o da porta WAN da Mikrotik, assim o gerenciamento de portas ficara na Mikrotik

Vamos a receita de bolo.


Configurando a MikroTik como Access Point e Roteador com Porta WAN para IP Fixo.

Vamos partir do principio que a MikroTik foi resetada e está com o script original de fábrica.

1) Primeiramente ativar os cartões de rádio e renomear as interfaces de acordo com a preferência.

O padrão da MikroTik é que os cartões de rádio entrem desligado ao resetar a placa ou inserir um cartão novo. O cartões também vem por padrão no modo cliente.

2) Configurar o tipo de segurança que será utilizado com o rádio.

>> Wireless >> Security Profiles >> Adicionar ( + )

Marcar os tipos de criptografia que quer usar e definir as chaves de acesso.

Pode ser definido mais de um profile, para usar senhas diferentes para cada cartão de rádio. Fica a seu critério

3) Configurar os cartões de rádio para o modo AP BRIDGE.

>> Wireless >> Click duplo no rádio desejado

– Passar para o modo Avançado (botões a direita na janela)

Na aba Wireless:

– Passar para o modo AP Bridge
– Definir a banda quando aplicável (2,4 ou 5.8GHz, B,G ou N)
– Definir o canal desejado
– Definir o SSID
– Definir o nome do rádio (opcional)
– Definir o tipo de segurança da rede
– Desligar o WPS
– Definir o pais para: Brasil
– Aplicar as mudanças

Na aba TX POWER:

– All rates fixed
– Configurar a potencia desejada em dBm.
– Aplicar as mudanças.

– Repetir isso para todos os cartões de rádio.

4) Criar uma Bridge

 >> Bridge >> [ + ]

–  Aplicar

 >> Bridge >> Aba Ports >> [ + ]

– Adicionar todas as portas, EXCETO a porta que será definida como WAN

5) Definindo os endereços IP.

>> IP >> ADRESSES

– Editar o profile padrão.
– Definir o IP (minha rede: 192.168.0.1/24) e atribuir à BRIDGE criada anteriormente.
– Não é necessário preencher o campo Network, ao aplicar ele já é preenchido automaticamente com o valor correto.

Note que usaremos toda a faixa deste bloco de IP para a rede local.

– [ + ]

– Definir o IP da porta WAN (no caso do meu modem é 192.168.200.2/30)

Note que com a mascara de rede /30 haverá somente 2 endereços disponíveis, o que é o gateway do modem e o IP que a porta WAN deve assumir.

No modem deverá ser configurado o IP desta porta (192.168.200.2 no meu caso) como DMZ, para que o redirecionamento de portas seja feito pela Mikrotik mais adiante.

6) Adicionar a rota para a porta WAN

>> IP >> Routes >> [ + ]

– Deixar DST. Address em 0.0.0.0/0
– Definir o Gateway (IP de Gateway do modem)

As outras duas rotas já devem vir por padrão preenchidas, por causa das configurações feitas anteriormente.

7) Definindo o NAT para os cartões de rádio e portas ethernet.

>> IP >> Firewall >> Aba NAT >> [ + ]

Aba General:

– Definir Chain como SRCNAT

Aba Action:

– Definir Action como MASQUERADE

8) Definir o POOL de IP

>> IP >> POOL >> [ + ]

Minha rede está alocada em 3 blocos.

– Definir as faixas de IP conforme o desejado. Usaremos a faixa de 100 a 149 para DHCP.
– Ao definir todas as faixas, fazer a amarração para continuidade, já que o Pool1 será continuado pelo Pool3, logo edite o Pool1 e ajuste o next pool para Pool3.

Você pode alterar a gosto qual faixa será usada para IP manual e para DHCP e até mesmo a forma da separação dos blocos.

9) Criando o servidor DHCP

>> IP >> DHCP Server >> [ + ]

– Definir a interface BRIDGE
– Lease Time de 12:00:00
– Definir Address Pool:  Pool2
– Autoritative: NO

Aba Network >> [ + ]

Definir o IP da rede e o Gateway

10) Criar o servidor DNS

>> IP >> DNS

– Adicionar quantos forem necessários

Utilizei os servidores DNS do Google e OpenDNS

– Marcar Allow remote request

11) Configurar o servidor SNTP

>> System >> SNTP Client

– Marcar: Enabled

Utilizar:

–  200.144.121.33 [ntp.cais.rnp.br]
–  200.19.74.21 [ntp.pop-pr.rnp.br]

12) Redirecionando portas

>> IP >> Firewall >> NAT >> [ + ]

– Selecionar Chain: DSTNAT
– Protocol: TCP
– DST. Port: Porta a redireconar

Aba Action:

– Action: DST-NAT
– To Address: IP destino
– To Port: Porta a redirecionar

13) Definir a senha de administrador

 >> System >> Password

14) Limitação automática de banda no DHCP Server (Somente com RouterOS 6 em diante, não se aplica na RB153)

>> IP >> DHCP Server

– Aba DHCP, Duplo clique na regra server1
– Colar o script abaixo no campo Lease Script.

(dica encontrada no fórum under-linux neste post do usuário inquiery)

Se não são clientes fixos, e sim um ponto de acesso onde dispositivos desconhecidos vão conectar, você pode usar o próprio campo “Lease Script” do DHCP Server para fazer seu script. O script digitado ali, quando é executado, tem acesso a algumas variáveis locais interessantes que vão te ajudar na tarefa, conforme está no wiki da mikrotik.

– leaseBound – set to “1” if bound, otherwise set to “0
– leaseServerName – dhcp server name
– leaseActMAC – active mac address
– leaseActIP – active IP address

Código :

if ($leaseBound=1) do={
  /queue simple add max-limit=250k/600k target=$leaseActIP comment=$leaseActMAC
} else={
  /queue simple remove [find comment=$leaseActMAC]
}

Assim, quando o script for chamado ENTREGANDO UM IP a um cliente, a variável $leaseBound vai ser 1, e então uma regra de queue será adicionada, e quando o script for chamado LIBERANDO UM IP (liberando significa removendo da tabela por não estar mais em uso), a variável $leaseBound vai ser 0, e a regra de queue será removida. Utilizei o comment das regras de queue para adicionar o MAC para o qual o IP foi oferecido, e assim deletando os itens pelo MAC tb. Poderia ser pelo IP, daria na mesma.

15) Desligando o acesso por SSH e Telnet

>> IP >> Services

Motivo para o desligamento. Com só farei acesso pelo WinBox ou HTTP, não há necessidade destas portas ficarem ativas, e olhando o log de acesso, existe uma quantidade ABSURDA de tentativas de acesso a routerboard, claramente feito por ataque com dicionário. Se necessitar um dia, basta religar.

16) Formatando o cartão de armazenamento

>> System >> Disks

As RB costuma possuir um slot para cartão de memoria, na RB153 é cartão CF e na RB433UAH é MicroSD.

– Selecionar o cartão na janela
– Clicar no botão Format
– Se quiser, adicionar o Label do cartão

17) Fazendo um backup de todas as configurações

>> Files

– Clicar em Backup
– Digitar um nome
– Não coloque senha, pois se você a esquecer o backup não servirá pra nada
– Marcar: Don’t Encrypt

Para retirar o backup da Mikrotik clique com o botão direito do mouse sobre ele e clique em download.

Você também pode mover (arrastando) o backup para o cartão de memória.



   quinta-feira, 22 de junho de 2017

O plugin WP PostRatings é legal, mas tem duas deficiências que já vem de looonga data e não parece ter solução por parte do desenvolvedor, sei lá por qual motivo exato.

Olhando no fórum do plugin, nota-se que o autor até que responde as postagens, mas invariavelmente as respostas pelo que notei dividem-se em 3: Não da pra fazer, É muito especifico pedido por uma única pessoa ou será estudado e cri… cri… cri…

A primeira das deficiências é que a cada atualização ele apaga o diretório de imagens e perde-se qualquer imagem personalizada. Essas estrelas amarelas que uso no meu mesmo é personalizada. Logo, toda vez que tem update relevante do plugin e eu o faço, tenho que subir as imagens.

A outra é que na lista de gerenciamento das avaliações, até aparece informação demais, porem ele não coloca um link para a postagem, mas bota o título do post, mas… sem link.

Bom… a primeira deficiência pelo visto não vai ter solução pois o autor já falou no fórum que não dá, pois o plugin é “datado”… sei lá o que quer dizer isso.

Mas a segunda tem como fazer e não é difícil. Postei o pedido da facilidade no fórum e inclusive como faze-lo. Somente fica a questão se o autor vai dignar-se a incluir isto num próximo update, já que eu dei a solução de bandeja.

Caso ele não coloque (nota: duas atualizaçõe depois…), estou deixando o procedimento anotado neste post, para que caso alguém deseje faze-lo, e para que eu mesmo tenha como consultar no futuro.

Abra o arquivo postratings-manager.php em um editor de texto que numere as linhas (sugestão: notepad2 ou notepad++). Vá para a linha 349 (isso é na versão 1.84.1, pode mudar em futuras versões) . Deve ser uma linha como essa (ou olhe um pouco acima ou abaixo e encontre a linha sugerida):

echo "<td>$postratings_posttitle</td>\n";

Modifique esta linha para:

echo '<td><a href="'.$postratings_post_url.'" target="_new">'.$postratings_posttitle.'</a></td>'."\n";

Agora vá para a linha 308 (A linha deve ser igual a: $postratings_host = $postratings_log->rating_host;)

Acrescente logo após esta linha, o seguinte (dê um enter no final da linha. dããã…):

$postratings_post_url = get_permalink( $postratings_postid ); //URL to Post

O resultado será este:

link_postratings_manage

Com isso fica fácil chegar ao post através da lista do WP Postratings. Vamos ver se o autor se mostra receptivo a sugestão e implementa em definitivo no plugin.

Nota: Eu escrevi este post a 14 meses atrás e estava engavetado aqui nos posts rascunhos, postei a dica de como implementar isto no fórum do plugin, nesta época a versão do plugin era 1.83.2 e já estamos na 1.84.1  e nada disso ser implementado. E dando uma olhada no fórum as respostas do autor continuam sempre as mesmas. Não da pra fazer, É muito especifico pedido por uma única pessoa ou será estudado e cri… cri… cri… |-/

[ Ouvindo: Blackwood – My Love for You (1997) ]


   quarta-feira, 22 de fevereiro de 2017

Firefox não reproduz vídeos MSE & H.264



PéssimoRuimMédioBomExcelente (6 votos, média: 4,50 de 5)

Isso estava acontecendo aqui em duas máquinas minhas já não é de hoje, o que isso causa? Não reproduz vídeos do site G1 (globo). Isso já vinha desde que a globo resolveu modificar a plataforma dos vídeos.

A imagem estática do player com uma imagem fixa do vídeo aparece normalmente, mas ao clicar em play, a tela do player fica preta e mais nada acontece.

E isso mesmo tendo habilitado a reprodução de vídeos HMTL5. Usando a pagina de testes do youtube, o resultado é esse antes de qualquer das modificações propostas abaixo.

youtube_html5_bad

Depois de muito bater cabeça, acabei por cair neste post do MSFN: http://www.msfn.org/board/topic/175591-enable-mp4-h264-aac-html5-video-in-firefox-on-windows-xp-without-flash/

Basicamente consiste em forçar a barra para a instalação e funcionamento do Adobe Primetime CDM. Ele é um codec para reprodução de videos com DRM, mas reproduz normalmente videos sem DRM.

Uma tradução bem simplificada do que precisa ser feito:

entre em about:config no Firefox.

Verifique se já existe as seguintes chaves, caso não existir, crie, utilizando “new, boolean”. Siga conforme a versão de seu Firefox.

media.gmp-eme-adobe.enabled (boolean, true)

media.gmp-eme-adobe.forceSupported (boolean, true; Firefox 49.0+)

media.gmp-eme-adobe.forcevisible (boolean, true; Firefox 45-48, não mais usado no Firefox 49.0+)

media.gmp-eme-adobe.visible (boolean, true; Firefox 49.0+)

media.gmp.decoder.enabled (boolean, true)

media.eme.enabled (boolean, true; deixe em false se baixou uma versão DRM-free  do Firefox;

 

Apenas para usuários do Firefox 45.x.x ESR: também modifique media.gmp-manager.url ou o Primetime plugin não será baixado. O valor padrão desta chave é:

“https://aus5.mozilla.org/update/3/GMP/%VERSION%/%BUILD_ID%/%BUILD_TARGET%/%LOCALE%/%CHANNEL%/%OS_VERSION%/%DISTRIBUTION%/%DISTRIBUTION_VERSION%/update.xml”

Modifique apenas a parte destacada em negrito como se segue:

“https://aus5.mozilla.org/update/3/GMP/46.0/%BUILD_ID%/%BUILD_TARGET%/%LOCALE%/%CHANNEL%/%OS_VERSION%/%DISTRIBUTION%/%DISTRIBUTION_VERSION%/update.xml”.

O host pode ser algo diferente de aus5.mozilla.org, você só precisa mudar a parte %VERSION%.

Depois disso, quando você verifica sua lista de Plugins, você deve ver um aviso sobre o plugin do Primetime sendo baixado em breve. Se você não quiser esperar, verifique se há atualizações manualmente (no menu suspenso do botão de engrenagem). Os arquivos do plugin serão colocados na subpasta gmp-eme-adobe em seu perfil Firefox.
Uma vez que tenha feito o download, configure o plugin do Primetime para ativar sempre, e o plugin Flash a nunca ativar (não é estritamente necessário, mas é melhor para o teste)

Voltando a página de teste do youtube, o resultado agora deve ser este:

youtube_html5_good

E por fim faça um teste nesta página: http://www.quirksmode.org/html5/tests/video.html

Se puder reproduzir todos os 3 vídeos, parabéns, configurações realizadas com sucesso!

O crédito das informações postadas acima são todas do usuário mixit do fórum MSFN.

Estas modificações foram testadas aqui no Firefox ESR 45.7.0



   segunda-feira, 8 de junho de 2015

Removendo formatação de emoji



PéssimoRuimMédioBomExcelente (2 votos, média: 5,00 de 5)

Na versão 4.2 do WordPress foi adicionado o suporte a emojis e sem a opção de desligá-lo, o que causou uma boa chiadeira na comunidade. Obviamente já apareceu um plugin que se propõe a remover o maldito suporte, até que não ser oficializada uma opção de desligar essa droga facilmente pela própria interface administrativa. 8x

O plugin, de fato consegue desregistrar o código css dos emoji, que é o trecho de código abaixo:

<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>

Porem, ainda removendo essa formatação, resta um bug, pois contrariando a boa prática fizeram o favor de inserir uma regra de formatação diretamente no código (css inline, hardcoded) :censored: :

<img src="%s" alt="%s" class="wp-smiley" style="height: 1em; max-height: 1em;" />

Note o height e max-height direto no código, e o resultado patético é este, mesmo com o plugin instalado:

emoticons1

Como pode se ver, os emoticons são redimensionados para a altura de 1 linha de texto, o que é ruim, principalmente com o set de emoticons que uso, o kolobok.

Então, como resolver este problema de formatação inline? :-? Vamos usar a declaração !important na folha de estilos do tema, que pelas regras do CSS, vai passar por cima de qualquer outra formatação definida inline.

Pra isso, basta adicionar este pequeno trecho de código em seu arquivo de estilo de seu tema (geralmente style.css):

img.wp-smiley {
  border-width: 0px !important;
  vertical-align: -5px !important;
  height: inherit !important;
  max-height: inherit !important;
}

O resultado será este:

emoticons2

Os parametros border-width e vertical-align são opcionais e podem ser removidos, a função deles é de centralizar o emoticon a linha de texto, logo esse valor também pode ser alterado para se adequar ao tamanho de seu texto. :-P

Lembrando que você deve instalar o plugin que desabilita o suporte aos emoji, e aplicar o patch CSS acima no style.css de seu tema. :coffe:



   domingo, 10 de agosto de 2014

Desligando a fonte Open Sans



PéssimoRuimMédioBomExcelente (2 votos, média: 5,00 de 5)

Já tem umas duas ou três atualizações do WordPress que eu estou achando muito ruim a nova fonte que escolheram para o menu administrativo. 8x

Ficava uma coisa esquisita, embaçada. Hoje como tinha mais uma atualização do WordPress pendente, resolvi faze-la e ver se haviam consertado isso.

Qual foi a não-surpresa  :aiaiai: que continuava a mesma porcaria. Dai resolvi investigar qual era a entrada no arquivo CSS que especificava esta fonte. Pela minha surpresa encontrei isso aqui, que desligado via o editor CSS do WebDeveloper Toobar (addon do Firefox) resolvia o problema:

<link rel='stylesheet' id='open-sans-css'  href='//fonts.googleapis.com/css?family=Open Sans:300italic,400italic,600italic,300,400,600&#038;subset=latin,latin-ext&#038;ver=3.9.2' type='text/css' media='all' />

Então, como desligar isso ai sem ter que apelar pra altas gambiarras? Simples… adicionar um filtro no arquivo functions.php de seu tema do WordPress.

function remove_open_sans() {
	wp_deregister_style( 'open-sans' );
	wp_register_style( 'open-sans', false );
}

add_action( 'wp_enqueue_scripts', 'remove_open_sans' );
add_action( 'admin_enqueue_scripts', 'remove_open_sans' );

Com o script acima, será desligada na pagina administrativa e pagina principal, quando aparece a barra administrativa.

Veja a diferença:

wordpress_open_sans_disabled

Percebe como a fonte “Open Sans” é borrada e de péssima resolução? Com o script acima volta a fonte padrão do navegador que tem uma visualização melhor e mais limpa. :good:



   segunda-feira, 17 de março de 2014

Integrando o DOSBOX ao menu de contexto.



PéssimoRuimMédioBomExcelente (3 votos, média: 4,67 de 5)

Eu estava com um diretório atulhado de programas MS-DOS aqui pra verificar a versão (Motorola RSS) e ficar abrindo um por um na base do teclado, tendo montado o diretório inteirinho no DOSBOX ia virar um serviço de corno. o:-)

Dai pensei… se existe aquela manha de pendurar o CMD.EXE no menu de contexto do windows pra abrir o prompt no diretório corrente, porque não fazer algo similar com o DOSBOX?

Fui procurar na internet algo pronto e não achei nadinha do jeito que eu queria. Se pedir o menu de contexto em um diretório, monta o diretório no DOSBOX como C:\ e entrega o prompt. Se pedir o menu de contexto em um .EXE, .COM ou .BAT (qualquer executável) dispara o DOSBOX e já executa o programa.

dosbox_context_menu

Dai fiz um pequeno arquivo de registro,  que já faz todo o trabalho sujo e o resultado é o da imagem acima.

dosbox

Para quem precisar fazer a mesma coisa, deixo abaixo o conteúdo do arquivo .reg que fiz. Não darei maiores explicações, pois quem for usar isso acredito que já saiba como se aplica isso no registro, como se faz o arquivo, etc… :hypocrite:

Windows Registry Editor Version 5.00

; DOSBOX no menu de contexto de diretórios e drives.
[HKEY_CLASSES_ROOT\Directory\shell\DOSBox]
@="DOSBOX Mount"

[HKEY_CLASSES_ROOT\Directory\shell\DOSBox\command]
@="C:\\Arquivos De Programas\\DOSBox\\DOSBOX.EXE \"%1\" -noconsole"

[HKEY_CLASSES_ROOT\Drive\shell\DOSBox]
@="DOSBOX Mount"

[HKEY_CLASSES_ROOT\Drive\shell\DOSBox\command]
@="C:\\Arquivos De Programas\\DOSBox\\DOSBOX.EXE \"%1\" -noconsole"

; DOSBOX executa arquivo diretamente.
[HKEY_CLASSES_ROOT\*\shell\DOSBox]
@="DOSBOX Run..."

[HKEY_CLASSES_ROOT\*\shell\DOSBox\command]
@="C:\\Arquivos De Programas\\DOSBox\\DOSBOX.EXE \"%1\" -noconsole"

Claaaaaaaaaro que você deverá ajustar o caminho do executável do DOSBOX para o de onde você o instalou né? :-P

Ah… Bônus!  :tooth: O DOSBOX quando executado desta forma e com o parâmetro -noconsole, cria dois arquivos no diretório que está sendo executado.

dosbox_log
Isso pode ser tornar irritante dependendo  do caso. Pelo que pesquisei, não existe um parâmetro para se passar ao DOSBOX para que ele não crie os tais arquivos. :aiaiai:

Solução? Abra o DOSBOX em um EDITOR HEX, procure pelas ocorrências:

stderr.txt
stdout.txt

E substitua por:

NUL

dosbox_hacking

Vai encontrar duas ocorrências de cada arquivo. Salve o DOSBOX.EXE e pronto. Os dois arquivos não serão mais criados. }:D



   domingo, 20 de outubro de 2013

Uma coisa que eu procurei a rodo e não achava nada super simples como eu precisava, era um contador de visualizações de páginas (pageview).

Todos que achava coletavam informações demais que não me interessavam, eu queria que somente registrasse o numero de acessos a nada mais. Porque isso? Bom… eu já usava um contador de visualizações próprio, que realizava o armazenamento em um arquivo texto, porem isso funciona bem desde que não haja muito tráfego, com tráfego excessivo, é muito comum perder, o conteúdo do arquivo texto e zerar o contador.

Então, a melhor coisa é delegar isso ao MySQL e deixar que ele se vire com a fila de acessos.

Como não achei nada pronto que me servia, qual a solução? Arregaçar as mangas e fazer um por conta própria. :D

Segue o código abaixo.

<php
  // Conexão com o Banco de Dados
  mysql_connect("host", "user", "pass") or die ('Não foi possível conectar: '.mysql_error())

  // Seleciona o Banco de Dados
  mysql_select_db("pageview_counter") or die ('A consulta falhou: '.mysql_error());

  // Verifica se a tabela não existe, e cria uma.
  $sql = "create table if not exists counter (
    pageview int(11) not null,
    primary key (pageview)
  )";

  mysql_query($sql) or die ('Erro ao criar tabela: '.mysql_error());

  $strSQL = "select * from counter";

  $rs = mysql_query($strSQL) or die ('Erro ao selecionar tabela: '.mysql_error());

  // Se a tabela está vazia, cria o contador.
  if (mysql_num_rows($rs) == 0 ) {
    $strSQL = "insert into counter(";
    $strSQL = $strSQL . "pageview) ";

    $strSQL = $strSQL . "values(";
    $strSQL = $strSQL . "'1') ";

    mysql_query($strSQL) or die ('Erro ao criar tabela: '.mysql_error());
  }

  // Atualiza o contador no banco de dados.
  $strSQL = "update counter set pageview = pageview + 1";

  mysql_query($strSQL) or die ('Erro ao gravar tabela: '.mysql_error());

  // Pega o valor corrente do contador.
  $count = mysql_fetch_array($rs);
  $count = str_pad($count["pageview"], 5, "0", str_pad_left);
  // Nesta linha abaixo é feita a exibição do contador, formate ao seu gosto.
  echo "<span class=\"counter\">PageView: ".$count."</span>";

  mysql_close ();
?>

Para utilizar é simples. Você deve criar um usuário, senha e um banco de dados no seu painel de controles.

Na linha 3, coloque os dados de acesso ao banco de dados.

Na linha 6, é o nome do banco de dados. Você pode utilizar um banco de dados já existente, pois somente será criada uma tabela com o nome de “counter”. Neste caso altere o nome “pageview_counter”.

O restante o script já faz sozinho.

Se quiser alterar a quantidade de zeros que o script coloca automaticamente a esquerda do contador, altere o valor “5” na linha 38. Do jeito que está será exibido um número de 5 dígitos.

Na linha 40 é exibido o valor da contagem. Existe também uma classe “counter” que você pode utilizar para formatar o texto do contador via CSS ao seu gosto. :-P

Para usar é hyper-simples. Salve o código com um nome qualquer (sugestão: counter.php).

Insira em sua página usando a função include do PHP:

<!--?php include 'counter.php'; ?-->

E… voilá!

O código é meio macarrônico, mas funciona, faz o básico necessário e que eu precisava e não achei, feito de uma forma tão simples.

Daria pra fazer de uma forma mais elegante? Certamente que sim! Mas como eu ainda sou aprendiz de MySQL, tá valendo. :sarcastic:



   terça-feira, 11 de dezembro de 2012

O Jefferson fez este post com um script (que ele encontrou) que ajuda a matar uma boa parte do SPAM no WordPress.

Porem como o próprio Jefferson notou, ele tem uma falha que confunde palavras, como o bem citado exemplo dele, onde “especialista” é confundido com “cialis”.

Nisso resolvi dar uma ajeitada no script de forma que ele não confunda mais as palavras, fazendo o uso de expressões regulares para “pescar” somente as frases (ou blocos) exatos dentro do texto do comentário.

O novo código ficou assim:

//Acrescente isso no final de functions.php (é um arquivo do tema, não do wordpress)
//pode ser imediatamente antes da linha final com um "?>".

function in_comment_post_like($string, $array) {
      foreach ( $array as $key => $value ) {
          if (preg_match("/\b".$value."\b/i", $string)) { return true; }
      }
      return false;
}

function drop_bad_comments() {
    if (!empty($_POST['comment'])) {
        $post_comment_content = $_POST['comment'];
        $lower_case_comment = strtolower($_POST['comment']);

        // Lista de palavras banidas.
        // Comentários com essas palavras serão automaticamente deletados
        // e quem postou, se não for um bot, verá um alerta.
        // Mas caso seja um bot, receberá o erro http 503.

        // Coloque somente palavras na lista, não coloque símbolos como: [ { ( *

        $bad_comment_content = array(
            'viagra',
            'hydrocodone',
            'xanax',
            'tramadol',
            'lorazepam',
            'adderall',
            'dexadrine',
            'no prescription',
            'oxycontin',
            'without a prescription',
            'sex pics',
            'family incest',
            'online casinos',
            'online dating',
            'cialis',
            'amoxicillin',
            'ecadastro.com.br',
            'seomaster.com',
            'divulgaemail.com',
            'listadeemails.com',
            'casaemail.com.br',
            'acertemail.com',
            'maladiretasegmentada.com.br',
            'busquemail.com.br',
            'boliche.com.br',
            'kitsucesso.com',
            'emailsvip.com.br',
            'kitdeemail.com',
            'rocket attacks',
            'blue spoon'
        );

        if (in_comment_post_like($lower_case_comment, $bad_comment_content)) {
            wp_die( __('<b>Seu comentário contém palavras ou expressões banidas.</b><br><br><i>'.$post_comment_content.'</i>'),('Erro'),array( 'response' => 503, 'back_link' => true ) );
        }
    }
}

add_action('init', 'drop_bad_comments');

Isto deve ser adicionado dentro do arquivo functions.php do seu tema. Com isso, a lista de palavras presentes no array será verificada uma a uma com o conteúdo do comentário e caso uma delas esteja presente, o comentário é automaticamente bloqueado e não é postado. }:D

De quebra, adicionei para o script já enviar um header http com erro para os robots, já dando um legitimo chute na bunda deles, se e quando é claro, eles lerem o header http. :-o*

Tenho planos de transformar esse script em um plugin, que poderá ser instalado facilmente no WordPress, e o banco de palavras ficará armazenado no mysql, e com isso não será mais necessário editar diretamente o código para inserir novas palavras, isso será feito diretamente pela pagina de configuração do plugin.

Edit: Existe um pequeno conflito com a mensagem de alerta quando usado o plugin AEC (Ajax Edit Comments) e a função wp_die. Quando é postado o primeiro comentário e existir uma palavra proibida, a mensagem é exibida corretamente. Porem quando for o segundo comentário ou posteriores, a mensagem será exibida em um popup do tipo alert (javascript) e neste caso a formatação do texto será perdida, melhor dizendo, será impressa na mensagem as tags html.

Por mim esta de bom tamanho, posso conviver com isso, visto que essa mensagem de erro só deverá se vista por spammer mesmo.

E estou tentado a desligar o reCaptcha, só pra ver o que acontece. :-))



   terça-feira, 10 de julho de 2012

Color Picker



PéssimoRuimMédioBomExcelente (5 votos, média: 5,00 de 5)

Trago a vocês um pequeno mas interessante código que desenvolvi para fazer um seletor de cores, que fiz para usar em um editor (estilo blog) que estou fazendo para uso próprio.

Porque estou trazendo isso pra cá? :-P

Porque não consegui achar nada parecido, feito puramente em HTML, CSS e Java Script. Se é que existe, esta muito bem escondido ou eu não soube perguntar corretamente para o google. :aiaiai:

Dividi o código em 3 partes, vamos a elas, uma de cada vez, e com uma pequena explanação sobre elas.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Color Picker</title>
    <script type="text/javascript" src="color-picker.js"></script>
    <link rel="stylesheet" href="color-picker.css" type="text/css">
  </head>
  <body>
    <table border="0" width="180">
      <tr>
        <td>
          <p class="title" align="center">
            <b>Color Picker</b>
          </p>
        </td>
      </tr>
      <tr>
        <td align="center">
          <table cellspacing="5" class="colorpick">
            <tr>
              <td id="C01" onclick="cl('C01');"></td>
              <td id="C02" onclick="cl('C02');"></td>
              <td id="C03" onclick="cl('C03');"></td>
              <td id="C04" onclick="cl('C04');"></td>
              <td id="C05" onclick="cl('C05');"></td>
              <td id="C06" onclick="cl('C06');"></td>
              <td id="C07" onclick="cl('C07');"></td>
              <td id="C08" onclick="cl('C08');"></td>
            </tr>
            <tr>
              <td id="C09" onclick="cl('C09');"></td>
              <td id="C10" onclick="cl('C10');"></td>
              <td id="C11" onclick="cl('C11');"></td>
              <td id="C12" onclick="cl('C12');"></td>
              <td id="C13" onclick="cl('C13');"></td>
              <td id="C14" onclick="cl('C14');"></td>
              <td id="C15" onclick="cl('C15');"></td>
              <td id="C16" onclick="cl('C16');"></td>
            </tr>
            <tr>
              <td id="C17" onclick="cl('C17');"></td>
              <td id="C18" onclick="cl('C18');"></td>
              <td id="C19" onclick="cl('C19');"></td>
              <td id="C20" onclick="cl('C20');"></td>
              <td id="C21" onclick="cl('C21');"></td>
              <td id="C22" onclick="cl('C22');"></td>
              <td id="C23" onclick="cl('C23');"></td>
              <td id="C24" onclick="cl('C24');"></td>
            </tr>
            <tr>
              <td id="C25" onclick="cl('C25');"></td>
              <td id="C26" onclick="cl('C26');"></td>
              <td id="C27" onclick="cl('C27');"></td>
              <td id="C28" onclick="cl('C28');"></td>
              <td id="C29" onclick="cl('C29');"></td>
              <td id="C30" onclick="cl('C30');"></td>
              <td id="C31" onclick="cl('C31');"></td>
              <td id="C32" onclick="cl('C32');"></td>
            </tr>
            <tr>
              <td id="C33" onclick="cl('C33');"></td>
              <td id="C34" onclick="cl('C34');"></td>
              <td id="C35" onclick="cl('C35');"></td>
              <td id="C36" onclick="cl('C36');"></td>
              <td id="C37" onclick="cl('C37');"></td>
              <td id="C38" onclick="cl('C38');"></td>
              <td id="C39" onclick="cl('C39');"></td>
              <td id="C40" onclick="cl('C40');"></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td align="center">
          <p align="left">
            <span class="exsmall">&nbsp;&nbsp;&nbsp;ou digite o valor (hex)</span>
          </p>
        </td>
      </tr>
      <tr>
        <td align="center">
          <input type="text" name="PutColor" id="PutColor" size="6" maxlength="6">&nbsp;&nbsp;&nbsp;<input class="admbox" type="button" tabindex="4" value="OK" onclick="putColor();">
        </td>
      </tr>
    </table>
  </body>
</html>

No código HTML, existe uma tabela que é quem “desenha” a caixa com os botões coloridos. Antes que alguém venha no blá blá blá div isso, div aquilo, trabalhar com tabelas neste caso foi muito mais fácil e proporcionou um código menor e exigiu uma ginástica beeeem menor no arquivo CSS como pode ser visto abaixo. :mrgreen:

CSS:

/*********************************************************
Color Picker
©2012 by Luciano Sturaro
Permitido o uso desde que citada a fonte.
*********************************************************/
p.title, span.title {
  font-family: Arial, Helvetica, Verdana, Sans-Serif;
  font-weight: bold;
}

p.exsmall, span.exsmall {
  font-family: Arial, Helvetica, Verdana, Sans-Serif;
  font-size: 0.6em;
}

table.colorpick {
  border: 0px;
  border-collapse: separate;
  border-spacing: 5px;
  empty-cells: show;
}
table.colorpick td {
  border: 1px solid #999999;
  width: 11px;
  height: 12px;
  font-size: 0.1em;
  cursor: pointer;
}

#C01 { background-color: #000000; }
#C02 { background-color: #993300; }
#C03 { background-color: #333300; }
#C04 { background-color: #003300; }
#C05 { background-color: #003366; }
#C06 { background-color: #000080; }
#C07 { background-color: #333399; }
#C08 { background-color: #333333; }
#C09 { background-color: #800000; }
#C10 { background-color: #FF6600; }
#C11 { background-color: #808000; }
#C12 { background-color: #008000; }
#C13 { background-color: #008080; }
#C14 { background-color: #0000ff; }
#C15 { background-color: #666699; }
#C16 { background-color: #808080; }
#C17 { background-color: #FF0000; }
#C18 { background-color: #FF9900; }
#C19 { background-color: #99CC00; }
#C20 { background-color: #339966; }
#C21 { background-color: #33CCCC; }
#C22 { background-color: #3366FF; }
#C23 { background-color: #800080; }
#C24 { background-color: #999999; }
#C25 { background-color: #FF00FF; }
#C26 { background-color: #FFCC00; }
#C27 { background-color: #FFFF00; }
#C28 { background-color: #00FF00; }
#C29 { background-color: #00FFFF; }
#C30 { background-color: #00CCFF; }
#C31 { background-color: #993366; }
#C32 { background-color: #C0C0C0; }
#C33 { background-color: #FF99CC; }
#C34 { background-color: #FFCC99; }
#C35 { background-color: #FFFF99; }
#C36 { background-color: #CCFFCC; }
#C37 { background-color: #CCFFFF; }
#C38 { background-color: #99CCFF; }
#C39 { background-color: #CC99FF; }
#C40 { background-color: #FFFFFF; }

Todas as cores são definidas apenas no arquivo CSS, sendo muito simples de alterar as cores padronizadas para qualquer valor de sua preferencia. Basta alterar o valor nos ID #Cxx e pronto, já será alterada na tabela que gera os botões e será a nova cor passada ao clicar nos botões.

Não foi por acaso, essa paleta de cores foi copiada do editor do WordPres eheh. :-o*

Java Script:

// Color Picker
// ©2012 by Luciano Sturaro
// Permitido o uso desde que citada a fonte.

function getstyle(obj, cAttribute) {if (obj.currentStyle) {
  this.getstyle = function (obj, cAttribute) {return obj.currentStyle[cAttribute];};
} else {
  this.getstyle = function (obj, cAttribute) {return window.getComputedStyle(obj, null)[cAttribute];};}
 return getstyle(obj, cAttribute);
}

function cl(value) {
  var tryId = document.getElementById(value);
  var color = getstyle(tryId, 'backgroundColor');
  var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(color);
  var color = m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : color;
  var color = color.toUpperCase();

  alert('<font color="' + color + '">Teste</font>');

}

function putColor() {
  var color = document.getElementById("PutColor").value;
  var color = '#' + color.toUpperCase();
  var regColorcode = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/; //Valida codigo de cor

  if (color!='#') {
    if(regColorcode.test(color) == false) {
      alert('Codigo de cor inválido!');
      return false;
    }

  alert('<font color="' + color + '">Teste</font>');

  }
}

O javascript captura a cor de fundo dos elementos da tabela, que passam a comportar-se como se fossem botões.

Existe uma certa ginástica nesse codigo, porque os navegadores usam métodos diferentes de captura, retornando valores em formatos diferentes. O IE retorna o valor diretamente em hexadecimal (#rrggbb, já o firefox, chrome e opera, retornam o valor no formato rgb(rrr, ggg, bbb), sendo necessário uma pequena função com expressão regular para converter o valor de rgb decimal para hexadecimal.

Para usar, basta modificar as linhas onde tem os ALERT (linhas 19 e 34 do java script) para jogar a string para a sua função/código/whatever.

Testei esse código no firefox, opera e chrome, e até mesmo no tranqueira do IE6 e funcionou muito bem! E o código pode não ser a coisa mais linda do mundo, mas funciona redondinho, e o W3C não reclama do HTML e muito menos do CSS, esta tudo feito conforme manda os padrões. :good:

Se quiser usar alguma cor esdruxúla, basta digitar na caixinha e clicar no OK. Existem apenas duas condições de tratamento de erro nessa caixinha, que cercam todas as possibilidades.

A) se digitar um código errado (valores válidos: 0-9, A-F), ou incompleto, dá um alerta de cor inválida.
B) clicar no ok sem entrar valor, mantendo a caixa em branco, nada acontece.

Ah! Na caixa deve ser digitado somente o valor em hexadecimal, não precisa inserir o simbolo #. Ele é inserido automaticamente pelo script. :good:

Tanto faz digitar em maiúsculas o minusculas, o script já passa os valores para maiúsculas.

Você pode fazer um test-drive do código clicando aqui.

Gostou? Usou? Clica nas @#$@#%$ das estrelinhas ali em cima e comente! (wub)

[ Ouvindo: Nick Heyward – Tell Me Why (Rare Original Version) (1988) ]


   sábado, 7 de abril de 2012

WordPress: WidGet FeedBurner Subscriptions



PéssimoRuimMédioBomExcelente (1 votos, média: 5,00 de 5)

Ou… traduzindo, Quinquilharia personalizada que pega o numero de assinantes do FeedBurner e pendura em algum lugar no seu blog, sem ser aquela coisinha horrível já disponibilizada pelo próprio FeedBurner. :-o*

O lugar onde prestei atenção nesse tipo de GadGet foi no Blog do Jefferson Ryan. Perguntei a ele se aquilo era algum plugin do WordPress, e a resposta foi que era uma solução própria.

Como eu sou daqueles que até certo ponto gosta de bater testa e arrumar as próprias soluções, fui a caça de como fazer isso funcionar.

Bom, primeiramente, você precisa usar o FeedBurner para publicar os feeds do seu blog. Pra isso eu recomendo o plugin FD Feedburner Plugin. Tendo ele instalado, crie seus feeds de postagens e comentários no FeedBurner, e adicione as urls do FeedBurner no plugin. Salve e pronto. A partir de agora, seu blog estará usando o FeedBurner como publicador de seus feeds e não aquela coisinha pobre original do WordPress. O FeedBurner é legal porque te dá várias estatísticas interessantes, além, claro de lhe mostrar quantos assinantes você tem em seus Feeds.

Com os feeds prontos, você precisa ativar o Publicize. Entre em sua conta no FeedBurner, clique sobre o nome de seu feed, na tela que vai abrir clique em Publicize e no menu lateral que vai abrir, clique em FeedCount. Ative esta opção. Não precisa se preocupar com estilo, cor, etc… não usaremos nada daquilo.

Feito isso para o Feed de postagens e comentários, vamos a parte “home made”.

Primeiramente edite o arquivo functions.php de seu tema e adicione a seguinte função:

function show_count($feedname) {
  $url = "http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$feedname;

  $ch = curl_init();

  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch, CURLOPT_URL, $url);

  $data = curl_exec($ch);

  curl_close($ch);

  $xml = new SimpleXMLElement($data);
  $count = $xml->feed->entry['circulation'];

  return $count;
}

Peguei esta função acima pronta no google. Tem tantas ocorrências pra este código que fica difícil saber quem é o seu autor.

Salve seu arquivo functions.php

Agora edite seu arquivo style.css de seu tema e adicione o seguinte código CSS:

/* FeedBurner WidGet */

#fb {
  width: 185px;
  height: 64px;
  background-color: #191919;
  border: solid 1px #292929;
}

#fbtxt {
  height: 64px;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  color: #CCC;
  display: table-cell;
  vertical-align:middle;
  text-align: center;
}

#fbimg {
  float: left;
  margin: 3px 5px 3px 3px;
}

#fbcount {
  color: #FF7F3F;
  font-weight: bold;
}

Salve seu arquivo style.css e estamos quase no final. :-P

Agora acrescente o seguinte código no arquivo sidebar.php ou onde melhor convier:

<div id="fb">
  <img id="fbimg" border="0" src="<?php bloginfo('template_directory'); ?>/images/feed_readers.gif" width="60" height="59" />
  <div id="fbtxt">Leitores assinando:<br />
    postagens: <span id="fbcount"><?php echo show_count(my_posts_feed); ?></span><br />
    comentários: <span id="fbcount"><?php echo show_count(my_comments_feed); ?></span>
  </div>
</div>

Antes de salvar o código, altere my_posts_feed para o nome de seu feed de postagens (o nome que escolheu para seu feed) e my_comments_feed para o nome de seu feed de comentários.

Escolha uma imagem para usar com seu GadGet. O tamanho máximo fica a seu critério.  Uma boa pedida na minha opinião é um ícone de 60 x 60 pixels. Pode usar inclusive o ícone clássico do Feed, tem ele aos montes no google imagens.

O nome da imagem é o “feed_readers.gif” que esta na segunda linha do código acima. A imagem deve ficar na pasta images de seu tema.

Agora é só salvar o código e pronto.

O WidGet já deverá funcionar. E claro, obviamente você pode e deve alterar as cores no código do CSS para compatibilizar com seu tema. :)

[ Ouvindo: Tom Tom Club – Under The Boardwalk (1981) ]
Related Posts Plugin for WordPress, Blogger...


  Melhor visualizado a
1024 x 768 True color
Proudly powered by WordPress. Theme developed with WordPress Theme Generator.
E altamente gambiarrado por mim mesmo :)
Copyright © 2010 by Crash Computer. All rights reserved.