19/12/2017

Qual o primeiro passo ao iniciar o projeto no Web Acappella RC?

TEMA: WA RC  |  SEO
ARTIGO: Novo
VERSÃO: WA RC 

É isso aê galera!! Hoje vou fazer uma lembrança muito importante, inclusive para melhorar o SEO  no seu site. 

O procedimento que vou falar aqui é super simples porém  de muita importância, e deve ser o primeiro passo a fazer antes de qualquer coisa ao iniciar um projeto no WebAcappella Responsive.

Todos sabem que as met tags para SEO no site é uma ferramenta importante de comunicação entre o o site e os mecanismos de busca tais como o Google. 

São várias meta tags que podem ser inseridas, porém o Webacappella disponibiliza apenas 3 que podem sem personalizadas através das configurações pelo Webmaster. Algumas ele não disponibiliza  e outras ele já insere automaticamente. Entre elas, não sei se poderia considerar como exatamente uma tag, mas é informar o idioma. 

E é disso que estou falando, o "idioma". Que é o atribudo HTML Lang. Este o Webacappella Responsive insere automaticamente no site. 

Você pode ver após publicar o seu site e na hospedagem editar o arquivo index.html por exemplo. Está logo nas primeiras linhas.

O atributo HTML lang pode ser usado para declarar o idioma de uma página da Web ou uma parte de uma página da Web. Isso é destinado a ajudar motores de busca e navegadores.

Os desenvolvedores do mundo inteiro juntamente com os desenvolvedores de browsers e outros , procuram ter a certeza que os navegadores, robôs de busca, leitores de tela e outros sistemas detectem da forma ideal o idioma correto.

Nós precisamos definir o idioma por alguns motivos:

  • Melhor pronunciação do texto em leitores de tela.
  • Para que os buscadores possam indexar o website no buscador do respectivo idioma. Por exemplo: não tem sentido o Google ranqueear muito bem um site em português no Google americano.
  • Selecionar as fonts corretas para mostrar na tela. Nesse caso para idiomas como Chinês.
  • Para que os browsers escolham o dicionário correto para a correção gramatical nativa em textos e formulários.
  • Renderizar a página rapidamente – o browser carrega o documento mais rápido quando o browser sabe qual o idioma nativo.
Pode-se  definir de várias maneiras o idioma padrão no documento exibido ou em partes do texto para aqueles termos em idiomas diferentes.

  • Podemos definir diretamente via metatag nativa.
  • Pela Metatag podemos definir vários valores no atributo content.
  • Via HTTP Header.
  • Via atributo lang nos elementos do HTML. ( e este que o Webacappella Responsive utiliza e é esse que estamos orientando a mudança) 


Declarações de idioma baseados nestes atributos são importantes para a maioria das aplicações web hoje, que vão desde as corretores ortográficos embutidos diretamente nos browsers até leitores de telas que interpretam as páginas web.

E onde fazer esta configuração no Web Acappella Responsive?

Muito simples, mas é de extrema importância em fazer antes de iniciar o seu projeto, pois caso quiser alterar depois do projeto pronto você tera´que ir depois em cada campo onde foram digitados os textos, inclusive botões , menu e tags e  digitar o texto todo novamente. 

Então vamos o que interessa:

Assim que criar o nome do projeto vá em Website settings na tela inicial:



Caso seu idioma não apareça na lista clique em +.




No caso aqui estou supondo que o site será no idioma Português Brasil, então selecione na lista que aparecer.



Logo em seguida aparecerá uma caixa para selecionar a linguagem que deseja nas mensagens e aplicações. Selecione então a desejada, No caso de nossa explicação será para sites do Brasil, então Português Brasil.





Agora clique em cima do idioma desejado e logo após clicando na seta para cima o posicione na primeira posição




Clique para Salvar e prontinho. Observe agora após publicar que no inicio do código foi definido o idioma escolhido por você.




Outra grande vantagem de fazer essas configurações é que as mensagens do WA como por exemplo de formulários estarão no idioma correto e também por exemplo; se for usar a barra de busca no menu aparecerá Pesquisa em vez de Seach 


Pois é isso aí galera, se a lembrança foi boa.. sinta-se a vontade de compartilhar. 

Um grande abraço.


12/11/2017

Configure o envio de e-mails por SMTP e garanta a entrega


O envio de mensagens padrão do Prestashop é  via PHP mail(), o qual  produz mensagens de baixa qualidade, visto que o email do remetente não é autenticado antes do envio da mensagem.

Esta função do PHP é muito usada por SPAMMERS para envio de propaganda em massa com remetentes falsos. Apesar de você poder usar esta opção no Prestashop, recomendamos o uso do SMTP, pois o envio do email é autenticado, ou seja, sabe-se que o remente é quem diz ser, e os provedores de e-mail têm uma aceitação melhor para mensagens autenticadas.

