Credit image

10 pasos para renovar el front-end del blog

Explicación del proceso de rediseño (frontend) realizado en Emezeta en 2015, comentando herramientas y tecnologías usadas, así como algunas curiosidades de desarrollo.

Hacía ya bastante tiempo que tenía ganas de renovar el diseño de Emezeta, pero nunca encontraba tiempo para ponerme con ello, así que en diciembre decidí liarme la manta a la cabeza y ponerme como objetivo empezar 2015 con un rediseño del front-end.

Mis objetivos principales de rediseño eran los siguientes:

  • Aspecto visual: Renovar la interfaz para conseguir un diseño más actual y atractivo, utilizando principalmente el lenguaje CSS (el enlace incluye chuleta para descargar).
  • Minimalismo: Conseguir un aspecto minimalista a la vez que elegante, enfocado en el contenido, la experiencia de usuario y la legibilidad.
  • Eficiencia: Como fan de la optimización, luchar por conseguir (sin incumplir los puntos anteriores) un código que sea lo más eficiente y rápido posible.

Además, el cambio era urgente, ya que dar clases de CSS3 y no tener un front-end en condiciones no es precisamente predicar con el ejemplo.

Emezeta 2015: Rediseño del front-end

En este artículo mencionaré algunas de las principales novedades de la interfaz rediseñada, las tecnologías y herramientas que he utilizado y curiosidades sobre el proceso.

Disclaimer: En ningún caso pretendo «sentar cátedra» ni insinuar que se trata de la mejor forma de realizar un rediseño. Nada más lejos de la realidad. Mi intención es compartir como hice el rediseño, facilitando información para los interesados y favoreciendo el debate para aprender de los comentarios de otros usuarios, yo el primero.

1. Tecnologías y herramientas utilizadas

Antes de empezar, hay que disponer de una buena base de tecnologías y herramientas. Comencemos por un buen editor de código para programar. En mi caso, y aún teniendo a mi disposición editores excelentes para programar como Atom, Brackets u otros, personalmente me decanté por Sublime Text. ¿Razones? Su velocidad, su alta personalización, y la gran cantidad de paquetes para extender sus capacidades.

He utilizado el preprocesador LESS para generar el CSS final. ¿Por qué LESS y no SASS (u otro)? Realmente no hay razón. La sintaxis de LESS me pareció más sencilla y agradable a primera vista, y la instalación y uso de lessc mediante npm (NodeJS) es prácticamente intuitiva. (Si alguien considera que SASS u otro preprocesador CSS está muy por encima de LESS por alguna razón, puede debatirlo en los comentarios).

Además, también utilizo autoprefixer para ahorrarme el incluir prefijos de fabricante como -webkit u otros, ya que esta herramienta lo hace automáticamente mediante información extraída de CanIUse. De esta forma me centro en crear código CSS consistente y atómico.

Tecnologías utilizadas en el rediseño

Como mi intención era desarrollar en local y automatizarlo todo desde el propio editor, cree un pequeño plugin llamado MakeOnSave.py que realiza estas acciones cada vez que guardo un documento .less, además de la minificación de archivos .css y .js para ahorrar ancho de banda. Si alguien prefiere hacer todo esto desde el propio servidor, puede optar por utilizar herramientas como Grunt o Gulp.

Por la parte del etiquetado HTML, he aprovechado para simplificar el código y utilizar características interesantes de HTML5 como validadores en formularios, etiquetado semántico y datos estructurados como hAtom u otros detalles relacionados. Utilizo PHP, por lo que he optado por Smarty como motor de plantillas, mientras miro fijamente a Haanga. Pero de la parte del Backend ya hablaré en otra ocasión.

Como editores de diseño gráfico he utilizado varios programas, pero principalmente el maravilloso Inkscape, Paint.NET y el equivalente a MacGyver para tareas gráficas ligeras: IrfanView. También suelo utilizar ImageMagick y RIOT para ciertas tareas de optimización de imágenes y para automatizar tareas desde terminal.

Respecto a la parte de Javascript, he utilizado principalmente jQuery, pero ya hablaré de ello un poco más adelante.

2. Legibilidad y aspecto visual

