PC Toledo

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?

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,

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

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.

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.

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.

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.

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.

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.

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.

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;

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

PC Toledo

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone