base_url() no javascript

Olá a todos, como não poderia deixar de compartilhar com vocês, segue mais uma funçãozinha que peguei no blog do snipplr desta vez, algo que é usado constantemente por programadores php e que muitas vezes queremos fazer algo “inteligente” com o javascript.

function get_settings() {
var doc_location = document.location.href;
var url_strip = new RegExp("http:\/\/.*\/");
var base_url = url_strip.exec(doc_location);
var settings = { "base_url" : base_url }
return settings;
}


settings = get_settings();
alert(settings.base_url);


jQuery lightBox com CodeIgniter

Implementando o “exelente”  jQuery lightbox plugin com CodeIgniter

Foi atravéz da matéria do Leandro Vieira (iMasters) que implementou o Lightbox JS criado pelo Lokesh Dhakar, e outra do Gin2 (wiki do CodeIgniter), que resolvi inseri este plugin como biblioteca no codeigniter, dando ao usuário maior praticidade na hora do desenvolvimento e aplicação de lightbox em suas galeria.

Escolhi o jQuery lightbox plugin, porque além de bastante simples, faz o trabalho com maestria (parabéns Leonardo).

“Para este exemplo, estou levando em consideração que você tenha uma instalação do CI funcionando.”

1° PASSO

Baixe a última versão da biblioteca jQuery lightbox plugin e disponibilize em uma pasta da sua instalação do CI, neste caso, defini como na estrutura abaixo.

Estrutura de diretórios

2° PASSO

No header da view onde estará a sua galeria de imagens, insira o código que carrega a biblioteca

<script type="text/javascript" src="<?=base_url();?>skin/js/jquery.js"></script>
<script type="text/javascript" src="<?=base_url();?>skin/js/jquery.lightbox-0.5.min.js"></script>

3° PASSO

Em algum lugar na página, crie uma tag  javascript que vai escrever a função definida na biblioteca lightbox.php

<script type="text/javascript">
    <?=$this->lightbox->simple('profile_img');?>
</script>

Como definido no jQuery lightbox plugin, os objetos que farão parte da galeria devem obedecer o seguinte critério:

- Tag <a> com href apontando para a imagem em tamanho real

- Tag <img> exibindo o thumbnail

<a href="http://exemplo.com/imagens/imagem.jpg">
    <img src="http://exemplo.com/imagens/thumb.jpg" alt="Nome da imagem" />
</a>

4° PASSO

Crie uma biblioteca de nome  “lightbox.php” com o código abaixo:

<?php

class LightBox {

    function simple($target='simpleModal') {
        $block = $this->jsBlock();
        $url = base_url();
        $output = "
        $(function() {
            $('#profile_img a').lightBox({
                imageLoading:'{$url}skin/images/lightbox-ico-loading.gif',
                imageBtnPrev:'{$url}skin/images/lightbox-btn-prev.gif',
                imageBtnNext:'{$url}skin/images/lightbox-btn-next.gif',
                imageBtnClose:'{$url}skin/images/lightbox-btn-close.gif',
                imageBlank:'{$url}skin/images/lightbox-blank.gif'
            }); // Seleciona todos os links dentro do elemento com ID galeria
        });";
        return $block['open'].$output.$block['close'];
    }

    function jsBlock() {
        $blocks = array(
            'open'=>''."\n\r",
            'close'=>''."\n\r"
        );
        return $blocks;
    }

}

?>

5° PASSO

Agora no controler que chama a view da sua galeria, instancie a biblioteca lightbox.php da seguinte forma:

function index() {
    $this->load->library('lightbox');
    $this->load->helper('url'); //assistente de url, usado ao chamar base_url()
}

rsync local e remoto

Mais uma vez estou aqui pra compartilhar algo que aprendi recentemente, uma ferramenta poderosa, mas impraticável pela maioria dos desenvolvedores.

Depois de muito quebrar a cabeça arquivando com “tar”, compactando com “gzip”, dividindo com “split” e transferindo com “wget”, cheguei a conclusão:

“PARA TUDO!!! ISSO NÃO VAI DAR CERTO, VOU APRENDER RSYNC DE VERDADE!”.

E para a alegria geral da nação, está aí de forma simples e descomplicada.

1° vc quer transferir arquivos ou diretórios inteiros localmente; use isto.

$ rsync -Cravzp /diretorio/origem/ /diretorio/destino/   é só isso!!

