Site adaptado para abrir em smartphone

cjp · Mensagem por **cjp** » 09 Ago 2014 02:42

Toledo, e demais colegas,

Gostaria de saber se é muito complicado adaptar um site para abrir em smartphone, especialmente em Iphone.

Uso HTML e PHP, principalmente este. Teria que fazer muitas modificações para adaptá-lo para Iphone?

Mensagem por **Toledo** » 09 Ago 2014 11:18

Olá Inácio, não digo que seja complicado, mas sim é muito trabalhoso.

Primeiro você terá que ter duas (ou três se for contar Tablet) versões do seu site, uma para o modo normal e outra para mobile.

Para você entender isto, veja as duas versões que o fórum tem:

Fórum modo mobile (celular)

Fórum modo normal

Tendo as duas versões, ai você tem que colocar uma função nos arquivos PHP do seu site para detectar se o acesso está sendo por um computador ou por um celular (ou tablet). Se você entrar no google e buscar por detectar mobile PHP, vai encontrar vários exemplos de código.

cjp escreveu:Toledo, e demais colegas,

Evite postar mensagens exclusivas, isto pode inibir a participação de outros usuários do fórum.

Abraços,

Mensagem por **sygecom** » 09 Ago 2014 23:19

Inacio,
Procure também por CSS Responsive, nos usamos isso hoje com PHP e roda bem em qualquer smarphone

Mensagem por **rochinha** » 01 Set 2014 00:59

Amiguinhos,

Se quiserem façam uma visita ao meu website pelos seus smartphones e me dêem feedback. Em algumas versões do Android as imagens não aparecem, mas é problema do aparelho com Android.

www.5volution.com.br

Neste caso fiz dois sites, uma para o desktop, totalmente feito no Edit do DOS e algumas vezes no Notepad.

O pulo do gato esta em voce descobrir qual o tipo de aparelho(device) esta acessando o seu site e então direcioná-lo:

Código: Selecionar todos

<head>

...

        <!-- Begin iPhone/iPad detection code -->
        <script type="text/javascript">
            //if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) 
            if (navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|Android.*Mobile|webOS|Windows CE|IEMobile|Opera Mini|Opera Mobi|HTC|LG-|LGE|SAMSUNG|Samsung|SEC-SGH|Symbian|Nokia|PlayStation|PLAYSTATION|Nintendo DSi)/i))
               { document.location = "mobile/"; }
        </script>
        <!-- End iPhone/iPad detection code -->
	</head>

...

</head>

Neste caso o site para mobile esta numa sub-pasta na raiz do site.

Mensagem por **Jairo Maia** » 01 Set 2014 16:25

Rochinha,

Usando um telefone um pouco antigo, a figura na primeira página realmente não apareceu, mas as demais, em TELAS por exemplo, apareceram todas normalmente.

Fica a dica.

Mensagem por **rochinha** » 02 Set 2014 16:32

Amiguinho,

É problema de incompatibilidade entre a versão do Android e imagens. Tenho um MPEyo Pad com Android 2.3 e as imagens não aparecem nele. Nos meus smartphones Samsung/LG com Android 2.4, aparecem super rapido.

O interessante no script é a rapidez em direcionar para cada tipo de device. Fiz testes até com emuladores de devices e os direcionamentos ficam lindos.

cjp · Mensagem por **cjp** » 17 Out 2014 15:26

Demorei para responder porque estava estudando a questão do CSS Responsive. Confesso que não entendi muito bem.

Mas a questão é que eu não quero que o site abra nos dois modos, quero ele apenas no Iphone (nem tablet, nem Android, nem PC, só o Iphone mesmo). Claro que não estou falando de todo o site, mas apenas de algumas páginas específicas, que eu acesso diretamente (sem passar pela página principal do site). Então, bastaria fazer o site adaptado pro Iphone.

A questão é que a tela do Iphone é muito pequena, especialmente pra mim, que já não enxergo lá essas coisas. Queria que os botões e o texto a ser digitado aparecesse em letras grandes.

