31/01/2018

01 - Instalando o sistema M7admin



TEMA:  Criando um site com M7admin com WA 4 e WA RC
ARTIGO: Novo
VERSÃO: WA RC | WA 4


Olá pessoal, para quem não conhece o M7Admin é um sistema  de administração de conteúdo para o Webacappella. Ou seja, ele possibilita que se os sites desenvolvidos pelo Webacappella podem ter um painel de controle, onde se podem fazer alterações, inclusões e exclusões de conteúdo on line.

Para quem usa o Webacappella como um fonte de renda, ou seja, desenvolve websites para terceiros; com o M7Admin é possível fornecer ao cliente uma forma de manipular conteúdo no website diretamente pelo browser (navegador de internet).

Por ser um dos sistemas pioneiros nesse segmento já possui  mais de 30 módulos. Alguns já liberados e outros em processo de atualização para sua mais nova versão. Sem contar os novos que vem por aí. Mas isso é surpresa.. hehehe.

O Webacappella Show é um dos testadores oficiais do M7Admin e trabalhamos duro por dias testando o sistema e seus módulo tanto no Webacappella Rc quanto no Webacappella 4 visando ao serem disponibilizados apresente  o mínimo de bugs possíveis.

.Outra grande vantagem do M7Admin é que seu painel é GRÁTIS, de forma você pagar somente pelos módulos que realmente precisa usar. E pode usar o módulo em quantos sites quiser.

Exemplo: Se você precisa somente do módulo notícias em um projeto de website você compra somente o Módulo Notícias. E caso precise em outro novo projeto de website do módulo notícias e o módulo álbum de fotos, você só compra o módulo Álbum de fotos, pois já comprou o Módulo Notícias no projeto anterior e não precisa comprar novamente. Desta forma sai muito mais em conta não é mesmo, e não precisa empatar nenhum dinheiro em algo que não precisa usar de imediato.

Alguns dizem por aí que o Webacappella 4 está defasado, nós discordamos. Apenas a escolha em qual das versões do Webacappella utilizar depende muito do projeto do site a ser desenvolvido. Pois se for feito as versões para mobile com o Webacappella 4 ele passa nos teste do Google perfeitamente sem ser penalizado.  E por isso vamos começar essa série de Postagens com o tema "Criando um site com M7admin com WA 4 e WA RC" o qual estaremos criando um projeto de website tanto para WebAcappella RC quanto no Webacappella 4 utilizando o M7admin. E melhor! Comparando ambos pelos testes do Google.  

Pensando nisso o M7admin é compatível tanto para o Webacappella Rc quanto para o WebAcappella 4.  Assim você pode colocar seus projetos feito em Webacappella 4 com painel administrativo sem ter que refazer todo o site.

Um fato muito importante que o M7admin é o próprio desenvolvedor do sistema, não necessitando de pagar um programador externo para desenvolvimento. Dessa forma a resolução de bugs é muito mais ágil e o valor dos módulos bem mais barato sem dizer que, se sugeridos melhorias e comprovadas que atenderá a maioria dos clientes são feitas sem nenhum custo. Pois não necessita passar valores a terceiros.

Resumindo, algumas vantagens em utilizar o M7Admin.

  • Fácil instalação
  • Painel Grátis
  • Sistema pioneiro já com vários módulos disponíveis
  • Compatível com Wa4 e WaRc
  • Suporte que funciona
  • Melhorias frequentes
  • Você só compra os módulos que realmente vai precisar.
  • 3 Níveis de usuário (Webmaster, administrador, editor)
  • Instala na pasta que desejar. Você não é obrigado a utilizar a pasta m7admin


Reforçando, nós do WebAcappella Show estaremos realizando uma série de postagens com o tema Criando um site com M7admin com WA 4 e WA RC em que estaremos disponibilizando  vídeos making off mostrando a criação de um website tanto no WA RC quanto no WA4 utilizando o M7Admin.  

Por serem vídeos making off, serão vídeos sem cortes e editação. Vocês verão exatamente o processo. Verão até se apresentar erro como contornar.


Acompanhe para não ficar de fora e aproveitar e pegar muitas dicas legais para utilizar em seus projetos.

Como  início  a essa série de postagem do tema Criando um site com M7admin com WA 4 e WA RC  iremos mostrar a instalação do sistema.


Caso deseje ver o vídeo diretamente no Youtube (com maior tamanho) clique aqui.






Pois é isso aí turma do bem, no próximo post faremos uma apresentação do painel e suas funcionalidades. Acompanhe e fique por dentro.

Grande abraço a todos!!!!
















01/01/2018

Melhorando o rodapé no Webacappella Responsive



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

É isso aí galera, mais uma lembrancinha quando estiver trabalhando com o WebAcappella Responsive. 

Acontece que apesar que o WA facilita muito nossa vida, não podemos esquecer de alguns ajustes que devemos fazer no intuito de melhorar o website quando acessado por aparelhos celulares.

No vídeo abaixo mostra que com pouco trabalho poderemos melhorar muito o rodapé melhorando tanto o carregamento quanto a aparência. Afinal, queremos sempre fazer o melhor trabalho possível não é mesmo?

Vai a dica!




Veja você mesmo em http://webacappellashow.com.br/



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.




Related Posts Plugin for WordPress, Blogger...