Tesla Update

En este articulo conocerás los principales detalles de esta nueva actualización mayor, que lleva de nombre Tesla Update, la cual trae nuevas características y mejoras con respecto a la actualización anterior y que ademas estará disponible en todos mis diseños.


Contenido


Actualización de Canvas

La base para blogger "Canvas.xml" fue actualizada a la versión más reciente, lo que tiene de principal novedad Layout 3 de Blogger. Para saber mas puedes consultar el registro de cambios en Github.


Widgets v2

La nueva versión de los widgets permite a los desarrolladores realizar trabajos mas complejas sin utilizar javascript. Para comprenderlo mejor, este es un sencillo plugin desarrollado con datos de la version 1 del widget Entradas Populares:


popular posts v1

Solo contiene una imagen y el título ya que, excluyendo el resumen, no hay más datos disponibles para extraer. Al desarrollar lo mismo con datos de la version 2 podemos crear algo más elaborado:


popular posts v2

Con este ejemplo se puede apreciar una clara mejoría en cuanto a realizar plugins o complementos para Blogger, por ende, los diseños en Layout 3 pueden ser más complejos y elaborados, desarrollando funciones que de otra manera parecían imposibles con datos nativos de Blogger.


Ocultar widgets

Otra característica interesante es la posibilidad de ocultar widgets sin eliminarlos, que dependiendo de la visibilidad, tendrá un icono indicando un estado u otro:


ocultar widgets

Remapeo de widgets

Los widgets oficiales de Blogger en temas de terceros carecían de diseño, sin mencionar la pésima estructura para SEO que tienen por defecto, ya que utilizan etiquetas de peso semántico cuando no las necesitan.


En Layout 3 los desarrolladores pueden definir su propia estructura para los widgets nativos, en mi caso, ahora mis plantillas cuentan con widgets predefinidos de acuerdo al diseño al cual pertenecen y con mejor semántica para SEO:



Nota: La plantilla predefinida para los widgets no está disponible en la versión gratuita.


Imágenes externas

En la versión anterior no se podían aplicar operadores a las imágenes externas, por ello no era posible cortarlas o redimensionarlas, por ejemplo, aquí la imagen de la izquierda está subida a Blogger y la de la derecha a imgur:


resize layout 2

Como se puede apreciar, la imagen subida a imgur se muestra integra. En Layout 3 ya es posible modificar las imágenes externas, por lo cual ya no supone una diferencia usar imágenes de servidores ajenos a Blogger:


resize layout 3

Variables de configuración

En la actualizacion anterior puse a prueba esta caracteristica y los resultados han sido satisfactorios, por lo cual en esta actualizacion corregí algunos inconvenientes con ellas y tambien aumenté la cantidad de cambios que puedes hacer en la plantilla, asi como la complejidad de los mismos.


Animate.css

Animate.css

Ahora todas las animaciones de la plantilla están manejadas por Animate.css y son configurables. Puedes elegir cualquier animación disponible en Animate.css, especificar el tiempo de ejecución, duración, entre otras propiedades:



Estilos de comentarios

Si eres una de las 3 personas que usan los comentarios nativos de Blogger, ahora puedes cambiar los estilos, para ello solo debes especificar el nombre de una plantilla premiun en zkreations que tiene los estilos que te gustan, no importa si no la haz adquirido:



Ahora puedes desactivar o activar el sidebar en paginas especificas. En la versión anterior esto se hacía globalmente, pero ahora puedes elegir entre Inicio, entradas, páginas estáticas o Página de Error, también puedes combinar las opciones.


Modo Caja

boxed

Ahora el "modo caja" es una opción por defecto, es decir, que en mis plantillas premiun actuales y nuevos diseños puedes decidir si quieres usar el diseño limitado por caja o si prefieres ocupar todo el ancho del navegador.


El diseño de la página que muestra los resultados de búsqueda ahora es un diseño independiente, que puede activarse o desactivarse en cualquiera de mis plantillas premium actuales y nuevas a partir de esta actualización.



Resultados máximos

Show All

Al activar esta opción te permite decidir la cantidad de los resultados de las páginas posteriores a la principal, sin tomar en cuenta las opciones de Blogger, también oculta los botones de navegación del inicio y en su lugar muestra el botón "Ver más" para acceder al archivo. Si está desactivada, la navegación se mostrará como en versiones anteriores.


Más opciones

Hay más variables de configuración que son nuevas, como por ejemplo configurar los post relacionados, el idioma de los scripts, los mensajes por defecto de los plugins, el buscador de cabecera, entre otros. Para saber más te recomiendo leer la documentación disponible en cada plantilla.


Variables de diseño

En esta actualización las variables de diseño también recibieron mejoras considerables respecto a su versión anterior, se organizan mejor, las opciones son más amplias y flexibles. También se corrigieron todos los problemas presentes en la versión anterior.


Mejora del diseño móvil

En la versión anterior, al realizar cambios significativos en las variables de diseño, empeoraba la apariencia en móviles. Ahora aunque modifiques la totalidad de las opciones disponibles, la plantilla adaptará todas tus modificaciones para una mejor experiencia en dispositivos móviles.


movil design

Mejora de rendimiento

page speed

Además de las mejoras en el código de la plantilla para acelerarla, también he adoptado nuevas técnicas de optimización y a continuación explicare dos de ellas que considero destacables.


Imágenes por carga diferida

Ahora la plantilla aplaza la carga de las imagenes hasta que sean visibles en pantalla, esta funcion se basa en la Api Intersection Observer. Además el espacio que corresponde a la imagenes es rellenado por un archivo svg, mejorando el flujo de diseño y la animación de carga también es configurable usando Animate.css:



Estilos externos por carga asíncrona

Los estilos externos como Font Awesome y Animate.css cargarán de forma asincrónica, sin hacer uso de polyfill ni del atributo link[rel=preload] ya que tiene poco soporte. la técnica que he empleado está explicada por Scott Jehl en su articulo The Simplest Way to Load CSS Asynchronously.


Nuevas secciones

Ahora las secciones vienen por defecto y cuentan con nuevas opciones, como la capacidad de configurar la cantidad de entradas de cada etiqueta por separado y elegir el tipo de sección. Por ejemplo, si no se especifica el tipo de sección, se mostrará el estilo por defecto:


sections default

Como ya habrás notado, el estilo por defecto es idéntico a las entradas del blog. Si por el contrario, establecemos el tipo de sección a por ejemplo "gallery", el estilo que adoptarán las entradas será el siguiente:


sections gallery

En las nuevas demostraciones de mis plantillas puedes apreciar algunos estilos, pero no suelo usar todos los disponibles, si quieres conocer todos, revisa la documentación correspondiente a la plantilla. Por último las variables de diseño y configuración también afectan a las secciones, haciéndolas más fácil de personalizar.


Algunas plantillas (principalmente del tipo magazine) pueden destacar la primera imagen, de momento sólo puedes escoger entre 2 estilos. No necesitas escribir etiquetas específicas ni se usa javascript. La forma de hacerlo es muy sencilla y está explicado en la documentación.


Si quieres apreciarlo tu mismo, en la demostración de la plantilla Anime, hay 2 entradas con las imágenes destacadas:



El método que use esta desarrollado usando datos nativos de Blogger y permite destacar prácticamente lo que sea, por ejemplo, un video, un reproductor de audio o cambiar el estilo de la entrada.


En fin, se me ocurren muchos futuros usos, pero pienso que se puede mejorar, es por ello que aún no es algo definitivo, pero está ahí por si deseas usarlo.


Adiós Error 404

En esta actualización se retira el código que encierra el Error 404 y lo resumo en una simple etiqueta de datos. Por lo cual es normal que al revisarlo por primera vez lo aprecies de la siguiente manera:


error-404

Seguramente para estos momentos debes estar igual que calamardo:


error-404

Pero no estoy loco (aún), ya que está pensado para sacar mayor provecho al error 404 personalizado de Blogger, el cual admite html. En la documentación dejé un error simple que puedes usar, cuando lo comprendas estoy seguro de que crearás la página de error más creativa de internet.


Consejo: Si te hace falta espacio, recuerda que ahora puedes quitar el sidebar de la página de error C:


Correcciones

Esta actualización como todas las actualizaciones mayores anteriores está hecha desde cero, por lo cual, se corrigieron todos los errores de diseño y programación de la versión anterior, incluyendo los fallos visuales menores y todos los errores en la administración.


Documentación

Por último y no menos importante, he actualizado la documentación de mis plantillas premiun, principalmente redactando todo mejor, actualizando los códigos de ayuda y explicando a más detalle las funciones de las plantillas. Por otro lado, también arreglé algunos errores de programación del propio documento.


Plantillas actualizadas

La actualización de la plantilla Anime.xml 4.0 ya está disponible. La siguiente lista contiene el nombre de las plantillas que aunque ya cuentan con esta actualización, se irán publicando en el transcurso del mes, ya que tengo que actualizar los artículos en gumroad, la información del producto, montar las demostraciones y redactar los cambios:


  • Kuro 2.0
  • Cave 2.0
  • Leyre 4.0
  • Persona 2.0
  • Single 2.0
  • Simple 2.0
  • Sencillo 2.0
  • Basico 2.0
  • Material 3.0

Las plantillas ZMegabyte.xml y Ayami.xml no recibirán esta actualización ya que no puedo seguir trabajando sobre estos diseño (de momento). Por otro lado, este mes también se publicaran 2 plantillas en las que he estado trabajando:


  • Maily
  • Metatrón

Aunque parezca que he dicho de todo, esta actualización trae más cosas aún, pero son exclusivas de una plantilla u otra, por eso se explicara en donde corresponda. También estoy actualizando zkreations trayendo novedades y lo explicare en sus artículos correspondientes. Muchas gracias por leer y que tengan un excelente inicio de semana.