31/08/2018

Rodapé fixo na base do site




TEMA: Códigos | Rodapé
ARTIGO: Atualizado em 30/08/2018
VERSÃO: WA RC  |  WA 4

Olá galera do bem!! Vamos postar hoje uma gambiarra que funciona..hehehe

Hoje vou passar um truque que é muito útil para quem quer por  "Um rodapé fixo na base do site.". Este rodapé fica fixo enquanto o site rola por baixo dele.


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

Não crie botões redirecionando para  uma página na internet ou do próprio projeto, pois irá carregar dentro do rodapé; a não ser que defina para abri em uma nova guia.



Mãos a obra:

NO WEBACAPPELLA 4

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. No caso deste post estamos mostrando somente para a versão desketop do site. Para quem está usando o WA4 criando sites nas versões desktop, tablet e celular terá que criar a página rodapé para cada versão. (Para saber mais sobre várias versões do site usando WA4 clique aqui)




Lembre-se de usar 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 4  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 preta de código #000000 no exemplo.



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é.

<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 src="urlrodape" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="altura" width="largura" allowfullscreen></iframe>

</html>


</div>






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 #000000
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:


<style type="text/css">
#rodape /*rodapé do sistema */
{
background-color: #000000;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe src="http://www.webacappellashow.com.br/wasevents/wa4/rodape.html" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="50px" width="100%" allowfullscreen></iframe>
</html>
</div>


Agora crie uma matriz, pode nomear como "rodapé" para facilitar depois. E lá você usa a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código.



Agora nas páginas que deseja utilizar o rodapé fixo basta ir nas propriedades e Escolher o rodapé  que criou como matriz.




Clique abaixo para ver um exemplo on line:




NO WEBACAPPELLA RC (WA5 - RESPONSIVE)

O primeiro passo é se criar uma "página" no Webacappella . Dê um nome para essa página de rodape por exemplo.






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 preta de código #000000 no exemplo.





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 copiem o código abaixo e cole no head das propriedades da página do seu rodapé.

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




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 src="urlrodape" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="altura" width="100%" allowfullscreen></iframe>
</html>
</div>



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 #000000


altura: Agora você vai usar o valor que você deseja para altura do rodapé,  Já no WARC você terá que ir ajustando o valor da altura ao publicar o site. Tipo, você ajusta, publica e ve se ficou bom, e assim por diante.

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:


<style type="text/css">
#rodape /*rodapé do sistema */
{
background-color: #000000;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe src="http://www.webacappellashow.com.br/wasevents/warc/rodape.html" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" height="50" width="100%" allowfullscreen></iframe>
</html>
</div>


Agora crie uma subpage, pode nomear como "rodapé" para facilitar depois. E lá você usa a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código.



Agora nas páginas que deseja utilizar o rodapé fixo basta inserir um box no fim da página e adicionar uma subpage que obviamente será a que você fez para o rodapé.



Maravilha. agora só publicar.


Clique abaixo para ver um exemplo on line:





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"


Related Posts Plugin for WordPress, Blogger...