Había comentado que mejorar la legibilidad era uno de mis objetivos principales con el rediseño. Para ello, hice un estudio intensivo de la tipografía que utilizaría en los artículos. Tras evaluar muchas opciones, finalmente me decanté por Montserrat para titulares y Exo 2 para textos y párrafos.

[...]

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

Pantallas de protección anticopia de juegos clásicos

«Consulta el símbolo 8 de la página 15 del manual.» ¿Recuerdas las pantallas de protección anticopia de los juegos clásicos de PC? ¡Aquí podrás recordar más de 30!

Hubo un tiempo en el que los grandes juegos clásicos de la época del MSDOS utilizaban un curioso, rústico y particular sistema DRM (protección digital anticopia) que quizás muchos habrán olvidado a estas alturas. A pesar de que generalmente este tipo de protecciones anticopia acababan siendo muy poco efectivas (debido al agujero analógico), probablemente por nostalgia u originalidad, a muchos nos traen aún gratos recuerdos.

Pantallas de protección anticopia de juegos clásicos

Estas protecciones anticopia se basaban en pedir al usuario realizar una consulta en el manual que venía con el juego en formato físico. En él, te podías encontrar una serie de códigos (en muchas formas y colores) que pretendía verificar que el juego era realmente original.

En este artículo vamos a ver una recopilación de más de 30 juegos clásicos de PC y las pantallas de protección anticopia que utilizaba cada uno ellos.

Indiana Jones y la última cruzada (LucasFilm, 1989)

La famosísima primera aventura gráfica de Indiana Jones, años antes de que apareciera en cines la nefasta e inexistente cuarta parte de la trilogía de nuestro héroe, la última cruzada fue la primera en aparecer, de la mano de LucasFilm.

Al iniciar el juego, y tras una breve introducción musical, Marcus Brody nos pide que le hagamos la traducción que lleva tiempo pidiéndonos. Indy saca su libreta de notas, y en ella debemos indicar los códigos de las tablas de traducción del juego: unas páginas con el título del juego en rojo y los códigos en azul. Al mirar dichas tablas con unas gafas de celofán rojo (en la imagen de portada de este artículo), veíamos sólo el código que había que marcar (y de paso se evitaba que el usuario hiciera fotocopias de las páginas). En el caso de fallar con los códigos, se activaba la versión demo, que permitía jugar hasta un cierto punto.

Aventura gráfica: Indiana Jones y la última cruzada

El juego original incorporaba una gran cantidad de materiales: el Diario del Santo Grial, las tablas de traducción, el manual del juego y otros componentes. Si quieres echar un ojo a algunas aventuras más de la época, similares a esta, puedes leer 10 aventuras gráficas clásicas (Parte 1).

Maniac Mansion (LucasFilm, 1987)

Pero Indiana Jones and the Last Crusade no era la primera aventura gráfica de LucasFilm que utilizaba este método. Unos años atrás, en 1987, aparecía Maniac Mansion la primera parte de la conocida The day of the Tentacle. En ella, Dave y sus amigos (entre ellos, el gran Bernard Bernoulli) debían rescatar a Sandy de la mansión de los Edison, descubriendo locos sucesos por el camino.

Aventura gráfica: Maniac Mansion

El sistema de protección era muy similar al de Indiana Jones, unas tablas divididas por secciones, con los códigos necesarios para abrir la puerta acorazada que dividía la parte baja de la parte alta de la mansión. Se utilizaba el mismo sistema de las gafas de celofán rojas. El juego era especialmente divertido por la gran variedad de muertes que podían ocurrir, como cuando fallabas los códigos y activabas la autodestrucción de la mansión.

En el artículo 16 fan arts de Maniac Mansion podrás encontrar las cosas que han llegado a hacer sus fans... ¡Hasta el meteoro púrpura en un tarro!

Por cierto, recientemente Ron Gilbert ha anunciado que va a crear Thimbleweed Park, una aventura gráfica clásica, hermana de Maniac Mansion por crowdfunding.

The secret of Monkey Island (LucasFilm, 1990)

