Diarios de la nube Idea guardada 1 veces
Sé la primera persona en valorar esta idea Valorar

Personaliza tu plantilla Blogger para móviles. Claves y fundamentos necesarios para lucir tu blog en estos dispositivos.



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.

Si bien inicialmente ha tendido a ser un factor "olvidado" hoy día se ha tornado fundamental. El cliente, el usuario, ya no utiliza exclusivamente un ordenador de sobremesa o portátil para visualizar las páginas web en Internet, ahora tiende a querer conectarse en cualquier lugar y en cualquier momento desde dispositivos con características bien distintas: pantallas reducidas, velocidades de acceso diferentes, ergonomía distinta...



Escoger una buena plantilla para el Blog, pudimos comprobar que aunque "a priori" resulta sencillo cambiarla, la elección correcta tenía muchos más matices que las ventajas visuales que ésta pudiera aportar. Con las plantillas para dispositivos móviles o tabletas, los datos a tener en cuenta son similares pero hay diversas características a tener en cuenta con dichas plantillas en base a la naturaleza del medio por el que van a ser mostradas.

Déjame darte algunas claves y consejos para la elección y personalización de plantillas para móviles y tabletas, descubre el potencial de Blogger a la hora de trabajar con esta clase de presentación y unos cuantos detalles a tener en cuenta para conseguir la mejor calidad.

Conceptos previos, ¿qué es "la plantilla" en Blogger?:

En el lenguaje más abstracto y menos técnico, la plantilla es el modelo de presentación sobre el que vas a trabajar para mostrar los contenidos de tu Blog. Se le denomina plantilla porque va a definir dónde y cómo se van a mostrar tus contenidos en el Blog. Por ejemplo, define dónde va a ir colocada la cabecera con el título del blog, qué tipos de letra se van a mostrar, con qué colores, qué componentes van a "dibujarse" y cómo van a hacerlo... es la base de la presentación que verán tus usuarios cuando accedan a tu Blog.

En un plano técnico, la plantilla es una representación esquemática realizada en XML que sintetiza código HTML en etiquetas "propias" de Blogger que al ser interpretadas conforman la presentación del blog.

¿Hay una plantilla para móviles?, ¿cómo funciona sin entrar en grandes tecnicismos?:

La plantilla para Blogger "pura" es única para móviles y para ordenadores. Simplificando técnicamente, se utiliza el mismo archivo para dibujar los componentes para móviles para que los componentes para ordenadores.

Lo que sucede es que dentro de la plantilla, por medio del código que la "programa", se puede comprobar si el Blog está mostrándose por un navegador de un ordenador de sobremesa o por un navegador de un móvil o tableta. Entonces, en función del dispositivo detectado en la programación de la plantilla se establecen unos "condicionales" que "dibujan" los componentes para ordenadores si el usuario está conectado con un ordenador o los de móviles si el usuario está conectado con un móvil o tableta.

¿Qué conforma una plantilla Blogger?

Como la plantilla Blogger es la misma para móviles que para ordenadores pero con condicionales que la hacen adaptarse a unos dispositivos u otros, la estructura de componentes que conforman un tipo de presentación móvil y otra de sobremesa son las mismas.

Si nos alejamos de la parte técnica, en la plantilla encontraremos cómo vamos a mostrar los componentes que conformarán el Blog junto con el aspecto que éstos tendrán.

Casi todas las plantillas suelen utilizar una barra de navegación que suele ocultarse para pasar de un Blog de Blogger a otro, una cabecera para el título, una zona donde residirán las entradas y un "pié de página" que remata el conjunto por la parte inferior. Dependiendo después del diseño que se desee aplicar luego podrá tener o no tener columnas laterales, mostrar las entradas de una manera determinada, una imagen de fondo o un color que abarque todo el blog, etc...

Dentro de esas bases de la plantilla, a los componentes que dentro de ella se dibujan se les llama Gadgets. Los hay de todos los tipos, formas, tecnologías y colores, es cuestión del usuario elegir aquellos que desea utilizar.

De nuevo en el apartado técnico, para darle formato a cada componente que motramos en cada zona de la plantilla se utilizan las hojas de estilo (conocidas como css)  y para la lógica que pueden tener algunos componentes (los +1, botones de cualquier clase, "gadgets" con animaciones, etc...) se utiliza el Javascript.

La plantilla es la misma pero ¿los componentes son los mismos para ordenadores que para móviles?

Aunque puedan llegar a serlo, no tienen porqué ser los mismos. Los componente para móviles dada la naturaleza de la representación de los datos en sus pantallas suelen ser distintos de los que se utilizan para ordenador.

Lo que más suele cambiar son los estilos de la hoja de estilos que se utiliza para un tipo de presentación o la otra.

¿Porqué se diferencia la presentación para móviles o tabletas de la presentación para ordenadores de sobremesa o portátiles?

La clave está en la forma de usar unos frente a otros (la "usabilidad" o experiencia de usuario):
Los ordenadores de sobremesa o portátiles cuentan con pantallas de mayor tamaño que las de los móviles o tabletas:

Si por ejemplo muestras tu Blog desde un móvil con la presentación de un ordenador, la letra será excesivamente pequeña porque la pantalla del ordenador es más grande.

Si visualizaras la presentación móvil en un ordenador a pantalla completa, la letra sería excesivamente grande. 

Los ordenadores de sobremesa o portátiles suelen manejarse con un ratón y teclado. Los móviles y tabletas suelen ser táctiles y en algunos casos tener dispositivos miniaturizados que cumplen similares funciones a las de un teclado o ratón:

En los móviles con capacidad de navegación suele hacerse "todo táctil". Hay excepciones como Blackberry u otros fabricantes que se las han arreglado para conseguir una excelente usabilidad de dispositivo sin necesidad de recurrir al uso táctil. Pero desde luego, no utilizas un ratón para moverte por el escritorio del móvil.

En los ordenadores utilizas un ratón y un teclado. Aunque últimamente se están comercializando monitores táctiles, la mayor parte de los usuarios utiliza ratón para "moverse" por su ordenador.

Los componentes para móviles suelen ser distintos a los de ordenadores no sólo ya por tamaño o por forma de utilizarse (de manera táctil o "con ratón"), son también distintos porque suelen ser más "ligeros". El nivel de detalle o "peso" de los componentes en un móvil debe ser menor que en un ordenador de sobremesa porque aunque últimamente la potencia de los móviles se está "equiparando" a la de los ordenadores, en su mayor parte (no en todos los casos y cada vez menos) poseen conexiones a Internet bastante más limitadas en ancho de banda.

¿Cómo se diseña para móviles y para ordenadores?, una explicación sin tecnicismos excesivos

Se suele utilizar el concepto de "diseño adaptativo" o "responsive design". Simplificando técnicamente, se trata de utilizar hojas de estilo que no poseen valores prefijados para dibujar sus componentes en la pantalla del usuario.

Un ejemplo con "Diseño no adaptativo":Por ejemplo, si yo en una hoja de estilos de una plantilla digo en el código: "la cabecera de la plantilla se va a dibujar en este "sitio fijo" y con este "tamaño fijo", en cuanto ese Blog que yo estoy visualizando en mi pantalla con la cabecera en el sitio que yo quiero, cuando se dibuje en una pantalla más pequeña o más grande con distinta resolución, va a aparecer "descuadrado". Un ejemplo con "diseño adaptativo"El "diseño adaptativo" hará que las coordenadas utilizadas en la hoja de estilos de la plantilla no sean fijas sino variables en función del tamaño de la pantalla (más bien la resolución) donde se van a mostrar. Así pues, la cabecera del ejemplo anterior, independientemente de que se visualice en el blog a través de un móvil o a través de un monitor de ordenador, siempre se adaptará para mostrarse correctamente.
¿Qué tipos de plantillas hay para móviles?

Vamos a abstraernos de nuevo al máximo y nos centramos en dos grandes grupos: las creadas en Blogger y las generadas fuera de Blogger.

La herramienta de Google trae "de serie" un catálogo de plantillas "todo terreno" que abarcan un amplio espectro de las necesidades que los usuarios de Blogs podemos tener. Estas plantillas están lo suficientemente probadas y utilizadas como para que gocen de una gran estabilidad, de pocos fallos y sean fácilmente configurables al encontrarse dentro del estándar.

Las que han generado usuarios fuera de Blogger son plantillas realizadas con la "misma tecnología" o más bien, misma base que las plantillas por defecto pero con múltiples modificaciones que alteran en gran medida la presentación original de éstas.

Claramente, utilizar las plantillas por defecto que trae Blogger da lugar a que la misma presentación escogida por un usuario para un Blog se pueda ver repetida en otro que ha decidido utilizar la misma plantilla.

¿Cómo puedo cambiar la plantilla de mi Blog para móviles por una que traiga Blogger por defecto?:

Es extremadamente sencillo, seleccionas en el menú de la izquierda la opción "Plantilla" para a continuación sen la caja donde pone "Móvil" pulsar sobre el icono de "rueda dentada" que se visualiza bajo la citada caja con la previsualización de la plantilla para móviles:



Después de seleccionar la "rueda dentada" debajo de la caja con la previsualización para móvil, te aparecerá una pantalla como la que te muestro a continuación:



Si has personalizado tu plantilla te aparecerá la primera un "combo" o desplegable en el que poner "Elegir plantilla para móviles" en el que al hacer "clic" te permite elegir entre el catálogo que ofrece Blogger:



En el menú desplegable podrás o seleccionar una plantilla propia de Blogger que te guste o volver a la predeterminada para tu plantilla o a la personalizada que modificaste.



Cuando escojas la que te interese, verás una visualización preliminar a la derecha para ver cómo queda. También puede pulsar el botón "Vista previa" para ver una representación de cómo quedaría tu blog con esa plantilla aplicada pero sin aplicarse.

Una vez estés satisfecho con la plantilla a utilizar, sólo tienes que darle a "Guardar" y ya tendrás lista la plantilla para móviles de tu elección.

Creatividad al poder, realizar cambios en la plantilla o utilizar una plantilla creada fuera de Blogger

Normalmente el Blogger no se conforma con los estereotipos que por defecto ofrece la herramienta. Siempre busca nuevos "gadgets" y nuevas formas de ofrecer nuevas presentaciones.

Para acometer un cambio de presentación grande a nivel de vista para móviles o tabletas, se suele realizar partiendo de una plantilla de Blogger y personalizándola al máximo o, lo más sencillo, partir de una plantilla diseñada externamente a Blogger.

Si seleccionas una plantilla externa a Blogger, ponerla es sencillo también pero antes es recomendable que hagas una copia de seguridad de la plantilla que estés utilizando, de esa manera podrás volver atrás sin problemas si el cambio no te gusta.

Cambiar de plantilla no es "cambiarse de camisa", hay veces que puede quedarse algún gadget de la zona de diseño mal colocado o desconfigurado. Si te ocurre cualquiera de esas situaciones, simplemente entra en la vista de diseño y lo vuelves a colocar a tu gusto.

Antes de explicarte cómo ponerte una plantilla externa, lee atentamente estas recomendaciones:

No utilices cualquier plantilla de cualquier sitio. La plantilla puede contener "código malicioso" o "no eficiente", por tanto, investiga bien que la elección que has hecho es adecuada: búscala por internet por si otros usuarios han experimentado problemas, por si se afirma que pueda contener "malware", etc...

Busca sitios de confianza para hacer tus descargar. La comunidad +Plantillas Blogger Blogspot  o plantillas de otros Blogger de fiar que publican en comunidades de Google+.

Si tienes un perfil más técnico trata de estudiar el código para ver si está bien conformado y qué tecnologías está utilizando para mostrarse.

Mide la velocidad que puede tener tu Blog con la nueva plantilla con Google Pagespeed insights. Comprueba  que el rendimiento con el cambio no se vea excesivamente impactado.

Existen plantillas "premium" que son de pago, no suelen pasar de 20? las más caras, suelen estar más depuradas pero conviene igualmente tomar las debidas precauciones.

Con los gadgets toma igualmente precauciones. No te pongas el primer "gadget bonito" que veas. Comprueba con AVAST MOBILE o AVG u otros antivirus si el gadget o la plantilla o código que hayas traído externo a Blogger pudiera estar utilizando algún tipo de "software malicioso" que fastidiara la experiencia.

No te fijes exclusivamente en que sea "bonita", debe ser práctica, eficiente y "usable" con móviles o tabletas. Verifica que es realmente fácil de usar. Recuerda que las animaciones automáticas de muchas plantillas suelen "agobiar" al usuario, modera la utilización de efectos para crear un entorno amigable que centre la atención en lo más importante: tus textos.

Para cambiar la plantilla por otra que te guste y hayas verificado:

Hay múltiples webs con servicio de plantilla móvil para Blogger.

en Google basta con realizar una búsqueda con "plantillas para móviles Blogger" o "Blogger template theme" y te saldrán cientos.

Comprueba y verifica que el sitio sea de tu confianza. NO te fíes de cualquier propuesta a la primera, estudia si el código que ofrecen es el adecuado.

En Blogger, como la plantilla es la misma para los ordenadores de escritorio que para los móviles, normalmente la mayor parte de compañías te darán el código para que lo "copies y pegues" en tu plantilla en las zonas donde te indiquen. También existen web que alojan la "plantilla para móviles", esto ya es una elección que cada cual debe considerar.

En cualquier caso aplica siempre el sentido común y elige tomando las precauciones mencionadas, de esa manera no tendrás ningún problema.

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>.

Este  <b:if cond="data:blog.isMobile"> da mucho juego, pues te permite en todo momento en cualquier lugar de la plantilla poder decir qué quieres que se procese cuando sea un móvil lo que se está utilizando para presentar tu blog. Antes del  <b:else/> para establecer el viewport para ordenadores, podrías traerte, definirte o sobreescribir estilos para móviles.

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.



Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

SEO con imágenes

Las imágenes que utilizas en tu Blog, en tu web, no son sólo un reclamo o un añadido decorativo para tus contenido. Pueden servir a los buscadores web para comprender mejor la información que proporci ...

Etiquetas: general

Recomendamos

Relacionado

general

Curso Blogger: Crea tu primera plantilla

Comprender el funcionamiento de la plantilla de Blogger te abre las puertas a un nuevo nivel de conocimiento en la herramienta, pasas de ser un usuario estándar a convertirte en un usuario avanzado. Es muy distinto trabajar con la plantilla de Blogger sin saber qué está sucediendo "detrás" que sabiendo qué sucede y cómo controlarlo para conseguir el efecto que te propones. Hicimos un pri ...

BLOGGER blogging WEB

Blogging: adaptación web a dispositivos móviles

Adapta tu web a dispositivos móviles para conseguir mejor ranking en Google, mejora el tiempo de carga de tu sitio y aplica un truco en la plataforma de blogger para optimizar archivos expires -si tienes publicidad de Google Adsense y otros banner o plataformas de afiliados que apuntan a sitios fuera de tu blog- mejorando el diseño -blogger desing- y comprimiendo archivos html para entregar una ó ...

general freebies sorteos

Super sorteazo de Plantilla blogger prediseñada

El blog con apenas escasos casi dos meses de vida me atrevo a decir que va por buen camino, no son los cientos de suscriptores, ni los miles de seguidores, que claro que me gustaría que los hubiera, pero eso por ahora no me preocupa, lo que si me preocupa y mucho que casi no duermo(mentira) es como agradecer a esas personas que están siempre ahí, siempre comentando y a los que no comentan pero se ...

internet blog blogger para dummies ...

Tutorial Blogger Dummies: La Plantilla HTML

Para no tener ni idea de cómo hacer un blog de blogger cuando empezamos esta serie de tutoriales, tu blog no está nada mal ¿no crees? Limpio, profesional, cuidado... si has seguido todos los pasos que hemos ido viendo, puedes estar muy satisfecha del trabajo y horas invertidas en poner tu blog bien bonito tu sola. Puedes repasar lo que llevamos visto aquí: VISTO HASTA AHORA: Presentación. Tu Idea. ...

internet avanzado blog ...

Tutorial Blogger: adaptar menú a versión móvil

No me gusta nada la versión móvil, con lo que me ha costado dar con la portada y el diseño ideal... y se va todo al garete al activar la plantilla para dispositivos móviles. He tardado en decidirme pero claro, el tema de que Google vaya a tener tan en cuenta ésto para el posicionamiento pues... como que impone un poco. Así que finalmente me he decidido a activarla, prescindir de la portada y perso ...

BLOG plantillas blogger

Plantilla Minimalista y Profesional para Blogger

La semana pasada lancé a la venta en la fanpage una adaptación de la plantilla VOUX para blogger incluyendo personalización, configuración e instalación. ¡Y fue un éxito! La verdad es que no esperaba una acogida tan buena. De hecho ya estoy personalizando las cinco plantillas y espero enseñarte alguna de ellas instalada en breve. Por eso he decidido hacerlo periódicamente. Esta vez te presento una ...

general seo

Optimiza el posicionamiento de tu web para dispositivos móviles

A partir del 21-04-2015, Google puso en marcha la actualización de sus algoritmos de búsqueda para calificar con prioridad en los resultados de sus búsquedas aquellos sitios web o blogs que estén optimizados para su visualización en dispositivos móviles. En Diarios de la nube tienes una guía completa para ayudarte a preparar tu Blog o tu sitio web para la citada actualización, pero además será nec ...

BLOGGER

Blogger: plantillas responsive descarga gratis

Blogger plantillas responsive descarga gratis En cuanto a plantillas responsive gratis, debemos en blogger hablar de los secretos tras ellas, por eso he traído 7 plantillas para éste 2017 con sus explicaciones respectivas para adaptarse a los niveles requeridos en diseño que vayan acorde a la vanguardia del blogging y el seo. Sigue las instrucciones del VIDEO para descargar gratis a las plantill ...

BLOG plantillas blogger

Plantilla Profesional y Responsive para Blogger: Feminist

Feminist es una de las primeras plantillas profesionales que incluí en el Mentoring Diseña el Blog de tus Sueños. Si me conoces un poco, sabes que el tema sliders no va conmigo. Aumenta el tiempo de carga y bastantes fotografías utilizo ya como para pillarme los dedos más. Pero sin duda, es una plantilla preciosa, 100% responsive y con un resultado magnífico en blogs dónde las fotografías tengan g ...

general propuestas

Inserta las recomendaciones para móviles de Google+ en tu web o Blog

Las recomendaciones para móviles son una funcionalidad que Google pone a disposición de los usuarios de páginas Google+ para presentar a los usuarios que se conecten a nuestra web con un móvil nuestras entradas más populares. Veamos paso a paso cómo insertar las recomendaciones para móviles en nuestro web o Blog. ¿Qué son y qué aspecto tienen las recomendaciones para móviles? Podrás observar en ...