PRESTASHOP & WEBACAPPELLA | Tradução ! Primeira Parte

Olá turma do bem!!

Continuando nosso artigo sobre Prestashop & WebAcappella, vamos começar a falar da Tradução.

Acontece que vejo vários artigos sobre tradução,  com todo respeito aos colegas; sinto que falta mais informação. Vocês mesmos vão entender o que to falando ao andar da carruagem.

Então a parte de tradução eu vou dividir em 2 partes. Hoje falarei da primeira.


Mas por qual motivo? 

A primeira é só para facilitar o próximo artigo desta série; que não será a segunda parte da tradução. E sim sobre algumas configurações que devem ser feitas para pularmos para segunda parte.


Antes de começar vou comentar de como gosto de trabalhar. Todo site que desenvolvo; meu cliente recebe uma área restrita a qual tem várias opções tais: 

• Acesso ao webmail, 
• Gerenciador de arquivos,
• Forma do próprio cliente alterar aquela imagem que aparece no facebook se alguém clicar no botão compartilhar do site,
• Acesso a área administrativa que é o adm do site,
• Acesso a abertura de tickets
• Link para o acesso ao painel da sua loja e outras coisas mais.

Enfim, procuro fornecer ao meu cliente a maior comodidade possível.

Enfim, nesta área restrita eu tenho a minha senha cadastrada também, facilita até pra mim quando tenho que executar algum chamado de suporte que envolva a loja. Desta forma não preciso ficar guardando a URL e nem abrir o projeto do WebAcappella para acessar.


Mas como não sei como cada um trabalha, abra o Webacappella e  na opção "MY shop>>Back office (url) address" e depois clique em Open para ser redirecionado ao painel da loja

Entre com suas credenciais de usuário e senha


É importante citar que neste artigo estou auxiliando a trocar o idioma do Prestashop para Português Brasil.



Agora selecione no menu LOCALIZATION>>TRANSLATION

Agora na área Trnaslation exchange selecione Português BR (Portuguese)

e clique em "Add or update a language"


Após então clique em "My Preferences" no topo a direita. 

Procure o campo Language e selecione "Português BR (Portuguese)

Depois clique em Salvar na parte superior esquerda da tela. "NÃO ESQUEÇA DE SALVAR"


Bom, até agora já temos nosso Painel da loja traduzido


O restante das traduções iremos fazer na segunda parte. 

Separei em duas partes pois o próximo artigo da Série PRESTASHOP & WEBACAPPELLA irei falar de configurações que devem ser feitas no seu servidor de hospedagem para que possamos aplicar o restante das traduções.

Como essas configurações também envolvem efeitos em outras situações da loja resolvi por em um artigo separado da Tradução.

Se você estiver criando uma loja acompanhando os artigos.. aproveite esta pausa para cadastrar seus produtos. 

Um grande abraço e bom fim de semana a todos.

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

Olá galera do bem!

Voltamos em mais uma postagem da série Site Responsivo x Versão Mobile.

Portanto diante aos acontecimentos que ando enfrentando, a prioridade mudou. Acredito que mais alguém possa estar passando por isso.

Não sei você leitor, se você desenvolve seu próprio website, se faz por hobby ou se trabalha desenvolvendo websites para terceiros e como trabalha. No meu caso eu tenho contrato com clientes.

Ando observando que aqueles clientes em que o site não tem a versão mobile tem caído consideravelmente na quantidade de visitas. O que sei é que é uma situação muito ruim apresentar a estatística para seu cliente onde o resultado é negativo.

Muitos vão dizer: - Tem algo errado com o site, só pode.

Pior, ele está certo. Tem sim! O site não tem sua versão mobile.


 E o que fazer?

• Chegar no meu cliente sem ter o mínimo de bom senso e dizer que ele não contratou uma versão mobile? 
• Ignorar a situação como nada estivesse acontecendo e deixar que o mesmo fique insatisfeito até decidir cancelar o contrato?
• Jogar a culpa no cliente dizendo que o negócio dele que não é interessante e ocultar a questão do mobile de forma não o conscientizar da situação? Saiba que uma hora pode aparecer um concorrente mostrando esta situação pra ele e ainda o convencendo que você o enganou o tempo todo.

Não sei a relação de vocês com seus clientes, mas a minha é de parceria. Cada cliente para mim é um parceiro. 

Portanto, não tem como simplesmente chegar no meu cliente e cobrar dele um site Mobile. Em qualquer ramo de atividade, um profissional que se preze passará momentos em que "vai trabalhar de graça". 

Mas como sempre digo "Olhe a Xícara por ambos os lados, a xícara tem uma alça de um lado só. Dependendo do ângulo que se olha para ela, verá a mesma xícara de formas diferentes." Então encare a situação com vários pontos de vista. 

Nesta situação, em vez de eu ser pessimista e ficar trabalhando pensando: "Que xato. to trabalhando de graça" vou pensar "O fato de esclarecer a situação com meu cliente, e fornecer uma solução vai aumentar a confiabilidade que ele tem em meu trabalho".

Galera, o seu cliente é o seu combustível para que seu negócio saia do lugar  para que ele prospere. 

Então qual a medida decidi tomar:

Simples, Contatei cada cliente, expliquei sobre as mudanças drásticas do Google e expus a solução imediata para contornar a situação no momento até tomarmos novas decisões. Informei que seria criado uma página básica a qual estaria informando que a versão mobile estava em construção e com um botão para que visite a versão Desktop" E depois seria criado a versão mobile bem simples direcionada no que é realmente é relevante sem custo algum. Assim, se ele optasse a ter uma versão mais completa para celular, neste caso sim; seria tarifado.

Desta maneira poderia salvar em menor espaço de tempo todos meus clientes da penalidade, ter tempo para um ajuste da versão Mobile simples e por fim; para os que interessassem criaria a versão mais completa e ainda teria entradas no caixa.

Diante desta história contada pra vocês, o post de hoje é:

PRIORIDADE 1 >> SAIR DA PENALIDADE DO GOOGLE

Como visto no artigo anterior vamos sequenciar este tema usando o próprio domínio do WebAcappelashow para criarmos duas ou mais versões do site , ou seja desktop e mobile, e de quebra tentar fazer um responsivo utilizando o WebAcappela.

 Caso você ainda não viu clique aqui.

O primeiro passo, feito anteriormente é criar na minha hospedagem, dentro da pasta public_html as seguintes pastas:

desktop > para a versão pc
mobile > para a versão dispositivos móveis
responsive > para a experiência responsiva

Mas seguindo nossa prioridade estaremos criando então o básico do básico para a versão mobile do site. Lembrando da meta prioritária: Sair da penalidade do Google.

Obviamente não estou querendo dizer que vamos nos posicionar melhor no ranqueamento e ou que estamos cumprindo todas as diretrizes do Google. Nossa primeira preocupação é passar no teste oficial de Google para dispositivos móveis. Se o Google disponibiliza uma ferramenta teste a qual fornece um resultado positivo ou negativo e ainda lista detalhes para correções; entende-se que passando no teste pelo menos o site está cumprindo com as principais regras e para ela está considerado um site para dispositivo móveis saindo da penalidade.

Então galera, vamos criar o projeto para o site WebacappellaShow na versão Mobile. Para isto criei o projeto chamado WebacappellaShow_Mobile.

Como tenho uma prioridade, vou evitar perder tempo com novas experiências e vou criar a versão Mobile seguindo as instruções fornecidas no Blog Oficial do Webacappella.

Link da Matéria do Blog > http://blogwebacappella.fr/2013/04/04/creer-un-site-pour-les-appareils-mobiles/#more-2049

Está em Francês, mas nada que um bom translator não resolva. rs


Resumindo:

• Configurar as páginas com 900px de largura ; pois em 1000 pixels como havia dito na postagem anterior. Conforme o blog oficial do WebAcappella 1000 px não seria muito adequado para os smartphones de tela como o iPhone.
• Tamanho da fonte para textos: 36px
• Tamanho da fonte para títulos: 44px 
• Aproveitar bastante dos recursos âncora no WebAcappella ou utilizar de um menu flutuante para  páginas compridas .

Então criei esta telinha básica da básica para minha versão celular

Assim terá um botão redirecionando para a versão Desktop do site.

Criado esta página emergencial posto ela dentro da pasta public_html/mobile vista pelo browser como http://www.webacappellashow.com.br/mobile/index.html


Agora testando o site no teste do Gooble conferimos se passamos no teste:

Wowwww!!! Passamos!!!

Além de passarmos, melhor; se o internauta clicar em VERSÃO DESKTOP, ele será redirecionado para a versão desktop do site mesmo no celular. Faça o teste no seu celular e comprove.

Um detalhe que percebi, que se seguir as medidas conforme dito no WebAcappella full de largura 1000px se enquadraria melhor. Mas isto é um detalhe que irei testar em vários dispositivos mais tarde. Agora estou seguindo minha prioridade.



Agora, minha versão Desktop: Outro projeto que nomeei como Webacappellashow_desktop

Esta publicada dentro da pasta public_html/desktop e vista pelo browser como http://www.webacappellashow.com.br/desktop/index.html

Como já dito são dois projetos: 1 Desktop, outro Mobile

Agora reparem bem, a versão desktop foi produzida de tal forma que até o momento também passaria pelo teste do Google. Mas o Google reconheceu a versão Mobile.



Para isto eu criei o terceiro projeto chamado Webacappellashow_principal 

Este é uma página única em branco a qual pela opção do Webacappella SITE>>PROPRIEDADES DO SITE, inseri o seguinte código no head

<script type="text/javascript">

//pega a largura da resolução da tela

var width = screen.width;

//pega a altura da resolução da tela

var height = screen.height;



//verifica se a resolução dará uma boa visão do site

if (width <= 799)

document.write("<meta http-equiv='refresh' content='0; url=http://www.webacappellashow.com.br/mobile/index.html'>")

else

document.write("<meta http-equiv='refresh' content='0; url=http://www.webacappellashow.com.br/desktop/index.html'>")




</script>

Este código diz: Se a largura do dispositivo que eu estiver conectando form menor ou igual a 799px redirecione para o url da versão mobile, se não redirecione para a  url da versão desktop.


Sei que existem vários códigos diferentes para o tal espalhados pela internet, mas criei este de forma emergencial até poder estudar os demais.

Caso queira aproveitar este código, basta trocar os trechos em vermelho pelas suas url's.

Você deve estar se perguntando por que eu apenas não criei um arquivo index.html com os códigos e postei apenas o arquivo na raiz do public_html.

Resposta simples: Porque no WebAcappella já vou ter a facilidade da criação do robot.txt e das personalizações feitas com o redirect-310 usadas no htaccess, quanto a criação do mapa do site. 

Contudo publico este meu terceiro projeto na raiz do public_html





ps. Gostaria de lembrar que ao visitar o site pode não condizer com as telas aqui printadas. Isto porque a medida que vou postando sobre este Tema "Site Responsive X Versão Mobile"  vou alterando o projeto de acordo com os artigos. 

Rodapé fixo na base do site

Olá galera do bem!!

Hoje vou passar um truque que é muito útil em sites em que ocupam apenas a tela do monitor, sem que usem a barra de rolagem: "Um rodapé fixo na base do site."


Já vou falar um inconveniente que deve-se presta atenção:

Não crie botões lincando para uma página na internet ou do próprio projeto, pois irá carregar dentro do rodapé. Pode-se criar botões abrindo popup como explicado nesta postagem



Mãos a obra:

O primeiro passo é se criar uma "página" no Webacappella com a mesma largura usada nas outras páginas. Dê um nome para essa página de rodape por exemplo.

Lembre-se a mesma largura das outras páginas do seu projeto. No caso do exemplo 1024px. e a altura desejada de acordo com o tamanho do rodapé. Caso seu rodapé for ter menos de 100px, não se preocupe, configure com 100px pois o WebAcappella não permite que seja menor do que isso. Mas logo em frente vamos contornar esta situação.

Configure também a cor do fundo que você deseja para seu rodapé definindo a cor do plano de fundo da página.

No caso eu configure a cor laranja no exemplo.

Aproveite e pegue o código da cor, pois vai precisar de utilizar mais pra frente.

Dê um nome para sua página no browser. No caso do exemplo será rodape.html, marque para ignorar a página nos mecanismos de busca.