Y si hemos mencionado Indiana Jones y Maniac Mansion, no podemos dejar fuera esta otra obra maestra: The Secret of Monkey Island. En esta primera parte de la gran saga de Guybrush Threepwood comenzábamos a seguir los pasos necesarios para convertirnos en un verdadero pirata, con combates de insultos incluidos. Sin embargo, antes de empezar a jugar, se nos mostraba una pantalla donde se preguntaba (dependiendo del lugar) el año en el que fue colgado dicho pirata.

La novedad venía en que en lugar de la tradicional hoja de manual, se utilizaba una rueda de códigos Dial-A-Pirate (enlace gracias a ktzar), que moviéndola podíamos ver las diferentes soluciones a las preguntas de la protección anticopia.

Aventura gráfica: The Secret of Monkey Island

En el artículo 10 razones por las que Monkey Island es genial enumero mis gags preferidos de esta genial primera parte de Monkey Island (¡incluye el gag del diskette que nunca existió!).

En la segunda parte de Monkey Island (LeChuck Revenge, 1991), el sistema de la rueda de códigos se mantuvo, pero esta vez preguntaba por la cantidad de ingredientes necesarios para crear diferentes recetas.

Aventura gráfica: Monkey Island 2 (LeChuck Revenge)

Recuerda que para jugar actualmente a la mayoría de estas aventuras gráficas (originalmente orientadas a sistemas MSDOS) puedes utilizar tanto SCUMMVM como DOSBox y hacerlas funcionar en Windows actuales, Mac, GNU/Linux o incluso dispositivos móviles como Android o iOS.

Prince of Persia (Brøderbund, 1989)

Prince of Persia no era una aventura gráfica en sí, pero si que fue un juego muy popular y famoso en su época. Antes de comenzar a luchar contra los guardas de palacio o los esqueletos de las mazmorras, se pedía consultar el manual del juego para seleccionar las pociones que coincidían con los códigos del mismo.

Juego: Prince of Persia

Siempre suelo comentarlo cada vez que hablo de este juego: Jordan Mechner, su programador, colgó hace algún tiempo el código fuente de su juego original Prince of Persia (Apple II) en GitHub. ¡Líneas y líneas de código en ensamblador!

The Day of the Tentacle (LucasArts, 1993)

Y habíamos hablado de The Day of the Tentacle, la segunda parte de Maniac Mansion. En ella, Bernard Bernoulli pasa a ser el protagonista principal, junto a Laverne y Hoagie, quienes se encargarán de frustrar los planes del malvado tentáculo púrpura, al que le acaban de salir los brazos y se siente como si pudiera conquistar el mundo.

Aventura gráfica: El día del Tentáculo

En este caso, la protección anticopia utilizada son los planos de la batería-ensalada de Fred Edison, quién te pide que corrijas la cantidad de ingredientes para que el invento funcione correctamente, cosa muy sencilla consultando el número de patentes de tu manual.

Alone in the Dark (Infogrames, 1992)

Si pasamos de las aventuras gráficas al género del Survival Horror, nos encontramos con uno de sus padres: Alone in the Dark. Esta maravilla de Infogrames, introducía al jugador en un mundo tridimensional en el que la tensión del ambiente era una de sus características más destacables.

Al empezar el juego, se nos preguntaban los ítems que hay en la página del manual del juego, que podían seleccionarse en el interior del cuadro del sistema de protección anticopia.

Juego Survival Horror: Alone in the Dark

Para los fans de esta saga: Existió otro juego similar de Infogrames, bastante desconocido, llamado Time Gate: Knight Chase que utilizaba el mismo motor de Alone in the Dark con algunas modificaciones.

[...]

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

10 trucos para mejorar la terminal de Windows

10 consejos para convertir la aburrida y limitada terminal de Windows (el símbolo de sistema) en una potente y flexible terminal similar a la de GNU/Linux.

Probablemente, la mayoría de nosotros coincidiremos en que la potencia y versatilidad de una terminal de GNU/Linux se encuentra a años luz de la de un sistema Microsoft Windows. O al menos, esa es mi impresión. También es muy probable que, si provienes de otra web, en sus comentarios hayan otros usuarios respondiendo al título de este artículo con un predecible «Instalando Linux».

¿Cómo mejorar la terminal de Windows?

Pero dejando a un lado estos debates, centrémonos en la terminal de Windows. Es fea, incómoda y poco personalizable (o muy compleja de personalizar en algunos casos). Es cierto que la terminal no es una característica destinada al perfil habitual del usuario de Windows, pero los usuarios avanzados la utilizan frecuentemente porque aumenta mucho la productividad. Sin embargo, acaban sintiéndose muy limitados en este aspecto debido a la carencia de posibilidades. ¿Cómo solucionarlo?

1. Instala un emulador de terminal decente

Como hemos comentado, la terminal de Windows es muy poco flexible y tiene muchas carencias, por lo que el primer paso a realizar es instalar un emulador de terminal más decente. Tenemos muchas opciones a nuestro alcance, pero sin duda, una de las mejores es ConEmu (Console Emulator):

Console Emulator

Este emulador de terminal es sencillamente impresionante, ya que tiene una increíble cantidad de opciones para personalizar su funcionamiento. Entre ellas podemos encontrar características que harían mucha falta en la terminal por defecto de Windows:

ConEmu: Emulador de terminal para Windows

URL | ConEmu: Console Emulator

Con este emulador tendremos a nuestro alcance un estupendo entorno para trabajar sin las limitaciones de la terminal por defecto de Windows.

cmder

No obstante, si ConEmu no nos gusta o nos parece muy complejo, podemos optar por utilizar cmder, un emulador de terminal basado en ConEmu, pero con ciertos añadidos como una línea de comandos al estilo bash con Clink y sobre todo, un agradable y atractivo aspecto visual para hacerlo más intuitivo y cómodo:

cmder: Emulador portable de consola para Windows

URL | cmder: Portable Console Emulator

Además, entre sus características más llamativas se encuentra la posibilidad de utilizarlo como aplicación portable, de forma que no es necesaria su instalación en el sistema.

Windows PowerShell

No me olvido de la alternativa que propone Microsoft, la utilización de Windows PowerShell, una ampliación de su terminal por defecto, donde puedes utilizar un sistema de scripting para conseguir realizar tareas más específicas y potentes. Incorpora una utilidad llamada PowerShell ISE (Integrated Scripting Environment) donde podemos editar, depurar y ejecutar nuestros propios scripts.

Línea de comandos en PowerShell para instalar Chocolatey

URL | Windows PowerShell

Sin embargo, y a modo de opinión personal, no hay que olvidar que se trata de un lenguaje de scripting, lo que lo hace estupendo para crear tus propias tareas automatizadas o sistemas programados, pero demasiado denso como para utilizarse a modo de herramienta de administración de sistemas.

Existen otros emuladores que también pueden resultarte interesantes, como por ejemplo PowerCMD, Console2 o ConsoleZ.

2. Instala un gestor de paquetes (como apt-get)

Una de las herramientas más maravillosas de GNU/Linux para los administradores de sistemas son los gestores de paquetes como apt-get, yum, pacman o emerge: comandos mediante los cuales puedes instalar aplicaciones (y sus dependencias) sin necesidad de ir a sus respectivas páginas webs a descargarlas, realizando el proceso de descarga e instalación de una forma rápida y sencilla. Y lo mismo con la actualización o desinstalación.

Existe un gestor de tareas para Windows llamado Chocolatey que permite instalar aplicaciones siguiendo la misma filosofía. Basta con escribir en una terminal de PowerShell (con privilegios de administrador) la línea de instalación que encontramos en su propia web Chocolatey. Una vez hecho esto, podremos:

  • Buscar aplicaciones escribiendo choco search [programa]
  • Instalar aplicaciones escribiendo choco install [programa]
  • Desinstalar aplicaciones escribiendo choco remove [programa]
  • Actualizar aplicaciones instaladas choco update
Chocolatey: Gestor de paquetes para Windows

URL | Chocolatey

En este momento, Chocolatey tiene un total de 11.108 paquetes (2.354 paquetes únicos), y la mayoría de las aplicaciones mencionadas en este artículo pueden instalarse desde este gestor de paquetes.

3. Instala Git (incorpora Bash y herramientas relacionadas)

Otra de las herramientas recomendables es Git, uno de los sistemas más populares para realizar control de versiones, o lo que es lo mismo, organizar y catalogar los cambios que realizas sobre cualquier tipo de documento de datos sujeto a modificaciones (código fuente de programas, imágenes SVG, documentos de texto, etc...).

