Java PHP Javascript C/C++

Como redirecionar seu site para sua versão móvel Javascript

     Um web site pode exibir uma mesma informação configurando o conteúdo da página adequando a dimensão da tela ao browser de internet, tipo de equipamento eletrônico - iPads, Tablets, iPods, iPhones, notebooks e microcomputadores desktop - e quanto ao sistema operacional através da utilização do javascript.

     Combinando com scripts CSS e com o tag html STYLE podemos configurar os equipamentos mobile para esta alternância de apresentação gráfica através das funções de configuração como encontrado na descrição do webkit padrão utilizado nos browsers de internet para ipads, ipods e iphones da Apple que tem como navegador o browser Safari e Mozilla para os browser do tipo Firefox, Netscape. Outros distribuidores de bibliotecas javascript a exemplo do Jquery, Nodejs, Dojo entre outros apresentam outras opções de configuração entre scripts com funções variadas úteis para o desenvolvimento de uma webpage HTML com configurações de telas e tipo de eletrônico móvel. Browsers como o Internet Explorer, Google Chrome e Opera utilizam geralmente o CSS e o tag html STYLE com o javascript incluindo o suporte a estes programas em javascript mencionadas anteriormente.

    A seguir segue uma exemplificação que detecta por tipo de equipamento móvel através da expressão navigator.userAgent.match que inclui termos de definição do API HTML 5. Se não for valor nulo inicia a variável como true/verdadeiro, o termo do programa if é selecionado utilizando a expressão window.location.href invoca uma página de internet desejada .

<script type="text/javascript"> equipmovel(); function equipmovel() { var iPad_ = navigator.userAgent.match(/iPad/i) != null; var iPhone_ = navigator.userAgent.match(/iPhone/i) != null; var iPod_ = navigator.userAgent.match(/iPod/i) != null; var Android_ = navigator.userAgent.match(/Android/i) != null; var webOS_ = navigator.userAgent.match(/webOS/i) != null; var IEMobile_ = navigator.userAgent.match(/IEMobile/i) != null; if( iPad_ ) { window.location.href='http://www.acct.com.br/mobile/ipad/index.html'; } else if( iPhone_){ window.location.href='http://www.acct.com.br/mobile/iphone/index.html'; } else if (iPod_ ){ window.location.href='http://www.acct.com.br/mobile/ipod/index.html'; } else if (Android_){ window.location.href='http://www.acct.com.br/mobile/android/index.html'; } else if( webOS_ ){ window.location.href='http://www.acct.com.br/mobile/webos/index.html'; } else if(IEMobile_){ window.location.href='http://www.acct.com.br/mobile/iemobile/index.html'; } } </script>


    Parte da exibição da homepage utilizando recursos ofertados pelos browsers de internet para os eletrônicos móveis dependem de uma configuração gráfica que deverá estar compatível e apresentada em um formato genérico. Estes recursos de progamação estão acessíveis através do Javascript e do CSS aonde distribuidores dos browsers para internet Safari, Mozilla, Firefox, Netscape, Opera entre outros implementam suporte oferecendo uma distinta opção de configuração gráfica entre outras funções de importância associadas ao HTML 5 e a sua API.

    A seção a seguir ilustra com as principais opções uma configuração de uma página de internet utilizando o CSS que configura as margens, menu, texto e imagem para se adaptarem dinamicamente a tela do equipamento eletrônico que esta sendo utilizada.

@charset "utf-8"; /* CSS Document */ body{ background:#FFFFFF; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0; } #header{ margin:0 auto; } .naveg{ font-size:14px; background:#000000; -moz-border-bottom-left-radius:6px; -webkit-border-bottom-left-radius:6px; border-bottom-left-radius:6px; -moz-border-bottom-right-radius:6px; -webkit-border-bottom-right-radius:6px; border-bottom-right-radius:6px; margin:0 5px; color:#000000; } .logo{ text-align:center; margin:0; padding:5px; } .logo imagem{ border:none; max-width:100%; } .campotexto area{ font-family:Arial, Helvetica, sans-serif; background:#FFFFFF; border:1px solid #ddd; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100%; padding 10px; }

    O tag body e header tem a mesma representatividade encontrada no HTML o primeiro configura a página sem margem e padding a área da tela inteira será utilizada para exibição da página de internet, as referências -moz e -webkit configuram aspectos gráficos de bordas que fornecem ao elemento quadrado/retângulo com uma cor de fundo um aspecto de um botão dispensando a utilização de arquivos de imagem tem utilidade também na montagem do menu e áreas de texto com links para outras páginas do website. Na expressão .logo imagem a propriedade max-width:100% fornecerá uma ampliação e redução do arquivo de imagem .jpg por exemplo um arranjo dinâmico quando o tamanho da área de exibição for modificada.

    O link a seguir ilustra um exemplo de uma homepage para eletrônicos móveis homepage móvel que faz uso dos recursos Javascript, CSS ilustrados anteriormente.