15/05/2016

FACEBOOK | Botão curtir com comentário





TEMA: Redes Sociais
ARTIGO: Revisado e Melhorado
VERSÃO:  WA  4  |  WA RC



Coloque o botão curtir do Facebook no seu site de uma maneira bem simples. Em testes quando coloquei a url de uma Fanpage, automaticamente eu curti Fanpage. Porém os comentários demoraram um pouco a aparecer no meu perfil. Essa demora aconteceu também quando coloquei a url do site. Mas apareceu. Apareceu o comentário e a imagem que tinha configurado no Open Graph Facebook para o site.


Legal neste código é que ao visitante clicar em Curtir, ele ainda comenta e seu comentário sai na sua linha de tempo.

Veja o print do meu teste:






EDITE O CÓDIGO: (substitua o trecho "http://www.webacappellashow.com.br/"  pela URL de seu blog, site ou fanpage.)

 <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.webacappellashow.com.br/?fref=ts&layout=standard&show_faces=false&width=380&action=like&colorscheme=light&height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:38px;" allowtransparency="true"></iframe>



APLICANDO NO WEBACAPPELLA 4

No WebAcappella, opção INSERIR>>CÓDIGO HTML cole o código alterado.





Como o não é mostrado o resultado Ativando a pré-visualização sugiro dar um título "Botao curtir" e clicando na régua configure as dimensões para largura 250 px e altura 38 px. Desta forma você terá a referencia da área de ocupação.



APLICANDO NO WEBACAPPELLA RC

Insira um box, ou subbox onde vai entrar o código html. No RC quanto mais subbox criar melhor será seu controle sobre a distribuição dos elementos. 


Clique na opção HTML no menu e arraste até o drag/drop onde será inserido o código do botão



Dê duplo clique na área de html e insira o código modificado  na tela que abrir



Inclua <center> no início do código. Isto para que ele fique centralizado no box. 


Clique em Ok para salvar

Desta forma você trabalha com a largura com os recursos do Wa Rc e ele estará centralizado no box. Sentirá a diferença quando visualizar na menor resolução.



Prontinho. Espero ter sido útil.

Abraços.










24/01/2016

Fala galera do bem... como estão?

Trago novidades pra todos.. O blog vai mudar. Está com um novo visual, todas as postagens serão revisadas e novas postagens irão surgir.

Os assuntos serão organizados por temas. E as postagens serão sinalizadas com a compatibilidade do Webacappella a qual foi testada.

Por este motivo todas as postagens antes existentes saíram do ar.

Aos poucos vou revisando, melhorando e liberando novamente.


Mas antes fiz um blog backup das postagens antigas, onde todos podem continuar consultando. Só não estarei respondendo dúvidas das mesmas.


O link do blog com as postagens antigas é http://wasblog2.blogspot.com.br


Agradeço a compreensão de todos e tenham um feliz 2016.


19/11/2015

Apagando os dados exemplo da instalação Prestashop




TEMA: Prestashop integrado com Webacappella
ARTIGO: Revisado e Melhorado
VERSÃO: PRESTASHOP  1.5.x |  WEBACAPPELLA  4

Fala turma do bem. baum demais da conta?


Hoje o artigo é curto. É para apagar aqueles dados de exemplo que acompanham a instalação da loja PrestaShop.

Então acesse o painel de sua loja e mãos a obra:

Poderia apagar tudo diretamente no banco, mas porquê não fazer?

1) Quanto mais se familiarizar com o painel administrativo melhor, pois terá que dar suporte ao seu cliente.
2) Não correr risco de apagar tabelas que não podem por engano


Confesso que este artigo não é lá grande coisa, mas pelo menos serve de check list.


Deletando produtos:

Acesse a opção CATÁLOGO >> PRODUTOS, selecione a caixa de verificação conforme imagem abaixo e clique em Apagar Selecionados



Deletando as categorias

Acesse a opção CATÁLOGO >> CATEGORIAS.  selecione a caixa de verificação conforme imagem abaixo e clique em Apagar Selecionados


Deletando atributos e valores