Agora preste atenção, se seu rodapé for ter a altura menor que 100px, Coloque uma marca na altura que você vai utilizar. Neste exemplo o meu rodapé vai ter 50px de altura. Veja na imagem abaixo como fiz a marcação:

Portanto se meu rodapé terá 50px de altura eu só vou trabalhar na parte superior da linha.

Fiz um exemplo de como editei meu rodapé bem simples para terem uma ideia, veja abaixo:

Agora copiem o código abaixo e cole no head das propriedades da página do seu rodapé.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Balance 2004 - SEJA BEM VINDO !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<body style="overflow-y: hidden;overflow-x: hidden;">

Clique em OK

Agora vamos utilizar o seguinte código para configurar nosso rodapé 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
        #rodape /*rodapé do sistema */
        {

            background-color: códigocor;          
            width:100%;
    text-align: center;
            position:fixed;
            bottom:0px;
            left:0px;
        }
    </style>

<form id="form1" runat="server">
    <div id="rodape">
<html>
     <iframe width='largura' height='altura' frameborder='0' src='urlrodape'></iframe>  
</html>
    </div>
</form>


Você vai alterar somente os trechos de vermelho no código da seguinte maneira:

códigocor : Utilize o mesmo código da cor utilizada para o fundo da sua página definida como rodapé. No case deste exemplo foi #f5621d
largura: Utilize o mesmo valor que usou para largura da sua página rodapé. No caso do exemplo foi 1024

altura: Agora você vai usar o valor que você deseja para altura do rodapé, NÃO é o valor configurado para altura da sua página no caso do seu rodapé for menor que 100px. No caso deste exemplo é 50px.

urlrodape: Substitua pela url da página do seu rodapé (Ex: http://www.seudominio.com.br/rodape.html -> se a página se chamar rodape)


O código do exemplo ficou assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
#rodape /*rodapé do sistema */
{

background-color: #f5621d;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>

<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe width='1024px' height='50px' frameborder='0' src='http://www.webacappellashow.com.br/templates/tatuador/rodape.html'></iframe>
</html>
</div>

</form>


Para finalizar na página que você deseja que o rodapé apareça use a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código já alterado.

Publique seu site.

** Em caso de páginas em que apresentam barra de rolagem o rodapé se mantém fixo e a página rola por baixo dele.



Clique abaixo para ver um exemplo on line:

Site Responsivo x Versão Mobile | Qual escolher? | Post 2

O google tem como objetivo entregar para o usuário o melhor conteúdo a partir de onde ele estiver independente do usuário fornecer sua localização.  A um tempo atrás ele mostrava em uma pesquisa quando o site era compatível com dispositivo móvel ou não, portanto agora ele mudou sua logística de forma os sites que não são compatíveis ou não tem uma versão para dispositivos móveis são penalizados.

Para saber se seu site está adequado as exigências do Google para dispositivos móveis clique aqui digite o endereço do seu site e clique em analisar.

Portanto houveram algumas confusões de interpretação sobre sites preparados para dispositivos móveis e sites responsivos. Um site responsivo pode não passar nos testes da google. Veja mais  clicando aqui.


O Webacappella anunciou sua versão responsiva do programa, portanto apesar de próximo do lançamento, ainda não foi lançada. Outro fator é que muita gente ainda não poderá adquirir de imediato até mesmo por motivos econômicos/financeiros.

No entanto não é necessário termos o Webacappella Responsive para que  desenvolvemos um site em versão mobile seguindo as exigências do Google para não ser penalizado.


Alguma exigências do Google são:

• Evitar softwares que não sejam comuns em dispositivos móveis, como Flash

• Usar textos que sejam legíveis sem aumentar o zoom

• Dimensionar o conteúdo no tamanho da tela para que os usuários não precisem rolar horizontalmente nem aplicar zoom

• Posicionar os links afastados o suficiente para que se possa tocá-los com facilidade

Mas o ideal é ir criando o projeto e ir testando no link informado acima para testes.


Alguns mitos surgiram por aí que para ser melhor posicionado no google o site deveria ser responsivo. Então vamos ver o que o Google fala sobre o site não ser penalizado.

1) Sinalize para o Google quando uma página é formatada para dispositivos móveis (ou tem uma página equivalente formatada para dispositivos móveis). Isso ajuda o Google a veicular adequadamente seu conteúdo nos resultados de pesquisa aos usuários

2) Mantenha os recursos rastreáveis. Não use o robots.txt para bloquear o acesso de mecanismos de pesquisa aos arquivos essenciais no seu site que ajudam a processar a página (incluindo anúncios). Se o Googlebot não tiver acesso aos recursos da sua página, como CSS, JavaScript ou imagens, talvez não detectemos que ela foi desenvolvida para exibir e funcionar bem em um navegador para dispositivos móveis. Em outras palavras, podemos não detectar que a página é "compatível com dispositivos móveis" e, portanto, não exibi-la adequadamente aos usuários de dispositivos móveis que realizarem pesquisas