Al margen de los beneficios directos que podría tener utilizar este tipo de gestores de versiones, o hacer git clone para descargar y preparar aplicaciones, con MSysGit puedes instalar Git junto a MSys (Minimal System), una colección de comandos UNIX como find, sort, grep u otros, y convertir así la terminal de Windows en algo más parecido a la de GNU/Linux.

Git con Bash y herramientas UNIX

URL | MSysGit

Esta colección de comandos pertenecen a MinGW (Minimalist GNU for Windows), un fork de Cygwin (Cygnus Windows). También existen las CoreUtils o UNIX Utils, que a diferencia de las anteriores, son ports nativos del sistema y por lo tanto no dependen de otras librerías.

De esta forma, podríamos disponer, por ejemplo, de comandos como wget para descargar archivos directamente desde una línea de comandos sin depender de interfaces gráficas como WinWGet, en este caso. En 10 comandos interesantes para GNU/Linux puedes ampliar tus conocimientos sobre los comandos tradicionales y encontrar otros muy interesantes.

[...]

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

Guía de Sublime Text: ¿El mejor editor de código?

Sublime Text es uno de los mejores editores de código que existen. ¿Por qué? En este artículo se explican detalladamente sus características y funcionalidades.

Sublime Text es un excepcional editor de textos que aporta muchas características útiles a la hora de programar o editar código. El editor está cargado de funcionalidades útiles y cómodas desde el punto de la usabilidad y eficiencia, utilizando el método geek y convirtiendo nuestro trabajo de edición de texto en una experiencia cada vez más sencilla y agradable, a medida que vamos aprendiendo a utilizar todas sus funcionalidades.

Editor de código Sublime Text

Su licencia cuesta aproximadamente 50 euros, aunque permite utilizarse a modo de prueba gratuita durante un tiempo con todas sus funcionalidades y sin ningún tipo de limitación. Es multiplataforma y puede utilizarse desde Windows, GNU/Linux o Mac OS X (10.7+). Puedes descargarlo desde el siguiente enlace:

URL | Sublime Text 3

Características interesantes

Pestañas

Al igual que otras aplicaciones de la actualidad, Sublime Text soporta pestañas, una característica que popularizaron los navegadores web. En cada una de estas pestañas, se muestra una x para cerrar la misma, que cambia a un circulo gris cuando se han escrito cambios en el archivo y no se han guardado todavía.

Sublime Text: Pestañas

Autocompletado

Sublime Text tiene resaltado a color de sintaxis para facilitar la lectura de código, así como numerado de línea. También muestra un pequeño índice gráfico a la derecha, por el cuál podemos desplazarnos rápidamente a golpe de clic del ratón.

Pero quizás una de las características que más se agradecen (sobre todo a los usuarios que no tienen buena memoria), es el autocompletado. Esta funcionalidad nos ayudará a recordar como se escriben ciertos comandos, funciones o textos del lenguaje o marcado en el que nos encontramos.

Un ejemplo de autocompletado en CSS

Además, en muchos lenguajes (como por ejemplo, PHP), Sublime Text nos facilita el orden de los parámetros, por si no los recordamos, algo muy común en PHP con funciones como strpos o explode, donde el orden de los parámetros es diferente.

Sublime Text: Ayuda de sintaxis

Selecciones múltiples

Una de las características más interesantes de Sublime Text es su flexibilidad para realizar tareas comunes de una forma sencilla y rápida. Por ejemplo, si seleccionamos una palabra con el ratón (en el ejemplo, len), pulsando CTRL+D podremos ir seleccionando las siguientes coincidencias y modificarlas todas a la vez:

Sublime Text: Selecciones múltiples

También puedes utilizar la combinación CTRL+K para saltarte alguna selección que no quieras utilizar en el reemplazo.

Ediciones múltiples

Seleccionando varias líneas y utilizando la combinación de teclas CTRL+SHIFT+L puedes editar varias líneas a la vez, muy útil para cambios paralelos repetitivos:

Sublime Text: Ediciones múltiples

[...]

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

↓ ¡Atención! Hay más páginas de comentarios...1 2 3 4 5 ... 386 #