Image Image Image Image Image
Scroll to Top

Topo

email

13

abr
2012

Sem Comentários

Em Blog
Código

Por Allison

JavaScript: aviso de dados não salvos

Em 13, abr 2012 | Sem Comentários | Em Blog, Código | Por Allison

Fonte: Igor Escobar/IMasters

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

Esse tipo de recurso é muito interessante e pode evitar muita dor de cabeça para quem estiver utilizando o seu sistema. No meu caso, esse recurso foi aplicado a um CMS. A finalidade da implantação era para que os jornalistas fossem avisados quando algum dado no formulário fosse alterado, porém, se o usuário intencionalmente (ou não) tentasse mudar de página, esse dado seria perdido. Tratando-se de um CMS focado para jornalistas, no qual o conteúdo digitado é extremamente importante, todos os recursos que forem desenvolvidos para evitar a perda de conteúdo são extremamente bem-vindos.

onBeforeUnload Event

O evento onbeforeunload não tem uma finalidade exclusiva para ele. É um evento como outro qualquer, que 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 página é o onbeforeunload. Sempre que ele for setado, você vai ver um confirm dialog igual ao da imagem abaixo:

O problema

Se fosse só setar o efeito e ele fizesse todo o resto seria fácil, não é? Bom, mas não é bem assim. Temos que fazer com que 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 porque 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 haja a intenção de salvar o formulário.

Tags | , , ,

27

jan
2012

Sem Comentários

Em Blog
SEO

Por Allison

5 Maneiras de divulgar seu website diariamente

Em 27, jan 2012 | Sem Comentários | Em Blog, SEO | Por Allison

Fonte: CriarSites

Tanto eu quanto você sabemos que é de extrema importância trabalharmos o SEO em nosso site, assim como precisamos sempre estar motivados para que assim possamos sempre escrever artigos de qualidade inigualável. Afinal o nosso objetivo maior é proporcionar maneiras para que a leitura de nossos artigos seja agradável, para consequentemente obtermos o sucesso.

O que não devemos nos esquecer é que não basta estar apenas bem posicionado nos mecanismos de busca ou apenas estar cadastrado neles. Temos uma obrigação diária de divulgar o blog de todas as maneiras possíveis e eficientes, desta forma tenho certeza absoluta de que irá lhe fornecer tráfego altamente qualificado.

1. UTILIZE SEU EMAIL PESSOAL

Quando estamos começando um novo projeto é de costume que não tenhamos muitos contatos, sendo assim a melhor forma de divulgar seu blog em um email é utilizando o pessoal. É comum que nós tenhamos algumas centenas de contatos adicionados, sendo assim, se 10% deles se tornarem fiéis leitores você já esta no lucro.

Uma ideia para divulgar seu blog no email é mandar algo parecido com email marketing, só que será apenas uma única vez, para todos os contatos que você possuir. Neste email é importante que você mostre seu projeto de forma clara e objetiva, só assim seus amigos irão se interessar. Quem sabe desse simples contato não apareça alguns novos leitores.

Tem que ter no email:

  • O que te levou a começar este projeto?
  • Até onde pretende chegar com seu projeto. Vai ser somente um passatempo ou vai realmente tratar seu blog como um negócio?
  • Qual sua intenção ao contatá-los? Eu aconselho que peça a eles para lerem alguns artigos e, caso gostem, subscrevam por RSS Feed.

2. UTILIZA TWITTER E FACEBOOK

Sem dúvidas as redes sociais estão em alta, e através delas você poderá angariar milhares de novos leitores, e conseqüentemente ganhar muito mais dinheiro com seu blog. Sendo assim é fundamental que você possua uma conta em ambas desde o começo de seu projeto.

No começo nunca será fácil de conseguir fãs e seguidores, mas ao invés de pensar “Nossa que difícil! Acho que vou desistir”, por que você não pensa “Nossa que difícil! É agora que vou ter a chance de provar que sou merecedor de milhares de fãs e seguidores”.

O que você tem que fazer é dar tempo ao tempo, e enquanto o tempo passa sua obrigação é escrever conteúdo de qualidade e, assim que postar cada artigo, você deverá na mesma hora divulgar os links no Facebook e no Twitter e assim mostrar seus artigos para o mundo. Nada vem de graça, tudo tem que ser batalhado. Lembrando apenas que acontece uma batalha de cada vez, não enfrente Inglaterra e EUA ao mesmo tempo, pois suas chances de perder serão