Mensagens enviadas pela função mail() do PHP normalmente acabam indo para 'lixeira', 'pasta de spam' e muitas vezes nem são entregues.

Para a configuração correta de seu Prestashop  para usar emails autenticados por SMTP, siga os passos abaixo:


1 - Logue no painel de administração do PrestaShop:

2 – Vá a “Parametros Avançados“ → “Email”:



3 – Localiza na página a área "Email"




Assinale as opções 

Definir meus próprios parâmetros de SMTP (Ex: smtp.seudominio.com)

Clique em Salvar

4 – Logo abaixo existe outro quadro para configurações de SMTP




Preencha os campos conforme as configurações fornecidas pela sua hospedagem.

Clique em Salvar


5 – Execute um envio de teste. Caso falhe, verifique as configurações :



Pronto, agora seu Prestashop envia e-mails autenticados.


Inserindo efeito neve no site Webacappella



TEMA: Plugins e códigos
ARTIGO: Novo
VERSÃO: WA RC  

Está chegando o Natal, e muitos gostam de inserir alguns "flus flus" no webiste. 

E um ótimo e sugerido efeito é inserir um efeito de neve caindo sobre o website.


Pois é muito simples, veja só:


A primeira coisa a fazer é baixar um arquivo js neste link: https://webacappellashow.com.br/loja/home/20-efeito-neve-site-webacppella.html

Depois faça upload para um local na hospedagem do site o qual vai inserir o efeito

Agora basta incluir o código abaixo no HEAD do website (caso deseje que apareça no site todo) ou apenas no Head da página que deseja o efeito.

CÓDIGO
<script src="URL DO LOCAL DO ARQUIVO">
</script>

Substitua o texto em vermelho pela url onde foi inserido o código.

Exemplo: 

<script src="http://www.webacappellashow.com.br/neve/CodigoNeve.js">
</script>


Para ver on line clique aqui


Muito simples não é mesmo?


Os créditos desta postagem vai para Maiochristopher

17/09/2017

Google + Botão Share (botão para compartilhamento)


TEMA: Redes Sociais
ARTIGO: Novo
VERSÃO: WA RC  |  WA 4



O Google Plus possui  um botão de partilha que permite aos seus visitantes compartilhar todo o conteúdo que achem interessante do seu Site .
O botão partilhar não é igual ao botão Google +1 (tal como acontece no Facebook, em que o botão Compartilhar é diferente do botão Curtir).
Para inserir o Botão Share do Google no seu site Webacappella é muito simples.

O primeiro passo é configurar  o botão e para isso clique aqui







Agora basta configurar a seu gosto como gostaria que fosse mostrado o botão. A esquerda das opções de configuração é exibido uma prévia do botão.

Sugerimos:

Em Nota deixe marcado como Em Linha
Em Tamanho deixe marcado Médio
Em Idioma selecione o seu.
Em Dinâmico. marque se for utilizar no WA RC e não marque se for usar no WA4
Em Analisar tags marque como Padrão (ao carregar)
Em URL para compartilhar insira a url que deseja que o internauta seja direcionado quando clicar no resultado. Ou seja na imagem que foi compartilhada no Google Plus. Exemplo abaixo:


A imagem que será representada será a que o Google encontrar na página que mais se ao ambiente do post. Ou você pode configurar a imagem escolhida utilizando o mesmo código do Open Graph Facebook. Para saber mais clique aqui




Após configurar copie o código que é disponibilizado no quadro abaixo da prévia


O nosso exemplo ficou como abaixo:






IMPLEMENTANDO NO WEBACAPPELLA 4

Para implantar no Web Acappella 4 nas configurações acima citadas NÃO marque Dinâmico em configurações avançadas conforme dito acima. Deixe sem marcar.



Agora  insira um elemento código HTML no local que deseja que o Google Shared apareça




Cole o código no campo de código no elemento. Dê um nome para o elemento e não marque Ativar pré-visualização, pois a mesma não irá funcionar.



Na mesma janela do eleamento Código html clica na aba da régua. e defina altura e largura de acordo de como configurou na página do Google. No caso da configuração sugerida por nós a largura é 90px e altura 20 px.



Infelizmente na página das configurações não fornecem estes dados, então o truque é publicar o site, printar a tela, igualar os elementos do print aos do projeto e depois encontrar o tamanho a ser usado.



Publique e pronto.

Para ver on line no Webacappella 4 clique aqui.



IMPLEMENTANDO NO WEBACAPPELLA RC (WA5)


Já no Wa Responsive é necessário que nas configurações para gerar o código seja marcado como dinâmico.

