Credit image

Animar personajes con animaciones CSS

¿Sabías que hay una forma muy sencilla de crear animaciones con sprites en CSS? En esta guía o tutorial te explico cómo crearlas.

Hace años que el lenguaje CSS (propuesto por Håkon Wium Lie, uno de los desarrolladores de Opera) evolucionó de un sencillo y simple lenguaje de marcado a una completa especificación. Partió con el objetivo de encargarse de los aspectos visuales de diseño de un documento web, pero ha acabado siendo capaz de controlar mucho más: generación de contenido virtual, responsive web design y media queries, tipografías externas al sistema, transiciones, animaciones, transformaciones 2D y 3D, etc... Y precisamente, de una de estas últimas es de las que vamos a hablar en este artículo: Las animaciones CSS.

CSS permite crear sencillas o complejas animaciones en apenas algunas líneas de código, permitiendo modificarlas facilmente (e incluso automatizarlo mediante Javascript) y convirtiéndolo en una herramienta extremadamente útil y flexible. En esta guía nos va a acompañar nuestro amigo Bernard Bernoulli (Maniac Mansion, El día del Tentáculo), que nos mostrará como se hacen algunos ejemplos sencillos. Puedes abrir una nueva pestaña de CodePen e ir pegando el código HTML/CSS e ir viendo como funciona.

1. Preparación de la región del personaje

Para empezar, la parte del código HTML será extremadamente sencilla. Simplemente especificamos una capa div con id bern (de Bernard) para hacer referencia a él posteriormente:

<div id="bern"></div>

Comenzamos con el CSS. En la capa que acabamos de mencionar vamos a colocar nuestro personaje animado. Quizás, lo más complicado del asunto es conocer las dimensiones de cada viñeta (y que estén bien colocadas), así que hay que ser cuidadoso con este asunto. Herramientas interesantes para la generación o manipulación de sprites, pueden ser SpriteCow o SpritePad. Además, también tenemos SpriteDatabase, una completísima base de datos con diferentes sprites de videojuegos que podemos utilizar para estos ejemplos. Si tienes tiempo, interés y buena mano, incluso puedes seguir esta guía y crear tu propio personaje de 8 bits.

De momento, nosotros nos centraremos en definir el tamaño de la viñeta a 112x156 píxeles (más adelante veremos por qué) y le ponemos un fondo rojo para guiarnos y ser conscientes desde el principio de las dimensiones de esta región.

Nota: Ojo también a esto. Al establecer un margen automático (margin:auto) y un ancho definido (width:112px), lo que estamos haciendo es decirle al navegador que establezca dos márgenes (izquierdo y derecho) del mismo tamaño. ¿El resultado? Objeto centrado horizontalmente. Veamos todo lo que hemos hecho en código CSS:

#bern {
  width:112px;
  height:156px;
  margin:auto;  
  background:red;   /* Temporal, sólo para guiarnos */
}

2. Preparación del sprite sheet animado

Una vez hecho esto, veremos que aparece un recuadro rojo centrado en pantalla. Esta región es donde colocaremos al personaje animado, utilizando lo que se llama un Sprite Sheet (una imagen con todos los frames o viñetas de la animación del personaje). La que nosotros utilizaremos en este caso es la animación caminando de Bernard. Una pequeña explicación rápida:

Sprite sheet de Bernard (El día del tentáculo)

Vemos que cada viñeta del personaje ocupa exactamente el mismo tamaño de ancho (112px), mientras que el ancho total del sprite sheet es de 672px.

[...]

Queda el 79% del artículo
Leer artículo completo

Aquellos grandes juegos de mesa de MB

¿Recuerdas los maravillosos juegos de mesa de MB, que durante la década de los 80 y 90 veíamos en los anuncios de TV? Tragabolas, Hundir la flota, Operación, Chincheando, etc...

Antes de que los videojuegos invadieran y conquistaran el mundo, había un divertimento mucho más sencillo y humilde, con el que la mayoría de los niños soñaba: los juegos de mesa. Compañías como Bandai, Parker o MB juegos comercializaban numerosas apuestas de juegos de mesa o tablero para entretener a pequeños y jóvenes (y a veces, no tan jóvenes).

MB (Milton Bradley) era una de las empresas más potentes en este sector (al menos, en España). Apostaba fuertemente por la publicidad como modelo principal de venta, «ametrallando» a los niños en los descansos de programas de televisión o en épocas previas a Navidades o el Día de los Reyes Magos.

Aquellos maravillosos juegos de mesa de MB

En este artículo vamos a hacer memoria e intentar recordar algunos de los juegos de mesa más populares y originales de está época, que sin duda muchos recordarán con cierta nostalgia.

Disclaimer: Se avisa al lector que este artículo está cargado de imágenes a baja calidad y de videos con formatos cercanos a 30p. Ha sido toda una aventura encontrar recursos más o menos decentes para acompañar este documento, así que me disculpo por anticipado por la calidad de los mismos.

1. Tragabolas (Hungry Hungry Hippos)

