10 abril 2013

Explorando las Nuevas Funcionalidades del Editor HTML de Blogger

Me quedé sorprendida con las mejoras que Blogger a implementado al editor HTML de la plantilla. Ahora es más intuitivo, y funcional. Lo han dotado de características que están orientadas a mejorar la legibilidad del código fuente de la plantilla, permitiendo tanto a programadores web, como a administradores del blogs, editar el código fácilmente.

Estas son las principales características que han sido añadidas:

  • Coloreado de sintaxis. Resalta la presentación del código con diferentes colores y fuente distinta, lo que permite que éste se más legible, ya que podrás identificar entre otras cosas, etiquetas, atributos y valores fácilmente.
  • Soporta numeración de lineas, por lo que podemos identificar la ubicación de un error, al estar haciendo un cambio o verificando el código. 
  • Auto-indentación, que en cristiano (perdón por el modismo) quiere decir que separa el código de la izquierda en cierto orden, para que sea más fácil identificar visualmente su estructura. 
  • Acceso rápido al código de los widgets. Ahora, es posible acceder al código de los widgets fácilmente solo seleccionándolo, desde la lista desplegable denominada "Ir al Widget".
  • Código plegable. Característica que permite mostrar en forma selectiva ciertas secciones de código, haciendo que la exploración de éste sea más rápida, permitiendo así su edición.
  • Carga la vista previa de la plantilla dentro del editor. Ahora sin necesidad de salir de la página, es posible ver cómo luce la plantilla, cuando estamos editando el código.

¿Qué tal? Bueno, pensando en que hay usuarios nuevos que desconocen cómo funciona el editor de Blogger, y que tenemos nuevas características, exploremos el editor y hablemos de sus funciones ;)

El Editor HTML de la plantilla, y sus características

El editor HTML de la plantilla te permite realizar cambios en la plantilla, para lograr la apariencia que desees darle al blog. Claro que hay que tener conocimiento de programación para lograrlo, aunque con algunas nociones de programación o con la ayuda de algunos tutoriales, también puedes hacer cambios, que hacen grandes diferencias en el diseño.

Para ingresar al editor de HTML, como antes, usamos la pestaña "Plantilla" del panel de Blogger, luego, hacemos click en el botón "Editar HTML".

Ingresar al editor HTML de Blogger


Hecho lo anterior, verás al editor de HTML de la plantilla, en vivo y a todo color, listo para empezar a hacer cambios en el código de la plantilla ;)


Editor HTML de Blogger


A primera vista, podemos ver que el código de la plantilla está coloreado, que como puedes apreciar, lo hace más legible.

A la izquierda, podemos ver que las lineas están numeradas, y también  podemos ver este simbolito: "", que indica que se puede desplegar el código de determinada seccion de la plantilla, como el CSS de la plantilla, que se encuentra en <b:skin>...</b:skin>, y el código de los widgets

Al desplegar el código de los widgets, estarías expandiendo plantillas de artilugios, función que como recordarás, se encontraba anteriormente en el editor. 

Arriba, se encuentran los botones con las funciones, que, siguiendo un orden de izquierda a derecha, son los siguientes:

  • Atrás nuevo. Te permite salir del editor, para regresar a las opciones que se encuentran en la pestaña "Plantilla".
  • Guardar Plantilla. Sirve para guardar los cambios que se hayan hecho en el código de la plantilla.
  • Ir al Widget nuevo. Lista desplegable que contiene todos los widgets que tenga agregados la plantilla (sus Ids, que es como Blogger los ha definido), y que al seleccionarlo, te enviará directamente al código de éste.
    Lista desplegable con ids de widgets

    Si quisieras ver el código completo del widget, tendrás que desplegarlo haciendo click en: "►"  que aparece a la izquierda donde está la numeración, en la linea de código donde empieza el widget.
  • Editar plantilla nuevo. Te permite regresar al código fuente de la plantilla, cuando estás viendo la "vista previa de la plantilla".
  • Vista previa de la plantillacambió. Esta función ya existía anteriormente, aunque ahora la vista previa se carga dentro del editor, sin salir de la página. Sirve para visualizar cómo luce la plantilla cuando estamos haciendo un cambio.
  • Restablecer plantillas de artilugios a los valores predeterminados. Esta función también ya existía aunque tenía otra ubicación. Ahora es más visible, porque aparece con el resto de los botones. Sirve para resetear o restaurar la plantilla. Dicho muy simple, sirve para que la plantilla tenga la condición que originalmente tenía antes de hacer cambios en los widgets, y ésta tendrá los valores que por defecto agrega Blogger. Esto es especialmente útil, cuando se ha editado mal la plantilla provocando problemas en el funcionamiento del blog, como cuando no funcionan los comentarios anidados de Blogger. Hay que tener en cuenta que, al usar esta función, estaremos borrando todos los cambios hechos en los widgets de Blogger. El código CSS que hayas agregado, no se elimina. 
  • Plantilla de formatonuevo. Esta nueva opción, permite mostrar o no indentación en la plantilla, que es la separación u ordenación del código que sirve para identificarlo fácilmente. Si quieres buscar algo usando Ctrl + F, deberás primero hacer click en esta opción, y luego usar dichas teclas para hacer la búsqueda, si es que no has seleccionado ir al código del widget, desde "Ir al widget". 
  • Revertir los cambios. Limpia o elimina el código que hayas añadido y que no ha sido todavía guardado en "Guardar plantilla".

Por último si deseas remplazar cualquier cosa que se repita en la plantilla, de forma automática, puedes usar las teclas Ctrl + Shift + R. Por ejemplo, si quieres cambiar la forma en que has identificado un menú: .menu_aburrido  por .menu_divertido, y lo hará, sin que tu tengas que teclear el texto uno a uno ¿qué pasada verdad?   :)
Ctrl Shift + F. Encuentra y remplaza texto uno a uno. 

Conclusiones
Tengo que decir que recibo con agrado estas mejoras. El código es más legible, por lo que será más fácil y rápido editarlo, o explorarlo. Y a ti, ¿te gustan los cambios?

Referencias: Blogger Buzz

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.