Como hago mis comics

1 xK-WVbUWPp1AzMhf0RoVqw

Pues después de tanto hacer comics (llevo desde el 2012) supongo no esta demas poner como los hago, quien sabe chance les sea de utilidad.

Materiales

No es muy complicado, papel, lápiz, borrador, escaner, tinta y el GIMP para el coloreado y ensamblaje final.

Materiales
Materiales

Inspiración de los paneles

Como bien sabe la necesidad es la madre de la invención y en mi particular caso tenia un problema muy claro, mis comics se estaban haciendo cada vez mas largos y ya no cabian en la pagina (no cuento con tableta digitalizadora de modo que el tamaño del papel es un punto de consideración) y si bien la solución mas sencilla seria hacer el comic en varias paginas esa solución no me parecia adecuada, mas que nada por que un numero siempre creciente de paginas se haria molesto de manejar y leer, por lo que me puse a buscar otra solución.

¡La Solución!
¡La Solución!

Y la encontré en un lugar inesperado, en el teléfono que tenia en ese momento, un Lumia 520 con Windows Phone 8, con los paneles cuadrados y rectangulares en una cuadricula y sin embargo sin verse repetitivos o aburridos embonando como las piezas de un mosaico, ahora con la idea venia lo bueno, ¿Como aplicar eso a un comic?

Módulos

Para mantener los tamaños consistentes y la cuadricula lo mas alineada posible decidí crear una plantilla con la que pudiera hacer los tipos de paneles que necesito con facilidad, esta plantilla se muestra a continuación.

Plantilla
Plantilla

Como podrá observar puedo usar esta plantilla para hacer seis paneles cuadrados o combinarlos en rectángulos o cuadrados mas grandes.

Ahora ¿Como hago un comic mas largo? simple planeo el comic de modo que los módulos embonen entre si, como se ve a continuación.

Ensamblaje
Mentalmente piense en Tetris y todo embona

Nota que embonan entre si, ahora vamos a armar el comic en si.

Ensamblaje

Ya que tenga los módulos listos y escaneados es momento de ensamblar el comic, esto lo realizo desde el GIMP, ya que escaneé todo y le dí el ancho deseado

Los módulos listos para ensamblar
Los módulos listos para ensamblar

Y lo combinamos en una sola imagen mas grande alineando via las lineas de los módulos

Los módulos alineados
Los módulos alineados

Y ya que queda eso se puede proceder a limpiar y colorear

Bordes

Me gusta dejar los paneles sin un contorno de modo que los colores y el contenido demarquen donde termina, me parece que le da un look mas limpio al comic claro que esto implica un paso adicional, el tener que seleccionar y convertir en ruta cada panel del comic como se ve a continuación

Preparamos los bordes de los paneles
Preparamos los bordes de los paneles

Limpiando las lineas

Ahora si bien uso tinta para lograr que las lineas se vean lo mas oscuras posibles hay un sin numero de factores que pueden prevenir eso o hacer que el papel no se vea completamente blanco, por suerte hay un truco muy sencillo para remediar eso

El primer paso es usar el canal de color azul para poder limpiar las lineas del modulo (por eso es importante seleccionar los paneles primero, después de este paso sera mucho mas complicado), pasar la imagen a escala de grises y usando el dialogo de niveles ajustar hasta que quede blanco y negro

Usando niveles para ajustar blanco y negro
Usando niveles para ajustar blanco y negro

Suavizado de lineas

Un paso extra que me gusta realizar es crear una capa adicional con las lineas en negro y aplicarle un difuminado, esto suaviza los contornos y a mi gusto le da un mejor aspecto al comic, para hacer esto copie la capa con las lineas, aplique el multiplicar capa y finalmente un desenfoque gausiano del 0.8

Blur
Blur

Capa para colores

Para facilitar el coloreado lo mas posible usualmente creo una copia de la capa con las lineas y usando el dialogo de umbral la convierto en una imagen puramente blanca y negra, sin nada de grises o anti-aliasing poniendo esta en el fondo, multiplicando las demas y con los paneles previamente seleccionados puedo colorear con solo la cubeta de rellenar áreas.

Crear una capa para colores con lineas negro solido y fondo blanco
Crear una capa para colores con lineas negro solido y fondo blanco

Coloreando