Acesse a opção  CATÁLOGO >> ATRIBUTOS E VALORES, selecione a caixa de verificação conforme imagem abaixo e clique em Apagar Selecionados



Deletando as Características

Acesse a opção CATÁLOGO >> CARATERÍSTICAS , selecione a caixa de verificação conforme imagem abaixo e clique em Apagar Selecionados



Deletando Fabricantes

Acesse a opção CATALOGO >> FABRICANTES,  , selecione as caixas de verificação conforme imagem abaixo e clique em Apagar Selecionados tanto para Fabricantes quanto para Endereços.




Deletando Fornecedores

Acesse a opção CATALOGO>>FORNECEDORES, selecione as caixas de verificação conforme imagem abaixo e clique em Apagar Selecionados tanto para Fabricantes quanto para Endereços.



Deletando Compras

Acesse a opção PEDIDOS>>COMPRAS, Clique na lixeira no canto inferior conforme imagem abaixo:


Deletando Clientes

Acesse a opção CLIENTES>>CLIENTES, selecione as caixas de verificação conforme imagem abaixo e clique em Excluir Selecionados




Deletando Endereços

Acesse a opção CLIENTES>> ENDEREÇOS,  selecione as caixas de verificação conforme imagem abaixo e clique em Apagar Selecionados.


Deletando Carrinho de compras

Acesse a opção CLIENTES>>CARRINHO DE COMPRAS, Clique na lixeira no canto inferior conforme imagem abaixo:


Deletando Transportadoras (deleto pois eu configuro a oficial depois)

Acesse a opção ENTREGA >> TRANSPORTADORAS,  selecione as caixas de verificação conforme imagem abaixo e clique em Apagar Selecionados.




Agora que está tudo limpinho, nos próximos artigos vamos começar a configurar o Prestashop para nosso cliente trabalhar..

Este  artigo pode parecer sem muita utilidade. Mas achei importante postar nesta série PrestaShop integrado ao WebAcappella.  Como disse inicialmente.. Serve até como um check list.

Abraço a todos.

08/11/2015

Utilizando o g-mail público com sua conta profissional de email@dominio





Este artigo não tem nenhuma relevância com o Webacappella, porém achei bacana postar no blog devido que o WebacappellaShow não só traz artigos diretamente ao programa, mas sim ao profissional ou pessoa que o utiliza.


Este artigo será útil para aquele profissional que passa por algumas destas situações.:


1) Para aquele que tem um plano de hospedagem limitada ou uma revenda limitada e que utiliza o e-mail profissional, ou seja email@seudominio .

2) Aquele profissional que tem um cliente que não quer dar prioridade ao e-mail profissional nem que você o pague pra isso.. rs To dizendo aqueles teimosos mesmo que você pergunta. Fulano, você está acessando seu e-mail profissional? E a resposta quase sempre é : "- Eu acostumei com o gmail nem lembro do outro.. Posso ficar só com o Gmail não?"


O que acontece que muita gente é acostumada em utilizar o serviço de e-mail do g-mail. Sem dúvidas é um dos melhores serviços de e-mail das atualidades. Até mesmo em seu plano comum e gratuito.

Mas a questão é disponibilizar um e-mail do g-mail no website diminui a credibilidade do seu cliente (dono do site) perante ao cliente dele. E diminui a credibilidade de quem desenvolveu o site perante quem o está visitando.

Então existem duas complicações maiores nesta situação.

1) Concorrer com a qualidade do gmail e espaço fornecido por ele
2) Mudar o hábito seu e ou do cliente em usar preferencialmente o e-mail profissional


Mas já ouviram aquele ditado: Se não pode contra eles junte-se a eles? (axo que é isso mesmo, rs) .. Pois então.. é mais ou menos isso que vou explicar neste artigo.


É isso mesmo, vamos incentivar a usar o gmail. Mas o e-mail que será divulgado será o e-mail profissional.

Como assim? Não entendeu? Vamos orientar nosso cliente a usar somente o g-mail. Isto sua conta g-mail pessoal como sempre usou.


Para os que não sabem o Gmail tem uma configuração em que você pode sincronizar com uma ou mais contas de outros domínios.


