Mudanças entre as edições de "Assinatura com mapa clicável em HTML"

De Task Wiki
Ir para: navegação, pesquisa
 
(7 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
[[categoria:webmail]]
+
[[categoria:Gerencia_mail]]
 
<table cellspacing="0">
 
<table cellspacing="0">
 
<tr>
 
<tr>
Linha 8: Linha 8:
 
<td style="vertical-align:top; border-top: 1px solid #9C9C9C; border-right: 1px solid #9C9C9C; border-left: 1px solid #9C9C9C; border-bottom: 1px solid #9C9C9C; padding: 1em;">
 
<td style="vertical-align:top; border-top: 1px solid #9C9C9C; border-right: 1px solid #9C9C9C; border-left: 1px solid #9C9C9C; border-bottom: 1px solid #9C9C9C; padding: 1em;">
  
* * * Para este tutorial, será necessário hospedar a imagem de sua assinatura em seu FTP. Para realizar este procedimento, siga o passo a passo no link a seguir. https://wiki.task.com.br/index.php/Gerenciador_de_FTP_-_Filezilla
+
Todo mundo já viu uma assinatura de e-mail bonita, com a logo da empresa, ou uma arte que pareça um cartão de visitas. Mas e se você quer avançar um pouco mais e tornar esse "cartão de visitas" interativo, com cada pedacinho ou imagem ou texto apontando para um lugar, como seu blog, o site da empresa ou uma rede social onde tem presença?
 +
 
 +
Para fazer isso, você precisará usar a linguagem HTML (https://pt.wikipedia.org/wiki/HTML) para fazer um código personalizado na assinatura do seu e-mail. Nem todas as plataformas de e-mail permitem isso (Gmail não permite, por exemplo), mas o Webmail da Task ([http://webmail.task.com.br]), sim, permite, e vamos te mostrar agora que não é nada complicado. As orientações valem também para softwares de e-mail como o Mozilla Thunderbird ([https://www.thunderbird.net/pt-BR/]).
 +
 
 +
  * * * Para este tutorial, será necessário hospedar a imagem de sua assinatura em seu FTP. Para realizar este procedimento, siga o passo a passo no link a seguir. https://wiki.task.com.br/index.php/Gerenciador_de_FTP_-_Filezilla
  
 
Para inserir uma assinatura com links clicáveis na imagem, basta seguir o passo a passo logo abaixo:
 
Para inserir uma assinatura com links clicáveis na imagem, basta seguir o passo a passo logo abaixo:
Linha 21: Linha 25:
  
  
[[Arquivo:elipse_3.png]] Informe o link da da imagem de sua assinatura. Ex: http://seudominio.com.br/assinatura.jpg e clique em 'Continue'; <br>
+
[[Arquivo:elipse_3.png]] Informe o link da imagem de sua assinatura. Ex: http://seudominio.com.br/assinatura.jpg e clique em 'Continue'; <br>
  
  
Linha 36: Linha 40:
  
  
[[Arquivo:elipse_5.png]] Clique na imagem para selecionar o ponto inical, depois clique novamente para selecionar o ponto final. (Você pode aumentar ou diminuir o tamanho mantendo o botão esquerdo do mouse pressionado e arrastando.);<br>
+
[[Arquivo:elipse_5.png]] Clique na imagem para selecionar o ponto inicial, depois clique novamente para selecionar o ponto final. (Você pode aumentar ou diminuir o tamanho mantendo o botão esquerdo do mouse pressionado e arrastando.);<br>
  
  
Linha 72: Linha 76:
  
  
[[Arquivo:elipse_11.png]]  Clique em 'Show me the code!';<br>
+
[[Arquivo:elipse_11.png]]  Copie o código gerado;<br>
  
  
Linha 81: Linha 85:
  
  
* * * Atenção: Por se tratar de uma ferramenta de terceiros, a Task não se responsabiliza pelo correto funcionamento da mesma.
+
  * * * Atenção: Por se tratar de uma ferramenta de terceiros, a Task não se responsabiliza pelo correto funcionamento da mesma.

Edição atual tal como às 16h06min de 4 de maio de 2018

Todo mundo já viu uma assinatura de e-mail bonita, com a logo da empresa, ou uma arte que pareça um cartão de visitas. Mas e se você quer avançar um pouco mais e tornar esse "cartão de visitas" interativo, com cada pedacinho ou imagem ou texto apontando para um lugar, como seu blog, o site da empresa ou uma rede social onde tem presença?

Para fazer isso, você precisará usar a linguagem HTML (https://pt.wikipedia.org/wiki/HTML) para fazer um código personalizado na assinatura do seu e-mail. Nem todas as plataformas de e-mail permitem isso (Gmail não permite, por exemplo), mas o Webmail da Task ([1]), sim, permite, e vamos te mostrar agora que não é nada complicado. As orientações valem também para softwares de e-mail como o Mozilla Thunderbird ([2]).

 * * * Para este tutorial, será necessário hospedar a imagem de sua assinatura em seu FTP. Para realizar este procedimento, siga o passo a passo no link a seguir. https://wiki.task.com.br/index.php/Gerenciador_de_FTP_-_Filezilla

Para inserir uma assinatura com links clicáveis na imagem, basta seguir o passo a passo logo abaixo:


Elipse 1.png Acesse https://www.image-map.net/.

Elipse 2.png Clique em 'Load image from Website';


Mapawiki2.png


Elipse 3.png Informe o link da imagem de sua assinatura. Ex: http://seudominio.com.br/assinatura.jpg e clique em 'Continue';


Mapawiki3.png


Elipse 4.png No campo 'Shape' você poderá selecionar as formas geométricas do mapa.

     Rect - Retângulo
     Poly - Poligono
     Circle - Círculo 


Mapawiki4.png


Elipse 5.png Clique na imagem para selecionar o ponto inicial, depois clique novamente para selecionar o ponto final. (Você pode aumentar ou diminuir o tamanho mantendo o botão esquerdo do mouse pressionado e arrastando.);


Mapawiki41.png


Elipse 6.png Você poderá adicionar outras áreas clicáveis na imagem clicando em 'Add new area';


Mapawiki5.png


Elipse 7.png No campo 'Link', informe o endereço para onde será redirecionado ao clicar;


Mapawiki6.png


Elipse 8.png No campo 'Title', crie um título para o mapa clicável;


Mapawiki7.png


Elipse 9.png No campo 'Target', selecione a opção '_blank';


Mapawiki8.png


Elipse 10.png Clique em 'Show me the code!';


Mapawiki9.png


Elipse 11.png Copie o código gerado;


Mapawiki10.png


Elipse 12.png Cole no campo "Assinatura" do Webmail (link do wiki: https://wiki.task.com.br/index.php/Inserir_Assinatura_pelo_Webmail) ou em seu programa de e-mails (deverá suportar assinatura no formato HTML)


 * * * Atenção: Por se tratar de uma ferramenta de terceiros, a Task não se responsabiliza pelo correto funcionamento da mesma.