muito maiores. Em palavras mais simples: Dê um passo de cada vez, não se encha de coisas para fazer, pois assim só tenderá a ficar estressado e com isso vem a falta de motivação

3. GUEST POST É SENSACIONAL

Eu, para falar a verdade, nunca havia dado tanta importância para Guest Posts quanto dou agora. Há pouco tempo escrevi o artigo “4 Maneiras de Ganhar Dinheiro com um site ou blog” para o CriarSites.com, gerenciado por nosso amigo Celso Lemes. Para falar a verdade, minhas visitas diárias, ao menos nos dois dias posteriores aumentaram consideravelmente.

Claro que a quantidade de visitas que o Criar Sites recebe é muito favorável, mas é ai que você tem que aproveitar e escrever um bom artigo, só assim os leitores de lá vão visitar seu website. Além de aumentar meu número de subscritores, ainda houve uma queda na taxa de rejeição do Blog na Carteira e a porcentagem de novos visitantes aumentou drasticamente.

É por isso que te aconselho a rever seus conceitos sobre Guest Posts, assim como eu fiz. Você vai

ver que valerá apena.

4. AGREGUE VALOR AOS ARTIGOS DE OUTROS BLOGS

Quando alguém visita seu blog e comenta algo que agrega valor ao artigo você não fica feliz? A resposta obviamente é sim, então por que não retribuir já que você só terá a ganhar com isso?

Quando outro blogueiro comenta em seu website ele geralmente recebe visitas em troca. Quando você comenta em outros blogs a situação é a mesma, sendo assim, além de contribuir para uma melhora de qualidade no artigo você ainda recebe tráfego qualificado para seu blog.

Comentar em outros blogs é essencial tanto para gerar backlinks quanto para gerar amizades, algo de extrema importância quando almejamos um projeto de sucesso. Mais importante ainda é você escolher os blogs certos para comentar, visto que ao gerar tráfego de um blog sobre toalhas artesanais para seu blog que falar sobre críticas cinematográficas você só estará aumentando sua taxa de rejeição.

Procure comentar apenas em blogs do mesmo nicho de mercado que o seu. Comentários se fazem um ótimo meio de divulgação quando bem aplicados.

5. TENHA UM NEWSLETTER

É comum os blogueiros trabalharem com o RSS Feed sem a opção de envio por email ativado. Este é um erro que pode te prejudicar muito a curto, médio e longo prazo, visto que muitos blogs fazem o sucesso que fazem através de sua gigantesca lista de subscritores.

O número de pessoas que estão inscritas em sua newsletter equivale ao número potencial mínimo de pessoas que irão ler aquele determinado artigo, sendo assim é sempre bom ter a vista um ícone RSS para que seus leitores possam se inscrever e que você publique artigos regularmente, visto que se ficar muito tempo fora do ar eles cancelarão a subscrição.

COMO ATIVAR A NEWSLETTER NO FEEDBURNER

NÃO DESISTA DE SEU PROJETO, ELE TERÁ SUCESSO EM BREVE

Não desista de seu projeto, pelo menos não tão facilmente quanto milhares de outros blogueiros fazem dia após dia. Seja paciente e persistente que seus primeiros centavos vão chegar e, consequentemente sua motivação virá com tudo. Assim esse aglomerado de benefícios vai se transformando em uma gigantesca bola de neve que só tende a destruir os

obstáculos por você.

Já que a divulgação é algo que devemos fazer todos os dias, vou aproveitar para divulgar a pagina de fãs e o Twitter do Blog na Carteira para que você possa, gentilmente, curtir e nos seguir.

Este é um guest post escrito por Arlindo Armando que bloga no Blog na Carteira.

Tags | , , , , , ,

23

nov
2011

Sem Comentários

Em Blog
HTML

Por Allison

Como Criar um PopUp HTML para Captação de Email no Site!

Em 23, nov 2011 | Sem Comentários | Em Blog, HTML | Por Allison

Hoje vou mostrar como criar um PopUp HTML para Captação de Email através do FeedBurner, como o utilizado aqui no CriarSites.com. Um popup simples e eficaz para aumentar consideravelmente sua lista de email.

A ideia é criar algo simples e chamativo para atrair e fisgar a atenção dos seus visitantes.

