Postagens para o marcador ‘Coding’

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


   quinta-feira, 5 de abril de 2012

WordPress: Função get_calendar();



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

Usando um calendário com CARA de calendário! :wink:

Depois de muito apanhar com a função get_calendar(); do WordPress, consegui chegar muito perto do que eu queria.

Veja na imagem ao lado como era o  calendário interno do WordPress antes e depois do banho de CSS.

O difícil foi apurar os parâmetros do CSS! :X.:  Foi preciso muito hack em alguns temas prontos do WordPress pra entender como a coisa era feita, e uma boa estudada em algumas técnicas que eu nunca tinha usado em CSS. :-o*

Bom, inicialmente, você precisa entender como funciona a função get_calendar();

Ela aceita unicamente um parâmetro: False ou True

Este parâmetro dita como ele vai exibir os dias da semana, se com apenas uma letra ou com abreviatura de 3 letras.

Então para exibir com a abreviatura de três letras, é preciso passar o parâmetro False.

get_calendar(false);

O get_calendar(); em geral deve estar dentro do arquivo sidebar.php mas também nada impede de você colocá-lo em outro local.

Com isso já temos os dias da semana com abreviatura de 3 letras. O restante é puramente CSS. Para isso edite o arquivo style.css de seu tema, localize as entradas iniciadas com #wp-calendar e remova todas,  e acrescente o seguinte código em seu lugar:

/* Calendar Widget */

#wp-calendar {
  text-transform: capitalize;
  text-align: center;
  empty-cells: show;
  margin: 0;
  border-spacing: 0;
  width: 98%;
  padding: 3px;
}

#wp-calendar caption {
  font-size: 1.2em;
  font-weight: bold;
  color: #BBBB00;
  padding: 5px 0 3px 0;
}

#wp-calendar th {
  background: #252525;
  font-family : Arial, Helvetica, Sans-Serif;
  font-size : 0.9em;
  font-weight: bold;
  color: #CCC;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}

#wp-calendar td {
  font-size: 0.8em;
  color: #CCC;
  text-align: center;
  letter-spacing: normal;
  padding: 2px 0;
  border-bottom: 0px;
}

#wp-calendar thead tr th:first-child {
  color: #FF0000;
}

#wp-calendar tbody tr td:first-child {
  background: #521;
}

#wp-calendar tfoot td {
  background: #252525;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}

#wp-calendar a {
  display: block;
  text-decoration: none;
  border-bottom: 0px;
}

#wp-calendar #today, #wp-calendar #today a {
  background: #221;
  font-size: 1.1em;
  font-weight: bold;
  color: #BBBB00 !important;
  border: 1px solid #442;
}

#wp-calendar #next a {
  text-align: right;
  font-weight: bold;
  padding-right: 12px;
}

#wp-calendar #prev a {
  text-align: left;
  font-weight: bold;
  padding-left: 12px;
}

E com isso, voilá! Seu calendário estará 99% igual ao da imagem. A única coisa que não estará igual, é o Domingo em vermelho, porque isso por enquanto depende de um pequeno hack no general-template.php do WordPress, e  mexer diretamente no “core” do WordPress não é algo recomendado. Para contornar isso, estou estudando algumas funções para tentar fazer isso de uma forma mais limpa, através do functions.php do tema. :mrgreen:

Já era! Perguntar as coisas pra professor é outro papo! Dá pra pintar o domingo de vermelho na moleza via CSS também.  Olhe o código inserido das linhas 39 a 41, isso resolve o problema.  Pequeno detalhe, não funciona (não pinta o Domingo de vermelho) em IE6. Mas… quem se importa? Quem ainda usa essa coisa horrenda? Migra pra algo decente. }:D

Ah! Obviamente, você pode e DEVE alterar as cores no CSS para que fique compatível com seu tema. o:-)



   domingo, 1 de abril de 2012

Estou postando esta dica aqui, que foi encontrada a duras penas (pela segunda vez), neste blog aqui.

Porque estou postando aqui? Para que a dica não se perca, e porque o código postado por lá tem pequenos erros. E porque eu gastei umas 3 horas de google e muito xingamento pra achar esse código novamente, pois eu fiz uma caquinha com o template do blog e perdi essa modificação. :X.:

Bom, pra usar faça o seguinte:

Edite o arquivo functions.php de seu tema.

Acrescente o código abaixo no final do arquivo:

<?php
//Colorful Tag Cloud
function ColorCloud($text) {
    $text = preg_replace_callback('|<a (.+?)>|i', 'RandomColorCloudCallback', $text);
    return $text;
}

function RandomColorCloudCallback($matches) {
    $text = $matches[1];
    $color = dechex(rand(0,16777215));
    $pattern = '/style=(\'|\")(.*)(\'|\")/i';
    $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
    return "<a $text>";
}

function ColorCloudCallback($matches) {
    $tag_link=$matches[1];

    /*the sylloge of your custom color*/
    $colorFull = array('#999','#D8D9A4','#9BB','#EB9','#a3c159','#FEC42D','#6C8C37','#c2dc15','#3371A3','#888','#00ccff','#FF8080');
    $color=$colorFull[ mt_rand(0, count($colorFull) - 1)];
    $pattern = '/style=(\'|\")(.*)(\'|\")/i';
    $tag_link= preg_replace($pattern, "style=\"color:{$color};$2;\"", $tag_link);
    return "<a $tag_link>";
}

add_filter('wp_tag_cloud', 'ColorCloud', 1);
?>

Se quiser trocar do modo random para com cores definidas, apenas altere a chamada da função:

function ColorCloud($text) {
    $text = preg_replace_callback('|<a (.+?)>|i', 'RandomcolorCloudCallback', $text);
    return $text;
}

Para:

function ColorCloud($text) {
    $text = preg_replace_callback('|<a (.+?)>|i', 'ColorCloudCallback', $text);
    return $text;
}

E altere o valore das cores no $colorFull

$colorFull = array('#999','#D8D9A4','#9BB','#EB9','#a3c159','#FEC42D','#6C8C37','#c2dc15','#3371A3','#888','#00ccff','#FF8080');

O resultado vocês podem conferir ai no menu lateral do blog, eu estou usando o modo Random.

E avisando… o banco de dados do blog já foi inteiramente corrigido. (nota mental e foi pro ToDo list: Aprender a manipular mysql pelo php :-$ )

Pelo menos os erros que eu sabia que existiam de longa data. Se por acaso alguém topar ou lembrar de alguma imagem quebrada, me avise que arrumo. :coffe:

O google friend connect, foi sumariamente LIMADO pelo google. E por falar nisso eu ando perdendo a paciência com esse põe e tira serviço do ar. Só no inicio desse mês foram mais 5 pro saco, o google quer de toda forma enfiar o Plus goela abaixo. Eu me recuso a usar, e estou pensando seriamente em limar o meu Plus. Eita empresinha que esta ficando filho-da-puta viu? :furious:

Ainda não sei o que fazer, se coloco outro plugin social… alguém ai recomenda alguma coisa que todos usem e seja garantido?

Bom, como podem notar ai acima, eu instalei o addon para Sintaxe Highlight, pra facilitar as coisas. Estou pensando em dar um upgrade no post que explico em como hackear a barra do google (outra filho da putisse do google), e anexar mais umas ou duas coisinhas que ficaram faltando. Porém lembro que do jeito que esta lá atualmente, funciona perfeitamente. o:-)

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.