11/06/2018

03 - Criando a página provisória usando o Módulo Páginas/Conteúdo do M7admin


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


Fala galera, beleza pura sem mistura?

Pois então, como comentado iremos criar um site utilizando o M7Admin e o Webacappella. Serão duas versões do mesmo site. Uma usando o Wa4 e o outro usando o Wa Rc.  E como prometido estaremos também passando algumas coisinhas que já foram postadas aqui no Blog.

Esta página provisória, sera´uma página dizendo que o website está em construção. Pois uma coisa que não é muito agradável é por o site no ar enquanto o mesmo está em desenvolvimento; ou seja, ainda inacabado.

Eu por exemplo, enquanto vou desenvolvendo o website mantenho o index como página provisória. Assim, quando finalizado eu só mudo no Webacappella qual será a página principal.

Na página principal vamos utilizar também alguns recursos já postados aqui no blog que são:


1) Botão Google + Share: Um botão para compartilhamento no Google +
Link do post em nosso Blog: https://webacappellashow.blogspot.com.br/2017/09/gogle-botao-share-botao-para.html

2) Botão Facebook Share: Um botão para compartilhamento no  Facebook
Link do post em nosso Blog: https://webacappellashow.blogspot.com.br/2016/08/inserindo-um-botao-compartilhar-no.html

3) Código de redirecionamento:  Gosto muito de no período do site em construção que após alguns segundo seja direcionado para a Fanpage do Cliente. Desta forma já ajudo na divulgação.
Link do post em nosso Blog: https://webacappellashow.blogspot.com/2015/06/dica-para-colocar-na-primeira-pagina.html


4) Criando o site no Wa4 com versões mobile atendendo as exigências do Google:  Nesta postagem é mostrado como criar o site pelo WA4 com vesões mobile para que passe nos testes do Google e não seja penalizado:
Link do post em nosso Blog: https://webacappellashow.blogspot.com/2018/05/site-responsivo-x-versao-mobile-criando.html


Os links acima disponibilizei, pois nos vídeos abaixo, para que não ficassem muito extensos eu já deixei  pronto em um arquivo txt os códigos a serem utilizados no site exemplo. Mas caso vocês queiram informações sobre os mesmos só clicar no link acima no que os interessa.

Coloquei os vídeos em separados para sermos mais objetivos. 

Atualização do M7admin paraversão 3.7

No vídeo abaixo antes de irmos direto para o projeto exemplo falo da fantástica atualização que houve no M7admin onde  forma inclusos várias novidades tanto na forma de atualização dos módulos quanto também novidades no que se trata em animações no website. Ou seja, agora você poderá ativar animações em módulos que refletiram em um visual muito melhor no site desenvolvido.


-



Criando a página provisório do site em construção feita no WA RC usando o módulo Página/Conteúdo do M7Admin.






Criando a página provisório do site em construção feita no WA 4 usando o módulo Página/Conteúdo do M7Admin.







Para acompanhar o projeto do site exemplo WASEVENTS on line clique aqui










15/05/2018

Site Responsivo x Versão Mobile | Criando versão Mobile no WA4 sem necessidade de largura de 1000px

site para celular no webacappella 4


TEMA: Site Responsivo x Versão Mobile
ARTIGO: Revisado e melhorado (esta postagem sofreu nova atualização em 15/05/2018)
VERSÃO: WEBACAPPELLA  4



Olá galera, beleza?

Lembram do que já falei sobre a forma de se olhar para a xícara? Que a xícara tem uma alça só, e dependendo do ângulo que se olha pra ela, verá a mesma xícara porém de formas diferentes?

Resumindo: " Veja tudo com vários pontos de vistas"

Quando o Google começou com suas penalidades para sites não compatíveis para dispositivos móveis todos começaram (mais do que certo) a procurar alternativas.

No Webacappella então a alternativa seria criar outro projeto para a versão mobile.

Então surgiram artigos com configurações para o htacces para direcionar para a versão mobile, surgiram explicações sobre quais formatações deveriam ser usadas no projeto mobile,  enfim..

Eu, como disse, gosto de analisar as situações em vários pontos de vistas, ver as prioridades, não concentrar no problema e sim na solução.

Como havia acompanhado e percebido que os sites dos meus clientes que não tinham a versão mobile começaram a perder visitação de uma forma considerável me senti na obrigação de executar uma estratégia imediata. Para compartilhar com todos criei o seguinte artigo: Clique aqui e veja o artigo mais detalhado sobre isso.

Site Responsivo x Versão Mobile | PRIORIDADE 1 > Sair da Penalidade do Google



 Clique aqui e veja o artigo .


Neste artigo eu criei um código simples de redirecionamento para versão desktop e mobile e informei também as dimensões que o blog oficial do Webacappella informa para se criar a versão Mobile.

Mas na prática eu senti um grande desconforto de criar um site com dimensões enormes. Era muito ruim, e eu sempre tinha dúvidas como ficaria no celular ou outro dispositivo móvel que seja.

Daí verificando nas ferramentas do Google, percebi que criar o site nessas dimensões sugeridas não era a melhor opção. Como eu já disse a intenção do Google é fornecer a melhor experiência para seu usuário. Então mesmo o site passando pelo  teste mobile do Google, outros fatores vão colaborar para que sua posição seja melhor no ranqueamento. Tais como velocidade do carregamento do site entre outras.


Entre estas outras está a meta tag Viewport a qual me chamou atenção e foi a primeira solução para alguns problemas.


Possa ser que crie um artigo exclusivo sobre o Viewport, mas hoje vou mostrar bem simplificado como utilizá-lo, o motivo e a vantagem.


Para  quem entrasse no site do WebacappellaShow pelo celular via a seguinte tela:




Esta foi feita usando as dimensões sugeridas no blog oficial do WebAcappella.

Apesar de depois de ter a prioridade de sair da penalidade como falado no outro artigo (link informado acima). Mesmo passando no teste do Google, os ajustes não teriam terminado.

Meu próximo passo era testar a experiência do usuário. Para isso utilizei a seguinte ferramenta do Google: 


Preste atenção ao destaque em vermelho na imagem abaixo:



Repare que para a satisfação total do Google muitas coisas ainda devem ser feitas no meu projeto.

Mas me chamou a atenção em "Configure o Visor"


Clicando em detalhes:



Daí de cara percebi.. Falta o Viewport

Neste momento pensei. "Caramba!! eu aqui que nem bobo fazendo sites versão mobile com dimensões gigantescas " Que até mesmo ficaria até pesado para celular.

Então pensei, qual seria a dimensão boa para trabalhar  com o projeto mobile. Então, no meu achar, (você pode achar que outra dimensão te atenda melhor) resolvi usar a largura 440 px.

Então eu que estava trabalhando no Webacappella assim:




Passei a trabalhar assim:



E aquela estória de tamanho das fontes, besteira,, nem me preocupo mais com aquilo. Em questão das fontes o que tenho que me preocupar é de utilizar fontes maior que 12.

Faço o projeto visualizando quase exato do que vai aparecer no celular. Digo quase pois o viewport faz alguns ajustes automaticamente.


O que se deve ter um certo cuidado é de manter uma distancia mais confortável entre os elementos e dependendo da fonte utilizada sugiro transformar o texto em imagem..

Para transformar o texto em imagem basta clicar na caixa de verificação na configuração do texto pelo próprio WebAcappella.






Outro detalhe que não é obrigatório é criar as imagens nas dimensões reais que se vai usar no projeto. Não é obrigatório pois vão abrir normalmente ao visitar o site, mas sugiro por questão de velocidade. O Google adora sites que carregam rapidamente

Acredite, é muito mais confortável trabalhar assim. Sem contar que você pode criar também projetos separado para tablet; por exemplo. 

Mesmo já utilizando o WebAcappella Responsive, continuo também utilizando o WA 4 com versões separadas para mobile (óbvio dependendo do projeto) , pois o WA4 possibilita maior liberdade de criação do que o WA RC.  Um exemplo é ícones em botões, sobrescrever um elemento com outro e etc. Seguindo  o mesmo pensamento dos grandes como Facebook, loja submarino e etc. Todos estes possuem a versão mobile separada.

A versão mobile você foca diretamente no que o usuário gostaria de ver por um dispositivo móvel.

E sabe como eu faço? 

1 - Faço o site primeiro por inteiro na vesão desktop.
2 - Depois duplico as páginas para as outras versóes (sem precisar criar pastas para outras versões, apenas acrescento um -m(mobile) , -t(tablet), -d(desktop)  no final do nome de cada url
3 - Daí saio retirando tudo que não vou querer na versão mobile e tablet
4 - Altero as dimensões
5 - Faço todos os ajustes para as novas dimensões

Em poucas horas já ta pronta a versão mobile.

Bom, continuando.......

Preciso de definir as dimensões referente a largura de cada versão. Então depois de vários testes cheguei nas seguintes dimensões:


Para celular (na vertical) 410 px de largura








Para tablet (na vertical) 600px de largura




As áreas que separei para cada lado de 10 px é para que tenha uma melhor visualização. Elementos esbarrando no canto da tela ninguém merece.


E no caso do celular estiver vai depender de cada dispositivo, pois dependendo da resolução ele pode assumir a de outro dispositivo. Por exemplo: Dependendo da resolução do tablet ele poderá assumir a versão do site para desktop.

Minhas páginas ficaram assim:



Lembrando que no caso do ipad, pode também ser criada uma página para ipad com suas dimensões. Dessa  forma quem entrar pelo ipad terá uma visualização só para ele. O importante deste post é passar a ideia de como fazer. As dimensões você pode alterar do seu jeito e fazer devidos testes.


Agora que já estou trabalhando com as dimensões reais, mais confortavelmente e mais feliz vou inserir o detalhe chave. A tag Viewport.

Então através do Viewport  vou fazer que a página para cada dispositivo se ajuste a resolução do mesmo.


Sendo assim para cada tipo dispositivo incluirei o código no head da página. Lembrando que cada página mobile (celular, tablet, ipad e etc) do projeto do seu site tem que ser inserido o código .



Código:
<meta name="viewport" content="width=device-width, user-scalable=no">



Agora vamos as simulações . O ideal seria testar diretamente nos dispositivos, mas como isso pra mim é quase impossível vou usar o Opera Mobile Emulator.




Para celular (na vertical) 410 px de largura






E o teste Google mobile






Para tablet (na vertical) 600px de largura






E o teste Google mobile







Agora que já tenho minha página para cada dispositivo, falta fazer com que ao entrar na página ela seja direcionada pela versão certa. PRESTE BEM ATENÇÃO!!! Estou dizendo que é entrar na PÁGINA, NÃO NO SITE.  Porque?  Simplesmente se você determinar um código somente no inicio do site para redirecionar para a versão correta, só irá funcionar se for digitado a url inicial do site.

Então imagina a seguinte situação: Em uma pesquisa no Google feita pelo celular, encontra a página contato da versão desktop (por exemplo) ao clicar para abrir a página contato não estará configurada para celular, abrindo a versão incorreta e não se adaptando ao dispositivo.

Para solucionar isso vou criar uma página que apelidei de página piloto para cada página onde ela vai decidir para qual versão ela vai direcionar de acordo com o dispositivo.

então para cada página serão 4 páginas.
1 - Página Piloto : A que vai fazer o redirecionamento
2 - Página para desktop
3 - Página para tablet
4 - Página para celular

Parece muito trabalho né? Mas na prática verá que não é e funciona.

Supomos que tenho só a página Home. Então ficaria assim:



Para melhorar ainda mais o entendimento vamos supor que temos a página Home e a página Contato.

Ficaria assim:


Coloquei um hífen na frente das páginas home só por uma questão de organização, pois Home começa com H, e como é minha página principal fica melhor para trabalhar se forem as primeiras e estiverem próximas uma abaixo da outra.

Eu usei o que chamo de página piloto onde vai conter as configurações para o redirecionamento pois dessa forma nos meus menus fica mais fácil e prático de manusear. Pois assim não preciso em ir em cada menu de cada versão e ficar trocando as referências. Pois todo menu vai apontar para a página piloto, e ela que vai direcionar para a página certa. 


COMO DEVE SER CADA  PÁGINA PILOTO:

Para que o carregamento da página piloto seja o mais rápido possível eu configurei uma página em branco nas dimensões  mínimas que o WA4 permite. 


Na aba SEO marco para que os mecanismos de busca não localize as páginas piloto. (só para as páginas piloto)


E no head de cada página piloto  usei o seguinte código:


<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=URLPAGINACELULAR'>")
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=URLPAGINATABLET'>")
else
document.write("<meta http-equiv='refresh' content='0; url=URLPAGINADESKTOP'>")
</script>

Os valores 600 e 800 são as dimensões para atender a condição.
Então vai seguir a ordem das seguintes condições:

1ª condição) Verifica se o dispositivo tem uma largura menor que 600px. Se sim vai direcionar para a página para celular, se não vai para a próxima condição.

2ª condição) Verifica se o dispositivo tem uma largura  menor que 800px. Se sim vai direcionar para a página tablet, se não vai para a próxima condição

3ª condição) Vai direto para a página desktop (só executa esta condição se não atender nenhuma das anteriores)



Lembrando que você determinas as dimensões e para que página quer o redirecionamento. Eu usei essas medidas pois em testes encontrei os melhores resultados. Mas é opcional. E caso você tiver mais páginas específicas para outra resoluções como exemplo ipad, terá que adaptar conforme seu projeto.

Testando pelo Teste de compatibilidade com dispositivos móveis do Google utilizando o url principal de onde usei para fazer a simulação e printar os exemplos veja o resultado.





Provando assim que ele o Google não penalizou o site e se observar a url, o teste está direto na url principal do site. Ou seja, não foi feito teste em cima da url do celular como os outros citados acima.  

Testando então pelo PAGE SPEED INSIGHTS (óbvio que não foi feito nenhum tipo de otimização, então não leve em consideração a pontuação e sim qual versão ele localizou para cada dispositivo)







Mas se numa pesquisa pelo celular o Google mostrar a versão desktop?


Pois agora tem mais uma questão, se caso for localizado por uma pesquisa no Google uma página que não corresponde ao dispositivo correto, tenho que informar para não prosseguir e voltar para a página piloto.

Então para cada página de cada dispositivo, inclusive a página para desktop tenho que colocar um código no inicio do head, ou seja; na primeira linha. Sendo que a condição tem que ser oposta a condição que foi inserida na página piloto.  

O código seria: 

<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (CONDIÇÃO)
document.write("<meta http-equiv='refresh' content='0; url=URLDAPÁGINAPILOTO'>")
</script>


Vamos a lógica para tentar explicar melhor. Tomamos como exemplo a página contato. Sento que a página contato piloto seria contato.html; essa faz a verificação das dimensões e envia para a página da versão desejada. Sendo por exemplo, contato-m.html (para celular) , contato-t.html (para tablet) , contato-d.html  (para desktop)

No head da página contato.html (que seria a página piloto de contato) teria o seguinte código.

<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-m.html'>")
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-t.html'>")
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-d.html'>")
</script>

Então a condição do exemplo é: Primeiro ele verifica se a de largura do dispositivo for menor que 600px ele vai redirecionar para a versão contato para celular (contato-m.html), se for maior ele passa para a segunda condição; se for a largura do dispositivo for menor que 800px ele redireciona para a versão para tablet (contato-t.html). Se for maior ele passa para terceira condição que é redirecionar para a versão desktop (contato-d.html).

Mas se pelo mecanismo de busca. O internauta fizer uma pesquisa pelo celular e o resultado for mostrado por exemplo a url para desktop (contato-d.html), Ao clicar, obviamente o arquivo acionado será contato-d.html ( o que corresponde a versão desktop), a qual não iria ser bem visualizada no celular. 

Por este motivo no head da versão desktop (contato-d.html) teria de ter o seguinte código: 

<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
</script>

* Informei que: Ao acessar o contato-d.html (versão desktop) vai verificar a largura, ser for menor que 800px ele vai para a página contato.html (que é a página piloto a qual vai verificar a largura e o e enviar para a página certa) 


Já se no caso em uma busca pelo desktop, o resultado apresentar a versão celular (contato-m.html). Ao clicar mostraria a página que deveria mostrar somente pelo celular. Então seria muito estranho o internauta visualizar aquela página fina e espichada. Por isso no head da versão celular (contato-m.html) deveria ter o seguinte código no head. 

<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
endif
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/paginapiloto.html'>")
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/paginapiloto.html'>")

</script>



Coloquei o mesmo código inserido nas páginas piloto , porém se a condição obedece a resolução que eu quero que a página abra eu mato com ENDIF, e as condições em que a resolução do dispositivo não obedece a página ele envia para a página piloto. Dái a piloto encaminha para a página que atenda o a largura do dispositivo. 

Você pode até não querer usar uma página piloto, neste caso teria que substituir onde o codigo envia para a página piloto para a página exata correspondente a cada dispositivo.  E também ter o trabalho de ajustar em cada menu do seu projeto. O que é meio cansativo inda mais se utilizar um menu feito por script.


Resumindo, tomando como exemplo a página contato usando as dimensões escolhidas neste post sendo para os direcionamento; os códigos a serem inseridos no head (completos) em cada página ficaria assim:

PÁGINA PILOTO | contato.html

<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-m.html'>")
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-t.html'>")
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato-d.html'>")
</script>


PÁGINA DESKTOP | contato-d.html

<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
else
endif
</script>


PÁGINA CELULAR | contato-m.html
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
endif
else
if (width < 800)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
</script>


PÁGINA TABLET | contato-t.html
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var width = screen.width;
if (width < 600)
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
else
if (width < 800)
endif
else
document.write("<meta http-equiv='refresh' content='0; url=http://www.seudominio.com.br/contato.html'>")
</script>


Tá achando complicado né? Mas saiba que no WARC para ficar um site bacana também tem seus ajustes para cada versão. Mas isso vai ser mostrando na série de postagens com o tema Criando um site com M7admin com WA 4 e WA RC


DETALHE MUITO IMPORTANTE:
UTILIZE DE TITULO DA PÁGINA, DESCRIÇÃO, PALAVRAS CHAVES ; DIFERENTES ENTRES AS PÁGINAS MOBILE, DESKTOP E TABLET.. 

Além de favorecer o site em SEO,  evita que o Google bot leia  as duas versões, que são duas URLs, contendo o mesmo conteúdo, o famoso conteúdo duplicado que tanto falamos.

HEHEH. .me lembrou as pessoas que gostam de fazer sites ONE PAGE (de uma página só); nem imaginam como esse prática prejudica para SEO). "Respeito outras opiniões". 


Algumas pessoas saem falando por aí que o Google pune os sites que não são responsivos. Foi provado o contrário.   Tanto que o próprio Google sugere uma forma que deve ser feito para sites em várias versões; ou seja, sites que tem versões para cada dispositivo.


E outra, se fosse assim sites gigantes como o Facebook estariam punidos.

Mas confesso a vocês, que antes de ter conhecimento sobre as orientações do Google eu já fazia da minha  maneira (citada neste post) , e acabei me acostumando com a mesma e nem experimentei usar a  do Google. Pelo menos comigo a que uso sempre funcionou, passou nos testes do Google e o site não foi penalizado..


Quer ver On line? . em breve.... Pois estarei dando continuidade na série com o tema  Criando um site com M7admin com WA 4 e WA RC, onde estarei construindo aos poucos um site com WARC e o gerenciador de conteúdo para webacappella  M7ADMIN e outro com WA4 usando também o gerenciador de conteúdo  M7ADMIN

Como as postagens do tema acima tem vídeos makingoff, achei interessante criar este explicando a utilizar o WA4 em várias versões para que os vídeos das outras postagens não fiquem muito grandes.



GOSTARIA DE LEMBRAR QUE MEUS POSTS TEM SOMENTE O INTUITO DE COMPARTILHAR MINHAS EXPERIÊNCIAS, MAS NÃO SOU NENHUM GURU; E PEÇO QUE QUALQUER PESSOA TENHA UMA SUGESTÃO DE MELHORIA, ENVIE UM E-MAIL PARA CONTATO@WEBACAPPELLASHOW.COM.BR QUE SERÁ ANALISADA E MUITO BEM VINDA. 

Abração a todos.

FRASE DO DIA:

  "A experiência nem sempre está no tempo de vida e ou até mesmo  no tempo que faz a mesma tarefa. Muitas das vezes a experiência está no poder de observação. Quem se acha muito fera por fazer determinada ação por muito tempo, pode pecar e não perceber que está bitolado"


06/05/2018

Inserindo um botão linkando para o Whatsapp


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

Hoje é muito usado disponibilizar o WhatsApp como uma forma de comunicação. Portanto não são todos os casos que devem ser considerados. Sugiro que o número seja exclusivo para isso, evitando que se misture com seus contatos pessoais.

Mas caso seja uma opção desejada é muito fácil de se inserir um link para que o visitante do site ao clicar já seja direcionado para Whatsapp com seu número pré configurado.

Pode-se ser usado através de um link configurado em um botão, imagem ou até mesmo em um texto.


A url a ser configurada como redirecionamento é a seguinte:

https://api.whatsapp.com/send?phone=seunumerodetelefone&text=%20mensagem

Basta agora você alterar as áreas que estão de vermelho acima por suas informações, ou seja: O seunumerodetelefone substitua pelo número do Whatsapp desejado contendo o código do país, código de área e o número; e mensagem por uma mensagem que deseja. Porém a mensagem não será enviada em seguida. Será necessário que o internauta clique em enviar.


Então como exemplo vou inserir o número 5531999999999 com uma mensagem "Este número é apenas uma demonstração de como inserir um botão de Whatsapp em seu site usando Webacappela. Não é nosso número oficial. Para nos contatar somente pelo w-mail contato@webacappellashow.com.br"  No numero usado estou usando o código do País Brasil e código de área para Belo Horizonte e um número exemplo (este número não é um número de contato oficial do WebAcappella Show) .


Então a url ficaria assim:

https://api.whatsapp.com/send?phone=5531999999999&text=%20Este número é apenas uma demonstração de como inserir um botão de Whatsapp em seu site usando Webacappela. Não é nosso número oficial. Para nos contatar somente pelo w-mail contato@webacappellashow.com.br


No exemplo então optei para utilizar em um botão no site de forma ao clicar vai abrir o Whatsapp em uma nova guia pelo computador e por celular ele perguntará se vai querer abrir pelo aplicativo ou pelo browse.



E ao clicar ficaria assim pelo WhatsApp

Basta agora o internauta clicar em enviar.

Se quiser ver on line CLIQUE AQUI

Lembrando que não conseguirá adicionar o número pois o mesmo não está adicionado ao WhatsApp. É apenas um exemplo.

Abração a todos.








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  !!!!!!!!!!


Related Posts Plugin for WordPress, Blogger...