Vejam, por exemplo, este PHP:

Código: Selecionar todos

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Recado</title>
</head>
<?php
$arec="teste";
$aDst="A";
?>
<body style="color: rgb(0, 0, 0); background-color: rgb(255, 204, 153);"
 alink="#000099" link="#000099" vlink="#990099">
 <form action="criarec2.php?arec=".$arec." method="post"> <input type="hidden">

 <left>
 <table align="left" border="0" cellpadding="0" cellspacing="0"
 width="89%" style='height:150px;'>
 <form action="filtrar.php" method="post">
 <label>Escolha o destinatário: </label>
 <BR>
 <select name="aDst" id="aDst" style='height:120px;'>
<option value="Y">Camylla</option>
<option value="G">Rodrigo</option>
<option value="U">Chaiane</option>
<option value="M">Camila</option>
<option value="S">Ketlyn</option>
<option value="K">Mari2</option>
<option value="X">Roseli</option>
<option value="N">Mariana</option>
<option value="Z">Ana Paula</option>
<option value="L">Lara</option>
  <tbody>
   <tr>
    <td>Digite o recado:

    <input size="280" name="recado" style='height:180px;'></td>
   </tr>
    <td> <input size="150" name="submit" value=" Enviar " type="submit">
    <input size="150" name="reset" value=" Limpar " type="reset"></td>
   </tr>
  </tbody>
 </table>
 </left>
</form>
</body>
</html>

Por mais que eu aumente o tamanho, a caixa de diálogo em si até aumenta (já está até grande demais), mas o texto digitado não.

Além disso, eu precisaria diminuir a extensão da caixa de diálogo, pois ela está ultrapassando a tela na lateral direita.

Também os botões Enviar e Limpar, não consigo aumentar de tamanho.

Mensagem por **rochinha** » 17 Out 2014 16:09

Amiguinho,

Em primeiro lugar é necessário entender como as telas apresentadas nestes devices se apresentam. Olhe telas que tenham controles como combos, checkboxes, botões e editboxes, vejam que raramente são desenhadas lado-a-lado, geralmente os controles estão verticalmente posicionados.

Se voce já tem pelo menos o link do layout mais atualizado coloque-o aqui e na medida do possível nós poderemos usá-lo.

cjp · Mensagem por **cjp** » 17 Out 2014 16:27

Ah, sim, o link desta página cujo código eu postei é www.inaciocarvalho.com.br/recado.php.

Acresci um nome na lista (Inacio), para vocês testarem à vontade. Peço que evitem usar os demais usuários.

Mensagem por **rochinha** » 17 Out 2014 16:47

Amiguinho,

Esqueça este trecho pois estava escrevendo em outro post, náo percebi e postei aqui.

Se voce já tem pelo menos o link do layout mais atualizado coloque-o aqui e na medida do possível nós poderemos usá-lo.

A mensagem que eu estava editando é este:

Em primeiro lugar é necessário entender como as telas apresentadas nestes devices se manifestam. Olhe telas que tenham controles como combos, checkboxes, botões e editboxes, vejam que raramente são desenhadas lado-a-lado, geralmente os controles estão verticalmente posicionados.

Veja que as dimensões não precisam ser fixas, os widths e heigths podem conter %, onde o valor define o percentual de ocupação do espaço dentro de um elemento como tabela ou a própria página. Neste caso width=100% ou width=60% definem o percentual da lagura do elemento, não importando a lagura do device.

cjp · Mensagem por **cjp** » 17 Out 2014 18:46

Já tentei de várias formas, mas não consegui:

1) Aumentar o tamanho dos botões Enviar e Limpar;

2) Aumentar o tamanho do texto que vai nas caixas de diálogo;

Mereu · Mensagem por **Mereu** » 12 Mai 2015 10:26

Use a biblioteca de CSS Bootstrap, simples e muito boa.