Using jQuery Mask Plugin with Zepto.js

Posted on 30 de April de 2013 by Igor Escobar

Today I’m going to exemplify a pretty easy way to put jQuery Mask Plugin to run with Zepto.js instead of jQuery.

What is Zepto.js

Basically, you can switch from jQuery to Zepto.js if it’s too heavy or if it’s too much for your current needs. If you need something more lightweight that allows you to keep your code compatible with your old jQuery’s code, Zepto.js is a match for you.

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The goal is to have a ~5-10k modular library that downloads and executes fast with a familiar and versatile API, so you can concentrate on getting stuff done.
- Zepto.js Official Web Site

How to

Recently, Igor Lima made a pretty cool contribution to jQuery Mask Plugin making a few tweaks on jQuery Mask Plugin’s code to make it run smoothly with Zepto.js, making things even easier for you.

Since version 0.9.0 all you have to do is:

1 – Load zepto.js between your head TAG (or where ever you want to put it if you know what you’re doing):

<script type="text/javascript" src="http://zeptojs.com/zepto.min.js"></script>

Load the Zepto.js data plugin right after Zepto.js:

<script type="text/javascript" src="https://raw.github.com/madrobby/zepto/master/src/data.js"></script>

Zepto’s basic implementation of data() only stores strings. To store arbitrary objects the optional “data” module from custom build of Zepto was included.

And then load jQuery Mask Plugin:

<script type="text/javascript" src="https://raw.github.com/igorescobar/jQuery-Mask-Plugin/master/jquery.mask.min.js"></script>

All you need to do now is take a look into jQuery Mask Plugin Documentation to learn a little about jQuery Mask Plugin’s API and you’re ready to go!

Posts Relacionados:

Nenhum post relacionado!

Adding and removing remote branches

Posted on 21 de November de 2012 by Igor Escobar

Today I’m going to share another git’s trick to easily set up a remote branch and how to delete them from the remote branch.

Frequently we have to work parallelly to master branch on an exciting feature of your product, right? More often then this is sharing it so your co-workers can contribute and make it even more exciting.

Adding remote branches

The problem is that every time that you create a new branch it’s created locally and you can’t just push your changes because git doesn’t know where to push it. Git stores your branch’s configuration on your .git/config file like this:

[branch "ftw_feature"]
  remote =
  merge =

You can solve this problem manually, every goddamn time setting branch’s remote configurations in .git/config file or if you’re working with git’s version 1.7+ you can use the –set-upstream flag instead.

git branch --set-upstream ftw_feature origin/ftw_feature

Now, just like magic your .git/config file should look like this:

[branch "ftw_feature"]
  remote = origin
  merge = refs/heads/ftw_feature

Or if your you’re sadly running under 1.7 git’s version you can still do a better approach than manually (or not too verbose for me):

git config branch.ftw_feature.remote origin
git config branch.ftw_feature.merge refs/heads/ftw_feature

Removing remote branches

If somehow you screw things up and have to clean the mess before anyone notices, just type:

git push origin :ftw_feature

Or even more intuitive:

git push origin --delete ftw_feature

That does the job.

Posts Relacionados:

Nenhum post relacionado!

Making Sinatra routes insensitive to the trailing backslash

Posted on 14 de November de 2012 by Igor Escobar

Today I’m going to talk about how we make Sinatra routes insensitive to the trailing backslash. This trick will help you if you just got started with Sinatra.

Now that you’re creating RESTful apps and decided that Sinatra it’s your chosen one framework, it’s very important that you always end your routes with a “/?”. It’s important not to forget that Sinatra accepts regular expressions on their routes. If you create a simple route like this:

get "/twitter-posts" do
  # some code
  haml :index, :format => :html5
end

Sinatra will not understand the route if typed like this: “/twitter-posts”. With that in mind, it’s very important that you always end up your routes like this:

get "/twitter-posts/?" do
  # some code
  haml :index, :format => :html5
end

Now, you’re telling Sinatra that your route has a optional trailing backslash and now will understand both with or without trailing backslash.

Posts Relacionados:

Nenhum post relacionado!

Mascara Javascript para os novos telefones de São Paulo

Posted on 29 de July de 2012 by Igor Escobar

Olá pessoal,

“O presidente da Anatel (Agência Nacional de Telecomunicações), João Rezende, informou nesta sexta-feira que o acréscimo do nono dígito aos números de celulares da região metropolitana de São Paulo vai garantir 53 milhões de novas combinações numéricas.”
http://www1.folha.uol.com.br/mercado/1040493-nono-digito-garante-53-mi-de-novos-numeros-de-celular-em-sp.shtml

Sabendo disso, é importante começarmos a pensar em soluções para atender as mascaras de telefone de todo o Brasil e também para região metropolitana de São Paulo.