3) Evite erros comuns que frustram os visitantes em dispositivos móveis, como vídeos que não podem ser reproduzidos (por exemplo, a maioria do conteúdo significativo da página em formato de vídeo em Flash). 

fonte: https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/key-points?hl=pt-br


Bom, até agora o Google não menciona em nenhum momento que o site responsivo tem alguma preferência por ter uma versão mobile do site. No entanto tem muita coisa pra vir.

O que ainda não sai da minha cabeça durante todo este estudo é porque o próprio site do Google não seja responsivo. Pois se você redimensionar a tela do seu navegador verá claramente a barra de rolagem horizontal. Entende-se que o próprio Google prefere uma versão mobile do site.

O que entendo que para o Google o que importa é sempre entregar a melhor experiência para o visitante do site independente se é algo adaptável ou específico; ou seja; responsivo ou versão mobile.





Mas então, o que fazer? um site responsivo ou uma versão Mobile do site?

Vamos então analisar as vantagens e desvantagens de cada caso.:



RESPONSIVO:


ALGUMAS VANTAGENS

• Existem várias dimensões de tela para tablets, notebooks, smartphones e até notebooks , desktop e televisores. Com o responsivo o site vai se adequar automaticamente para cada uma delas.

• Você constrói e dá manutenção em um site só.

• Consistência: O visitante do site terá o mesmo conteúdo tanto visitando o site pelo desktop ou por um dispositivo móvel. Todo o conteúdo será mostrado independente do dispositivo que o visitante esteja usando.

• Possuir apenas uma url que facilita o processo de rastreamento através das ferramentas de analytics.

• O site já está previamente preparado no caso de um novo dispositivo surgir.

ALGUMAS DESVANTAGENS

• Lentidão: Dependendo da forma que é construído pode ocasionar demora ao carregar, algo que o Google não gosta. Pois para o Google o usuário de dispositivos móveis tem que ter a mesma sensação de estar navegando pelo desktop.

• Complexabilidade: Um site responsivo, funcional, rápido exige muito mais complexabilidade para ser construído, requer mais scripts e códigos. Requer mais planejamento e preparo; o que pode se tornar mais demorado criar uma versão responsiva do que um site para desktop com sua versão mobile. Como vimos no artigo anterior; alguns sites pareciam ter uma versão mobile e uma versão desktop devido o fato de imagens mudarem de um dispositivo para outro. No entanto; ha como fazer através de códigos que essa mudança ocorra dependendo do dispositivo usado. Como disse, é mais trabalhoso. Sem contar que gastará mais tempo com testes pela ferramenta do Google.

• Como o conteúdo não é totalmente otimizado para dispositivos móveis, às vezes, os sites responsivos apresentam grandes desafios para a navegação, tanto do ponto de vista dos desenvolvedores (arquitetos de informação, designers de interfaces e programadores) quanto do ponto de vista dos usuários (que terão grandes expectativas em relação à interface)

VERSÃO MOBILE


ALGUMAS VANTAGENS

• Por ser projetado focando justamente para ser usado em dispositivos móveis, possui muito menos códigos, scripts, CSS, imagens  e arquivos html. Você pode eliminar por exemplo videos em flash que se usa no site pra desktop. Sendo na versão desktop tem , mas no mobile não tem. Desta forma se torna muito mais fácil de se usar e entender.