Tragabolas: Nadie quería quedarse nunca con el hipopótamo rosa.

Casi sin miedo a equivocarme, puedo afirmar que Tragabolas (Hungry Hungry Hippos) fue uno de los juegos más populares de MB y que todo chaval del siglo pasado quería en su casa para jugar con sus amigos. El juego se basaba en «soltar» las bolas blancas en el centro del tablero de juego (que siempre lo hacía de forma «neutral» uno de los jugadores), mientras cada jugador, pulsaba una palanca de su hipopótamo para alargar el cuello del mismo, abrir la boca e intentar capturar cuantas más bolas posibles.

Además, el juego debía de ser una mina de oro para MB juegos, puesto que la mayoría de los niños terminaban rompiéndolo a golpes en las palancas, emocionados por ganar la partida.

2. Ratonera (MouseTrap)

Ratonera: Una ingeniosa y simpática máquina de Rube Goldberg

Ratonera (MouseTrap) fue también uno de los juegos más populares de MB debido a su ingenioso diseño. Básicamente, era un juego de tablero común y corriente, con unos ratones como protagonistas, que estaba aderezado con una original y llamativa máquina de Rube Goldberg. En ciertas ocasiones, el jugador tenía que activar la máquina haciendo girar una rueda, que a su vez desplegaba un sofisticado proceso que capturaría a los ratones situados en cierta parte del tablero.

Desgraciadamente, no he encontrado la versión en español del anuncio, por lo que adjunto su edición americana.

3. Chincheando (BedBugs)

Chincheando: ¿Cuántos desmontaron el juego para ver como era por dentro?

Y si seguimos con los éxitos de MB, no podemos olvidarnos de Chincheando, la versión española de BedBugs. El juego representaba a un pobre hombre que quería echarse una siesta en su cama, pero desgraciadamente múltiples chinches multicolores no se lo permitían.

La cama de juguete tenía un motor interno que hacía temblar el cartón con la ilustración, por lo que las chinches saltaban sin parar. El objetivo del jugador era extraer todas las chinches de su color, antes que sus contrincantes.

4. Operación (Operation)

Operación: Era realmente frustrante para personas con poco pulso.

¿Quién no tuvo o escuchó hablar de Operación? ¡El juego de mesa en el que te convertías en Doctor! El mecanismo de este juego era muy simple pero ingenioso. Mediante una delicada operación con unas pinzas metálicas, el jugador debía extraer ciertas partes del paciente sin que las pinzas tocaran el fondo de la cama del paciente. En el caso de que así fuera, la cama detectaba las pinzas y sonaba y encendía la luz de la nariz del paciente, indicándote que habías perdido.

Las partes a extraer del paciente eran muy curiosas: hueso de la fortuna, hueso eléctrico de la alegría, manzana de Adán, corazón destrozado, chuletones de la risa, mariposa juguetona, calambre de escritor, cesta para el hambre, caballo renqueante, hueso elástico, agua en la rodilla y llave de tobillo.

[...]

Queda el 73% del artículo
Leer artículo completo

Guía: Personalizar escritorio GNU/Linux con Openbox

Guía paso a paso para personalizar un escritorio de GNU/Linux ligero, atractivo y a tu medida, utilizando el gestor de ventanas Openbox.

Una de las principales ventajas que ha tenido siempre GNU/Linux es su modularidad. Es totalmente posible sustituir «fragmentos» del sistema de modo que, si alguno no nos gusta o no cumple nuestras expectativas (que pueden ser muchas y muy diversas), lo cambiamos por una alternativa que se adapte mejor a nuestras necesidades. Esta pequeña base se puede aplicar tanto a un simple programa como al propio interfaz gráfico del sistema (gestor de ventanas). Y eso es justo lo que vamos a hacer en este artículo.

Personaliza tu escritorio Linux con Openbox

A raíz de lo ocurrido con el cierre de CrunchBang me puse a trastear un poco con algunos gestores de ventanas ligeros que, alejándonos de escritorios tradicionales y más comunes como Gnome, Unity o KDE, son más ágiles y consumen menos recursos (memoria, carga de CPU o batería en portátiles). En este artículo utilizaremos Openbox, un fantástico gestor de ventanas con tres características más que deseables: extremadamente sencillo, muy potente y ampliamente personalizable.

Disclaimer: Si perteneces al tipo de persona que quiere todo hecho y listo para funcionar, este artículo NO es para ti. Prueba con alguna distro de Linux u otro sistema. Este artículo está orientado a usuarios (con o sin conocimientos) que prefieren personalizar su sistema al detalle, en favor de consumir menos recursos del sistema y tener un escritorio configurado a medida.

¿Por qué Openbox?

En Layer 3 Networking blog tienen una excelente comparativa de escritorios de Linux, donde miden el consumo de RAM de diferentes escritorios y gestores de ventanas de GNU/Linux bajo las mismas condiciones. A continuación podemos ver dicha comparativa, donde se incluyen gestores de ventanas ultra-minimalistas como TinyWM o miWM y hasta entornos completos de escritorio como Gnome3, Unity o KDE:

Consumo de memoria RAM de escritorios de GNU/Linux bajo mismas condiciones

He elegido Openbox porque es un gestor de ventanas estable, bien documentado, ágil y muy personalizable, capaz de conseguir resultados atractivos y vistosos, con un coste de recursos ridículo. Además, su configuración es muy sencilla y se guarda en dos ficheros diferentes en la cuenta del usuario (rc.xml y menu.xml). Esto da varias ventajas:

  • Configurar nuestro Openbox se reduce a modificar dichos archivos XML.
  • Es extremadamente sencillo hacer una copia de seguridad.
  • Basta con copiar esos archivos en un nuevo Openbox para tenerlo listo.
  • Permite tener diferentes configuraciones de escritorio por usuario.
  • Existen herramientas gráficas que hacen la configuración menos tediosa.

Lo que vemos a continuación es sólo un humilde ejemplo de como podemos dejar nuestro escritorio Openbox con esta guía. Sin embargo, existen mejores ejemplos que muestran las posibilidades y potencia de Openbox en DeviantArt. Echad un vistazo, porque hay diseños impresionantes y muy trabajados.

Ejemplo de escritorio GNU/Linux personalizado con Openbox

Dicho esto, comencemos. Intentaré explicar todo al máximo detalle para que incluso los usuarios sin demasiados conocimientos en GNU/Linux puedan seguir la guía sin problemas. No obstante, si hay algún detalle que no explico en profundidad, pueden preguntarlo en los comentarios.

[...]

Queda el 90% del artículo
Leer artículo completo

ProcrastiTracker: Cómo evitar perder tiempo en el PC

Herramienta antiprocrastinación: No dejes para mañana lo que puedes hacer hoy. Con este programa podrás saber en que estás perdiendo el tiempo.

Casi con total seguridad habrás escuchado la expresión «no dejes para mañana lo que puedas hacer hoy». El término procrastinación es el que define ese problema, puesto que procrastinar es lo que, desgraciadamente, muchos solemos hacer: posponer o aplazar tareas pesadas o desagradables (que deben hacerse pero no nos apetece hacer), realizando en su lugar otra tarea menos desagradable, para cubrirlo «como excusa» o, simplemente, evadirnos de una forma inconsciente.

ProcrastiTracker: Programa antiprocrastinación, ideal para gestionar el tiempo en el PC

En este artículo hablaremos principalmente de ProcrastiTracker, una herramienta antiprocrastinación que nos permitirá conocer el tiempo que estamos invirtiendo (en cada tarea, programa o ventana) al utilizar nuestro PC. Y todo ello de forma totalmente transparente.

Este tipo de programas (junto a otros como RescueTime, ManicTime u otros) pertenecen a la familia de herramientas para gestionar el tiempo. Sin embargo, las desventajas más frecuentes en este tipo de programas es que necesitan que el usuario indique manualmente las tareas que se encuentra realizando, cuando las inicia o finaliza (o algún tipo de medida de control), lo que a menudo implica que el usuario tiene que adquirir la costumbre de realizar esa aportación de datos al programa.

Procrastinar en Facebook, la procrastinación por excelencia hoy en día

Esto nos deja con que el usuario debe ser muy disciplinado, no olvidarse nunca y adquirir el hábito de realizar ese control, lo que lo vuelve una herramienta poco práctica. Además, si tienes un ritmo ajetreado de trabajo, muchas veces es complicado (por no decir imposible).

ProcrastiTracker

Sin embargo, la potencia de ProcrastiTracker reside en que hace todo eso de forma transparente, sin interacción del usuario. Sólo necesitamos descargarlo (apenas ocupa 400KB y es freeware) e instalarlo en nuestro sistema. De momento Chocolatey no lo soporta, pero Npackd sí.

ProcrastiTracker sorprende por lo ligero que es. Apenas te das cuenta que está ahí, cosa que no ocurre con prácticamente todos los programas del mismo estilo. Nos aparecerá una ventana (aparentemente compleja) que a medida que transcurra el tiempo se irá llenando de información. Dicha información representa el tiempo exacto que hemos estado utilizando un determinado programa.

Pantalla principal de ProcrastiTracker (Sí, menudo vicio al FallOut)

URL | Descargar ProcrastiTracker

Con ProcrastiTracker, si necesitamos tiempo para organizarnos y realizar algún trabajo o proyecto grande, podemos investigar donde se puede ahorrar tiempo: que tareas nos están llevando más tiempo, buscar formas alternativas de realizar tareas, donde estamos procrastinando, etc...

Así que vamos a aprender a utilizar las diferentes funcionalidades de ProcrastiTracker. Porque seguro que a muchos, el siguiente gráfico les ha resultado muy familiar en varias ocasiones:

Mi máximo de productividad diario

[...]

Queda el 72% del artículo
Leer artículo completo

1 2 3 4 5 ... 387 #