Portifólio

Depois de um longo tempo prometendo criar um portifólio, finalmente está pronto. Fiz no modo pastel com CodeIgniter. Agora só basta ter tempo para alimentá-lo.

Segue o link: http://www.maniero.tk/

Jquery com MTV(MVC) - Jquery MTVe

"Model-view-controller (MVC) é um modelo de desenvolvimento de Software, atualmente considerado uma "arquitetura padrão" utilizada na Engenharia de Software." - Fonte: http://pt.wikipedia.org/wiki/MVC

Nada é mais problemático nos dias de hoje quanto a falta de padronização nos projetos. Após uma procura na internet encontrei alguns frameworks MVC para javascript, mas, nenhum me agradou. Alguns me pareceram bem completos, mas, não me atendiam muito bem.

Achei de bom senso criar um próprio, coloquei algumas ideias no papel e cheguei a uma primeira versão. Ele deveria ser leve, de fácil utilização e o mais simples possível.

Tentei aproximar ao máximo a forma do Framework Django trabalhar, e cheguei a seguinte estrutura:

• Model
• Template
• View
• events

Surge então o jQuery MTVe, farei uma pequena demostração sobre seu funcionamento.

Primeiramente, entre na página no GitHub do projeto serão necessários os arquivos que estão dentro da pasta src.

Model:

Nosso modelo irá fazer uma requisição na graph api do Facebook. Ela terá dois atributos. Um será chamado "me" ele armazenará o meu username e outro chamado "base" que será utilizado para requisitar dados de perfil de outros usuários.

var model = $.Model({
  me : 'carlos.maniero',
  base : 'http://graph.facebook.com/',
  profile : function() { return this.load('GET', this.base + this.me ); },
  find_profile : function(username) { return this.load('GET', this.base + username ); },
});

O método "profile" retorna os dados do meu perfil e o find_profile retorna os dados de um usuário qualquer.

O método load:
Como você deve ter percebido ambos os métodos do modelo utilizam o método load. Ele é o método responsável em fazer as requisições via Ajax. E possui os seguintes parâmetros:

• type: GET ou POST
• url: Endereço da requisição
• data: Json com dados a serem enviados
• options: Opções do método jQuery.ajax

O método get:

Para chamar um método ou acessar um atributo, usa-se o método get.
Exemplos:

model.get('me');
model.get('profile')();

 

Template:

O método template usa o jQuery.tmpl, ele ainda não está em faze final, mas, está bem estável. Então esse será o conteúdo do nosso template:
HTML: https://github.com/carlosmaniero/jQuery-MTVe/blob/master/demos/demo1.tmpl


Os arquivos de template podem ser salvos com a extensão tmpl ou escrito em forma de texto, no exemplo salvaremos em um arquivo .tmpl.

Javascript:

var template = $.Template({
  profile : 'demo1.tmpl'
});

Renderizando um template:
Para renderizar um template, basta utilizar o método método get passando como parâmetros o nome do atributo e o objeto que será usado para substituir no template.

Exemplo:
template.get('profile',json);

View (Controlador):

"O controlador (controller) recebe a entrada de dados e inicia a resposta ao utilizador ao invocar objetos do modelo, e por fim uma visão baseada na entrada. Ele também é responsável pela validação e filtragem da entrada de dados." - Fonte: http://pt.wikipedia.org/wiki/MVC

Vamos ao javascript:

var view = $.View({
 profile : function(){
   var data = $.parseJSON(model.get('profile')());
   $("table").append(template.get('profile',data));
 },
 find_profile : function(username){
   var data = $.parseJSON(model.get('find_profile')(username));
   $('table').append(template.get('profile',data));
 }
});

Events:

Nos eventos ficarão todas as função que serão usadas em nossos elementos.

Javascript:

var events = $.Events({
  profile : function(evt){
    evt.preventDefault();
    view.get("profile")();
    $(this).attr('disabled','true');
  },
  find_profile : function(evt){
    evt.preventDefault();
    var username = $("input[name=username]").val();
    view.get("find_profile")(username);
  }
});
$("#button_profile").click(events.get('profile'));
$("#button_find_profile").click(events.get('find_profile'));

Como eu disse anteriormente ele é bem simples, porém, bastante útil.