Funciona mais ou menos assim:

Eu tenho a conta do gmail webacappellashow@gmail.com e a digamos profissional contato@webacappellashow.com.br

Então como vai funcionar:  Após fazer as devidas configurações na minha conta webacappellashow@gmail.com, vou passar a usá-la para receber quanto enviar e-mail da conta contato@webacappellashow.com.br.


Baum num é?

Então vou explicar tudo em um passo a passo:

1º ) Logue na sua conta g-mail e clique na catraca no canto superior direito:




2º ) Clique em configurações no menu suspenso que abrir


3º) Na tela que abrir terá uma série de opções em azul abaixo da palavra Configurações.
Procure a Contas e Importação. Clique nela.





4º) A primeira coisa vamos configurar para os e-mails que enviarmos pela conta g-mail saiam com a conta profissional, no caso do exemplo a contato@webacappellashow.com.br.

Então procure o trecho "Enviar e-mail como" e clique em "Adicionar outro endereço de e-mail que você possui"



Na tela que se abrir você vai configurar da seguinte maneira:

Nome: É livre para você digitar da forma que quer que seu nome seja exibido quando receberem um e-mail seu.

Endereço de e-mail: Preencha com o e-mail profissional que vai utilizar . No caso deste exemplo será contato@webacappellashow.com.br


Deixe marcado "Tratar como um alias" e "clique em Próxima Etapa"

Na tela que se abrir será necessário configurar o seu servidor de saída referente a conta profissional. No meu caso usar as configurações de saída do e-mail contato@webacappellashow.com.br

Essas configurações variam de acordo com a configuração de sua hospedagem.



Confirmado as configurações o gmail enviará um e-mail para sua conta profissional com um código de confirmação. Então entre na sua conta profissional e pegue este código:




Volte nas configurações da conta no g-mail e informe o código no campo "Digite e confirme o código de confirmação e clique em "Confirmar"



4º) Para que o g-mail assuma mesmo a conta profissional como a principal, faremos mais alguns ajustes. Após ter feito as configurações anteriores você será redirecionado para a dela de Contas e importação.

Vá de novo a área "Enviar e-mail como":


Então onde defina que o gmail utilize a conta profissional como padrão e certifique que "Sempre responder como endereço padrão" esteja marcado. No caso deste exemplo ficará assim:


5º) Agora vamos configurar para recebermos os e-mails enviados para a conta profissional no Gmail. Então todos os e-mails que foram destinados no contato@webacappellashow.com.br vou receber no webacappellashow.@gmail.com.


Procure então na tela de "Contas e Importação" por "Receber e-mails de outras contas"




Clique em Adicionar uma conta de e-mail POP3 que você possui.


No campo endereço de e-mail informe seu e-mail profissional. No caso do exemplo contato@webacappellashow.com.br.



Clique em "Próxima Etapa"


Agora será necessário você entrar com as credenciais da conta profissional e as configurações referente as portas de entrada .

Estas configurações podem variar de acordo com sua hospedagem.


Caso você queira manter uma cópia das mensagem recebidas no seu provedor da conta profissional marque "Deixar uma cópia de mensagem recuperada no servidor" . Eu não aconselho, para não gastar espaço da hospedagem do domínio profissional.



6º) Vamos testar?

TESTE DE ENVIO:

Vou enviar um e-mail usando o g-mail já configurado, para outra conta pessoal que tenho.

Repare na imagem que ao eu escrever o e-mail já mostra que está saindo da conta profissional contato@webacappellashow.com.br.


Agora vou abrir a outra conta e verificar como chegou o e-mail

Vejam, recebi o e-mail com o remetente contato@webacappellashow.com.br e que foi enviado pelo gmail.

Tudo certinho até agora.


Agora vamos ver como será se eu responder este e-mail.

Veja bem, ao clicar em responder já apareceu que eu estaria respondendo pra o e-mail profissional contato@webacapellashow.com.br


Checando a resposta no e-mail do Webacappellashow

Lá está a resposta recebida tudo perfeitinho.