No seu projeto insira um box e um subbox, dentro do subbox insira um elemento HTML




Clique duas vezes no elemento para incluir o código, e insira acima de todo código a expressão <center>. Desta forma a visualização nos dispositivos móveis será centralizada

.


Publique o site.

Para ver on line no Webacappella Responsive clique aqui.

.. ABRAÇOS

11/09/2017

Google+ Badge




TEMA: Redes Sociais e SEO 
ARTIGO: Novo
VERSÃO: WA RC  |  WA 4



O Google Badge é seu crachá do Google+ e é uma ótima maneria de aumentar o seu público no Google+ e obter mais recomendações para o seu site na busca do Google.

Você não só terá beneficiando seu site como também seus usuários finais.

O único fator contra é que eles nem sempre combinam bem com o que o site representa.

Em sites de profissionais liberais, freelances e pessoas públicas tais como fotógrafo, cantor,  candidato político e afins é uma ótima opção.

Para implantar o Gaoogle Badge é necessário que tenha uma conta de perfil no Google +.

Então o primeiro passo é fazer login em sua conta.


Após logado vá para o seguinte link:

https://developers.google.com/+/web/badge/



Agora basta configurar a seu gosto como gostaria que fosse mostrado o seu crachá do Google +.

Sugerimos:

Em Recursos deixe marcado como Emblema
Em Layout deixe marcado com Retrato
Em largura deixe no máximo como 320 (garantindo boa apresentação em dispositivo móveis)
Em tema de cores vai depender das cores utilizadas nos seu site e o design (gosto muito do escuro)
Foto da capa deixe assinalado se queira que a imagem da capa do seu google+ apareça em fundo, se não deixe como desativado.
Em frase sugerimos deixar como Desativado.
Em Idioma selecione o seu.

Nas opções avançadas assinale a caixa de verificação em Dinâmico.
Nas opções avançadas em Analisar tags marque como Explícito

Após configurar copie o código que é disponibilizado no quadro abaixo do crachá.


O nosso exemplo ficou como abaixo:







IMPLEMENTANDO NO WEBACAPPELLA 4

Para implantar no Web Acappella 4 nas configurações acima citadas NÃO marque Dinâmico em configurações avançadas conforme dito acima. Deixe sem marcar.

Agora  insira um elemento código HTML no local que deseja que o Google Badge apareça




Cole o código no campo de código no elemento. Dê um nome para o elemento e não marque Ativar pré-visualização, pois a mesma não irá funcionar.



Na mesma janela do eleamento Código html clica na aba da régua. e defina altura e largura com o mesmo valor que definiu nas configurações ao criar o Google Badge.

Publique e pronto.

Para ver on line no Webacappella 4 clique aqui.



IMPLEMENTANDO NO WEBACAPPELLA RC (WA5)


Já no Wa Responsive é necessário que nas configurações para gerar o código seja marcado como dinâmico.

No seu projeto insira um box e um subbox, dentro do subbox insira um elemento HTML




Clique duas vezes no elemento para incluir o código, e insira acima de todo código a expressão <center>. Desta forma a visualização nos dispositivos móveis será centralizada.


Publique o site.

Para ver on line no Webacappella Responsive clique aqui.

É ISSO AÍ GALERA. FICA A DICA.. ABRAÇOS




18/06/2017

FACEBOOK | Page Plugin | Modo fácil e rápido




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


Como muitos já sabem o Facebook disponibiliza vários plugins para implementar em seu site através do Facebook Developers.

https://developers.facebook.com/


Hoje iremos falar do Page Plugin (Plugin de Página) . Algo semelhante a isto:




 Para configurar seu Plugin Page acesse este link: https://developers.facebook.com/docs/plugins/page-plugin , configurar a seu gosto e  gerar o código e aplicar no WebAcappella

Apesar de você pode a configurar a seu gosto, vou falar neste post a maneira mais usada em websites.





 Acima a imagem mostra os campos os quais iremos personalizar . Vamos comentar campo a campo.

URL DA PÁGINA DO FACEBOOK: Neste campo você vai inserir a URL da FANPAGE




GUIA: Neste campo se deixar como timeline, serão mostrados as postagens realizados na linha do tempo da  página. As postagens vão aparecer dentro da altura determinada

Você pode usar para ser mostrado a linha do tempo, eventos e ou mensagens.

Portanto não fica uma visualização muito legal no website. E se você tem intenção de usar este plugin no rodapé, usando o timeline , eventos ou mensagens fica pior ainda.

Aconselho limpar esse campo deixando-o em branco.

Observe na imagem abaixo que removendo a visualização ficou bem mais agradável