Já faz uns meses que falei sobre o jQuery Mask Plugin. E desta vez, também vamos resolver este mesmo problema com o ele. Criei um exemplo no jsFiddle de como resolver da mascara javascript com o novo nono dígito nos telefones celulares de São Paulo. Você pode ver o exemplo funcionando aqui: http://jsfiddle.net/NJMSj/30/

E o código é este:

  $('.sao_paulo_phone_number').mask('(00) 0000-0000',
    {onKeyPress: function(phone, e, currentField, options){
     var new_sp_phone = phone.match(/^(\(11\) 9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})/g);
     new_sp_phone ? $(currentField).mask('(00) 00000-0000', options) : $(currentField).mask('(00) 0000-0000', options)
   }
 });

Desta forma, atendemos todos os números de telefone do Brasil e também atendemos a nova forma da Anatel para os telefones da região metropolitana de São Paulo, simples, certo? Ainda bem que tive a ideia de implementar estes eventos nas mascaras antes mesmo desta norma da Anatel

É isso, simples e objetivo!

UPDATE 19/11/2012

Se você está querendo aplicar a masca e precisa de alguma forma recuperar a informação como em um form de edição ou algo do tipo, você precisa verificar qual a mascara aplicar antes de formatar o campo.

// jQuery Mask Version: v0.5.0+
var SPphoneMask = function(phone, e, currentField, options){
  return phone.match(/^(\(?11\)? ?9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})/g) ? '(00) 00000-0000' : '(00) 0000-0000';
};

$(".sp_celphones").mask(SPphoneMask, {onKeyPress: function(phone, e, currentField, options){
  $(currentField).mask(SPphoneMask(phone), options);
}});

Com a versão 0.5.0+ do jQuery Mask Plugin, você consegue passar uma função para dentro do plugin, desta forma o plugin se encarrega de resolver qual é a mascara mais adequada a ser aplicada para cada cenário analisando primeiro o conteúdo que já tem no campo e depois aplica a mascara. Em caso do usuário mudar o valor do campo ele vai re-avaliando o conteúdo do campo conforme o usuário vai digitando.

[]‘s
Igor.

Posts Relacionados:

Masks With jQuery Mask Plugin

Posted on 6 de May de 2012 by Igor Escobar

Today is the oficial release of the version 0.4.3 of my jQuery Mask Plugin. Since I have never written about it before on this blog, I’ll teach you guys how to use it and some other cool features about it.

Downloading the code

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

The only thing that you guys need to do is include the javascript file of the plugin between the head tag in your HTML document and it’s all set to use.

The syntax

The jQuery Mask Plugin syntax is pretty simple. First, you input your selector, followed by the .mask and then as a parameters you have to put the mask that you want the plugin to apply on the form field.
Example

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

In this example the mask 00/00/0000 will be applied in all the input fields that have the “.date” class. At jQuery Mask Plugin you don’t have pre-established masks, you choose the mask as you wish. On the website project you can see the jQuery Mask Plugin running with some others examples like this:

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

As you can see, it’s possible to define other data type on each digit of the mask. This mask for example:

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

The user can type a sequence of three alpha numeric characters, followed by space, three numeric characters, a slash, one string character, other number character and finally one string character, cool isn’t it?

Again, you can define the mask as you wish and the data type of each digit of the mask as well.

Features

Data type validation of each digit.
Flexible masks.
Live Events for Ajax applications.
Automatic maxlength.
Reverse mode masks.
OnKeyPress and OnComplete callbacks.

More about jQuery Mask Plugin

Any problems, please, let me know.

Posts Relacionados:

Mudando a barra de endereço do browser sem refresh

Posted on 5 de May de 2012 by Igor Escobar

Hoje vamos falar sobre um recurso bastante interessante dos nossos browsers que nos permite fazer a alteração das informações das páginas que acessamos, inclusive a URL que é mostrada na barra de endereço do seu browser sem fazer o uso do refresh e o melhor: mantendo o histórico.

Manipulando o histórico do browser

Para se fazer o que é proposto neste post é preciso entender como funciona a manipulação do histórico do nosso browser e os métodos que o objeto DOM window nos proporciona para manipular o nosso histórico. Neste post vamos falar especificamente sobre o window.history.

A W3C implementa History com a seguinte interface:

interface History {
  readonly attribute long length;
  readonly attribute any state;
  void go(optional long delta);
  void back();
  void forward();
  void pushState(any data, DOMString title, optional DOMString url);
  void replaceState(any data, DOMString title, optional DOMString url);
};

Neste post, vou falar somente somente os métodos pushState e replaceState que são os métodos responsáveis por manipular o histórico da sessão do seu navegador.