TESTE DE RECEBIMENTO

Agora utilizando minha conta pessoal, irei enviar um e-mail para contato@webacappellashow.com.br e terei que recebê-lo pelo gmail.

Este será o e-mail que estou enviando de teste:



Agora vou no gmail do WebacappellaShow conferir.

Certíssiomo, e-mail recebido


Vou responder só pra ver com que e-mail sairá a resposta:



Sucesso total: Tudo perfeito


Pois é isso aí gente, peço desculpa por postar algo que não tem nada haver com o Webacappella. Mas é uma solução que muita gente desconhece..


Agora se seu cliente quer usar a conta g-mail.. pode incentivar a vontade..Divulgue o e-mail profissional e use o gmail sem problemas.

Abraço a todos.


21/10/2015

Menu deslizante com Caixa jQuery e Css3


TEMA: Menus
ARTIGO: Revisado
VERSÃO:   WEBACAPPELLA  4


Fala turma do bem,, que calor que está aqui . Nem imaginem..

Hoje então vou disponibilizar um Menu bem bacana, espero que gostem.

Este menu fica bem  legal se você centralizar verticalmente na primeira página, e dá um efeito bacana se o fundo do site for um slideshow.

Vamos lá.


Você necessitará editar alguns arquivos. Para isso sugiro o Notepad++, baixe-o gratuitamente clicando aqui.

Clique aqui e baixe os arquivos necessários.

Descompacte a o arquivo baixado em um local no seu equipamento.



CONFIGURANDO O MENU

Copie o código abaixo e cole em um documento em branco no notepad++

Passo 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://www.webacappellashow.com.br/templates/tatuador/css/style.css" type="text/css" media="screen"/>

</head>

<body>
<div class="content">

<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Sobre</span>
<span class="sdt_descr">Nossa história</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/2.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Catálogo</span>
<span class="sdt_descr">Tatuagens | Body Piercing</span>
</span>
</a>
<div class="sdt_box">
<a href="URL.html">Tatuagens Masculinas</a>
<a href="URL.html">Tatuagens Femininas</a>
<a href="URL.html">Body Piercing</a>
</div>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/3.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portifólio</span>
<span class="sdt_descr">Instagram</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/4.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Estúdio</span>
<span class="sdt_descr">Nosso local</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/5.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Artigos</span>
<span class="sdt_descr">Dicas | Curiosidades | Notícias</span>
</span>
</a>
</li>
<li>
<a href="URL.html">
<img src="http://www.webacappellashow.com.br/templates/tatuador/upload/arquivos/6.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Contato</span>
<span class="sdt_descr">Fale conosco</span>
</span>
</a>
<div class="sdt_box">
<a href="URL.html">Contato</a>
<a href="URL.html">Fanpage</a>
<a href="URL.html">Instagram</a>
</div>
</li>
</ul>
</div>


<!-- The JavaScript -->
<script type="text/javascript" src="http://www.webacappellashow.com.br/templates/tatuador/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.webacappellashow.com.br/templates/tatuador/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');

$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
</body>

</html>


Passo 2


Substitua os trechos em vermelho pela url do seu domínio.

Exemplo:

Supomos que seu domíno  seja  www.meudominio.com.br

Então no trecho que esteja assim:

<link rel="stylesheet" href="http://www.webacappellashow.com.br/templates/tatuador/css/style.css"

vai ficar assim:

<link rel="stylesheet" href="http://www.meudominio.com.br/css/style.css"


Passo 3

Substitua os trechos em azul pelos seus títulos


Passo 4

Substitua as imagens na pasta upload/arquivos pelas suas imagens.

Sendo que a imagem 1.jpg é para a primeira opção, a 2 para segunda e assim por diante.

Passo 5

Substitua os trechos em verde pela url referente a cada opção


Passo 6

Agora copie todo o código já alterado no Notepad++ E N o Webacappella, na página que vai inserir o menu (pode ser numa matriz) , utilize da opção INSERIR>>CÓDIGO ,

Cole o código já alterado

Posicione a área do código onde vai querer o menu.


PERSONALIZANDO O MENU

