29/04/2018

Integrando o Instagram no seu site feito no Webacappella 4 ou no Webacappella RC


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


Me perguntaram esses dias se eu tinha conhecimento de como intregrar o Instagram em sites feitos pelo Webacappella 4.

Então eu passei o link direto da API do Instagram https://www.instagram.com/developer/, porém tem que se dedicar um tempinho. Eu particularmente nunca usei.

Não sei porque a cada dia que passa nosso tempo está cada vez mais curto, então nos obriga a ser o mais prático possível.

Com base nisso vou mostrar no vídeo um dos recursos  que utilizo para incorporar o Instagram nos sites que faço tanto no Webacappella 4, quanto no Webacappella RC (WA5)

Eu utilizo também Lightwidget pois nele tenho a possibilidade de usar como grade, slide e colunas/linhas, além  de aplicar vários estilos e ao clicar na foto ele manda diretamente para o Instagram o qual foi incorporado.

Caso queira ver o vídeo pelo Youtube clique aqui




Grande abraço pra Geral

14/03/2018

Otimizando as imagens para seu site de forma fácil



Uma das métricas do Google para pontuar seu site e melhorar o ranqueamento do mesmo é ele está bem otimizado. E uma dessas otimizações são a velocidade que ele carrega. Sendo assim é muito importante que as imagens estejam otimizadas e de um tamanho razoável.

Levando então em consideração as imagens, as mesma devem estar de uma boa qualidade porém que seu tamanho em KB seja o menor possível.

Vamos então passar algumas dicas para se otimizar as imagens.

Em primeiro lugar é orientar quem vai tirar as fotos, e ou produzir as mesmas para que sejam incluídas no site para que utilize uma resolução definida por você. Digo pois muitas pessoas tem a ilusão em achar que as imagens devem ter a maior qualidade possível.

Oriente também em procurar usar o padrão de cores RGB que é o utilizado pelos monitores. CYMK são utilizados para impressões o que não é nosso caso.

Já tendo as imagens mostramos no vídeo abaixo métodos utilizando :

TINYPNG: Otimizador on line. Neste no modo gratuito é possível otimizar 20 arquivos de no máximo 5 MB por vez. Pode-se baixar todos os arquivos de uma só vez em um arquivo compactado.

EASY-RESIZE: Otimizador on line. Serviço on line totalmente gratuito o qual pode-se definir a resolução desejada e o tamanho máximo que deseja o arquivo (aproximado). Este é necessário baixar cada arquivo otimizado separadamente

FASTSONE: Programa gratuito conversor de imagens e uma ferramenta de renomeação que pretende permitir aos usuários converter, renomear, redimensionar, cortar, girar, alterar a profundidade de cores, adicionar texto e marcas d'água para imagens em um modo de lote rápido e fácil. A operação do mouse arrastar e soltar é bem suportada.
  • Converta e mude o nome das imagens no modo de lote
  • Suporte JPEG, BMP, GIF, PNG, TIFF e JPEG2000
  • Redimensionar, cortar, alterar a profundidade de cor, aplicar efeitos de cor, adicionar texto, marca d'água e efeitos de borda
  • Renomeie imagens com número sequencial
  • Pesquisar e substituir textos nos nomes dos arquivos 
  • Visualização de conversão e renomeação
  • Estrutura de pasta de suporte / pasta
  • Carregar e salvar configurações
  • E muito mais...

Veja o vídeo abaixo e espero ter sido útil. Caso deseje ver o vídeo diretamente no Youtube clique aqui





02/02/2018

02 - Conhecendo o painel do M7admin - Sistema administrativo para Webacappella

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


E aí galera do bem! Beleza pura sem mistura? 

Pois então, dando continuidade ao tema Criando um site com M7admin com WA 4 e WA RC ainda não iniciaremos o projeto do site feito tanto em WA4 quanto WA RC utilizando o painel administrativo M7Admin;

Por que? 

Simples, pelo fato de gastarmos alguns minutinhos apresentando o painel pra vocês e suas funcionalidades. Tudo sem muita formalidade, como estivéssemos tomando um café.

E veja bem, na demonstração fui pego de surpresa e já estava disponível uma nova atualização do sistema. Foi bom, que pude demostrar a atualização pelo painel. Muitooooo masssaaaaa!!!!

Para quem quer saber sobre o que foi atualizado, segue abaixo: 

-Atualizado pre-requisitos m7admin
-Adicionado melhorias na plataforma
-Melhoria na integração de módulos, corrige o erro ao utilizar HTTPS/SSL em alguns sites
-Melhor organização na estrutura de arquivos carregados na head JS/CSS
-Notificação de nova versão disponível na Dashboard do painel
-Adicionada uma nova biblioteca para animações futuras nos módulos
-Após vários testes/atualizações a Atualização Automática do M7Admin saiu do BETA
-Melhoria no carregamento do site

Aprecio muito o M7admin por isso; está sempre verificando o sistema a procura de bugs e melhorias. E se quiser acompanhar só ir neste link: https://www.m7admin.com.br/registro-de-atualizacoes.html


Ahhhh.. para aqueles que perderam o post anterior referente ao tema Criando um site com M7admin com WA 4 e WA RC em que falamos da instalação; o link é este: https://webacappellashow.blogspot.com.br/2018/01/01-instalando-o-sistema-m7admin.html


Dá uma olhadinha lá.


Então mãos a massa. Se quiser ver o vídeo deste post da demonstração do sistema direto no Youtube, basta clicar aqui.


Se quiser ver o vídeo por aqui mesmo no blog só por o vídeo abaixo pra rodar.



Abraçoooooooo  !!!!!!!!!!


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




Related Posts Plugin for WordPress, Blogger...