LARGURA: Neste campo você informa a largura que deseja para o plugin page. Mínimo de 180 e máximo de 500 px. Eu gosto muito de utilizar 500 px

ALTURA: Neste campo você informa a altura que deseja para o plugin page. Minimo de 70 px
Caso você queira que os rostos de amigos apareçam sem que mostre uma barra de rolagem no plugin, procure utilizar 300 px na altura


USAR CABEÇALHO PEQUENO:  Caso você assinale esta opção será cortado ao meio a altura da imagem da capa da sua fanpage.

OCULTAR FOTO DA CAPA: Se assinalar esta opção não será mostrado a imagem da capa da fanpage; o que não fica muito bonito.

ADAPTAR À LARGURA DO CONTÊINER DO PLUGIN: Deixe esta opção assinalada pois assim será forçado o ajuste na sua área de implementação do código no seu site.

MOSTRAR ROSTOS DOS AMIGOS: Caso queira que seja mostrado o rosto dos amigos deixe esta opção marcada. Esta opção é interessante pois por exemplo: Se você está logado no Facebook e visita um website onde tem o plugin page do Facebook implantado. Ali serão mostrados a quantidade e o rostos de alguns amigos seu que já curtiram a Fanpage. Dependendo dos amigos abre até uma curiosidade de se visitar a fanpage.

Após tudo configurado clique em Obter código


Você pode usar o código fornecido em SDK do JavaScript  ou o código de implantar como iFrame.
Aconselho a primeira opção.

Serão mostrado dois códigos.

O 1º seria para ser inserido no head do website ou da página do seu website a qual seria implantado o plugin




E o 2º seria para ser inserido no local da página do seu website onde é para aparecer o plugin page finalizado.



Portanto você pode simplesmente utilizar os dois código juntos na área a qual deseja que o plugin page apareça. Inserindo o primeiro código e o segundo logo em seguida na área de implementação.

Então irei mostrar desta forma como implementar tanto no Webacappella RC como no Webacappella 4


Então no caso usaremos como exemplo os códigos para implementar o plugin page da Fanpage do Webacappella Show o qual juntando os dois códigos, o código a implementar fiaria assim:



<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.9&appId=1438711606356463";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/webacappellashow/" data-width="500" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/webacappellashow/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/webacappellashow/">WebacappellaShow</a></blockquote></div>


IMPLEMENTANDO NO WA 4


Na página do site em que deseja que o plugin page aparece acione a opção: INSERIR >> CÓDIGO HTML



E cole o código na área conforme imagem


Depois clique na guia da régua e configure a largura e altura com os mesmos valores utilizados na criação do plugin.


Depois só arrastar a área do código para o local desejado na página do seu site

Para ver o exemplo on line clique aqui.

IMPLEMENTANDO NO WA RC


Na página do site em que deseja que o plugin page aparece insira um subbox dentro do box onde será implementado o código




Depois insira o pelo menu a área de html




Porém iremos fazer uma pequena alteração no código para ficar melhor no WARC.


Como pode observar abaixo, inserimos <center> no início para que o plugin page centralize dentro da área onde foi inserido o código.


<center>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.9&appId=1438711606356463";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/webacappellashow/" data-width="500" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/webacappellashow/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/webacappellashow/">WebacappellaShow</a></blockquote></div>




E colamos o código na área de implementação HTML a qual definimos na página do website.





Para ver on line nosso exemplo clique aqui.


Um detalhe importante é que dependendo dos scripts utilizado em seu site possa ser que em vez de usar os dois códigos fornecidos pelo Facebook Developers somente na área html; tenha que separar e utilizar o primeiro no head da página ou até mesmo do website.




29/05/2017

Baixando vídeo diretamente do Facebook




A maioria das áreas administrativas para Webacappella, para utilizar vídeos necessita que o vídeo esteja postado no Youtube.

Então os vídeos que estão no Facebook tem que ser baixados para o computador e postados no Youtube.

Existem vários programas e sites externos que informando a url do vídeo fazem esta tarefa.

Mas para aqueles que não saibam existe uma forma super simples de se baixar os vídeos diretamente do Facebook.

Então vai a dica.

Vamos como exemplo baixar um dos vídeos desta página:


Agora vem o truque super simples.






Na url substitua https://www pela letra "m".

Pois o Facebook não é um site responsivo, mais possui uma versão mobile. E na versão mobile é disponibilizado o botão para download.

No caso da página exemplo, ficou assim:



Agora basta eu clicar no vídeo desejado e lá está a opção de fazer download.




Ou se for um vídeo de uma postagem na linha do tempo,



Faça a mesma alteração informada acima e clique para iniciar o vídeo que a opção de download aparece.



Bem facil.


Related Posts Plugin for WordPress, Blogger...