Irei passar as personalizações básicas, nada impede que você altere algo a mais se tiver experiência

Edite o arquivo style.css com o notepad++  que se localiza dentro da pasta CSS

Alterar a cor do título principal:
Linha 72: altere o valor da cor

Alterar a cor do subtítulo
Linha 78  : altere o valor da cor

Alterar a cor das sub-opções em estado normal
Linha 100: altere o valor da cor

Alterar a cor das sub-opções quando o mouse passa por cima
Linha 106: Altere o valor da cor


Salve o arquivo


HOSPEDANDO OS ARQUIVOS

Finalizando copie as pastas a seguir para o diretorio public_html de sua hospedagem


  • CSS
  • IMAGES
  • JS
  • UPLOAD


Agora só publicar o site e prontinho. Espero que gostem!!





10/10/2015

Google penaliza sites responsivos





POSTAGEM REVISADA E ATUALIZADA EM : 30/07/2016

Fala galera do bem. Abraço a todos.


O título deste artigo deve ter despertado algo não é mesmo? É que da maneira que colocamos uma frase muitas vezes o sentido muda completamente.

Eu digo sempre que muitas vezes as ordens dos fatores alteram sim o resultado (rs) . Vou dar um exemplo pra vocês:

Frase 1

- Joãozinho é muito competente, porém ele chega sempre atrasado.


Frase 2

- Joãozinho chega sempre atrasado, mas ele é muito competente.


Na primeira eu atrapalho a situação do Joãozinho enquanto na segunda eu o elevo.. Mas na verdade as duas frases falam a mesma coisa.

heheh.. Mas vamos para o nosso artigo, foi mais pra descontrair um pouquinho..


Quando digo que o Google penaliza os sites responsivos não quero dizer todos. Só quero frisar que o fato do site ser responsivo não significa que não será penalizado pelo Google.

Estou frisando isso pois falam-se muito pela internet que um site responsivo já é um site pronto para dispositivos móveis. Mas não é bem assim.


Estou postando alguns e revisando outros para voltar ao ar de  uma série de artigos com o tema "Mobile ou Responsivo", para ver todos os artigos clique aqui.


O que estou tentando mostrar é que o site criado pelo WebAcappella Responsive, deve-se também de se tomar cuidado nas exigências do Google. Pois provavelmente o site vai abrir no celular com sua responsabilidade, porém pode sim, ser penalizado pelo Google.


Vou mostrar aqui, até mesmo sem minha vontade uma situação em que um sites responsivo não passou no teste do Google.

Digo sem minha vontade, pois muitos vão achar que estou "queimando" a imagem desse sites (até adorei o site). Nnão é minha intenção. Apenas para mostrar que é verídico quando digo que por um site ser responsivo não significa que não será penalizado pelo Google.




O site www.benestare.com, é um site responsivo. observe as imagens: 

*E no meu ponto de vista é um site perfeito.

Print navegador maximizado:




Print navegador em largura mínima





Print feito pelo teste do Google

https://www.google.com/webmasters/tools/mobile-friendly/?hl=pt-BR&url=http%3A%2F%2Fwww.benestare.com%2F





Poderia mostrar vários outros na mesma situação. Mas não acho legal fazer isso. Só mesmo postei um para que vocês vejam e se atentam que: Mesmo o site sendo responsivo deve-se seguir as exigências do Google para não ser penalizado.

Para o tal eu sugiro sempre utilizar das Ferramentas do Google para adequar seu site Mobile ou responsivo. O próprio Google oferece várias soluções para o ajuste.

O que é bom sempre ter em mente é que a intenção do Google é entregar a melhor experiência para seu usuário. E o fato de ser responsivo não significa que ele será aprovado pelo Google para o rankeamento.


Para finalizar, comento também, que não pense que só porque o site passou pelo teste do Google que não precisa se preocupar com mais nada. Durante esta série de artigos vão ser mostrado muitos detalhes. Bom seria se desse para falar de tudo em uma só postagem.

Abraços a todos e ótimo final de semana




Related Posts Plugin for WordPress, Blogger...