O único Problema é que muitos métodos para inserir um popup no site são pagos, e isso dificulta muito para quem esta começando um novo site e não dispõe de muitos recursos financeiros para investir.

obs: Gostaria de deixar uma observação que esse código não foi produzido originalmente por mim, e não tive acesso a quem foi o criador, apenas consegui boa parte do código na internet e fiz algumas adaptações como mostro abaixo. Caso alguém conheça o criador, por favor, deixe nos comentário para dar os créditos a quem mereça por esse fabuloso script.

Para iniciar, clique aqui (clique com o botão direito e em “Salvar destino como“) e realize o download do código java script popup html.

Após realizar o download, verá um arquivo em html, basta clicar com o botão direito no arquivo e selecionar as opções “Abrir Com..”, e “Bloco de Notas”.

Repare que esse é o exato modelo usado aqui no CriarSites.com e diante disso, vou deixar algumas mudanças para realizar no código e personalizar de acordo com seu site.

Ao abrir o arquivo com o bloco de notas, não é necessário mexer em nada no inicio do código, basta ir ate o trecho final e localizar os pontos a serem personalizados de acordo com seu site (nos pontos como mostra a figura acima, destacados pelo comentário “ISSO E UM COMENTARIO PERSONALIZE ESSA LINHA ABAIXO com …”).

Também lembre-se de publicar em seu site/blog as imagens “closeicon.gif” e “rss-feed-gif.gif” e anote o endereço de cada um deles. Depois cadastre-os endereços no código do popup.

Nos locais onde se encontra “CriarSites“, você deve alterar com o nome que aparece no endereço de seu blog no FeedBurner.

Realizadas estas estas alterações, basta inserir todo o trecho do código antes da tag </body> no seu site, ou se estiver usando um blog WordPress, basta criar um widget Texto/HTML e inserir o código já personalizado (por completo).

Pronto, seus problemas para captar e-mails e aumentar consideravelmente sua lista de e-mails está resolvido de uma vez por todas.

Se realmente gostou desta dica, além de deixar seu comentário, procure compartilhar esse artigo pelas redes sociais para ajudar mais webmasters de plantão!

Esse código realmente é um “salva vidas”, assim como o CriarSites.com, rs.

Postado por Rogerio Gomes/WRG

Fonte: CriarSite

Tags | , , , , ,

23

nov
2011

Sem Comentários

Em Blog
Código
Java

Por Allison

Criando uma Tag Library para carregar a imagem de um perfil do Gravatar

Em 23, nov 2011 | Sem Comentários | Em Blog, Código, Java | Por Allison

Há alguns dias eu estava querendo um tempo para estudar um pouco a API do Gravatar, que por sinal funciona muito bem aqui no WordPress. Lendo a documentação de uso, percebi que muito fácil de você obter a imagem de um perfil do Gravatar usando um hash do e-mail do usuário com criptografia MD5.

Primeiramente, como sou um usuário fanático do jQuery, tentei resolver a bronca direto por Javascript, mas acabei empacando na geração do hash MD5, não sei porque, mais aqui nenhuma implementação Javascript para MD5 funcionou, assim parti para o plano B, usando a API Java para gerar o hash MD5, perfeito, funcionou corretamente, tá bom, mas agora eu tenho a implementação lá em uma classe Java, como que eu ligo isto com a minha view HTML/JSP ?

Usando o VRaptor 3.4, fiz uma requisição AJAX/JSON e retornava o hash e fazia o carregamento da imagem via jQuery, assim:

01	$(document).ready(function(){
02	   $('#button').bind('click', function(){
03	      var email = $('#email').attr('value');
04
05	      var url = "<c:url value='/gravatar/get-md5/'/>";
06	      $.post(url, {email: email}, function(data){
07	         var url = "http://www.gravatar.com/avatar/" + data.string + "?s=200";
08	         $('#result').html($("<img/>").attr('src', url)).append('<br/><i>' + data.string + "</i>");
09	      });
10	   });
11	});

Na minha aplicação Java eu tinha duas classes, uma que implementava o hash MD5 e a outra que era o meu controller da requisição AJAX/JSON:

01	package com.wp.carlos4web.cpropriedades.md5;
02
03	import java.io.UnsupportedEncodingException;
04	import java.security.MessageDigest;
05	import java.security.NoSuchAlgorithmException;
06
07	public class MD5 {
08	    public static String hex(byte[] array) {
09	        StringBuffer sb = new StringBuffer();
10	        for (int i = 0; i < array.length; ++i) {
11	            sb.append(Integer.toHexString((array[i] & 0xFF) | 0x100).substring(
12	                    1, 3));
13	        }
14	        return sb.toString();
15	    }
16
17	    public static String md5Hex(String message) {
18	        try {
19	            MessageDigest md = MessageDigest.getInstance("MD5");
20	            return hex(md.digest(message.getBytes("CP1252")));
21	        } catch (NoSuchAlgorithmException e) {
22	        } catch (UnsupportedEncodingException e) {
23	        }
24	        return null;
25	    }
26	}
27	// Controller.
28	package com.wp.carlos4web.cpropriedades.controllers;
29
30	import com.wp.carlos4web.cpropriedades.md5.MD5;
31
32	import br.com.caelum.vraptor.Get;
33	import br.com.caelum.vraptor.Post;
34	import br.com.caelum.vraptor.Resource;
35	import br.com.caelum.vraptor.Result;
36	import br.com.caelum.vraptor.view.Results;
37
38	@Resource
39	public class HomeController
40	{
41	    private Result result;
42
43	    public HomeController(Result result) {
44	        super();
45	        this.result = result;
46	    }
47
48	    @Get("/")
49	    public void index ()
50	    {
51
52	    }
53
54	    @Post("/gravatar/get-md5/")
55	    public void generateMD5Hash(String email)
56	    {
57	        String hash = MD5.md5Hex(email);
58
59	        this.result.use(Results.json()).from(hash).serialize();
60	    }
61	}

O código é bem simples, e funcionou, atendendo o que eu precisava, só que daí pensei em ‘componentizar’ essa solução, daí acabei refletindo e vi que seria inviável inicialmente, logo então pensei em uma solução alternativa à uma interação/codificação Javascript/AJAX, logo a única saída seria escrever uma tag própria para isso, pronto, encapsula a lógica em uma classe Java e vincula a mesma em uma tag acessível pelo HTML/JSP.

As tag libraries, ou tag support do Java são bem simples de serem utilizadas e implementadas, não sou um grande conhecedor, mas com algumas pesquisas na documentação consegui desenvolver a solução sem muitos problemas. Bom primeiramente precisamos criar a nossa classe que contém a implementação necessária, mais qual implementação ?

A implementação/ligação com a classe que gera o hash e que cria o elemento IMG para ser inserido no corpo da página HTML/JSP, o código da classe está na listagem abaixo e é bem simples, repare que os atributos ‘email’ e ‘imageSize’ são os parâmetros da nossa tag na página HTML/JSP.

01	package com.wp.carlos4web.gravatar;
02
03	import java.io.IOException;
04
05	import javax.servlet.jsp.JspException;
06	import javax.servlet.jsp.tagext.TagSupport;
07
08	import com.wp.carlos4web.cpropriedades.md5.MD5;
09
10	public class GravatarTag extends TagSupport
11	{
12	    private static final long serialVersionUID = 1066237315711135837L;
13
14	    protected String    email;
15
16	    protected int       imageSize = 200;
17
18	    @Override
19	    public int doEndTag() throws JspException
20	    {
21	        if(email != null && !email.isEmpty())
22	        {
23	            try
24	            {
25	                // Gera o hash MD5.
26	                String hash = MD5.md5Hex(email);
27
28	                // Monta a URL para a imagem remota.
29	                String url = "http://www.gravatar.com/avatar/" + hash + "?s=" + imageSize;
30
31	                // Monta a tag HTML IMG com a URL remota.
32	                String img = "<img src='" + url + "'/>";
33
34	                // Insere no corpo da página onde a tag está sendo chamada.
35	                this.pageContext.getOut().write(img);
36	            } catch (IOException e) {
37	                e.printStackTrace();
38	            }
39	        }
40	        return super.doEndTag();
41	    }
42
43	    public String getEmail() {
44	        return email;
45	    }
46
47	    public void setEmail(String email) {
48	        this.email = email;
49	    }
50	    public void setImageSize(int imageSize) {
51	        this.imageSize = imageSize;
52	    }
53
54	    public int getImageSize() {
55	        return imageSize;
56	    }
57	}

