≡ Menu

Inicio Foros Técnica Publicación Panorámicas en móviles y tablets

Este debate contiene 19 respuestas, tiene 10 mensajes y lo actualizó  Mario Carvajal hace 3 meses, 3 semanas.

Viendo 20 publicaciones - del 1 al 20 (de un total de 20)
  • Autor
    Publicaciones
  • #3279

    image_not_found
    Participante

    Hola a todos!

    Estoy mirando de conseguir una visualización decente de panorámicas en móviles y tours.

    De momento he conseguido que se vean desde móviles y tablets con código iframe, con panopress y panos subidas a Stretview.

    Lo que no he conseguido arreglar es que todas estas sean responsive (se adapten a los diferentes tipos de pantalla).

    Mi web está hecha con wordpress y es responsive, pero los tours no los adapta. Alguien sabe el código para arreglarlo?

    Los únicos que he sabido arreglar y que se vean responsive son los de StreetView, con este código:

    <style>
    .google-maps {
    position: relative;
    padding-bottom: 50%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
    }
    .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }
    </style>
    <div class=”google-maps”>
    AQUÍ IRÍA EL CODIGO DE INCRUSTACIÓN DE LA PANORÁMICA DE STREETVIEW.
    </div>

    Dejo aquí un enlace con información que parece que da la solución para hacer el panopress responsive, pero que no ha acabado de serme útil:

    How to make responsive virtual tour window?

    Otra cosa que veo curiosa y que no puedo solucionar:

    Usando Panopress la opción de zoom no está disponible desde móviles.

    Con el código iframe las opciones de pantalla completa y zoom no están disponibles desde móviles.

    Un saludo y gracias por vuestra ayuda!

    #3280

    Mario Carvajal
    Jefe de claves

    ¿Podrías darnos el enlace donde aparezca el tour virtual que estás trabajando? Para poder revisar el código fuente y darte alguna idea. Saludos

    #3281

    image_not_found
    Participante
    #3282

    jisuca
    Participante

    Tu problema está en el iframe, le tienes asignadas las siguientes propiedades: display: block; width: 980px; height: 500px;. tanto el ancho como el alto tiene unidades fijas (980px y 500px) lo que no permite que sea responsivo. en wordpress hay plugins que permiten hacer iframes responsivos o sino puedes intentar este tutorial

    #3318

    Mario Carvajal
    Jefe de claves

    Es verdad… cuando yo inserto un iframe, lo hago con un ancho de 100%, lo que permite que se acomode al ancho total de la caja contenedora, en cualquier dispositivo. Si lo tienes con un ancho en píxeles, no será responsivo, en ningún caso.

    #3739

    Carlos
    Participante

    Hola de nuevo, Mario.
    Me resultó muy útil tu información sobre el deep linking. Ahora por fin estoy terminando el tour virtual (más de un año después). Todo funciona más o menos, pero tengo un leve problema: la barra de control se ve muy pequeña en dispositivos móviles y además no salen todos los iconos que tengo seleccionados. ¿Me puedes indicar por dónde seguir?
    Muchas gracias por tus fantásticos tutoriales, vídeos, foros, etc.

    PD: ¿Te veremos por España dando algún curso? Sería un placer.

    Carlos Javier

    #3741

    ubarranco
    Participante

    Hola a todos,

    Creo que una manera buena de hacerlo seria usando:

    <style type=”text/css”>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    </style>
    <div class=”embed-container”><iframe allowfullscreen=”” frameborder=”0″ height=”560″ src=”https:YOURWEBSITEPATH/index.html” style=”border:0″ width=”975″></iframe></div>

    Por ahora me ha funcionado bien, pero ahora quiero que se ajuste al 50% de la pantalla con relación 16:9 en pc, pero que en celulares sea siempre el 100% del ancho de pantalla..

    Por allí ley que se podía hacer condicional según resolución de pantalla usando este CSS

    /* CSS general */
    .mi-iframe {
    width: 100px;
    height: 50px;
    }

    /* CSS pantallas de 320px o superior */
    @media (min-width: 320px) {

    .mi-iframe {
    width: 200px;
    height: 150px;
    }

    }

    /* CSS pantalla 768px o superior */
    @media (min-width: 768px) {

    .mi-iframe {
    width: 500px;
    height: 350px;
    }

    }

    Pero me gustaría saber si alguien ha probado esto y si me puede pasar el código completo para incrustar en mi blog, ya que no soy muy bueno en esto de programación web.

    MI problema es incrustando desde Round.me, hago todo y en mi ordenador se ve de maravilla pero en el celular se sale del encuadre, entonces tendría que hacerlo al 100% pero no me gusta como se ve en el blog, es decir, que en el pc se vea mas o menos en la mitad del ancho pero en celulares y tablets se pueda ver en el 100% de ancho sin distinguir si es formato horizontal o vertical… vamos se que los gurus me pueden dar una mano… Animo!!! se les quiere-

    Saludos a todos desde la Fantástica!

    #3755

    Mario Carvajal
    Jefe de claves

    Carlos. Es un verdadero lío intentar conciliar los distintos tipos de pantalla, para los controles de un tour de PanoTour. Al menos, yo no he podido, ya que los valores de tamaño de la barra de control se determinan en píxeles, y no en unidades relativas.

    Hay elementos que sí puedes manejar en unidades relativas, por ejemplo en porcentaje, en PanoTour. Por ejemplo, un logotipo. Tal vez hasta ahí he podido llegar, pero en la barra de control de botones no.

    Te dejan de salir algunos botones, porque esta barra viene programada así, pues en un celular se supone que se dejan de utilizar algunos controles como el del zoom. Y se necesitan otros, como el giroscopio, así que internamente ya viene programada de esta forma.

    Con la venida inminente de la tecnología VR y de las gafas Cardboard, yo casi que me dejo de preocupar por esto, ya que al activar la función de Cardboard, los controles desaparecen y tienen todo el sentido que desaparezcan. Pero sería muy interesante que a futuro, PanoTour y KR Pano ponga controles visuales, en el nadir del recorrido virtual, donde quedarían muy bien ubicados y que se puedan manejar ópticamente. Estoy seguro que a la vuelta de poco tiempo, esto será así.

    #3756

    Mario Carvajal
    Jefe de claves

    Ubaldo… todo depende del lugar donde vayas a montarla en tu sitio web.

    Si tienes una plantilla responsiva, lo mejor es que la medida de tu iframe sea en porcentaje y no en píxeles. De esta manera, a medida que cambie el dispositivo, el iframe se acomodará al ancho de la caja y no se desbordará.

    La solución que planteas con CSS también es posible, a través de las “media queries”, esto en realidad son reglas que se aplican en función del tamaño del navegador (y del dispositivo, claro está). Así que también pueden ser usadas, pero casi que con usar unas medidas porcentuales, y dejar que la “caja” contenedora de tu sitio se adapte, estás salvado.

    ¡Saludos!

    #3886

    cesc
    Participante

    Buenos días,
    estoy empezando a publicar fotografías esféricas y he de decir que vuestro portal me ha sido de mucha ayuda, finalmente me he decandato por el panotour pro y la web la estoy montando con wordpress. He utilizado el plugin de panopress y me la incrusta bien, pero no se activa la vision estereoscópica, en la versión de escritorio de panotour si se activa, así que dudo que sea del programa ….. argggg
    os dejo el enlace (no se pueden reír, de momento sólo es un borrador) http://pensaten360.cat/?page_id=43

    Muchas gracias por compartir!!

    #3897

    Mario Carvajal
    Jefe de claves

    Cesc, cuando hablas de “visión estereoscópica” ¿te refieres a la visión VR? Supongo que no está funcionando porque al cargar la panorámica, estás trayendo el archivo de Flash (SWF), mira el código que me da:

    <object type="application/x-shockwave-flash" data="http://pensaten360.cat/wp-content/uploads/2016/indexdata/index.swf" class="pb-content" style="width: 1828px; height: 671px; display: block; opacity: 1;"><param name="flashvars" value="xml=http://pensaten360.cat/wp-content/uploads/2016/indexdata/index.xml&"><param name="allowfullscreen" value="true"><param name="quality" value="high"><param name="menu" value="false"><param name="bgcolor" value="#eeeeee"><param name="wmode" value="opaque"></object>

    Tal vez este código sea el que está poniendo el plugin PanoPress… En tal caso, te sugiero que les escribas en el foro preguntándoles de este caso particular: http://www.panopress.org/forums/

    Saludos

    #3977

    cesc
    Participante

    Hola Mario,
    al señalarme el problema, lo que he hecho es redirigirlo al archivo *.Html, en lugar del *.Xml, ahora funciona correctamente.
    A simple vista con las mismas funcionalidades, desconozco las ventajas de una o otra forma, pero de momento funcionaré con el HTMl.
    Muchas gracias!!!

    #4223

    carlos vargas
    Participante

    Buenas Tardes:

    He estado leyendo el hilo de este tema, pero los términos de programación ,me dejan perdido.

    A mi me pasa, que el tour se ve bien en el computador, pero en el celular , el logo, plano, miniaturas; no salen proporcionados se “amontonan” unos sobre otros..

    En términos sencillos como corrijo eso en panotur..

    Muchas Gracias de antemano por su ayuda..!!!

    #4227

    Mario Carvajal
    Jefe de claves

    Hola Carlos.

    Efectivamente con PanoTour todavía hay muchos problemas relacionados con la “responsividad” del tour, es decir, con la forma en que se muestra en dispositivos móviles.

    Mi recomendación muchas veces es ser lo más sencillos a la hora de hacer la interfaz, de tal manera que no se vean afectados los elementos que no guardan responsividad. Solo en algunos casos concretos, he realizado una versión para móvil (VR) y otra para web… Ejemplo:

    Web: http://farmfolio.net/360Views/pietrasanta/web/
    Móvil: http://farmfolio.net/360Views/pietrasanta/vr/

    ¡Saludos!

    #4914

    juan360
    Participante

    Hola Mario!
    Me llamo mucho la atencion a parte del gran trabajo que realisaste..la programacion para version Móvil: http://farmfolio.net/360Views/pietrasanta/vr.
    Que plugin utilizaste para el menu?
    Es de panotour?

    Gracias

    Juan

    #4916

    Mario Carvajal
    Jefe de claves

    Juan, en realidad ese “menú” inicial no es más que una imagen equirectangular trabajada en Photohop previamente, nada más.

    #4941

    juan360
    Participante

    Mario, que gran sorpresa!!
    Nunca me lo imagine, Muchas gracias!
    Saludos,

    #4980

    javierchavezferrer
    Participante

    Hola Buenos días a todos, Antes de empezar quería agradecer la colaboración y ayuda de todos los que participan en este Foro, porque sirve de una gran ayuda. Particularmente A Mario que con su entusiasmo nos involucra en esta dinámica de panoramistas. Gracias . Ahora va mi pregunta en el tutorial de Mario (6 de 12) HTML y CSS bien explicado a quien nunca ha escrito una etiqueta en su vida… Que justamente es mi caso, ja, ja, se explica como duplicar una plantilla para que cuando la utilicemos con Panotour , no aparezca en las redes sociales de Faceboock, toda la publicidad de Panotour. Al final de ese Tutorial se empieza a explicar pero no termina. Alguno de ustedes me podría ayudar a saber que tengo que hacer. Gracias. Javier.

    #5006

    Agencia 360
    Participante

    Hola panoramistas, tengo inconvenientes con KRPANO, publico las fotografías 360 pero solo se visualizan con giroscopio en dispositivos apple, alguno sabe de un código o configuración para que se visualicen el cualquier dispositivo móvil, android u otros, quedo muy atento a sus respuestas, gracias.

    #5110

    Mario Carvajal
    Jefe de claves

    Javier, seguramente se trata de cómo retirar el título de los tours que dice algo así como “Nuevo Proyecto by Panotour”… Bien si te refieres a esto, es muy fácil: abres el archivo “index.html” y editas la etiqueta cambiando este título por el que a ti te convenga más.</p> <p>Me cuentas si era eso. Saludos

Viendo 20 publicaciones - del 1 al 20 (de un total de 20)

Debes estar registrado para responder a este debate.

Comments on this entry are closed.