•  Navegação customizada: Fica muito mais leve, pois é construído focado no que o usuário do dispositivo móvel procura. Mostrando apenas o conteúdo necessário, removendo o que é supérfluo; ou seja, qualquer coisa que possa ser administrada através de um CMS, como documentos, imagens extras e elementos que são carregados através de CSS ou JS. 

• Muito mais rápido de se carregarem do que um site responsivo. Esta deve ser a principal razão de gigantes como Facebook, Submarino preferirem uma versão mobile. Imagine um site como o Submarino se fosse um site responsivo quanto tempo gastaria  para carregar. Os visitantes desanimariam de entrar e consequentemente o site perderia vendas. 

• Muitas das vezes é  mais rápido desenvolver site  em duas versões do que um site responsivo o qual tem que se preocupar com o ajustes dos elementos dentro das exigências do Google. Pois não é por ser responsivo que o site passará no teste do Google. 

• Versão mobiles é possível implementar componentes de funcionalidades específicas para Smartfones, como ligações telefônicas com apenas um toque, e até mesmo ferramentas de  geolocalização.

ALGUMAS DESVANTAGENS

• Múltiplas urls, o que se não for bem trabalhado pode causar complicações para SEO.  

• O compartilhamento nas redes sociais também se torna um problema devido as ferramentas Open Graph Facebook serem inseridas nas propriedades do site. O que pode ser contornado se não publicar o site para desktop no public_html (veremos sobre isto mais na frente) 

• A criação de um site  mobile requer que o conteúdo seja substituído, modificado e atualizado em alguns locais diferentes. Sendo que se usar uma ferramenta administrativa de conteúdo no site, possa ser que tenha que atualizar em dois locais e ou ate mesmo usar dois sistemas de conteúdo em pastas diferentes na hospedagem. 

•  Na medida que mais dispositivos móveis aparecem, haverá a necessidade de estar atento para o design do site nestes lançamentos. Um site mobile que parece ótimo em um aparelho e  horrível em outro – Exigindo atualização, reprogramação ou a construção de uma 3ª versão desse site. 

• A versão mobile, geralmente, é um pouco diferente (tanto em termos visuais quanto em termos funcionais) da versão para desktop. É preciso investigar se os usuários esperam por uma experiência universal e consistente (e o quanto eles podem se sentir afetados, caso essa experiência uniforme não seja entregue).

E agora já se decidiu?


Vamos ajudar você: 


Faça uma lista o de tudo que terá no seu projeto. Depois reveja a lista marcando na frente de cada item com um (x) se aquele item é realmente necessário na versão mobile levando em conta as complicações da mesma na versão mobile. 
Se mais da metade da lista estiver marcada com um (x) é um momento em pensar em ter um site responsivo; caso contrário opte pela versão mobile sem pensar duas vezes. 

Ao fazer essa avaliação não esqueça do Foco. Imagine você no lugar do internauta e o que você realmente precisaria ver nesse site estando pelo celular. Como disse na postagem anterior, realmente o crescimento de navegação pelo celular aumenta a cada dia que passa. Mas é visível aos olhos que a maioria está em bate papo, sites de relacionamento, lendo matérias em blogs e afins. Sem contar utilizando aplicativos e não visitando websites.



Tem um artigo na  LocalWeb que achei interessante e vou deixar o link aqui para quem interessar. http://blog.locaweb.com.br/produtos/sitemobile/



Referente a SEO, falam-se por aí que deverá ter duas campanhas no caso do mobile. 

Mas... pensando bem; muitos  fazem a versão desktop na url principal e redirecionam para uma pasta mobile caso seja navegado pelo dispositivo móvel. E se na raiz da hospedagem tivermos apenas o index o qual redireciona para sua devida pasta dependendo da  resolução? Como isso será tratado? 

Um ponto já será resolvido, as Ferramentas Open Graph Facebook.

A vantagem do WebacappellaShow é que não temos nada a perder de fazer este teste.


Então faremos o seguinte, vamos pensar diferente, vamos criar um site pro WebAcappellashow em 3 maneiras, cada qual com sua pasta e utilizar no public_html apenas o index que vai redirecionar o internauta para a pasta respectiva ao dispositivo ele estiver acessando. 

• Desktop
• Mobile
• Responsivo

A pasta responsivo será mais para testarmos pelas ferramentas do Google e compararmos o trabalho que iremos ter; além de passar dicas e plugins para sites com o objetivo de serem responsivos.


E mais, na criação destas versões utilizaremos tanto sistemas de administração de conteúdo, como também a loja Prestashop com Webacappella


Mas não dá pra fazer tudo de uma vez e em um dia só né galera. Quem dera eu pudesse ficar por conta do WebacappellaShow. Mas é fato e visível aos olhos de todos que: Tento manter o blog o mais frequente possível mesmo com minhas responsabilidades diárias.

Mas para dar uma alavancada, criei apenas o index com a logo e um botão redirecionando para nosso blog.  Não configurei nada no robot.txt liberando totalmente o Bot do Google, e não é que ele passou no teste?

.

Pois é isso aê turma do bem!!! Acompanhe o blog. 


E gostaria de passar um aviso: Atualizações, melhoras e alguma errata em qualquer postagem do blog; só será divulgado em nossa Fan page. Então curta para ficar por dentro..Abraços a todos e uma boa noite de sono.

Formulário simples com anexo no site WebAcappella

Fala galera do bem!

Como sabem o recurso de formulário no WebAcappella não nos permite anexar um arquivo no formulário. Vamos então passar aqui uma forma muito tranquila de por um formulário com envio de anexo em nosso site.

Neste formulário de hoje estarão disponíveis os campos, Nome, Telefone, E-mail, Mensagem e o botão para anexar um arquivo.


Você vai precisar de baixar alguns arquivos, clique aqui para baixar o pacote compactado.

Vai precisar também editar os arquivos com um editor de texto. Sugiro o NOTEPAD++; Para baixá-lo gratuitamente clique aqui.


Descompacte o arquivo compactado e agora vamos editar alguns arquivos dentro da afim de configurar o formulário a nosso gosto:


Antes de tudo vamos ter conhecimento de algumas referências sobre os campos:

field_0 = o que se refere ao campo Nome
field_1 = o que se refere ao campo Telefone
field_2= o que se refere ao campo e-mail
field_3= o que se refere ao campo Mensagem
field_4= o que se refere ao campo anexo



DEFININDO OS TÍTULOS DO CAMPO

Edite o arquivo form.php

Linha 30 , substitua o trecho em vermelho pelo texto de sua preferência:

<label class='form_field'>Nome:</label> <label class='form_required' >*</label> </div>

Linha 38 , substitua o trecho em vermelho pelo texto de sua preferência:

<label class='form_field'>Telefone:</label> <label class='form_required' >*</label> </div>

Linha 46, substitua o trecho em vermelho pelo texto de sua preferência:

abel class='form_field'>e-mail:</label> <label class='form_required' >*</label> </div>

Linha 54, substitua o trecho em vermelho pelo texto de sua preferência:

<label class='form_field'>Mensagem:</label> <label class='form_required' >&nbsp;</label> </div>

Linha 63, substitua o trecho em vermelho pelo texto de sua preferência:

<label class='form_field'>Anexo:</label> <label class='form_required' >*</label> </div

Linha 76, substitua o trecho em vermelho pelo texto de sua preferência:

<input type='submit' value='Enviar' class='form_button'>

Linha 79, substitua o trecho em vermelho pelo texto de sua preferência:

 <label class='form_error_title'>Por favor, verifique os campos obrigatórios</label>



** ATENÇÃO : observe o tipo de campo, para você não titular o campo e-mail por exemplo como sua mensagem.


Caso tenha conhecimento poderá alterar outros detalhes como tipo da fonte, cor da fonte, tamanho , cor de campos editando o arquivo form.php







DEFININDO O E-MAIL QUE VAI RECEBER O E-MAIL DOS DADOS PREENCHIDO NO FORMULÁRIO

Edite o arquivo form.lib.php

LINHA 2: Troque o trecho de vermelho pelo e-mail de sua preferência

define( 'PHPFMG_TO' , 'contato@webacappellashow.com.br' );




DEFININDO O LINK DE CONFIRMAÇÃO APÓS O FORMULÁRIO SER ENVIADO