O exemplo completo você encontra na pasta demos do projeto.

PHP - Long Polling

Long Polling é uma técnica utilizada para se obter dados e informações em "tempo real" sem que haja uma requisição por parte do usuário.

Como isso é possível? 
Existem algumas formas disso ser feito, nesse artigo, abordaremos o Long Polling.

Criaremos nesse artigo um pequeno chat, lembre-se que o intuito do artigo não é ensinar a fazer um chat, e sim, demostrar o funcionamento do Long Polling.

Vamos ao nosso arquivo poll.php, ele será responsável em trazer novas mensagens que foram enviadas pelo chat.

set_time_limit(0);

function poll($cur_line){
 // Lê arquivo
 $data = file_get_contents('chat.txt');
 $lines = explode("\n", $data);
 
 // Verifica se o número de linha é igual a linha atual ou se a linha 0 está vazia
 if(count($lines) == $cur_line || empty($lines[0])){
  // Coloca o script para dormir por 1 segundo
  sleep(1); 
  return poll($cur_line);
 }else{
  $ret = array();
  $ret['lines'] = array();
  // Coloca somente as linhas que não foram lidas no vetor
  for($cur_line;$cur_line < count($lines); $cur_line++){
   $ret['lines'][] = $lines[$cur_line];
  }
  // Adciona a linha atual no vetor
  $ret['cur_line'] = $cur_line;
  // Encoda o vetor em json
  return json_encode($ret);
 }
}
echo poll($_POST['cur_line']);

Entendendo o poll.php

No arquivo poll há uma função que recebe como parâmetro o $cur_line, essa é a linha atual do chat. Cada mensagem estará em uma linha de um arquivo .txt.  
Sem muito segredo, a função poll lê o arquivo chat.txt e verifica se há novas linhas no arquivo, caso negativo, ele coloca o programa para dormir durante 1 segundo, isso é muito importante para amenizar o gargalo de processamento.

Caso haja novas linhas, ele coloca as novas linhas em um vetor que é encodado para json.

Javascript:

var cur_line = 0;
var poll;
function get_messages(){
 poll = $.ajax({
 type: "POST",
 url: "poll.php",
 data: { 'cur_line' : cur_line },
 dataType: "json",
 success: function(json, textStatus, jqXHR) {
  cur_line = json.cur_line;
  
  // Insere linhas na tela 
  for(i=0;i' + json.lines[i] + '');
   $("#chat #chat-content .messages").prepend(line);
  }
  
 },
 complete: function(){ 
  get_messages();
 },
 timeout: 30000
 });
}

A função get_messages envia um post para o arquivo poll.php e imprime em uma lista o resultado(json) retornado e atualiza o número de linhas carregadas, que vem no json retornado.

Eu sempre recomendo que a conexão seja interrompida de tempo em tempo. No meu caso dixei o timeout em 30 segundos. Isso evita que, em caso de erros, o servidor fique com o processo travado.

Quando requisição é completada, eu chamo a função get_messages novamente, fazendo com que sempre haja uma conexão ativa com o servidor.

Com o Long Polling o chat sempre estará trazendo as novas mensagens de forma rápida, sem precisar ficar enviando milhares de requisições para o servidor.

Se quiser o projeto completo, eu subi no github.
Segue o link: https://github.com/carlosmaniero/Php-long-polling
Demonstração: http://www.livrodeoracao.com.br/dev/chat/index.php

Capítulo 2 - Vivendo como terráqueo

Depois de muita pesquisa, Solrac chega a uma conclusão:

- Não tem jeito, eu vou passar pelo menos um quinto da minha vida  - o equivalente a três séculos terráqueos - preso nesse planeta.
- Então vou viver como um terráqueo. Vou vender algumas coisas, cursar uma faculdade e quem sabe consigo desenvolver algo que me tire desse planeta.

 Ele juntou alguns metais de valor (pelo menos para os terráqueos) que estavam em sua mochila, debaixo de uma toalha - itém indispensável segundo o guia do mochileiro das galáxias – e levou até um senhor no centro da cidade, que trabalhava com uma placa em volta do seu corpo com o inscrito “Compra-se ouro”. Ele foi encaminhado até uma joalheria onde conseguiu um bom dinheiro pelos seus metais.

