Botón Habilitar o Quitar en Versión Móvil

Hola amigos, es un gran foro, vengo con una duda es posible habilitar un botón que aparezca en la versión de Escritorio pero se oculte en la versión movil?

Por ejemplo desde eliminar algunas redes sociales en FB, al momento están creadas como un Botón simple pero no veo la opción de quitar en versión para Celulares, es posible hacer esto con PANO TOUR?

Puedes hacer diferentes interfaces para distintos dispositivos como si hicieras tours distintos y reunirlos más tarde en uno solo, hay un tutorial en la página de Panotour que te da 3 opciones para esto, las dos primeras creo son bastante sencillas. Puedes trabajar primero en la opción más completa para escritorio y después quitar elementos o poner distintos para la versión de móviles.

http://www.kolor.com/wiki-en/action/view/Panotour_-Advanced-_Different_interfaces_for_different_devices

3 Me gusta

Genial amigo Enrique como se va aprendiendo, agradezco mucho por atender mi duda, felicitaciones, en un tiempo te cuento como me fue probando el link enviado, muchas gracias.

Hola Cibernero,
Quiero entender lo siguiente, aunque tu explicación creo sea clara, mi conocimiento del idioma español no es de lo mejor.
¿Cómo creo la versión diferente para móvil o escritorio?
¿Si lo lograré, como hacer en la manera que cuando el usuario lo ve en el pc, arranque la interface para escritorio y, al contrario, por el usuario que tenga un móvil arranque la interface para móvil=
Gracias y saludos.

Hola @pedro9999, básicamente es como hacer tours distintos, cada uno pensando y hecho específicamente para el dispositivo deseado.

El procedimiento, como yo lo haría, puede ser el siguiente…

Primero desarrollas un tour para computadoras de escritorio llamado “tour”. Cuando ya esta completo lo copias, puede ser con “save as”, y le das otro nombre, por ejemplo “tour tabletas”, si lo quieres para computadoras de escritorio, tabletas y teléfonos copia un tercero y lo llamas “tour teléfonos”.

Realiza los cambios de interfaz deseados en “tour tabletas” y “tour teléfonos”.

Genera los tres tours distintos asegurándote que lo haga en directorios diferentes para que no sobrescrita la información. Si, por el momento tienes todo por triplicado, pero yo lo prefiero así para tener más control, evitar errores y poder probar los 3 tours en tu computadora de escritorio de manera local.

Cuando estes seguro de que tienes el resultado deseado será momento de juntarlos para lo cual yo utilizaría la opción 2 del tutorial de panotour que compartí arriba. Aquí lo pongo de nuevo…

http://www.kolor.com/wiki-en/action/view/Panotour_-Advanced-_Different_interfaces_for_different_devices

Siguiendo esas indicaciones haría lo siguiente…

En el mismo nivel de tu carpeta “indexdata” del tour generado para escritorio creas dos carpetas nuevas, una llamada “tour_tabletas” y la otra “tour_telefonos”.

Dentro de estas carpetas copiaría los tours generados como corresponda, “tour tabletas” y “tour teléfonos”.

En el archivo “index.html” del tour para computadoras de escritorio que esta en el mismo nivel que la carpeta “indexdata” y también que las nuevas que has generado “tour tabletas” y “tour telefonos” copias el código que te proporciona el tutorial en la linea que te indica. Como en mi ejemplo también son diferentes las versiones de tabletas y teléfonos copias el siguiente…

// REDIRECTION TABLET

var Tabletcheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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|xda|xiino|android|ipad|playbook|silk/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)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}

if(Tabletcheck()){
window.location = “tour_tabletas/index.html”;
}

// REDIRECTION PHONE

var mobilecheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|awa|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)))check = true})
(navigator.userAgent||navigator.vendor||window.opera);
return check;
}

        if(mobilecheck()){
                window.location = "tour_telefonos/index.html";
     }

// REDIRECTION END

Fíjate que en el código que pongo aquí como lo copie dos veces cambié el nombre de una de las variables para que no se repita…

var mobilecheck = function() {

por

var Tabletcheck = function() {

y las últimas lineas…

window.location = “mobile/index.html”;

por

window.location = “tour_tabletas/index.html”;

y

window.location = “tour_telefonos/index.html”;

que es donde tu pondrías los tours que haz hecho, usa el nombre que quieras solo cambiando el nombre de las carpetas y colocando la ruta en esas lineas y ya esta, tienes el tour respondiendo distinto de acuerdo al dispositivo con distintas interfaces.

Pero por supuesto no vas a triplicar la información de los panos y demás en el servidor, verdad? Entonces tienes que seguir con el siguiente paso opcional del tutorial “Optional - Using the desktop tiles for your mobile tour”.

Cuando hagas esas modificaciones podrás borrar los archivos correspondientes de las carpetas “tour_tabletas” y “tour_telefonos” pues ya estarán usando los recursos que se encuentran en la carpeta “indexdata” del tour que haz hecho para computadoras de escritorio.

En este último paso del tutorial se refieren a las imágenes correspondientes a los panoramas, que son las que ocupan más espacio, pero este procedimiento podrías usarlo para cualquier archivo si cambias las rutas en los archivos XML que correspondan.

1 me gusta

que buena explicación, espero probarlo pronto.
saludos @cibernero