Crie uma página no WebAcappella Show e nomeie a mesma com o nome de sua preferência a qual será redirecionada após o formulário ser enviado.

No Webacappella na opção PAGINAS / MATRIZES>>ADICIONAR UMA NOVA PÁGINA crie uma página

No exemplo dei o nome de referência como "confirmaformulario", depois editei a página a meu gosto.

Na página editada com a opção do Webacappella PÁGINA/MATRIZES>> PROPRIEDADES DA PÁGINA clique em SEO  e dê um nome da página para o navegador. No caso do exemplo é "confirmaemail"

Agora continuando a editar o arquivo form.lib.php,na linha 4 substitua o trecho em vermelho pela url da sua página de confirmação criada.


define( 'PHPFMG_REDIRECT', 'http://www.webacappellashow.com.br/templates/lavanderia/confirmaemail.html' );





DEFININDO O ASSUNDO DO E-MAIL ENVIADO PELO FORMULÁRIO


Edite  o arquivo form.lib.php na linha 23 substitua o techo em vermelho abaixo pelo seu.


define( 'PHPFMG_SUBJECT' , "Formulário enviado via Site " );




DEFININDO QUAIS CAMPOS SERÃO DE PREENCHIMENTO OBRIGATÓRIO



Os campos que já vêem como requeridos para serem preenchidos são Nome,Telefon,e-mail,anexo. O campo de mensagem não está configurado como requerido.

Para alterar estas situações edite o arquivo form.lib.php edite o seguinte trecho do arquivo (linha 121 a linha 126)

$GLOBALS['form_mail']['field_0'] = array( "name" => "field_0", "text" => "Nome",  "type" => "sender's name", "instruction" => "", "required" => "Required" ) ;
$GLOBALS['form_mail']['field_1'] = array( "name" => "field_1", "text" => "Telefone",  "type" => "text", "instruction" => "", "required" => "Required" ) ;
$GLOBALS['form_mail']['field_2'] = array( "name" => "field_2", "text" => "e-mail:",  "type" => "generic email", "instruction" => "", "required" => "Required" ) ;
$GLOBALS['form_mail']['field_3'] = array( "name" => "field_3", "text" => "Mensagem:",  "type" => "textarea", "instruction" => "", "required" => "" ) ;
$GLOBALS['form_mail']['field_4'] = array( "name" => "field_4", "text" => "Anexo",  "type" => "attachment", "instruction" => "", "required" => "Required" ) ;

Exemplo: Se você quiser configurar o campo Mensagem como requerido basta ir na linha que se refere ao field_3 e inserir a palavra Required entre as aspas.

A linha está assim:
$GLOBALS['form_mail']['field_3'] = array( "name" => "field_3", "text" => "Mensagem:",  "type" => "textarea", "instruction" => "", "required" => "" ) ;

E ficará assim:
$GLOBALS['form_mail']['field_3'] = array( "name" => "field_3", "text" => "Mensagem:",  "type" => "textarea", "instruction" => "", "required" => "Required" ) ;



Caso quiser remover o requerido de algum campo basta fazer ao contrário. Remover o Required da linha.

Exemplo: Vamos remover o requerido do campo anexo
:
A linha está assim:
$GLOBALS['form_mail']['field_4'] = array( "name" => "field_4", "text" => "Anexo",  "type" => "attachment", "instruction" => "", "required" => "Required" ) ;

E ficará assim:
$GLOBALS['form_mail']['field_4'] = array( "name" => "field_4", "text" => "Anexo",  "type" => "attachment", "instruction" => "", "required" => "" ) ;


APLICANDO NO WEBACAPPELLA


Depois de feita as alterações devidas nos arquivos conforme acima, poste os arquivos na sua hospedagem, eu sempre costumo criar algumas pastas referente a cada opção para facilitar alguma posterior manutenção. No meu caso eu criei uma pasta chamada "formanexo" e joguei os arquivos lá pra dentro.


Já no Webacappella é simples. Ná página onde vai conter o formulário utilize a opção INSERIR>>FRAME e no último campo informe a url completa do arquivo FORM.PHP

Ajuste o tamanho do frame e prontinho..seu formulário está no seu site.