En esta parte no me complico, simplemente uso el la paleta de colores descrita aquí: Paleta de colores hasta el momento me ha bastado, si algo usando una que otra combinación de esos colores para algunos personajes o elementos.

Coloreando
Coloreando

Si bien por un rato estuve agregando sombras a los dibujos lo tardado del proceso (y cansado, haga sombreado usando el ratón) me hizo dejar de hacerlo y quedarme con colores planos.

Texto

Con esto tampoco me complico la vida es usando las herramientas que el GIMP proporciona para agregar el texto, usualmente el dialogo y texto vienen MUY improvisados, rara vez es un guión completo.

Usualmente lo que hago es escribir el texto tratando de que fluya bien y no tape demasiado (cosa mas complicada de lo que parece si olvida planear donde va el texto), hecho esto en una capa transparente pongo las burbujas de texto y narraciones

El texto y la capa de texto
El texto y la capa de texto

Hecho todo eso basta con exportar a un archivo png y el resultado lo pueden ver aquí.

Bueno, ese es básicamente el proceso que uso para dibujar estos comics, espero que esta información les halla sido de utilidad y nos vemos en la próxima 🙂

 

Anuncios

jUnit desde la linea de comandos

Consola despues de ejecutar las pruebas de unidad de un proyecto
¿Quien necesita un IDE?

Ok, ya se aventó las conferencias del tio Bob Martin en Youtube, leyó uno o dos tutoriales de jUnit y desea darle a eso del Test Driven Development una oportunidad (Intento no por que Yoda y el Sr. Miyagi se enojan si lo “intenta”) y si bien puede hacerlo dejando que el IDE o Maven haga todo el trabajo de configurar las pruebas y el proyecto, le puedo decir que saber como funciona algo sin esas comodidades puede ser la diferencia entre estar haciendo contorsionismo ritual con las clases de su código para corregir un problema o nada mas cambiar el nombre de un getter, así que sin IDE, sin Maven, sin ANT, au-naturel veamos como ejecutar las pruebas de jUnit desde la consola.

Requisitorios

Como ya dijimos vamos a hacer esto SIN las herramientas del IDE o de Maven por lo que primero necesitamos los siguientes .jar con las librerías de jUnit 5.0 en especifico, se incluye el enlace a donde bajarlos.

Ya que los tenga armaremos nuestro proyecto.

Proyecto

Ahora vamos a hacer un proyecto a la antigua, creando nosotros las carpetas de librerías y con las fuentes, esto es simple, creamos una carpeta lib donde pondremos los .jar y las carpetas necesarias para colocar las fuentes (recuerde que la carpeta donde pone el .java y .class debe reflejar el paquete de la clase) para nuestro ejemplo usaremos la siguiente estructura:

.
├── lib
│   ├── apiguardian-api-1.0.0.jar
│   ├── junit-jupiter-api-5.0.2.jar
│   └── junit-platform-console-standalone-1.0.2.jar
└── mx
    ├── calculo
    │   ├── Calculo.class
    │   └── Calculo.java
    └── calculoTest
        ├── CalculoTest.class
        └── CalculoTest.java

Los archivos Calculo.java y CalculoTest.java se presentan a continuación

package mx.calculo;

public class Calculo {
    public double calcular(double s) {
	return s*s;	
    }

    public double calcularIVA(double precio){
	return precio*0.16;
    }

    static public void main(String[] args){
	Calculo c = new Calculo();

	System.out.println("Resultado: " + c.calcular(2.0) + "");
    }
}
package mx.calculoTest;

import mx.calculo.Calculo;
import org.junit.*;

import static org.junit.jupiter.api.Assertions.assertEquals;
import static org.junit.jupiter.api.Assertions.assertTrue;

public class CalculoTest {
    @BeforeClass
    public static void setUpBeforeClass() throws Exception {

    }

    @AfterClass
    public static void tearDownAfterClass() throws Exception {

    }
    
    /**
     Con esta prueba verificaremos que jUnit este funcionando  
    */
    @Test
    public void pruebaJUnit(){
	
	assertTrue(true);
    }

    @Test
    public void pruebaCalculo(){
	Calculo calculo = new Calculo();

	assertEquals(1.0, calculo.calcular(1.0));
	assertEquals(4.0, calculo.calcular(2.0));
	assertEquals(9.0, calculo.calcular(3.0));
	assertEquals(16.0, calculo.calcular(4.0));
	assertEquals(25.0, calculo.calcular(5.0));	
    }