Como vocês viram o código é bem simples. Não existe regra sobre qual pacote deve ficar a sua classe, somente no arquivo TLD de descrição você deverá informar o caminho dela, exemplo: ‘br.pacote.pacote.SuaClasse’. Não esqueça:

  • Criar os métodos setters para os seus atributos, caso falte algum será gerada uma exception na sua aplicação.

Caso contrário não irá funcionar.

O próximo passo e a estruturação da nossa tag, para isso eu segui o padrão do desenvolvimento de tags, no meu diretório WEB-INF, eu criei um diretório tags e dentro dele um diretório com um nome significativo, neste caso ‘gravatar’. Dentro dele, seguindo a convenção, criei um arquivo .TLD com o nome da minha classe, logo ‘gravatar.tld’. Abaixo segue a codificação do mesmo, que também é bem simples e segue um padrão.

01	<?xml version="1.0" encoding="ISO-8859-1" ?>
02	<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
03
04	<taglib>
05	    <tlibversion>1.0</tlibversion>
06	    <jspversion>1.1</jspversion>
07	    <shortname>gravatar</shortname>
08	    <uri>http://carlos4web.wordpress.com/</uri>
09	    <info>Insere uma tag IMG com o gravatar de um usuário a partir do seu E-mail.</info>
10
11	    <tag>
12	        <name>gravatar</name>
13	        <tagclass>com.wp.carlos4web.gravatar.GravatarTag</tagclass>
14	        <bodycontent>JSP</bodycontent>
15	        <info>Say Hi</info>
16
17	        <attribute>
18	            <name>email</name>
19	            <required>true</required>
20	            <rtexprvalue>true</rtexprvalue>
21	        </attribute>
22	        <attribute>
23	            <name>imageSize</name>
24	            <required>false</required>
25	            <rtexprvalue>true</rtexprvalue>
26	        </attribute>
27	    </tag>
28	</taglib>

O próximo passo é usar a nossa tag, esta é a parte mais fácil da brincadeira, primeiramente, declare o import da nossa tag library:

1	<%@ taglib prefix="carlos" uri="/WEB-INF/tags/gravatar/gravatar.tld" %>

Agora é só chamar quando você precisar:

01	<table>
02	    <tr>
03	        <td valign="top">
04	            <carlos:gravatar email="carlosjrcabello@gmail.com" imageSize="30"/>
05	        </td>
06	        <td valign="top">
07	            <carlos:gravatar email="carlosjrcabello@gmail.com" imageSize="50"/>
08	        </td>
09	        <td valign="top">
10	            <carlos:gravatar email="carlosjrcabello@gmail.com" imageSize="100"/>
11	        </td>
12	        <td valign="top">
13	            <carlos:gravatar email="carlosjrcabello@gmail.com" imageSize="300"/>
14	        </td>
15	    </tr>
16	</table>

Lembrando pessoal, que segundo a API do Gravatar, quando a imagem do perfil não é encontrada, é retornado uma imagem padrão com a logo do gravatar. Caso você queira, existem mais parâmetros na API para customizar isso.

Conclusão

Bom pessoal, essa é uma solução do ‘mundo real‘ no desenvolvimento de aplicações WEB, porque? Com esse código, você investe um tempo X para fazê-lo, depois você ganha muito tempo somente reusando ele, lembrem-se dos princípios de agilidade e reusabilidade de código.

Este é um exemplo didático, está bem simples, quem quiser enriquecer esta solução com os outros recursos da API do Gravatar fique a vontade, no final será uma solução muito bacana e utilizável.

Download

Para quem quiser baixar o exemplo da tag, estou deixando disponível lá no Github o código junto da estrutura do projeto, segue o endereço abaixo:

https://github.com/carlosjrcabello/gravatar-tag-support

Referências


http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/JSPTags6.html – contém exemplos bem claros de como utilizar.


http://stackoverflow.com/questions/224748/jsp-custom-tag-library-unable-to-find-setter-method-for-the-attribute – contém a solução para um problema que uma hora ou outra você irá passar, que é a ordem da declaração dos elementos no arquivo TLD.


http://java.sun.com/developer/technicalArticles/xml/WebAppDev3/ – Mais exemplos de como trabalhar com o arquivo TLD.

http://en.gravatar.com/site/implement/ – informações sobre a API e implementações.

Por enquanto é só pessoal, um abraço e até a próxima.

Dúvidas e comentário usem o espaço de comentários abaixo.

Fonte: Carlos4web

Tags | , , , , , , , , ,