Mascaras com jQuery Mask Plugin

Hoje é o lançamento oficial da versão 0.4.3 do meu plugin jQuery Mask Plugin. Como nunca falei sobre ele aqui no blog, vou ensinar vocês como utiliza-lo e algumas features bacanas do plugin.

Baixando o código

 wget https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/dist/jquery.mask.min.js 

A única coisa que vocês precisam fazer é incluir o plugin entre as tags do seu documento e pronto, o plugin está pronto para vocês utilizarem.

A sintaxe

A sintaxe do jQuery Mask Plugin é bem simples. Primeiro você passa o seletor, seguido de .mask e como parametro você vai passar a mascara que você quer que o campo tenha.
Exemplo

$(document).ready(function(){
  $('.date').mask('00/00/0000');
});

Neste exemplo, todos os input fields que possuem a classe “.date”, a mascara será aplicada. No jQuery Mask Plugin você não tem mascaras pré-estabelecidas. Você escolhe a mascara como você quiser. no site do projeto vocês podem ver o jQuery Mask Plugin funcionando e mais alguns outros exemplos, como os a seguir:

$(document).ready(function(){
  $('.date').mask('11/11/1111');
  $('.time').mask('00:00:00');
  $('.date_time').mask('00/00/0000 00:00:00');
  $('.cep').mask('00000-000');
  $('.phone').mask('0000-0000');
  $('.phone_with_ddd').mask('(00) 0000-0000');
  $('.phone_us').mask('(000) 000-0000');
  $('.mixed').mask('AAA 000-S0S');
  $('.cpf').mask('000.000.000-00', {reverse: true});
  $('.money').mask('000.000.000.000.000,00', {reverse: true});
});

Veja que que eu posso definir o tipo de dado que o usuário pode imputar a cada dígito. Nesta máscara por exemplo:

$('.mixed').mask('AAA 000-S0S');

O usuário poderá digitar uma sequência de 3 caracteres alpha números, seguido de espaço, seguido de 3 caracteres números, seguido de traço, seguido de um caractere do tipo string, seguido de um caractere do tipo inteiro e seguido de um caractere do tipo string, legal, né?

Vocês podem definir a mascara como quiserem e também podem definir o tipo de dado que pode ser inputado em cada dígito da mascara.

Features

  • Lightweight (~2kb minified, ~1kb gziped).
  • Mascaras em qualquer elemento HTML.
  • suporte ao attribututo data-mask.
  • Mascaras com String/Numeros/Alpha-Numéricos/Mixed.
  • Suporte a mascara reversa para campos numéricos.
  • Sanitização.
  • Digitos Opcionais.
  • maxlength Automático.
  • Inicialização de mascara avançada.
  • Callbacks.
  • Mudança de mascara On-the-fly.
  • Remoção da mascara.
  • Customização.
  • Compatibilidade com Zepto.js

Mais sobre o jQuery Mask Plugin

  1. jQuery Mask Plugin no Github
  2. Página de demonstração
  3. Source-Code do jQuery Mask Plugin
  4. Todas as versões do jQuery Mask Plugin

Qualquer problema, por favor, me avisem.

AJUDOU? AJUDE NO DESENVOLVIMENTO DO JQUERY MASK PLUGIN

Click here to lend your support to: jQuery Mask Plugin and make a donation at pledgie.com !

Posts Relacionados:

Javascript – Aviso de Dados Não Salvos

Sabe quando você está escrevendo um e-mail e se você tenta sair de tela o browser te da um aviso, comunicando a possível perda de dados? pois é! sobre isso que vamos falar. 🙂 O Gmail faz isso, o Rally faz isso, mas muita gente ainda não sabe como isso é feito de fato.

Este tipo de recurso é muito interessante e pode evitar muita dor de cabeça por parte da pessoa que estiver utilizando o seu sistema. No meu caso, este recurso foi aplicado a um CMS. A finalidade da implantação deste recurso no CMS era para que os jornalistas fossem avisados quando algum dado no formulário fosse alterado, porém, o usuário intencionalmente (ou não) tenta mudar de página e este dado dado seria perdido. Se tratando de um CMS focado para jornalistas onde o conteúdo digitado é extremamente importante, todos recurso que for desenvolvido para evitar perda de conteúdo é extremamente bem-vindo.

