Clipper On Line • Ver Tópico - Site adaptado para abrir em smartphone

Site adaptado para abrir em smartphone

Discussão sobre outras linguagens de programação.

Moderador: Moderadores

 

Site adaptado para abrir em smartphone

Mensagempor 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?
Inacio de Carvalho Neto
cjp
Usuário Nível 6

Usuário Nível 6
 
Mensagens: 1527
Data de registro: 19 Nov 2010 21:29
Cidade/Estado: paraná
Curtiu: 10 vezes
Mens.Curtidas: 20 vezes

Site adaptado para abrir em smartphone

Mensagempor 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,
Toledo - Clipper On Line
toledo@pctoledo.com.br
Harbour 3.2/MiniGui/HwGui
Faça uma doação para o fórum, clique neste link: http://www.pctoledo.com.br/doacao
Avatar de usuário

Toledo
Administrador

Administrador
 
Mensagens: 3038
Data de registro: 22 Jul 2003 18:39
Cidade/Estado: Araçatuba - SP
Curtiu: 263 vezes
Mens.Curtidas: 258 vezes

Site adaptado para abrir em smartphone

Mensagempor 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
Leonardo Machado
xHarbour.org + Hwgui + PostgreSql
leonardodemachado@hotmail.com

Faça você também sua doação esse fórum é uma lenda viva: http://www.pctoledo.com.br/doacao
Avatar de usuário

sygecom
Usuário Nível 7

Usuário Nível 7
 
Mensagens: 7006
Data de registro: 21 Jul 2006 10:12
Cidade/Estado: Alvorada-RS
Curtiu: 1 vez
Mens.Curtidas: 130 vezes

Site adaptado para abrir em smartphone

Mensagempor 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:
<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.
OPS! LINK QUEBRADO? Veja ESTE TOPICO antes e caso não encontre ENVIE seu email com link do tópico para fivolution@hotmail.com. Agradecido.

@braços : ? )

A justiça divina tarda mas não falha, enquanto que a justiça dos homens falha porque tarda.
Avatar de usuário

rochinha
Membro Master

Membro Master
 
Mensagens: 4538
Data de registro: 18 Ago 2003 20:43
Cidade/Estado: São Paulo - Brasil
Curtiu: 800 vezes
Mens.Curtidas: 242 vezes

Site adaptado para abrir em smartphone

Mensagempor 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.
Abraços, Jairo
Harbour / Clipper 5.2e - Blinker 7
(Não respondo dúvidas por MP ou E-mail. Por favor, não encaminhe via mensagem privada ou e-mail, dúvidas que podem ser compartilhadas com todos no fórum)
Avatar de usuário

Jairo Maia
Colaborador

Colaborador
 
Mensagens: 2733
Data de registro: 16 Ago 2010 13:46
Cidade/Estado: Campinas-SP
Curtiu: 371 vezes
Mens.Curtidas: 305 vezes

Site adaptado para abrir em smartphone

Mensagempor 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.
OPS! LINK QUEBRADO? Veja ESTE TOPICO antes e caso não encontre ENVIE seu email com link do tópico para fivolution@hotmail.com. Agradecido.

@braços : ? )

A justiça divina tarda mas não falha, enquanto que a justiça dos homens falha porque tarda.
Avatar de usuário

rochinha
Membro Master

Membro Master
 
Mensagens: 4538
Data de registro: 18 Ago 2003 20:43
Cidade/Estado: São Paulo - Brasil
Curtiu: 800 vezes
Mens.Curtidas: 242 vezes

Site adaptado para abrir em smartphone

Mensagempor 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:

<!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.
Inacio de Carvalho Neto
cjp
Usuário Nível 6

Usuário Nível 6
 
Mensagens: 1527
Data de registro: 19 Nov 2010 21:29
Cidade/Estado: paraná
Curtiu: 10 vezes
Mens.Curtidas: 20 vezes

Site adaptado para abrir em smartphone

Mensagempor 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.
OPS! LINK QUEBRADO? Veja ESTE TOPICO antes e caso não encontre ENVIE seu email com link do tópico para fivolution@hotmail.com. Agradecido.

@braços : ? )

A justiça divina tarda mas não falha, enquanto que a justiça dos homens falha porque tarda.
Avatar de usuário

rochinha
Membro Master

Membro Master
 
Mensagens: 4538
Data de registro: 18 Ago 2003 20:43
Cidade/Estado: São Paulo - Brasil
Curtiu: 800 vezes
Mens.Curtidas: 242 vezes

Site adaptado para abrir em smartphone

Mensagempor 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.
Inacio de Carvalho Neto
cjp
Usuário Nível 6

Usuário Nível 6
 
Mensagens: 1527
Data de registro: 19 Nov 2010 21:29
Cidade/Estado: paraná
Curtiu: 10 vezes
Mens.Curtidas: 20 vezes

Site adaptado para abrir em smartphone

Mensagempor 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.
OPS! LINK QUEBRADO? Veja ESTE TOPICO antes e caso não encontre ENVIE seu email com link do tópico para fivolution@hotmail.com. Agradecido.

@braços : ? )

A justiça divina tarda mas não falha, enquanto que a justiça dos homens falha porque tarda.
Avatar de usuário

rochinha
Membro Master

Membro Master
 
Mensagens: 4538
Data de registro: 18 Ago 2003 20:43
Cidade/Estado: São Paulo - Brasil
Curtiu: 800 vezes
Mens.Curtidas: 242 vezes

Site adaptado para abrir em smartphone

Mensagempor 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;
Inacio de Carvalho Neto
cjp
Usuário Nível 6

Usuário Nível 6
 
Mensagens: 1527
Data de registro: 19 Nov 2010 21:29
Cidade/Estado: paraná
Curtiu: 10 vezes
Mens.Curtidas: 20 vezes

Site adaptado para abrir em smartphone

Mensagempor Mereu » 12 Mai 2015 10:26

Use a biblioteca de CSS Bootstrap, simples e muito boa.
Mereu
Usuário Nível 1

Usuário Nível 1
 
Mensagens: 1
Data de registro: 12 Mai 2015 10:06
Cidade/Estado: Botucatu/SP
Curtiu: 0 vez
Mens.Curtidas: 0 vez




Retornar para Outras linguagens de programação

Quem está online

Usuários vendo este fórum: Nenhum usuário registrado online e 11 visitantes


Ola Amigo, espero que meu site e forum tem lhe beneficiado, com exemplos e dicas de programacao.
Entao divulgue o link da Doacao abaixo para seus amigos e redes sociais ou faça uma doacao para o site forum...
MUITO OBRIGADO PELA SUA DOACAO!
Faça uma doação para o forum
cron
v
Olá visitante, seja bem-vindo ao Fórum Clipper On Line!
Efetue o seu login ou faça o seu Registro