Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 :
================================
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 :
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.
JeffOlá 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;
}
#navcontainerposition: fixed;
top: 2px;
bottom: 0px;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;#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>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
>
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.
-
-
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:
-
Bem fácil de usar e editar;
-
Exporta o layout pronto com HTML e CSS criado;
-
Pode criar sites responsivos para todo o tipo de resolução;
-
Layout compatível com todos os navegadores.
Pontos negativos:
-
Descontinuado; sem suporte.
-
Entrega um código exportado muito ruim;
-
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.