Blog de miembros Espacio Alvistec

En Youtube desde 2014. Total posts 17

ltc-faucet-banner

Personaliza tu plantilla Blogger para móviles

Categorías:  Web
Etiquetas:  blogger, programacion

El enorme incremento en el uso de dispositivos móviles o tabletas como medio para navegar por Internet es un factor fundamental a tener en cuenta a la hora de crear páginas web o blogs.

Para personalizar la plantilla propia de Blogger por defecto que has elegido, cómo detecto y diferencio el código para móvil del código para ordenador. Apartado técnico

  • Observa siempre que en la plantilla Blogger existen las siguientes partes de código que voy a comentarte:
EN EL <HEAD> DE LA PLANTILLA:
1) EL VIEWPORT: Al comienzo del código encontrarás justo debajo de la etiqueta HTML <head> el siguiente código que te va a servir para conocer cómo configurarte la plantilla con el apartado para móviles y el apartado para ordenadores:
 <head> 
    <b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
<meta content='width=1100' name='viewport'/>
    </b:if> 
  • La etiqueta XHTML <b:if cond='data:blog.isMobile'> establece la condición de "si se está presentando el blog por una pantalla de móvil", entonces:
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
El tamaño máximo de la zona de visualización del cuerpo principal del blog se adaptará automáticamente al tamaño de la pantalla donde se visualice. Esto es, se adaptará a la resolución y área de visualización del dispositivo que sea.
A partir de ese momento, para todo el resto del código del Blog, el tamaño máximo de la zona de visualización del cuerpo principal del Blog quedará definido para ese tamaño.
De esta manera, el "contenedor" de todos los componentes habrá adquirido un nuevo tamaño que queda prefijado para que los componentes móviles se dibujen en proporción a este dentro del móvil.
  • La etiqueta XHTML que sigue,   <b:else/>, establece la condición "si no" entonces el área de visualización es:
 <meta content='width=1100' name='viewport'/>
El área de visualización está fijado a 1.100 para si no es una pantalla móvil la que se está utilizando para visualizar el Blog. En mi caso es 1.100, normalmente lo estándar suele estar en 960 o hasta 990, pero esto es variable dependiendo de los propósitos del sitio web.
  • El condicional se cierra siempre con  </b:if>.
  • El condicional se cierra siempre con  </b:if>.
2) LAS HOJAS DE ESTILO Y CÓMO UTILIZARLAS: Si tu código CSS, de tu hoja de estilos, no es "inline", al comienzo del código fuente de la plantilla al expandir artilugios encontrarás las etiquetas XHTML:
<b:skin><![CDATA[


Ahí es donde se almacenan los estilos de tu plantilla. Los estilos para móviles en Blogger suelen tener los mismos nombres de clase que los estilos para ordenadores, lo que sucede es que suelen prefijarse por la palabra .mobile
.mobile .body-fauxcolumn-outer {
  background: $(mobile.background.overlay);
} 
Ahí podrás editar tamaños, estilos de letra y colores para tu presentación para móvil. Localiza siempre la palabra .mobile y altera la clase según tus necesidades.
  • En las plantilla para Blogger suele ponerse un comentario que advierte de la parte de la hoja de estilos destinada a la presentación móvil. Suele poner siempre primero las clases y atributos para la visualización para ordenadores seguida de las hojas de estilo para la visualización por móviles.
  • Puedes establecer <b:if cond='data:blog.isMobile'> y <b:else/> dentro del CDATA de la plantilla para incluso utilizar los mismos nombres de clase pero con diferentes valores en sus atributos para móvil que para ordenador. Recuerda siempre antes de establecer el <b:if cond='data:blog.isMobile'> que la etiqueta CDATA debe estar correctamente cerrada y que después puedes volver a abrir otro CDATA cuando termine el <b:else/>  y siempre cerrar luego todo el condicional con </b:if >. 
EN EL BODY DE LA PLANTILLA:
3) Esto es, a partir de la etiqueta XHTML  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> .
 A partir de aquí las normas para trabajar con gadgets para móviles o para ordenador son bien sencillas:
a) Puedes dividir código poniendo <b:if cond='data:blog.isMobile'> y justo debajo los widgets que quieres que se dibujen para móvil y después un <b:else/> con los que quieres para ordenador, o simplemente cerrar con </b:if > el <b:if cond='data:blog.isMobile'>, de manera que lo de dentro del <b:if cond='data:blog.isMobile'> es lo que quieres que se muestre para móvil.
 b) Puedes ir "widget" a "widget" y poner:
 <b:widget id='HTML1' mobile='yes' locked='false' title='Archivo' type='Archive'/>
- Donde mobile='yes' significaría que quieres que el "widget salga por el móvil".
- O  mobile='no' para indicar que "ese widget NO salga por el móvil".
- También puedes poner mobile='only' para que "sólo se dibuje el widget en móviles".
 Puedes igualmente combinar las  opciones a y b siempre que no entren en contradicción.

¡Eso es todo!, disfruta y crea una plantilla estupenda para dispositivos móviles con la que tu Blog luzca como nunca lo fundamental: tus contenidos.

Siguiente post: How to display or show information about a Linux Kernel module or drivers
Entradas relacionadas: