Ir para conteúdo

Recommended Posts

Olá,

Depois de muito pesquisar, acabei fazendo minha HP com um Iframe.

Conheço um pouco de Html e só. Já tentei fuçar no PHP,  com o famoso "Include", mas acabei desistindo.

Tenho muitas páginas e o Menu de um lado facilita o acesso do outro lado.

Meu site é composto de uma página "index.html" que fica à esquerda da tela e, à direita, ficam os conteúdos, de acordo com que o usuário clica no Menu.

Nos desktops, o site funciona bem.

Nos Smartphones, a aparência é bem razoável e é mais ou menos assim :

 

Smartphone-1.thumb.jpg.9e6122f70cd5926bf8c241a66dc06e2b.jpg

 

 

 

================================



Só que há pouco tempo, li que o Google anunciou que vai dar prioridade de indexação às páginas adaptadas a dispositivos móveis.

Muito bem. Coloquei a meta tag na Head da index.html :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 maximum-scale=1.0">

 

Aí, começaram os problemas. O site ficou assim :

 

Smartphone-Viewport.thumb.jpg.687c53b927bc372cdfddc240cdf8f7b6.jpg



A mesma Meta Tag também foi colocada em todos os conteúdos que ficam à direita, mas ... não resolvem os problemas.

Poderiam ajudar?

Agradeço antecipadamente.

Jeff


 

Compartilhar este post


Link para o post
Compartilhar em outros sites
21 horas atrás, Jeff123 disse:

Depois de muito pesquisar, acabei fazendo minha HP com um Iframe.

 Por que iframe? Sinceramente eu já tentei usar iframes, mas não tive uma boa experiência em dispositivos mobiles.

~

Detesto trabalhar com sites responsivos, mas não vai ser um meta tag que vai deixar o layout responsivo.

21 horas atrás, Jeff123 disse:

Só que há pouco tempo, li que o Google anunciou que vai dar prioridade de indexação às páginas adaptadas a dispositivos móveis.

Isso já vem sendo falado e modificado desde 2015, se eu não me engano.

Os sites responsivos ficam na frente em um tipo de "ranking" do Google, isso porque a quantidade de pessoas com um celular na mão o tempo todo vem aumentando bruscamente.

 

Você pode tentar editar esse layout e trabalhar com max-width, min-width, pixels e porcentagens.

 

Acho que a maior cagada do mundo é tentar transformar um site em responsivo, sendo que foi criado especificamente para desktop. Tem tantas tecnologias e frameworks disponíveis para criar um layout totalmente responsivo em pouco tempo.

Vou listar algumas:

  • 1. Bootstrap

Sem dúvida é um dos melhores frameworks (e piores dependendo do teu propósito). 

 

Pontos positivos:

  • Muito fácil de usar;
  • MUITO conteúdo na internet;
  • Código limpo e organizado;
  • Possui programas para criar layouts com bootstrap apenas arrastando;
  • Open source;
  • Vários sites e temas prontos em bootstrap na internet;
  • Muito leve e otimizado.
  • Navs bonitas e fáceis;

Pontos negativos:

  • Se não souber ou não souber editar o framework, teu site vai ficar a cara de outros 1000 na internet.
  • Design muito repetitivo, focado em trabalhos rápidos ou interessados em um layout simples e organizado.
  • Utiliza muitas classes para chegar em um resultado.
  • Excessivamente simples. Recomendo apenas para sites ou painéis corporativos. 

Programas que você pode usar para criar layouts com o bootstrap:

1. Pingendo (Free ou Premium),

2. Bootstrap Studio (Pago).

 

~

 

  • 2. W3.CSS

Um tipo de framework, bem próximo do bootstrap até, mas na minha opinião, combina muito bem com o Bootstrap se souber usá-los.

Ele não possui um programa para editar o código através de uma interface gráfica (eu acho), mas é bem fácil de usar. No próprio site https://www.w3schools.com/w3css/ tem vários tutoriais e códigos prontos pra você usar do jeito que achar melhor. Todos os códigos do framework são responsivos.

 

~

  • 3. Muse CC

É um programa descontinuado da Adobe. Não sei se é uma boa ideia divulgar aqui um programa descontinuado, ou seja; sem suporte. Você decide o que faz com essa informação.

Com ele você pode desenhar layouts responsivos (se souber usá-lo), importar imagens, etc.

 

Pontos positivos:

  1. Bem fácil de usar e editar;
  2. Exporta o layout pronto com HTML e CSS criado;
  3. Pode criar sites responsivos para todo o tipo de resolução;
  4. Layout compatível com todos os navegadores.

Pontos negativos:

  1. Descontinuado; sem suporte.
  2. Entrega um código exportado muito ruim;
  3. Se não souber editar ou não tiver paciência para consertar algumas coisas no código depois de exportado, desista dele!

 

~

  • 4. Criar e redirecionar para uma página capada e feita para dispositivos móveis.

Sinceramente essa é a menos recomendada, mas se tu não tem tempo para criar um layout responsivo ou paciência para refazer o atual de um jeito responsivo, vai ter que ser assim. É uma gambiarra e tanto.

Basta recriar (só isso, rsrs) o site de uma maneira que o resultado fique agradável em um dispositivo mobile.

Após recriar, é só definir o link da página mobile no código abaixo.

//  coloca isso dentro da tag <head> </head>


<script type="text/javascript">
    var url_mobile = "LINK_DA_PAGINA_MOBILE";
    (function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,url_mobile);
  </script>

 

Boa sorte.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Megão,

 

Grato pela resposta.

Admito que criei o site sem muitos critérios, só copiando uns scripts daqui, dali... e acabou razoável para desktops.

Mas ... adaptar para dispositivos móveis... huummm... Tá me dando dor de cabeça.

 

O site tem umas 130 páginas. Por isso usei o "iframe" que é mais simples para pessoas inexperientes como Eu.

Sei que existem opções melhores, mas como ele (Iframe) vem quebrando o galho até agora, resolvi deixar, ou seja, com o Menu azul à esquerda (Fixo) e à direita vão aparecendo as páginas de acordo com a escolha feita no citado "Menu".

 

Só para complementar, o "index.html" que é a parte azul da esquerda, é parcialmente assim:


 

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>
<head>

<title>Ciencia,Reportagens, Kardec</title>

<META http-equiv="Content-Language" CONTENT="pt-br">

<meta http-equiv="Content-Type" content="text/html; charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 maximum-scale=1.0">

(...)

<style type="text/css">

html, body {
    
    height: 100%;
    padding: 0;
    margin: 0;

}

 iframe { top:0; width:auto; left:auto; height:100%; border:none; background:#ffffff; }
    

div {
   
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;


}

#navcontainer
{
position: fixed;
top: 2px;
bottom: 0px;
background: #0000CD; /*Edite a cor de fundo*/
border-right: 10px solid #696969;
width: 23.1%;
margin: 0;
padding: 0.9em 1;
font-family: georgia, serif;
font-size: 23px;
text-align: left;
font-weight: bold;
overflow-y: auto;
.contentFullFixed{
    position:fixed;
    width:100%;
    top: 0;
    left:0;

}

}

ul#navlist
{

text-align: center;
list-style: none;
padding: 0;
margin: 0 auto;
width: 90%;


}


ul#navlist li
{
display: block;
margin:  5;
padding: 0;
height: 6%;
padding-top: 0.1em;
}

ul#navlist li a
{
display: block;
width: 190px;


border-width: 4px;
border-color: #fff #8470FF #ccc #fff;
border-style: solid;
color: #000000;
text-decoration: none;
background: #1E90FF; /*Edite a cor de fundo*/
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: ##1E90FF; /*Edite a cor de fundo*/
color: #000000;
}

.selected {
    background-color : #fff000;
}

ul#navlist li a:hover {color: #FFFFFF}

ul#navlist li a:active
{
color: #FFF;
background: #B0C4DE;
border-color: #000000 #fff #fff #ccc;


}

#conteudo {

     width: 75.7%;
     position: relative;
     height: 100%;
     text-align: center;
     
     
}
   
    a:hover { color: green}    
    A:link {text-decoration:none}
    A:visited {text-decoration:none}
    A:hover {text-decoration:underline}
    A:active {text-decoration:underline}

iframe {
    
    border: none;
    width: 100%;
    height: 100%;
    border: none;

}

img{
 
display: block;

margin: 30 auto;

}

</style>

</head>


<body>

(...)

<div id="navcontainer" style="border: 5px solid #696969; float: left;">

<ul id="navlist">


<li><a href="prin.html"  target="conteudo">Início</a></li>
    
<li><a href="textos.html"  target="conteudo">Textos</a></li>

(...)

(...)

</ul>
</div>

                                            
                                            
<!--  EU ACHO QUE O PROBLEMA ESTÁ AQUI :  -->

<div id="conteudo" style="float: right;" class="spaceWrap">

<iframe class="viewPort" name="conteudo" src="prin.html" align="right"></iframe></div>

</body>


</html> 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Olá,

 

Depois de muito pesquisar, acabei achando a solução para quem, sem muita experiência,  acaba usando Iframes.

Sabemos que o Crawler do Google tem dado prioridade para dispositivos móveis, em suas indexações.

O que o próprio Google recomenda é a inclusão da Meta Tag :

<meta name=viewport content="width=device-width, initial-scale=1">

 

Só que isso só funciona bem para site que NÃO tem Iframes.

Após meses de pesquisas achei um complemento BEM SIMPLES e que resolve definitivamente esse problema.

É só adicionar, ao final da Meta Tag acima, o seguinte :   viewport-fit=cover .... (!!!)

 

Então ficará assim :

<meta name=”viewport” content=”width=device-width, initial-scale=1, viewport-fit=cover”>

 

Eu só não entendo porque o Google não avisou sobre isso. Precisou meses de pesquisas, contatos com Fóruns, e-mails para especialistas, etc, etc. E mesmo assim só consegui descobrir num site estrangeiro.

 

Neste site, recomendam até que se coloquem o redimensionamento da altura também :   height=device-height

E assim, temos a Meta Tag completa com Viewport para Iframes :

 

<meta name=”viewport” content=”width=device-width, initial-scale=1, height=device-height, viewport-fit=cover”>

 

Espero que tanto tempo de procura sirva para outras pessoas que passaram por isso.

 

Obrigado.

Jeff

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Sapinn
      Galera estou com um problema estranho, eu tenho um iframe que puxa um outro site meu, ele puxa normal o problema é que esse site que eu mostro no iframe possui alguns menus e botões que eu não consigo clicar neles é como se a função de clique não funcionasse, a parte mais estranha é que na minha maquina local funciona normalmente só no meu ambiente de produção que tem esse problema , como devo fazer para resolver?
    • Por Shizo_BR
      Preciso criar um iframe contendo um player, que não pare o audio enquanto navego pelo site. Vou mostrar a baixo o código que incorporei ao meu wordpress, porém não estou conseguindo fazer o "no refresh" quando mudo de pagina.
       
      <div style="position: fixed; bottom: 25px; left: 25px; z-index: 999999;"> <BR/> <BR/> <span class="radio-iframe-close" aria-label="toggle" style="font-size: 1.5rem; color: #fff; position: absolute; top: 0; background: #4e203c; padding: .25rem;">AO VIVO!</span> <iframe class="radio-iframe" src="URL Player" style="width: 314px; heigh: 31px; border: 0;" allow="autoplay; fullscreen" scrolling="no"></iframe> </div> <script type="text/javascript"> (function($) { $(function() { $('.radio-iframe-close').click(function(){ $('.radio-iframe').toggle(); }); }); })(jQuery); </script>  
    • Por viniciusfroner
      Boa noite, gostaria de saber se alguém conhece algum plug-in que gere esse tipo de mapa, no caso a antiga API do google que fazia isso está off..
       
       
      <div> <iframe style="border:0; width: 100%; height: 350px;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12097.433213460943!2d-74.0062269!3d40.7101282!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb89d1fe6bc499443!2sNome+SegundoNome!5e0!3m2!1smk!2sbg!4v1539943755621" frameborder="0" allowfullscreen></iframe> </div>  
    • Por dadev046
      Olá, estou tendo problemas com os vídeos "embedados", porque sempre que a pessoa está assistindo, se ela por acaso clicar na tela ao invés de clicar no botão de pause, ela é redirecionada para o site de origem do vídeo, e isso atrapalha bastante, então gostaria de saber se há como resolver isso, desde já, agradeço.
    • Por Elias meirelles
      Bom dia eu sou novo em programação eu queria saber como eu faço para colocar um vídeo embedado do youtube no meu site sem os comando e sem a logo do youtube alguém me ajuda ? esse e o código. 
       
      <iframe width="560" height="315" src="https://www.youtube.com/embed/ba34ILUcGAI?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.