Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Computer Skills
  2. Monodraw

Usando Monodraw para Comentar Código

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Final product image
What You'll Be Creating

Siendo un programador independiente, frecuentemente necesito arreglar el código de otro o mover un tema de una plataforma a otra. Esto lleva a una vasta lista de código sin comentar que necesito descifrar.

En este tutorial, te mostraré mi flujo de trabajo para encontrar rápidamente el camino en el código y documentarlo de manera que sé lo que está haciendo. Estaré usando la aplicación Monodraw para crear Arte ASCII.

ASCII significa American Standard Code for Information Interchange.

Para entender mi aproximación, necesitas darte cuenta que la mayoría de los editores de código modernos tienen una característica llamada minimap. Este es una vista condensada del código que yace al lado derecho del editor.

Minimap in Sublime Text Atom and Brackets
Minimap en Sublime Text, Atom y Brackets

Estos son los tres editores más comunes con sus minimaps. Sublime Text 3 tiene minimaps integrados, mientras que Atom y Brackets lo tienen usando un plugin.

El minimap te permite ver la estructura del código fácilmente, pero no puedes leerlo. Para ver las cosas más claras, puedes agregar Arte ASCII.

Creando Arte ASCII

Arte ASCII es usar símbolos normales ASCII para crear una imagen. Algunas personas usan el numeral para deletrear palabras.

Ya que la mayoría de los editores de código usan fuentes monoespaciadas, el arte ASCII es realizable. Pero, siempre se me dificulta hacer que se vea bien. Para mí, toma mucho esfuerzo crear Arte ASCII legible.

Monodraw Application
Aplicación Monodraw

Ahí es donde Monodraw puede ayudar al codificador. Piensa en Monodraw como el Adobe Illustrator para Arte ASCII. No solo hace fácil el crear Arte ASCII, sino que te da más opciones y siempre agrega detalles ilustrativos a tu código.

Cuando se abre Monodraw, tienes un área de trabajo en blanco dividida en cuadrados. Cada cuadrado es un área de símbolo ASCII. Entonces puedes dibujar fácilmente el arte ASCII que quieras. Monodraw automatiza la mayoría por ti.

El lado de la izquierda lista los objetos en tu espacio de trabajo con opciones para moverse hacia atrás y hacia adelante en orden visual. Cada objeto tiene un nombre por defecto, pero puedes cambiarlo a algo más descriptivo. Al lado derecho está el inspector. Usas el inspector para inspeccionar los parámetros de los objetos y hacer ajustes.

Creating the Header Tag

Dando clic en el icono Texto en la barra de herramientas, puedes crear un área de texto en el espacio de trabajo. Mostrará un diálogo en donde escribes el texto que quieres. Selecciona el tipo de representación en el inspector en la derecha.

Aquí, he seleccionado el estilo de fuente de Banner. Monodraw tiene 149 estilos de fuente diferentes de los cuales elegir. Si quieres cambiar el texto, da doble clic en el área de texto para abrir el diálogo otra vez.

Mueve el área de texto a lo largo del espacio de trabajo. El inspector en la derecha te permite agregar bordes, sombras, alineación y muchas otras opciones para obtener el efecto que quieres.

Isometric Header Tag with Border
Etiqueta de Encabezado Isométrico con Borde

La fuente Epic se muestra muy bien en el minimap. La uso con un borde para ayudar a resaltar en el código. Para exportar el arte ASCII a tu editor, selecciona desde el menú Archivo - Exportar.

Export Dialog
Diálogo de Exportación

Existen opciones para exportar como texto ASCII, PNG o SVG. La opción de texto ASCII tiene la opción de copiar al portapapeles en la esquina inferior izquierda. Esta es la manera principal en que exporto mi arte. Lo pego en el código fuente.

La opción de estilo de comentario encerrará el arte ASCII en el estilo de comentario para el lenguaje que estás usando. Estaré usando el estilo de comentario XML/HTML en este tutorial.

Una nota de precaución: si el arte ASCII no se ve bien en el editor de código, entonces el tema del editor no está usando una fuente monoespaciada, tiene envoltura de palabra activado o el tema del editor uza comentarios italizados. Necesitarás ajustar el tema y las opciones de envoltura de palabras. Para tener una mejor coincidencia, abre las preferencias con Commando-,(Commando Coma).

Preferences
Preferencias

En el diálogo de preferencias, establece la fuente para coincidir con la fuente usada en tu editor. Ya que uso Menlo Regular 14 en Sublime Text, establezco las preferencias a la misma fuente y tamaño.

Comentando Código

Administro algunos sitios web que originalmente creé en WordPress pero estoy en el lento proceso de moverlos a Craft CMS. Ya que quieren mantener el mismo tema, estoy teniendo que recrear el tema.

La manera más sencilla de comenzar es verter el código de la página abriendo el sitio web en un navegador, dar clic secundario dentro del sitio, seleccionar Ver Fuente de la Página y copiar y pegar la fuente en el editor de texto. Eso es más rápido que ir a través de los diferentes archivos en WordPress.

Una vez que tengo el archivo fuente básico, uso Sublime Text para darle un formato bonito con el paquete HTML-CSS-JS Prettify. Una vez que se ha formateado agradablemente, puedo etiquetar fácilmente las secciones.

HTML with Section Names
HTML con Nombres de Sección

Crear cada etiqueta y poniéndolas en el código sólo toma segundos. Si lo hubiera hecho a mano, habría tomado horas.

Puedes ver en el minimap los diferentes banners para cada sección. Cuando necesitas una sección en particular, puedes verla fácilmente y dar clic en esta en el minimap.

Dar clic en cualquier lugar en el minimap te lleva a es ubicación en el código. Si es difícil de ver, incrementa el tamaño de tu fuente o intenta uno de los otros estilos.

Estructurar Documentación

Ya que Monodraw ayuda a hacer formas, puedes usarlo para documentar el diseño para el sitio. Usando la herramienta Box, crea cada área y etiquétala usando el Text Box sin establecer un estilo de fuente.

Site Layout Documentation
Documentación de Diseño de Sitio

A medida que creas elementos, puedes ver cada elemento en la parte izquierda de la pantalla. Puedes dar clic sobre múltiples elementos, como lo hice para la caja lateral y el texto y uso las herramientas de alineación en el inspector en la derecha para centrar el texto.

Site Layout Documentation Exported to Sublime Text
Documentación de Diseño de Sitio Exportada a Sublime Text

Exportándola y colocándola en el editor para dar una gran vista previa del diseño para esta página web.

Simple Flowchart Example
Ejemplo de Diagrama de Flujo Simple

Incluso puedes usarlo para crear diagramas de flujo que puedes agregar a código JavaScript.

Creé esto con tres cajas, un diamante, tres líneas y algo de texto. Cuando seleccionas la herramienta de línea y seleccionas un objeto que está ahí, este te mostrará puntos azules que puedes conectar a la línea. Imagina hacer esto a mano.

Si quieres imitar una imagen, usa el elemento Picture, selecciona la imagen desde el disco duro y trázala con la herramienta pluma y selecciona diferentes caracteres ASCII para pintarla.

Esto requiere de una habilidad más artística para lograrlo, pero otros han hecho réplicas de iPhone y más.

Características más Nuevas

Escribí este tutorial con la versión 1.0.1. Están trabajando sobre y casi listos para lanzar la versión 1.1.

Una de las grandiosas nuevas características es la habilidad de crear Snippets y compartirlos con otros. Actualmente tengo un archivo con piezas de Arte ASCII que copio y pego en otros documentos.

Tener Snippets será incluso más fácil.

Otros Recursos

Para descargar un archivo que contiene un documento Monodraw con el Arte ASCII usado en este tutorial. Si quieres aprender más acerca del Arte ASCII, podrías querer revisar estos sitios web:

Conclusión

Ahora que ves lo fácil que es agregar Arte ASCII a tu código, ve e pruébalo. Me ha ahorrado muchas horas de buscar la sección correcta de código.

Puedes usar un programa minify para quitar los comentarios y compactar el código. El paquete Minify para Sublime Text es lo que uso. No olvides mantener tu versión bonita también.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.