Crear tu propia versión móvil de tu página web o blog
Los smartphones y tablets han venido ganando terreno alrededor de los últimos años en cuanto al uso de Internet móvil, para muchas personas es indispensable, y como no serlo, si existen millones de aplicaciones que te hacen la vida mucho mas fácil, desde conectarte a internet hasta realizar transacciones bancarias sin tener que ir al banco, por ejemplo. Por esta razón, muchas personas han optado por adquirir un dispositivo móvil que puedan llevar a cualquier lugar, valga la redundancia.
Anteriormente, realice una publicación sobre como ajustar tu blog o pagina web a la resolucion del dispositivo en el que se visualiza, muy útil herramienta que les ayudará a que los usuarios obtengan una mejor impresión de tu sitio o blog, no obstante; está publicación es muy parecida aunque con una pequeña o gran diferencia, depende de como lo quieras ver. La anterior publicación simplemente consiste en adaptar los estilos CSS al tamaño de la pantalla del dispositivo, esta se trata de crear dos hojas de estilos, y que el navegador aplique cada una de estas dependiendo de la resolución, reconociendo si la pagina se esta visualizando de un computador o de un movil. Ejemplo sencillo:
Así es como se vería este blog en móviles
Si bien, por ejemplo, en plataformas como blogger te crea un versión móvil automáticamente, muy pocas o ninguna vez se adapta al estilo que llevas en tu versión de escritorio o web, dando la impresión de que son dos paginas diferentes, ademas, una gran ventaja es que puedes poner la publicidad de adsense en la versión móvil, cosa que no muestra la versión automatizada de blogger, con este truco; te mostrare a crear la versión móvil adaptando los estilos. Antes de empezar, te sugiero entrar a tu blog o sitio web de tu navegador, mira lo que es necesario y lo que es innecesario, recuerda que las personas en móviles solo quieren ver lo que necesitan ver, no es necesario que recargues la versión móvil con todos los gadgets o widgets que presentas en la version web, pues; ademas de que se ve demasiado tedioso se hace mas lenta al cargar.
1) Ubícate dentro de la sección "Plantilla" de tu blog, y justo, donde se muestra una captura la versión móvil automática de blogger, hay debajo de esta un botón con un engranaje, haz clic allí y marca la opción "No mostrar la plantilla para tu ordenador en los dispositivos móviles", y guarda. Una vez hecho esto, retiraras la prioridad de establecer la plantilla automática en móviles.
2) Ve a la edición HTML de tu blog, y pega el siguiente código en los metatags ubicados en el <head>
<meta content='width=device-width' name='viewport'/>
Esta linea lo que hará simplemente es reconocer el dispositivo desde el que se visualiza la pagina y la resolución de la pantalla.
<link href='css/movil.css' media='handheld, only screen and (max-device-width: 480px)' rel='stylesheet' type='text/css'/> <link href='css/escritorio.css' media='screen and (min-width: 481px)' rel='stylesheet' type='text/css'/>
En el caso de que estés creando una pagina web o un sitio de wordpress, simplemente pega este código debajo del <head> de tu pagina, sustituyendo lo que se muestra en negrita por las direcciones de las hojas de estilos para móvil o escritorio.
En el caso de que estés usando la plataforma blogger, todo el codigo CSS que tienes dentro de tu <b:skin>...</b:skin> córtalo y pegarlo en un documento .css y llámalo escritorio.css, lo puedes hacer en el bloc de notas de Windows, luego; lo subes a un servidor para obtener una dirección en linea, yo personalmente te recomiendo subirlo a Google Sites. Ademas, también crea un documento .css en el bloc de notas llamado movil.css, súbelo y pega la dirección que te proporcione donde corresponda.
Al momento de abrir tu pagina o blog en computadores, los estilos CSS de escritorio seran los otorgados a tu blog, pero si lo abres en moviles, ya se vera los estilos que le proporcionaste en la hoja de estilos movil.css.
Ocultar secciones para que se visualizen solo en una de las dos versiones
Ocurre que siempre vamos a tener secciones, como la barra lateral que esta muy recargada de gadgets, y no es recomendable que se visualice en la versión móvil, y necesitamos ocultarla pero no podemos eliminarla del blog, obvia y lógicamente, si hiciéramos esto, tampoco se mostraría en la versión de escritorio. Ten en cuenta el nombre de la sección que quieres ocultar, sea una etiqueta, clase o identificador, usaras las siguientes propiedades:
Si es una etiqueta:
seccion {
opacity:0;
position:absolute;
}
Si es una clase:
.seccion {
opacity:0;
position:absolute;
}
Si es un identificador:
#seccion {
opacity:0;
position:absolute;
}
Esto es todo, si tienes alguna duda al respecto, no dudes en preguntar.
Enlaces para compartir en tu blog o pagina web.
![[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK06o3qxRgndTN83gagg5xMy8Y0s4rg9GCiBabAgKpoFDpCUkp8Al_rfR6HKBuaEHmmst0IOnxKE7V2kHfX63AoPgzF_mZQ-nZ-Bkj4vdbhyphenhyphenPMU_bP1Dk_0ZJf_4_NgJh7dzseZHN7Okh/s72-c/calculadora.JPG "[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)")
No hay comentarios :
Publicar un comentario