Solrac estava decidido em cursar algo que envolvesse linguagens de programação terráquea. Então realizou sua matrícula em uma universidade localizada em um bairro de italianos na Zona Leste de São Paulo. Não foi nada fácil comprovar que ele já havia concluído o ensino médio, já que a universidade não aceitava histórico escolar intergalático.

Capítulo 1 - Solrac preso no planeta Terra

Durante suas férias, Solrac, um jovem alienígena que gostava de assustar camponeses e mendigos (desses que ninguém acredita), decide conhecer um planeta pouco visitado, chamado Terra, para poder se divertir um pouco sabe? Coisas que jovens alienígenas gostam de fazer. A Terra não é um planeta que eles costumam visitar com frequência, devido a dificuldade de comunicação.

Tome nota:

O AANT (Associação Alienígena de Normas Técnicas) em conjunto com a AATEL (Agência Alienígena de Telecomunicações) definiram que quaisquer tipo de transmissão, sejam elas via celulares, tablets, ou qualquer outro tipo de aparelho, sejam realizadas através de ondas de radiação ultravioleta. Na Terra, a ozonosfera torna praticamente impossível se comunicar com planetas e ou galáxias vizinhas. Por esse motivo muitos terráqueos não acreditam na existência de alienígenas.

 Durante sua viagem Solrac estava indo para uma pequena cidade na região metropolitana de São Paulo, ele estava procurando um local onde pudesse desenhar formas geométricas, com a finalidade de causar alguma repercussão na mídia. Em uma manobra mal executada, perdeu o controle e colidiu com uma arvore.

- Droga! A nave está destruída. Como vou sair desse fim de Universo? 

- Ah! Minha mãe vai me matar, eu disse que só iria comprar algumas joias em Saturno.

- E meu pai? Qual será a reação dele ao saber que dei perda total em sua nave.

A única forma de Solrac sair da Terra, era aguardar a vinda de uma outra espaçonave que poderia demorar séculos terráqueos para chegar. Dada essas condições, decide então conhecer um pouco mais sobre o planeta em que estava. Após um série de adaptações que ele realizou em seu computador, ele conseguiu finalmente acessar a internet terráquea.

Após uma longa pesquisa no Google sobre tecnologia terráquea, ele chegou a um termo que até então era desconhecido, o Open Source. Ao ler o artigo no Wikipédia ele não entendeu como podem existir pessoas que simplesmente disponibilizam o trabalho de uma vida. Em seu planeta não existia software livre, muito menos gratuito, por essa razão software livre era algo insano para ele.

Desacreditando no que havia lido, ele decide então baixar um Linux, para ver como aquilo funcionava. Após usar o Linux ditribution chooser (http://www.zegeniestudios.net/ldc/index.php?lang=pt-br) baixou o Ubuntu para ver como se sairia. Para sua surpresa o Ubuntu reconheceu perfeitamente os drivers de seu computador, o que o espantou, já que o mesmo foi feito com tecnologia alienígena.

- Não é possível! Como algo tão bom assim pode ser de graça?

Após a descoberta do Linux, ele começou a pesquisar mais a respeito de software livre e linguagens de programação, ficou apaixonado com a simplicidade do Python. E foi ali, no seu terminal do Ubuntu que ele fez o seu primeiro “Hello World” em linguagem terráquea.

Conjuntos Numéricos - Parte II

Creditos: sxc.hu

Aqui estamos na segunda parte da matéria de conjuntos numéricos. No post anterior dei a definição de conjunto e elemento. Também vimos quando e como utilizar o ∈ (pertence) e o ∉ (não pertence). Falei também sobre intervalos, que podem ser definidos como fechados, abertos e semi-abertos. Nesse post desejo abordar sobre ⊂ (contido) e ⊄ (não contido) além disso vamos falar um pouco de união e intersecção.

Subconjunto

Em subconjuntos iremos estudar se um conjunto A por exemplo é subconjunto do conjunto B, para que isso possa ser verdade todos os elementos de A deve estar presentes em B. Vamos ver um exemplo para ilustrar melhor a situação:


A = { 7 , 8 , 9 }
B = { 6 , 7 , 8 , 9 , 10 }


Logo:
A ⊂ B ou seja A está contido em B, pois os todos os elementos de A pertencem a B, lembrando que a concavidade do símbolo sempre estará apontando para o conjunto com maior número de elementos, logo A ⊂ B é equivalente a B ⊃ A.

Intervalos:
Com intervalos a regra de subconjuntos é aplicada da mesma forma. Exemplos:

[ 1 , 3 [ ⊂ [ 1 , 3 ]
[ 2 , 6 ] ⊄ [ 1 , 6 [

União

Dado os conjuntos:

A = { 1 , 2 , 3 }
B = { 3 , 4 , 5 }

A união dos dois será equivalente a:

A ∪ B = { 1 , 2 , 3 , 4 , 5}

É extremamente importante lembrar-se que em conjuntos não podemos repetir elementos.

Intervalos:

Fonte: Laifi

 Intersecção

A intersecção tem um propósito semelhante ao da união, porém o resultado intersecção de dois conjuntos será um conjunto com os elementos que existem em ambos os conjuntos. Exemplo:

Dado os conjuntos:

A = { 1 , 2 , 3 }
B = { 2 , 3 , 4 }

A intersecção dos dois conjuntos será:

A ∩ B = { 2 , 3 }

Observações:

Se A ⊂ B o resultado da união será B e o da intersecção será A.

Vejamos:

A = { 7 , 8 , 9 }
B = { 6 , 7 , 8 , 9 , 10 }

A ∪ B = B = { 6 , 7 , 8 , 9 , 10 }
 A ∩ B = A = { 7 , 8 , 9 }

Conjuntos Numéricos - Parte I

Crédito sxc.hu

Farei um pequeno resumo sobre conjunto numéricos,
irei começar pelos conjuntos com menos elementos.









Conjunto dos números naturais:
Podemos defini-lo como um número inteiro, ou seja, sem casa decimais, positivo o zero também não faz parte.
N = { 1 , 2 , 3 , 4 , 5 , ...}

Conjunto dos números inteiros:
São todos os números sem casas decimais.
I = { ... , -3 , -2 , -1 , 0 , 1 , 2 , 3 , ...}

Conjunto dos números reais:
São todos os números inteiros e os com casas decimais.
R = {... , -0.0000001 , ... , 0 , ... , -0.0000001}

Definindo conjuntos:
Todo conjunto é representado por uma letra maiúscula, seus elementos ficam dentro de colchetes e são separados por vírgula. Vejamos um exemplo:

1) O conjunto C tem como elementos as letras do nome Blog do Carlos, então: C = {b,g,c,a,r,l,o,s}
2) O conjunto X tem como elementos os números 5, 9, 3 e 1, então: X = {5,9,3,1}




Elemento: é um componente de um conjunto.
Conjunto: é uma coleção de elementos.

Para não ficar tão abstrato, vejamos o seguintes exemplos:

1) 3  ∈ I, o elemento 3 pertence  ao conjunto dos números inteiros.
2) -3 ∉ {0,1,2}, o elemento -3 não pertence ao conjunto dos números inteiros.

Nos exemplos, 3 e -3 são elementos, I e {0,1,2} são conjuntos.

Intervalos:

Fonte: UFRJ

São todos os números reais entre dois extremos. Por exemplo:
A = [1,3], podemos escreve-lo também da seguinte forma A = {x ∈ R / 1 ≤ x ≤ 3 }



No intervalo A não estão representado só os números 1 e 3, mas sim infinitos números entre 1 e 3 inclusive o 1 e o 3, vamos ver agora, elementos que pertençam e que não pertençam ao intervalo A: 1 ∈ A; 1.0000000001 ∈ A; 3 ∈ A; 2.333333 ∈ A; 0.99999 ∉ A; 3.000001 ∉ A


Tipos de intervalos:

1 - Intervalo Fechado:

Quando os dois extremos pertencem ao conjunto. Representamos da seguinte forma:
A = [1 , 3] ou A = { x ∈ R / 1 ≤ x ≤ 3 }

2 - Intervalo Aberto: 

Quando os dois extremos não pertencem ao conjunto. Exemplo:
A = ]1,3[  ou A = { x ∈ R / 1 < x < 3}

Então o A é um intervalo de 1 a 3, porém, 1 e 3 não fazem parte, ou seja, 1.0001 ∈ A mas 1 ∉ A o mesmo é válido para o 3,  2.9999 ∈ A mas 3 ∉ A.

3 - Intervalo Semi-aberto

Quando 1 dos dois extremos não pertencem ao conjunto. Vejamos os dois exemplos:

A = [1,3[ ou A = { x ∈ R / 1 ≤ x < 3}
B = ]1,3] ou B = { x ∈ R / 1 < x ≤ 3 }

Por enquanto é só, na parte dois falarei um pouco sobre teoria dos conjuntos.

Python: Números Primos

Faz algum tempo que eu me prometi criar um script para calcular e procurar números primos, usei o algorítimo de Marin Mersenne e desenvolvi o script em python.

Clique aqui para fazer o download do script.








Segue imagens do script:

Iniciando o programa:

$ python prime.py

Tela de menu

Iniciando com debug e salvar números em arquivo:

$ python prime.py debug

$ python prime.py save

Ambos:

$ python prime.py debug save

Calculando dias úteis com php

Crédito sxc.hu

Essa é uma função que desenvolvi segundo a necessidade de um amigo,  ela executa o calculo de dias úteis em determinado mês, para o script ficar completo só é necessário a criação de uma tabela no banco de dados onde serão registrados os feriados, se eu conseguir um tempinho no final de semana, termino o script, e aproveito para ensinar como criar uma tabela, inserir e editar um registro.

/**
 * Função que calcula dias úteis no mês
 * 
 * @autor Carlos Maniero 
 */


function dias_uteis($mes,$ano){
  
  $uteis = 0;
  // Obtém o número de dias no mês 
  // (http://php.net/manual/en/function.cal-days-in-month.php)
  $dias_no_mes = cal_days_in_month(CAL_GREGORIAN, $mes, $ano); 

  for($dia = 1; $dia <= $dias_no_mes; $dia++){

    // Aqui você pode verifica se tem feriado
    // ----------------------------------------
    // Obtém o timestamp
    // (http://php.net/manual/pt_BR/function.mktime.php)
    $timestamp = mktime(0, 0, 0, $mes, $dia, $ano);
    $semana    = date("N", $timestamp);

    if($semana < 6) $uteis++;

  }

  return $uteis;

}


// Invocando a função
echo dias_uteis(date('m'),date('Y')); // Recebe dias úteis do mês atual
echo dias_uteis(1,2012); // Recebe dias úteis do mês 1 de 2012

Simplificando a validação em PHP

Crédito: sxc.hu

Nada é tão chato quanto fazer aquela validação de formulário não é mesmo? E se eu disser que há uma maneira simples de se fazer isso em PHP, isso mesmo, nada de sofrimento!

Estou falando da função filter_var() vamos a um exemplo de utilização da mesma:






// Validação de email
 if(filter_var('bob@example.com', FILTER_VALIDATE_EMAIL)){
   echo "Email Válido!";
 }


// Validação de url
 if(filter_var('http://carlosmaniero.blogspot.com', FILTER_VALIDATE_URL)){
   echo "Url Válido!";
 }


Espero que seja um dica útil para vocês, as constantes usadas por essa função pode ser encontrada nesse link: http://php.net/manual/en/filter.constants.php

Plugin para customização de formulários

Como postei anteriormente estou desenvolvendo uma nova versão do Livro de oração, e nisso fui obrigado a desenvolver uma série de plugins para jquery para customização de formulários. Todos sabem da minha paixão pelo mundo open source, logo, estou disponibilizando aqui uma versão beta do plugin, acredito que há muito o que melhorar e tenho certeza que até o fim do meu projeto ele estará bem melhor, mas vamos a uma prévia:

JS: http://goo.gl/ueKw2
CSS: http://goo.gl/76cxn


O plugin é dependente do masked input que pode ser obtido aqui:

http://digitalbush.com/projects/masked-input-plugin/

Segue uma pequena demostração de como usa-lo:

$("seletor").inputCustom({
    opção : "valor"
});

Segue a lista de opções:

label 
Descrição: Texto padrão do campo, desaparece no evento focus
Padrão: ""


datatype
Descrição: Tipo de dado [text/url/email/number]
Padrão: text


required
Descrição: Seta campo camo obrigatório ou não
Padrão: false


disable
Descrição: Checa se campo pode estar desativado 
Padrão: false


minlength
Descrição: Tamanho mínimo em caractéres do texto, em caso de número valor mínimo do número
Padrão: 1

maxlength
Descrição: Tamanho máximo em caractéres do texto, em caso de número valor máximo do número
Padrão: 10000

errorMsg
Descrição: Mensagem de erro caso campo não for corretamente preenchido
Padrão: 'Preencha o campo corretamente!'

errorClass
Descrição: Classe que será aplicada ao elemento caso não esteja corretamente preenchido
Padrão: 'errorField'

labelClass
Descrição: Classe para quando o elemento esteja no texto padrão (label)
Padrão: 'labelActive'

mask
Descrição: Máscara que será aplicada ao elemento (ex.: 99/99/9999), para maiores informações pesquisar o site no maskedinput
Padrão: ""

autoComplete
Descrição: Url onde será recebido o JSON usado para o auto complete: (ex.: { "city_5137":"Ribeirão Pires","city_5138":"Ribeirão Preto"})
Padrão:

click
Descrição: Evento click do elemento
Padrão: function(){}

focus
Descrição: Evento focus do elemento
Padrão: function(){}

focusout
Descrição: Evento focusout do elemento
Padrão: function(){}

keydown
Descrição: Evento keydown do elemento
Padrão: function(){}

keyup
Descrição: Evento keyup do elemento
Padrão: function(){}


Exemplo básico:


$(document).ready(function(){
  $("input[name=nome]").inputCustom({
    label: "Nome: ",
    required: true,
    minlength: 3,
    maxlength: 150,
    errorMsg: "Preencha o campo nome"
});

  $("input[name=email]").inputCustom({
    label: "Email: ",
    required: true,
    datatype: "email",
    errorMsg: "Preencha o campo email!"
  });

  $("input[name=url]").inputCustom({
    label: "Site: ",
    required: true,
    datatype: "url",
    errorMsg: "Preencha o campo URL"
  });
});




Por hoje é só, se possível amanhã estarei falando um pouco mais sobre o plugin.

Um novo primeiro post

Estou voltando a postar no blog depois de um longo período, fui extremamente influenciado pelo Leonardo Ferreira, você pode conferir suas inúteis anotações nesse endereço http://ferreiraleonardo.blogspot.com/, tenho algumas certezas sobre essa volta, uma delas é que a qualquer momento vou desistir de postar, e até mesmo esse post pode ser o último.

 Sem mais delongas vou contar um pouco sobre o que aconteceu comigo nesse período em que estive off (pelo menos na blogosféra). Primeiramente passei um bom período estudando, em programação obtive sucesso, mas o inglês e o cursinho foi um fracasso, enfim estou trabalhando em uma agência de publicidade e propaganda como programador, lá é uma empresa composta por pessoa sem qualquer senso de humor, onde se aplica puramente a lei da convivência para manter o ambiente estável, você pode confirmar isso com as imagens abaixo:

Não posso deixar de falar de um projeto pessoal chamado Livro de Oração, de todos eles é o que mais me dá  prazer em realiza-lo ele tem se tornado um site abençoado, e espero que cresça ainda mais, estou trabalhando nele nesse exato momento, ele em breve se transformará em uma rede social, o mais difícil de tocar o projeto é na questão dos layouts, como todo bom programador não sou nada bom com design, mas ai eu entrego na mão de um brother meu que sempre me dá  uma força ele se chama Espírito Santo, e sempre tem me ajudado nessas horas, isso ainda está em desenvolvimento, não sei quando vou conseguir entrega-lo já que existe uma complicação chamada tempo, mas sempre que possível trabalho nele, se você se interessar pelo projeto o link é o seguinte: http://www.livrodeoracao.com.br caso esteja necessitado de oração posta lá, pode ter certeza que sempre terá alguém orando por você.

Acho que não tenho mais o que acrescentar nesse primeiro post, vou deixar minha "vidinha de adolescente" de fora dos meus posts, para os que estão acostumados com minhas postagens isso provavelmente isso vai ser um espanto, mas juro que vou tentar deixar as "frescuritis" fora dessa vez.