Sempre que você abre uma nova aba e/ou janela o navegador inicia uma nova sessão. E é nesta sessão que ele armazena todas as URL’s que você visitou.

Método history.pushState

O método pushState registra uma nova entrada no seu histórico de sessão, mantendo o histórico. E essa é a sua sintaxe:

window.history.pushState(data, title [, url ] )

Data: O parâmetro data pode ser útil caso você queira utilizar o evento onPopState. O evento onPopState é invocado sempre que uma nova entrada é registrada no seu histórico de sessão.
Title: É o título da página que você quer que esta entrada tenha.
URL: É a URL que você quer que a página tenha. Você pode utilizar este parametro de duas formas:

Absoluta: Passando toda a nova URL completa, incluindo protocolo, host, path etc. Ex: http://blog.igorescobar.com/
Relativa: A URL que você passar será relativa a URL atual, ou seja, se você estiver acessando o http://blog.igorescobar.com/ e passar “/category/javascript/” a URL que será registrada é “http://blog.igorescobar.com/category/javascript/”.

Exemplo

 window.history.pushState('Object', 'Categoria JavaScript', '/category/javascript/');

O resultado deste código vai fazer com que a URL e o título da página que você estiver navegando mude, sem que o refresh ocorra. E se você apertar o “voltar” no seu navegador, vai ver que ele vai voltar a página anterior que você tinha acessado, ou seja, o histórico foi mantido.

Método history.replaceState

O método replaceState é muito parecido com o pushState. A única diferença entre os dois métodos é que o pushState armazena uma nova entrada, mantendo o histórico. O replaceState não, ele substituí a entrada do histórico de sessão atual pelos dados que você passa. E essa é a sua sintaxe:

window.history.replaceState(data, title [, url ] )

Exemplo:

window.history.replaceState('Object', 'Titulo da Página', '/outra-nova-url');

Evento onPopState

O evento onpopstate é invocado sempre que uma nova entrada é dada no histórico de sessão do seu browser. A forma como você pode utiliza-lo é só adaptar à sua necessidade de negócio. Uma forma de utilização deste evento é delegar para ele a responsabilidade de carregar via ajax todo o link que for clicado, por exemplo.

Exemplo de navegação sem refresh

Todo mundo já conhece o GitHub, certo? (espero que sim!) O GitHub faz do uso deste mesmo recurso para que vocês consigam visualizar os arquivos de um repositório de maneira rápida, sem refresh e mantendo um histórico da navegação. Veja que sempre que você clica em um arquivo, ele é carregado dentro do mesmo contexto, a url da página muda e você consegue ir para frente e voltar no histórico, graças ao método window.history.pushState.

Este é um exemplo de como seria a implementação de uma navegação parecida com jQuery.

$('#menu-nav a').click(function(e){
  e.preventDefault();
  window.history.pushState({url: "" + $(this).attr('href') + ""}, $(this).attr('title') , $(this).attr('href'));
 });

$(window).bind("popstate", function(e) {
  $('#my-navigation-container').load(e.state.url);
});

Compatibilidade

Os browsers Chrome, Opera, Safari e Firefox 4+ implementam todos estes métodos de forma nativa. Os browsers antigos utilizam o location.hash para imitar o comportamento. Existe uma biblioteca chamada History.js que implementa esta funcionalidade de forma crossbrowser.

Posts Relacionados:

Mascaras com jQuery Mask Plugin

Posted on 13 de March de 2012 by Igor Escobar

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/jquery.mask.min.js

A única coisa que vocês precisam fazer é incluir o plugin entre as tagsedo 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('99/99/9999 00:00:00');
  $('.cep').mask('99999-999');
  $('.phone').mask('9999-9999');
  $('.phone_with_ddd').mask('(99) 9999-9999');
  $('.phone_us').mask('(999) 999-9999');
  $('.mixed').mask('AAA 000-S0S');
});

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

Validação de tipo de dado inputado.
Mascaras flexíveis.
Live Events para aplicações Ajax.
Maxlength automático.

Mais sobre o jQuery Mask Plugin

Qualquer problema, por favor, me avisem.

Posts Relacionados:

Javascript – Aviso de Dados Não Salvos

Posted on 2 de March de 2012 by Igor Escobar

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:

Ao fechar aba/navegador.
Ao clicar em qualquer outro link, senão o submit do formulário.
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?

Utilizei o $.data() do jQuery por que eu não gosto de utilizar o var para declarar variáveis globais.
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.
Por default, eu seto o evento onbeforeunload e dentro dele eu verifico se algo foi mudado no formulário.
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

Posted on 15 de November de 2011 by Igor Escobar

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

Posted on 19 de September de 2011 by Igor Escobar

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.