    @Test
    public void pruebaIVA(){
	Calculo calculo = new Calculo();

	assertEquals(1.6, calculo.calcularIVA(10));
    }    
}

Compilando las clases

Ahora con respecto a los .class, ¡Hora de desempolvar el comando javac!, sea honesto ¿Hace cuando que no lo usa?, aquí debo hacer hincapié en dos detalles

Primero los archivos .jar deben de ir donde se indica y segundo, el la linea de comandos debe de estar en el directorio raíz del proyecto, de lo contrario los comandos no van a funcionar, los comandos son los siguientes:

Para compilar Calculo.java

javac mx/calculo/Calculo.java

 

Para compilar CalculoTest.java

javac -cp lib/*:. mx/calculoTest/CalculoTest.java

 

El argumento -cp lib/*:. es para indicarle al compilador el classpath, esto es las librerías y las clases que deseamos compilar, los :. al final no los olvide ya que eso le indica al compilador que incluya el directorio actual.

Con esto ya compiló su proyecto, ahora vamos a correr las pruebas

Corriendo las pruebas

Ok ya compilo el proyecto, pero.. ¿Funciona como debe? bueno para eso hicimos las pruebas de unidad en CalculoTest, pusimos los valores esperados y los compararemos contra el resultado que den las funciones, si son iguales sabremos que el sistema funciona correctamente y si no sabremos que falló.

Para correr las pruebas use el siguiente comando

java -cp lib/*:. org.junit.platform.console.ConsoleLauncher -p mx

 

Aquí lo que estamos haciendo es correr la clase org.junit.platform.console.ConsoleLauncher ,la cual esta contenida en el archivo junit-platform-console-standalone-1.0.2.jar, y le indicamos el paquete que contiene las pruebas que deseamos ejecutar.

Notara que solo indicamos el paquete mx en lugar de mx.calculoTest esto se debe a que la clase ConsoleLauncer buscara las pruebas en el paquete indicado y en los subpaquetes de ese, de modo que si acomodo todas sus pruebas en la forma adecuada con solo indicar el paquete principal las correrá todas.

En la eventualidad de que tenga pruebas en otros paquetes completamente diferentes, basta con poner otro argumento -p con otro paquete donde buscar las pruebas, puede usar cuantos -p necesite.

Ya que ejecute el comando obtendrá la siguiente salida.

╷
├─ JUnit Jupiter ✔
└─ JUnit Vintage ✔
   └─ mx.calculoTest.CalculoTest ✔
      ├─ pruebaJUnit ✔
      ├─ pruebaCalculo ✔
      └─ pruebaIVA ✔

Test run finished after 33 ms
[         3 containers found      ]
[         0 containers skipped    ]
[         3 containers started    ]
[         0 containers aborted    ]
[         3 containers successful ]
[         0 containers failed     ]
[         3 tests found           ]
[         0 tests skipped         ]
[         3 tests started         ]
[         0 tests aborted         ]
[         3 tests successful      ]
[         0 tests failed          ]

 

Mas elaborado de lo que se imaginaba, ¿No? como puede ver se le muestra cada una de las pruebas contenidas en las clases y el estado de las mismas poniendo un ✔ para indicar que la prueba fue exitosa y un ✘ para indicar un fallo mas aparte información de por que fallo.

Tras esto se coloca un resumen de las pruebas, esto puede parecer un poco redundante en este ejemplo, pero le apuesto cuando tenga cientos de pruebas agradecerá tener ese listado a la mano.

Como un pequeño reto, usando la información que le dan las pruebas corrija el programa, recompile y obtenga la salida con todas las pruebas exitosas.

Puede hallar todo el código de este ejemplo y el script para compilarlo en GitHub :

https://github.com/HashRaygoza/TestRunner

Espero que esta entrada fuera útil y nos vemos en la próxima :).

Referencias

[1] Unit Testing with JUnit — http://www.vogella.com/tutorials/JUnit/article.html

[2] jUnit Console Launcher — http://junit.org/junit5/docs/current/user-guide/#running-tests-console-launcher-options

 

Pelea Animesca

Pelea Animesca
Pelea Animesca

Y como vemos nuestro amigo Hash tiene toda la actitud pero no los pantalones aprueba de explosiones, debería preguntarle a Goku donde los compra 😛

Transcript

Panel 1

Narrador: A sido una pelea larga, dificil y no particularmente en favor de Hash
Narrador: Y ese ultimo ataque..

Panel 2

Narrador: ¡Parece letal!

Panel 3

Villano: ¡¡Con eso Tuvo!!

Panel 5

Narrador: Lo siento malo malote, pero Hash es MUCHO mas rudo de lo que parece
Hash: ¡Aun NO acabamos!
Narrador: Aunque necesita preguntarle a Goku donde venden los pantalones anti-explosiones

 

Visual Studio Code

Visual Studio Code
Visual Studio Code

Un pequeño tour por el editor de código multiplataforma (Incluyendo a Linux), de código abierto que Microsoft lanzo hace unos años, Visual Studio Code, que es MUCHO mas de lo que se ve

Transcript

Panel 1

Narrador: Una nueva misión, un reconocimiento de algo que nunca se espero ver.
Narrador: Un programa hecho por Microsoft con una versión oficial para Linux

Panel 2

Narrador: Es un editor de texto, pero con varias características muy útiles y sobretodo una interfaz que es muy intuitiva y con enormes opciones de expansión

Panel 3

Tadeo: La interfaz es bastante sencilla con menús, espacio para el editor de texto y una muy distintiva barra lateral

Panel 4

Narrador: Esta barra lateral nos da acceso a:
Narrador: Explorador
Narrador: Buscar
Narrador: Control de Código fuente
Narrador: Depurador
Narrador: Extensiones

Panel 5

Tadeo: Desde aquí puede seleccionar los archivos en la carpeta abierta y cambiar entre los archivos abiertos.

Panel 6

Tadeo: Las siempre útiles funciones de busqueda y remplazo

Panel 7

Tadeo: Una interfaz para integrar el depurador

Panel 8

Tadeo: Y el mercado de Extensiones que le permiten expandir las capacidades de Visual Studio Code

Panel 9

Tadeo: El control de código fuente automáticamente detecta el sistema de control automáticamente, le indica los cambios, le permite almacenarlos y realizar los commits

Tadeo: En la parte inferior esta el selector de ramas de desarrollo

Panel 10

Tadeo: Y finalmente el editor en si
Tadeo: Con las extensiones correctas tiene el coloreado de sintaxis y completación de código
Tadeo: Como un extra puede dar formato al código con el comando Ctrl + Shift + i

Panel 11

Tadeo: Pues todo se ve muy bien
Tadeo: Así que le daremos un buen uso!

De vuelta al trabajo

De vuelta al Trabajo
De vuelta al Trabajo

Algo de autocrítica, si necesito ponerle mas ganas a este proyecto 😛

Transcript

Panel 1

Narrador: Ehh Hash…
Narrador: YA fue un buen sin cómics ni nada…

Panel 2

Narrador: Y los demás personajes de la tira no están contentos
Tadeo: KYA!!!

Panel 3

Narrador: Y te lo harán saber

Panel 4

Narrador: Por lo que cómics acerca de la falta de contenido NO se van a volver el contenido usual..
Narrador: ¿Verdad?
Hash: OK OK YA VOY!!!

Java Manual

Java Manual
Java Manual

¿Quien no adora tener que ir pantalla por pantalla tomando capturas y escribiendo un manual que chance nadie acabe leyendo?

Transcript

Java Manual

Panel 1

Hash: OK, hora de hacer el manual de usuario
Hash: Y claro, hay una herramienta para eso en el IDE

Panel 2

Narración: Integrada con el editor de interfaces gráficas
Narración: Que nos deja describir de forma intuitiva cada elemento y su función
Narración: Todo con el fin que sea muy simple actualizar el manual cada vez que se modifica la aplicación
Narración: Mas espacio para describir el flujo de trabajo, permisos de acceso y demás consideraciones generales en el uso

Panel 3

Narración: Y generar un documento muy bien formateado al crear el ejecutable, de modo que tengamos el ejecutable y su documentación a la par
Narración: ¿Y donde obtenemos esa funcionalidad para el IDE?

Panel 5

Hash: ¡¡EN NINGÚN LADO!!

Panel 6

Hash: Así que si me disculpan
Hash: ¡¡Tengo 40 capturas que sacar!!