2° Quer transferir pela rede sem autenticação?

$ rsync -Cravzp usuario@host:/diretorio/origem/ /diretorio/destino/   “mais simples que isso só isso elevado ao cubo.”

3° E agora o gran finale!!!

-Quer transferir de servidor pra servidor?

$ rsync -Cravzp -e “ssh -p1234″ usuario@dominio.com.br:/diretorio/origem/ /diretorio/destino/

Dica: Se quiser apenas listar os arquivos do servidor? ignore o diretório de destino.

$ rsync -Cravzp -e “ssh -p1234″ usuario@dominio.com.br:/diretorio/origem/

“Agora me diz: Como algo tão simples, poderoso e útil pode passar despercebido por tantos desenvolvedores?”

Obs.: Os parametros já estão configurados para a transferência de forma rápida e segura, mas caso ainda não confie em mim “e não deve confiar”, dê uma olhada no “man” do rsync.

Busca de CEP presonalizada

Olá a todos!

Depois de algum tempo sem postar, estou “me permitindo” atualizar o blog com mais uma dica utilizando o jQuery, implementado a partir do artigo encontrado no blog “Ajaxianos” do Wender Lima.

Desta vez um busca por cep onde você dita as regras.

Let’s go –>

Requerimentos:

• jquery.js
• busca_cep.js

Download: busca_cep.js

Demonstração: exemplo do Busca CEP

Documentaçao:

No header do seu formulário, inicialize a biblioteca busca_cep.js

<script language="javascript" src="js/busca_cep.js" type="text/javascript"></script>

Defina as opções obrigatórias (target e campos)

Options ={
 target: "name_do_campo_cep",
 campos: {
    "rua"     :"name_do_campo_rua",
    "bairro"  :"name_do_campo_bairro",
    "cidade"  :"name_do_campo_cidade",
    "estado"  :"name_do_campo_estado"
 }
 };

Chamar o método initForms(opções)

initBuscaCep(Options)

*Obs. Você pode decidir quais campos quer preencher (rua, bairro, cidade, estado) passando o name dos inputs como valor do objeto”campos”

O código completo ficará como no exemplo abaixo.

<script type=”text/javascript”>

Options ={
target: “cep”,
//objeto com os names dos input do seu formulário
campos: {“rua”:”endereco”,”bairro”:”bairro”, “cidade”:”cidade”, “estado”: “estado”}
};
initBuscaCep(Options)

</script>

<form action=”http://sua_url.com.br”>

<label for=”cep”><input type=”text” id=”cep” name=”cep” /></label>

<label for=”rua”><input type=”text” id=”rua” name=”rua” /></label>

<label for=”bairro“><input type=”text” id=”bairro” name=”bairro” /></label>

<label for=”cidade“><input type=”text” id=”cidade” name=”cidade” /></label>

<label for=”estado“><input type=”text” id=”estado” name=”estado” /></label>

<input type=”button” value=”Enviar” />

</form>

Defina as propriedades obrigatórias para o correto funcionamento

• [target] String – Name do objeto de formulário referente ao CEP. Default = “cep” .
• [campos] Objeto – Recebe um objeto javascript correspondente aos nomes dos campos de cado objeto de formulário. Você pode decidir em recuperar os campos “rua, bairro, cidade, estado”. Ex.

      campos: {"rua":"endereco","cidade":"cidade"}

Qualqer dúvida entrem em contato com ldmotta@visie.com.br.

Comentários serão bem vindos.

jqFormulator – Carregando formulários com jQuery

Olá pessoal!!

Às vezes, nas brincadeiras de fim de semana, nos vem inspiração para resolver probleminhas do nosso cotidiano. Foi desta forma que resolvi criar uma “bibliotecazizinha” com jQuery que carregasse grandes formulários em uma página (magentopia) no estilo formulator, mas que desse ao usuário final uma experiência agradável ao ter que preencher cansativos passos destes formulários de cadastro.

Estou falando da jqFormulator, que está na versão “ontem.de.madrugada.1″ e tambem está aberta a novas idéias e melhoramentos.

Requerimentos:

• jquery-1.3.2.min.js >
• jqFormulator.js

Download: jqFormulator.js

Demonstração: exemplo do jqFormulator

Documentaçao:

No header do seu formulário, inicialize a biblioteca jqFormulator.js

<script language="javascript" src="js/jqFormulator.js" type="text/javascript"></script>

Defina as opções obrigatórias (titles e files)

Options ={
 type: "POST",
 titles: Array("Passo 1","Passo 2"),
 files: Array(
 "files/reserva-passo-1.php",
 "files/reserva-passo-2.php"
 )
 };

Chamar o método initForms(opções)

initForms(Options)

Insira o seu formulário na página com id = ‘formulator’

<form id="formulator" method="post" action="jqFormulator.php"></form>

O código completo ficará como no exemplo abaixo.

<script type=”text/javascript”>
Options ={
type: “POST”,
//array com os títulos de cada passo
titles: Array(“Passo 1″,”Passo 2″),
//array com os formuláios que serão chamados
files: Array(
“files/reserva-passo-1.php”,
“files/reserva-passo-2.php”
)
};
initForms(Options)
</script>
<div id=”forms”>
<form id=”formulator” method=”post” action=”#”></form>
</div>

Defina as propriedades obrigatórias para o correto funcionamento

• [type] String – Refine o tipo de envio (GET ou POST) default: POST.
  
• [titles] Array – Recebe um array que serão os titulos de cada passo. Caso a quantidade de títulos passados seja inferior a quantidade de arquivos, o sistema irá atribuir títulos sequenciais. Ex.

      titles: Array("Passo 1","Passo 2")

• [files] Array – Recebe um array com as urls dos arquivos que serão carregados. Ex.

Array (“files/cadastro/passo1.php”, “files/cadastro/passo2.php”, “files/cadastro/passo-n.php”)

Fig. 1 - Passo 1, na primeira exibição, o usuário só poderá acessar
o formulário do passo 1.   


Fig. 2 - Passo 2, ao clicar em prosseguir no passo 1,
o título "Passo 1 e Passo 2" transformam-se em link permitindo ao
usuário navegar entre o primeiro e segundo passos e assim
suscessivamente.

Espero que está humilde aplicação possa ser útil a todos. Qualqer
dúvida entrem em contato com ldmotta@visie.com.br.

Comentários serão bem vindos.

Desbloquear SGH C275L

Então… vc chega na loja da vivo, e eles dizem que não desbloqueiam pois a loja que está desbloqueando é aquela que fica do outro lado da cidade, e vc ainda tem que apresentar a identidade, cpf, nota fiscal do aparelho em seu nome, sertidão de nascimento, comprovante de voto dos últimos 5 anos, carteira de vacina… hehehe…

!!! SEUS PROBLEMIAS ACABARAMSE !!!

Façam o seguinte:

Anotem o IMEI do aparelho, caso não saiba, digite *#06# e vai aparecer o numero IMEI com 17 algarismos.
OBS. Se você anotar o IMEI que está embaixo da bateria, ele terá 15 números, os dois últimos você só consegue digitando *#06#.

2. Guardem ele (papel, notepad ou word).

3. Coloquem o chip da operadora que você deseja e não funciona.

4. Ligue o aparelho com o chip instalado.

5. Quando aparecer uma mensagem, Cartão Incorreto façam o seguinte:

digitem:

*2767*688IMEI# (substitua a palavra IMEI pelo código de 17 digitos)

6. Aguarde alguns segundos… Assim que ele reiniciar e encontrar a rede, digite o código *0141# e tecle “Send” (tecla verde) para persolanizar o celular.

7.1. Aparecerá a mensagem: “Personalizado”

ou

7.2. Aparecerá a mensagem: “Já Personalizado”

aparecendo qualquer uma dessas vá em:

Menu > Config. Telefone > Segurança.

8. Coloque:
Verificar PIN: Desativar
Bloquear Telefone: Desativar
Bloqueio de SIM: Desativar
SENHA: 00000000

9. Saia de todos os menus e digite novamente *0141# e tecle “Send” (botão verde)

10. Irá aparecer “Personalizado”, Pronto, Desbloqueado para esse CHIP.

Simulando virar de páginas com javascript

Exelente tutorial passo a passo para simular o virar de páginas com javascript.

http://www.oreillynet.com/pub/a/javascript/2004/09/03/flashhacks.html?page=1

Configurar Apache + No-Ip Para acesso via internet

Para este artigo, estou considerando que vc já tenha uma conta no No-Ip e tenha instalado o Apache 2.x

1° Libere uma porta da sua escolha no seu roteador e no seu firewall (mesmo que seja o firewall do windows). Ou seja, se liberar a porta 12345 no seu roteador, libere também a mesma porta (TCP) no seu firewall.

2° Abra o arquivo httpd.conf (arquivo de configuração do Apache), e altere a linha “Listen:80″ por “Listen: Número da porta escolhida” Ex. Caso tenha liberado a porta 12345, ficaria Listen: 12345

Dica: O endereço a ser digitado para acesso a seu servidor é http://seudominio.no-ip.org:12345 (onde 12345 é o número da porta liberada).

Acredite se quiser, é só isso.

Redimensionar imagens com PHP

<?php
function rmkdir($path, $mode = 0777) {
$path = rtrim(preg_replace(array(“/\\\\/”, “/\/{2,}/”), “/”, $path), “/”);
$e = explode(“/”, ltrim($path, “/”));
if(substr($path, 0, 1) == “/”) {
$e[0] = “/”.$e[0];
}
$c = count($e);
$cp = $e[0];
for($i = 1; $i < $c; $i++) {
if(!is_dir($cp) && !@mkdir($cp, $mode)) {
return false;
}
$cp .= “/”.$e[$i];
}
return @mkdir($path, $mode);
}

function resizamos ($img_origem, $pasta_destino, $novo_nome, $novalargura)
{
// Aqui carregamos a imagem original
$img = imagecreatefromjpeg( $img_origem );
//Determinar a largura e a altura da imagem original
$largura = imagesx( $img );
$altura = imagesy( $img );

// Calcular o tamanho que a imagem pequena terá, de modo a nao desfocar.
$nova_largura = $novalargura;
$nova_altura = floor( $altura * ( $novalargura / $largura ) );

// Criar a imagem temporaria
$tmp_img = imagecreatetruecolor( $nova_largura, $nova_altura );

// Copia e faz o resize para a nova imagem
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $nova_largura, $nova_altura, $largura, $altura );

//crio a pasta destino caso não exista
rmkdir($pasta_destino);

// Guarda a imagem na pasta de destino e com o nome pretendido
$uploadnova = $pasta_destino . “/” . $novo_nome . “.jpg”;
imagejpeg( $tmp_img, $uploadnova );
}
resizamos(“img.jpg”,”img”,”thumb1″,1024);
resizamos(“img.jpg”,”thumb”,”thumb2″,100);
?>

Caixa com cantos arredondados

Uma boa solução para estilizar seu site, gostaria de transforma-lo num plug-in, más ainda não tive tempo, quem sabe no próximo post.

Resultado:

Primeiro temos o html

<html>
<head>
<title>Caixa com cantos arredondados</title>
<meta name=“generator” content=“editplus” />
<link href=“caixa.css” media=“all” rel=“stylesheet” type=“text/css” />
</head>
<body>
<div class=“modulecontainer sidebar”>
<div class=“first”>
<span class=“first”></span>
<span class=“last”></span>
</div>
<div class=“conteudo”>
<!– é só preencher este espaço com o conteúdo que quiser –>
</div>
<div class=“last”>
<span class=“first”></span>
<span class=“last”></span>
</div>
</div>
</body>
</html>

Agora vamos ao CSS. Obs: Dê preferência a colocar o css em um arquivo separado, nem preciso dizer pq…

.modulecontainer {
width:180px;
height:auto;
border-width:1px;
padding:0 8px;
}

.modulecontainer div {
width:auto;
height:auto;
background-color:#ffc;
border-color:#630;
border-style:solid;
border-width:1px;
margin:-2px -8px;
}

.modulecontainer .first {
border-width:1px 0 0;
}

.modulecontainer .last {
border-width:0 0 1px;
}

div.first,div.last {
height:8px;
width:auto;
position:relative;
background-color:#c93;
border-color:#630;
margin:0;
}

.modulecontainer .first .first {
position:absolute;
background-image:url(top_left.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-left:-8px;
border:0 none;
}

.modulecontainer .last .first {
position:absolute;
background-image:url(base_left.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-left:-8px;
border:0 none;
}

.modulecontainer .first .last {
position:absolute;
background-image:url(top_right.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-right:-8px;
border:0 none;
right:0;
}

.modulecontainer .last .last {
position:absolute;
background-image:url(base_right.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-right:-8px;
border:0 none;
right:0;
}

.conteudo {
font:normal 11pt “Trebuchet MS”;
color:#F00;
padding:3px;
}

Clique aqui para ver o resultado