onBeforeUnload Event

O evento onbeforeunload não tem uma finalidade exclusiva para ele, é um evento como outro qualquer, mas ele é invocado sempre que o usuário tenta sair da página atual, mas quando ele não está setado, simplesmente nada acontece. O evento responsável por pedir para que o usuário confirme ou não a mudança de pagina é o evento onbeforeunload. Sempre que ele é setado, você vai ver um confirm dialog, igual o da imagem abaixo.

Aviso de perda de conteúdo

O Problema

Se fosse só setar o efeito e ele fazia todo o resto, seria fácil, né? Pois é… mas não é assim (#lol). Temos que fazer um script peça a intervenção do usuário nas seguinte situações:

  1. Ao fechar aba/navegador.
  2. Ao clicar em qualquer outro link, senão o submit do formulário.
  3. O alerta deve aparecer somente se algo for alterado no formulário.

A Solução

$(function(){
  var formObject = $('.new_materia, .edit_materia');
  formObject.data('original_serialized_form', formObject.serialize());

  $(':submit').click(function() {
    window.onbeforeunload = null;
  });

  window.onbeforeunload = function() {
    if (formObject.data('original_serialized_form') !== formObject.serialize()) {
      return "As mudanças deste formulário não foram salvas. Saindo desta página, todas as mudanças serão perdidas.";
    }
  };
});

Como funciona?

  1. Utilizei o $.data() do jQuery por que eu não gosto de utilizar o var para declarar variáveis globais.
  2. Utilizei o $.serialize() do jQuery para serializar o formulário para comparar o estado do formulário no futuro. E foi a forma mais inteligente que encontrei para identificar se algo realmente foi mudado no formulário.
  3. Por default, eu seto o evento onbeforeunload e dentro dele eu verifico se algo foi mudado no formulário.
  4. O único caso em que eu tenho que remover o evento onbeforeunload é quando existe a intenção de salvar o dado, no caso utilizei o :submit com evento $.click() para remover o evento e cancelar o alerta, caso houve a intenção de salvar o formulário.
Bom, é isso!
Dúvidas, sugestões, comentários are extremely encouraged.

Posts Relacionados:

Aumente a performance do seu site com cache .htaccess

Existem várias formas de se aumentar a performance de uma aplicação web, e quando eu falo aplicação web o mesmo se aplica a sites. Uma das formas mais eficientes de lidar com performance é concentrar esforços para aumentar a sensação de carregamento instantâneo da sua aplicação.

Steve Souders escreveu um livro excelente chamado: High Performance Websites e nele, Steve, falou algo que me chamou muita atenção:

“Na maior parte da minha carreira em Internet, fui engenheiro de back-end. Como tal, eu diligentemente atacava cada projeto de performance como um exercício em otimização de back-end, me concentrando em opções de compilação, índices de bases de dados, gerenciamento de memória, etc. Existe muita atenção e vários livros dedicados a otimização performance nessas áreas, então é nelas que a maioria das pessoas emprega seu tempo, procurando melhorias. Na realidade, para a maioria das páginas de Internet, menos de 10% a 20% do tempo de resposta experimentado pelos usuários finais é gasto trazendo o documento HTML do servidor para o browser. Se você quer redurzir dramaticamente os tempos de resposta de suas páginas, tem de se concentrar nos restantes 80% a 90% da experiência do usuário final. No que sesses 80% a 90% são empregados?”

Umas das regras para se otimizar o carregamento de uma interface web, talvez uma das mais importantes, é diminuindo o número de requisições HTTP que esta interface está fazendo.

Existem diversas técnicas para se reduzir o número de requisições HTTP de uma aplicação web, porém, a que vamos abordar hoje é somente um pequeno pedaço deste trabalho, porém, uma parte muito importante dele.

A negligência e o cache.

Existe uma negligência muito grande por parte dos programadores e engenheiros com relação ao cache. Não podemos simplesmente cachear tudo e todos. Existe um nível de importancia que deve ser empregado para cada tipo de mídia que estamos cacheando. Vai de negócio para negócio, Na aplicação X os arquivos javascript podem não ser muito importante mas os arquivos mp3 são importantíssimos e vice-versa. É muito importante darmos o tempo certo de vida para cada tipo de mídia sempre olhando para o nosso negócio.

Botando a negligência de lado, por quê o cache é importante? para evitar que o usuário pague o preço. Para que ele baixe somente o que é necessário.

Diretivas .htaccess para cache

# 1 ANO
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 SEMANA
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DIAS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MINUTO
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>

Veja que é possível darmos um tempo de “vida” do cache de um arquivo de acordo com a sua extensão. É importante ressaltar que os tempos que foram dados no exemplo acima é somente um exemplo. Como eu disse acima, é importante você colocar na balança o que é mais importante para o seu negócio.

.htaccess Time Cheatsheet

# TIME CHEAT SHEET
#      300   5 MIN
#      600  10 MIN
#      900  15 MIN
#     1800  30 MIN
#     2700  45 MIN
#
#     3600   1 HR
#     7200   2 HR
#    10800   3 HR
#    14400   4 HR
#    18000   5 HR
#    36000  10 HR
#    39600  11 HR
#    43200  12 HR
#    46800  13 HR
#    50400  14 HR
#    54000  15 HR
#    86400  24 HR
#
#    86400   1 DAY
#   172800   2 DAY
#   259200   3 DAY
#   345600   4 DAY
#   432000   5 DAY
#   518400   6 DAY
#   604800   7 DAY
#
#   604800   1 WEEK
#  1209600   2 WEEK
#  1814400   3 WEEK
#  2419200   4 WEEK
#
#  2419200   1 MONTH
#  4838400   2 MONTH
#  7257600   3 MONTH
#  9676800   4 MONTH
# 12096000   5 MONTH
# 14515200   6 MONTH
# 16934400   7 MONTH
# 19353600   8 MONTH
# 21772800   9 MONTH
# 24192000  10 MONTH
# 26611200  11 MONTH
# 29030400  12 MONTH

Se este snipet não funcionar (o que é bem improvável) você pode utilizar este snipet em conjunto com a extensão mod_expires do apache.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A300
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A3600
ExpiresByType text/css A3600
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A300
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A300
</IfModule>

O legal de se utilizar o mod_expires é que ele trata o a questão do cache de acordo com o mime-type de cada arquivo e não somente pela extensão.

Tá, mais, é o ideal gerenciar desta forma?

Não. Existem formas mais inteligentes de gerenciar as mudanças dos seus arquivos e fazer com que eles sejam baixados novamente pelo navegador do usuário somente quando ele realmente for atualizado, porém, esta é uma forma um pouco mais “custosa” e eu certamente irei falar com mais profundidade sobre isso em um próximo post.

Conclusão

Podemos minimizar o número de requisições HTTP de nossa aplicação gerenciando de forma mais inteligente os arquivos que estamos incorporando dentro de nossa aplicação web utilizando recursos simples e nativos do nosso apache, como o exemplificado aqui. Esta não é a forma mais eficiente, mas com certeza, vai ajudar muito a minimizar o número de requisições HTTP que sua aplicação web fará nas nas próximas paginas que seu usuário for navegar.

Posts Relacionados:

  • Nenhum post relacionado!

Abreviando um texto sem cortar palavras no PHP

Olá Pessoal!
Como apresentar soluções para problemas cotidianos, é um dos objetivos deste blog, vou compartilhar com vocês uma solução que escrevi para que vocês possam abreviar um texto, sem cortar qualquer palavra pela metade.

É extremamente chato, quando estamos lendo o resumo de uma notícia e nos deparamos com uma palavra cortada, dificultando a compreensão do texto. É feio, principalmente para a estética do layout.

A maioria das funções escritas (em qualquer linguagem) para abreviar um texto, acabam cortando o texto pela metade. Você passa 2 parâmetros: String Texto e Int Limite.

Texto é o texto própriamente dito, e Limite é o tamanho máximo que o texto deve ocupar. Se o texto for maior que 250 caractéres, o script abrevia o texto sem estourar o limite e sem cortar palavras pela metade, caso contrário, deixa o textocomo está.

A solução que escrevi foi esta:

public function abreviaString($texto, $limite, $tres_p = '...')
{
    $totalCaracteres = 0;
    //Retorna o texto em plain/text
    $texto = Biblioteca::somenteTexto($texto);
    //Cria um array com todas as palavras do texto
    $vetorPalavras = explode(" ",$texto);
    if(strlen($texto) <= $limite):
        $tres_p = "";
        $novoTexto = $texto;
    else:
        //Começa a criar o novo texto resumido.
        $novoTexto = "";
        //Acrescenta palavra por palavra na string enquanto ela
        //não exceder o tamanho máximo do resumo
        for($i = 0; $i <count($vetorPalavras); $i++):
            $totalCaracteres += strlen(" ".$vetorPalavras[$i]);
            if($totalCaracteres <= $limite)
                $novoTexto .= ' ' . $vetorPalavras[$i];
            else break;
        endfor;
    endif;
    return $novoTexto . $tres_p;
}

Note que eu chamei uma função estática chamada somenteTexto(). Quem quiser o fonte dela e saber como ela está implementada, está ai:

    public static function somenteTexto($string)
    {
        $trans_tbl = get_html_translation_table(HTML_ENTITIES);
        $trans_tbl = array_flip($trans_tbl);
        return trim(strip_tags(strtr($string, $trans_tbl)));
    }

Esta é a solução enviada pelo Carlos André Ferrari nos comentários do blog:

function abreviaString($texto, $limite, $tres_p = '…') {
  //Retorna o texto em plain/text
  $texto = Biblioteca::somenteTexto($texto);

  if (strlen($texto) <= $limite) 
    return $texto;
  return array_shift(explode('||', wordwrap($texto, $limite, '||'))) . $tres_p;
}

É importante que, antes de abreviarmos um texto, recebermos o texto puro, livre de tags htmls, scripts ou qualquer outra coisa que não faça parte do texto. Quando isso ocorre, dificulta a abreviação pois o algoritmo não sabe o que é texto e o que é metacaracter.

E é isso aí pessoal, o código está bem comentádo e documentado, caso vocês tenham alguma dúvida, fiquem a vontade para perguntar nos comentários.

Qualquer outra implementação que vocês tenham, que faça a mesma coisa, até mesmo em outras linguagens, o share é totalmente bem-vindo.

[]’s
Igor.

Posts Relacionados:

Screenshots com PHP

Salvar screenshots de um site não é uma tarefa muito comum de um programador, porém, esta é uma tarefa interessante de ser feita. Existem algumas soluções interessantes para se resolver esta tarefa, porém, existe um cara em especial que me chamou a atenção e atendeu muito bem as minhas necessidades. Requisito para prosseguir com a solução apresentada neste post é instalar o wkhtmltoimage. Se você acessar o site do projeto vai ver que o nome dele é wkhtmltopdf e não wkhtmltoimage, como é mencionado. O wkhtmltoimage existe nos downloads do projeto, você só precisa instalar a versão adequada para o seu sistema operacional. Tem versões para Linux, Mac e Windows. Vou guiá-los com base no texto Taking screenshots of websites with PHP.

O wkhtmltoimage é um simples utilitário para ser executado via shell que faz a conversão de HTML para imagem usando o WebKit Engine e QT. Não é bem uma conversão. A ferramenta renderiza o endereço requisitado utilizando o WebKit Engine e tira um screenshot desta renderização utilizando o QT.

Fazendo sua primeira screenshot

Levando em consideração que você já tenha o wkhtmltoimage instalado corretamente, abra o seu terminal e digite:

wkhtmltoimage http://www.google.com google.jpg

O código acima vai converter toda a representação HTML do Google e vai converter isso para jpg usando o wkhtmltoimage.

Customizando a saída

O comando wkhtmltoimage tem uma série de opções:

  • Desabilitar a renderização de imagens.
  • Controlar a qualidade da imagem de output.
  • Salvar o screenshot com uma resolução específica.
  • Salvar uma região especifíca do screenshot (crop).
  • Desabilitar o javascript da pagina requisitada.

Exemplos

//renderiza sem imagens
wkhtmltoimage --no-images http://www.google.com google.jpg

//não carrega os javascripts
wkhtmltoimage --no-javascript http://www.google.com google.jpg

//reduz a qualidade da imagem de output
wkhtmltoimage --quality 50 http://www.google.com google.jpg

//personaliza a largura e a altura do screenshot
wkhtmltoimage --height 600 --width 1800 http://www.google.com google.jpg

//faz um crop de 300x300 pixels partindo do eixo x0 e y0
wkhtmltoimage --crop-h 300 --crop-w 300 --crop-x 0 --crop-y 0 http://www.google.com google.jpg

Utilizando com PHP

Como já era de se imaginar, toda esta façanha não é feita somente com PHP. Você precisa da ajuda de alguns caras e para que o PHP consiga executar estes comandos, vamos precisar da ajuda de um método chamado shell_exec do PHP. Também podemos utilizar um wrapper escrito em PHP5 que abstrai os métodos do wkhtmltoimage e wkhtmltopdf chamado Snappy escrito em PHP5 do PHP.

Método 1: shell_exec

shell_exec('./wkhtmltoimage --quality 50 http://www.google.com google.jpg');

Método 2: Snappy

<?php

namespace Knplabs\Snappy;

require_once('Knplabs/Snappy/Media.php');
require_once('Knplabs/Snappy/Image.php');

/* 'wkhtmltoimage' executable  is located in the current directory */
$snap = new Image('./wkhtmltoimage');

/* Displays the bbc.com website index page screenshot in the browser */
header("Content-Type: image/jpeg");
$snap->output('http://www.bbc.com');

?>

Com alguns métodos adicionados…

<?php

namespace Knplabs\Snappy;

require_once('Knplabs/Snappy/Media.php');
require_once('Knplabs/Snappy/Image.php');

$options = array('zoom' => 0.5, 'no-images' => true);

/* 'wkhtmltoimage' executable  is located in the current directory */
$snap = new Image('./wkhtmltoimage-i386',$options);

/* Displays the bbc.com website index page screen-shot in the browser */
header("Content-Type: image/jpeg");
$snap->output('http://www.bbc.com');

?>

É isso aí!

Qualquer dúvida, estou à disposição.

Posts Relacionados:

Git: Visualizando versões anteriores de um arquivo

Um dos principais objetivos que me fez criar este blog é ajudar as pessoas que me acompanham a resolver problemas corriqueiros quando se trabalha com desenvolvimento de software.

No último mês trabalhei em um projeto onde tive vários problemas com versões de arquivo. As coisas simplesmente sumiam de onde deveriam estar ou cagadas decorrentes de comandos espartanos.

Então, aqui vai um comando do git bem interessante, que me salvou diversas vezes:

 git show HEAD~2:/caminho/do/arquivo.txt 

Só para você conseguir entender melhor o comando, a estrutura é bem simples. HEAD seria a revisão onde o arquivo se encontra e o que tem depois do “~” seria a versão do arquivo onde 1 seria a versão atual e a 2 seria a anterior a atual e este número pode ser o numero que você quiser (desde que a versão existe). E após os dois pontos seria o caminho do arquivo que você quer ver a versão.

E foi assim que eu consegui resolver vários problemas sem ter que re-escrever tudo denovo.

Conclusão

Use o git (ou qualquer controle de versão) não importa o tamanho ou a importância do projeto. Use um controle de versão. Além dele garantir o versionamento dos seus arquivos, ter uma boa gama de recursos para melhor organização, dinâmica de projeto, trabalho em grupo e etc., ele proporciona uma camada a mais de segurança dos seus arquivos. Se não fosse pelo git eu estaria atrasado com o meu prazo ou muito provavelmente teria madrugado algumas noites a mais.

[]’s

Igor.

Posts Relacionados:

Personalizando o terminal para trabalhar com Git

Olá Pessoal,

Esta é uma dica bem simples para deixar o seu terminal um pouco mais intuitivo. Muitas vezes quando estamos trabalhando com git, precisamos saber exatamente onde estamos no repositório. Vou compartilhar um simples snippet de código que pode deixar a vista algumas informações bem úteis para vocês quando você estiver dentro e fora de um repositório git.

Configurando o Terminal

Abra o seu arquivo .bashrc:


$> vim ~/.bashrc

E insira o seguinte código no final do arquivo:

PS1='\[\033[0;37m\][\t]\[\033[0;32m\][\u]\[\033[31m\][\h]`git branch 2>/dev/null | grep \* | head -1 | sed "s/\* //g" | awk "{ print \"[ \"\\\$1 \" ]\" }"` \[\033[1;33m\]\w\a\[\033[0m\]\n\$ '

Execute o seu .bashrc para que as alterações entrem em vigor:


$> . ~/.bashrc

E o seu terminal vai ficar parecido com assim:

Ele vai informar para você Hora, Usuário, Máquina, Branch, Diretório e também organiza a área onde você digita seus comandos na linha de baixo para aumentar a área útil do terminal.

[]’s

Igor.

Posts Relacionados:

Detectando Requisições Ajax com PHP

É bem comum trabalharmos com requisições Ajax que batem em um servidor rodando alguma aplicação PHP. O problema é que as vezes utilizamos o mesmo método para atender tanto a arquitetura do seu sistema quanto as requisições que são feitas via Ajax.

Por exemplo: Temos um objeto PHP que tem como objetivo recuperar todas as notícias cadastradas na base de dados.

<?php
class MinhaClasse {
    public function getAllNews(){
        // implementação para receber as notícias
        
        return $news;
    }
}
?>

Como eu faço para que este mesmo método supra as minhas requisições Ajax sem que eu tenha que criar outro?

É bem comum vermos por aí programadores criando dois objetos diferentes para atender as duas necessidades (aplicação e Ajax). Sendo que a única diferença entre eles é como o método retorna.

Podemos utilizar o mesmo método e fazer com que retorne de forma diferente dependendo de como eu estou chamando o método.

Vamos criar um método chamado isAjax():

public function isAjax(){
        return (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
    }

Funciona de forma simples: Sempre que uma requsição Ajax é disparada um header é setado nesta requisição chamada HTTP_X_REQUESTED_WITH e o valor dela é setado como XMLHttpRequest.

Desta forma a nossa classe ficaria assim:

<?php
class MinhaClasse {
    public function isAjax(){
        return (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
    }
    public function getAllNews(){
        // implementação para receber as notícias
        // ..
        
        // se o metodo for invocado via Ajax, retorne um JSON
        if($this->isAjax()) {
            echo json_encode($news);
        } else {
            return $news;
        }

    }
}
?>

Veja que se a requisição for feita via Ajax o método dar um echo JSON de $news. Se o método for invocado de qualquer outra forma ele irá retornar normalmente.

É isso. Post rápido, pá pum 😀

[]’s
Igor.

Posts Relacionados:

  • Nenhum post relacionado!

Treinamento PHPUnit Gratuíto

Dia 4 de novembro, Nick Belhomme criou um treinamento gratuito para PHPUnit e divulgou em seu blog no formato SlideShare. Para que não está por dentro, PHPUnit é uma ferramenta criada por Sebastian Bergmann para criamos suites de testes dentro de nossas aplicações PHP para garantirmos as funcionalidades e entrega de nossa aplicação. A abrangência da ferramenta é gigantesca, da pra fazer muita coisa. Requisitos de funcionalidade, navegação, integração, integridade etc. Se você nunca ouviu falar de TDD (Test Driven Development) esta é a sua chamada. TDD é umas das vertentes do XP (Extreme Programming) onde você desenvolve toda a sua aplicação orientada a testes. Se serve de atrativo e porcamente falando, TDD é a forma que temos de garantir o funcionamento de todas as funcionalidades do software estão funcionando, incluindo suas camadas. Protege sua aplicação do famoso “Corrige aqui, Quebra alí”. O treinamento é em inglês e está logo abaixo.

Post rápido. Como alguns já sabem, agora eu trabalho como PHP Engineer na LBS Local (Apontador & MapLink) em São Paulo e o tempo tem ficado bem corrido. Sempre que der vou tentar divulgar por aqui bons materiais que vão acrescentar na vida acadêmica e profissional de cada um. Se não gosta de esperar, estou diáriamente divulgando bons links no meu twitter, follow me!

Posts Relacionados:

Redes Sociais Aplicada no Desenvolvimento de Aplicações Web

Com a Internet cada vez mais presente na vida de todos, as redes sociais estão ganhando força (muita força). A influência de uma marca nas redes sociais já pode ser convertida em lucro e a grande maioria das empresas já perceberam isso. Essas redes têm sido alvo de muitas empresas para fidelizar e conquistar novos clientes através de ações geniais e muito criativas.

Assim como qualquer outra profissão, as coisas mudam. As tendências mudam. As metodologias mudam. As tecnologias mudam. Tudo muda. Inclusive os desejos e prioridades de nossos clientes. Atualmente as empresas querem estar cada vez mais presentes na vida de cada um de seus clientes. FacebookTwitterOrkutYouTube, etc.. está tudo muito comum e nós precisamos aprender a interagir com estas comunidades para poder dar possibilidade ao seu cliente e potencializar a possibilidade de conversão.

Se você não está familiarizado com o termo “conversão”, podemos dizer que conversão é quando você anuncia e este anúncio é clicado. Isso é chamado de conversão.

O motivo para eu estar aqui hoje, falando sobre redes sociais para vocês, é para dar um puxão de orelha nos profissionais que ainda não estão dando a mínima para este novo (nem tanto assim) conceito de interação. As redes sociais são mais um leque de aplicações que surgiram com a web 2.0. Neste boom, o conceito de interação foi explorado em uma escala muito maior. Junto com todas as inovações e as modificações na forma como interagimos com os sites e aplicativos web hoje, a web 2.0 trouxe o que chamamos hoje de redes sociais.

O meu foco com este post é evangelizar. É fazer com que após você ter lido este post você comece a criar já pensando na integração com as redes sociais. Não faz ideia de como?

Vou te dar algumas ideias:

  • Já pensou que nas notícias do seu site poderia ter a possibilidade dos usuários comentarem nas notícias e replicarem o seu comentário para o Twitter?
  • Os comentários estão protegidos por login? Use o usuário do Twitter do seu visitante para possibilitar mais uma alternativa de autenticação.
  • Upload de vídeos? Dê uma folga para o seu data storage e faça o upload direto para o YouTube e busque as informações através da API.
  • Quer fazer transmissão ao vivo para os seus visitantes? Utilize toda a interação que ferramentas como o Twitcam oferecem para você.
  • Crie aplicativos para Orkut, Facebook e Smarthphones. Os seus usuários poderão ter um nível de interação muito maior e a experiência deles será muito mais rica.
  • Dê a possibilidade do usuário divulgar suas notícias, fotos, albuns e vídeos através das redes sociais que eles participam.
  • Crie aplicações onde o seu usuário possa acompanhar as atualizações das suas redes sociais através da aplicação da sua empresa ou start-up.

Essa lista pode crescer muito ainda. O importante é você ter a criatividade e começar a incluir as redes sociais no planejamento do novo produto ou site da sua empresa ou cliente.

[]’s
Igor.

Posts Relacionados:

  • Nenhum post relacionado!