Credit image

Recibe las actualizaciones de Emezeta.com en tu correo:
¡O sígueme en Twitter!

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

Alternativas minimalistas a Bootstrap: Frameworks CSS (III)

¿Quieres una alternativa ligera y rápida a Bootstrap? En esta tercera entrega encontrarás varios frameworks CSS para crear diseños web minimalistas.

En otras entregas de esta serie de artículos, hemos hablado de frameworks CSS a diferentes niveles. En la primera parte, mencionamos alternativas a Bootstrap que siguen su mismo objetivo: ser una colección gigante de componentes y código prediseñado, listo para utilizar y realizar los mínimos cambios posibles.

En la segunda parte, alternativas ligeras a Bootstrap presentamos un conjunto algo más numeroso, de frameworks CSS alternativos, donde no hay presente tanta carga de Javascript y el tamaño del mismo suele ser notablemente menor.

En esta tercera parte, hablaremos de alternativas a Bootstrap minimalistas, la mayoría de ellos con un tamaño menor de 10KB, siendo ideales para pequeños proyectos donde se busca la simplicidad, se quiere un sitio ligero y rápido, o no se quiere arrastrar con componentes o código prediseñado que nunca se va a utilizar.

1. Milligram

Milligram es un estupendo framework CSS muy sencillo que apenas ocupa 9KB. Está especialmente diseñado para tener un buen rendimiento y acelerar lo máximo posible un desarrollo visual.

Se trata de un framework minimalista que viene ya con tamaños de tipografías utilizando unidades rem (relativas a la fuente inicial) utilizando la tipografía Roboto por defecto, tiene definidos estilos visuales para citas, botones, listas, campos de formularios, tablas y códigos (sin resaltado de sintaxis). Utiliza grids con un tamaño máximo de 112rem y usando Flexbox, que hace que el código sea más simple y cómodo.

Milligram también provee documentación con algunos trucos y técnicas a la hora de utilizarlo, como por ejemplo, utilizar la estrategia Mobile First (que minimiza el código CSS sin utilizar) o extender herencia.

2. Wing

Wing CSS es un framework minimalista muy similar a Milligram, que está orientado para diseños intuitivos, ligeros y bonitos. Es aún más ligero que el anterior, ocupando apenas 5KB. Aún así, incorpora multitud de facilidades: tamaños de encabezados, sistema de grid de 12 columnas (mínimo 960px), botones, campos de formulario, menús de navegación y algunos componentes como tarjetas (cards) o utilidades para centrar o justificar, así como ocultar secciones en tablets o dispositivos móviles.

3. Skeleton

Skeleton es ideal para comenzar pequeños proyectos en los que quieres partir de una base. Más que un framework CSS, se podría hablar de Skeleton como de un boilerplate+framework muy, muy simple. Skeleton nos ofrece no sólo un código HTML organizado y comentado para utilizar de base, sino también un código CSS organizado y comentado, con ciertas facilidades como un sistema grid de 12 columnas (con un máximo de 960px) responsive y listo para utilizar en diferentes dispositivos, utiliza la tipografía Raleway por defecto, tiene un interfaz de botones muy visual y legible, así como formularios, listas, tablas y otras utilidades.

Otro proyecto similar muy interesante es awsm.css (Awesome CSS). Se trata de una librería CSS para «embellecer» HTML semántico, sin necesidad de utilizar clases o atributos.

[...]

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

Alternativas ligeras a Bootstrap: Frameworks CSS (II)

¿Buscas alternativas ligeras y rápidas a Bootstrap? Esta segunda entrega incluye una colección de frameworks CSS alternativos para nuestro sitio web.

En el último artículo, hablamos de alternativas a Bootstrap, para aquellos que querían conocer ciertos frameworks diferentes pero del mismo estilo que Twitter Bootstrap, como por ejemplo, Materialize CSS o Semantic UI.

Estos frameworks, a grandes rasgos, son grandes alternativas, complejas, que suelen englobar una gran cantidad de componentes (agrupaciones de código para crear estructuras de interfaz de usuario más o menos comunes) en el panorama del diseño web.

En esta segunda entrega, mi intención es agrupar una colección (algo más diversa) de frameworks alternativos a Bootstrap, pero esta vez centrándonos en alternativas menos pesadas y complejas, que en general, ni siquiera requieran Javascript.

1. Pure CSS

Pure CSS es un estupendo framework desarrollado por Yahoo! especialmente orientado en la simplicidad y legibilidad. El gráfico multicolor que muestra en su página principal ya da una idea de lo simple que es, puesto que sumando cada una de las partes específicas (Base, Grids, Forms, Buttons, Tables y Menus), apenas llega a 16KB en total.

Permite personalizar el framework y quedarte sólo con las partes que quieres utilizar (por si sólo vas a usar el grid o los botones, por ejemplo), incluso pudiendo utilizar un CDN como jsDelivr.

2. Bulma

Bulma es un framework CSS orientado para el desarrollo de páginas webs muy legibles y agradables, tanto para el visitante, como para el desarrollador. Tiene una documentación muy detallada y digna de alabanza, ya que están todas sus características muy bien documentadas, empezando por sus características más básicas y elementales, hasta llegar a las más complejas o las que incorporan mayor cantidad de código.

Además, se trata de un framework bastante moderno, que incorpora características interesantes como Flexbox, sistema en el que está basado.

3. Picnic CSS

El objetivo de Picnic es poner a nuestra disposición una alternativa a Bootstrap ligera, sólo con CSS, y lo más visualmente agradable posible. Y lo consigue bastante bien. Echando un vistazo a su documentación, vemos que tiene un gran número de elementos para utilizar con este framework que ocupa apenas 38KB.

A pesar de que el framework no contiene Javascript, a lo largo de la documentación te pone algunas líneas de código en javascript que puedes incluir para mejorar la experiencia de usuario, de forma opcional.

4. Primer CSS

Primer no es sólo un framework, sino una guía de estilo y un conjunto de herramientas para crear páginas con el «look and feel» de GitHub. Desde recomendaciones HTML hasta fragmentos de código, pasando por componentes al estilo de los que existen en Bootstrap, siempre manteniendo la misma apariencia de la famosa plataforma de repositorios de código.

[...]

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

Alternativas a Bootstrap: Frameworks CSS (I)

¿Buscas alternativas a Bootstrap para el diseño de una web? En este primer artículo encontrarás varios frameworks CSS diferentes para utilizar en tu web.

Hoy en día, cuando llevamos a cabo desarrollos o diseños web, y nos estamos enfocando en el aspecto visual de una página, solemos decantarnos por la utilización de un framework CSS que nos quite trabajo de encima y nos permita ir mucho más rápido al lograr nuestros objetivos. Además de un conocimiento profundo de HTML5 y CSS3, y unas nociones (mínimas, aunque sea) de Javascript, sería ideal tener conocimiento del panorama general en cuánto a frameworks CSS existentes.

Un Framework CSS es un conjunto de conceptos, prácticas, consejos y/o herramientas, para realizar tareas muy comunes y habituales de diseño web, de la forma más rápida y cómoda posible. Quizás, el framework CSS más popular con diferencia es Bootstrap, de Twitter.

Este artículo será el primero de varias partes, donde hablaremos de Frameworks CSS: Alternativas a Bootstrap. En esta primera parte me he centrado en los frameworks más populares, que incorporan no sólo código CSS, sino además componentes que requieren Javascript para su funcionamiento.

En la segunda y tercera parte hablaremos de frameworks más ligeros y simples (ideales para diseños rápidos y minimalistas) muchos de ellos que ni siquiera necesitan Javascript. En la cuarta parte veremos algunos frameworks para creación de cuadrículas o «grids» (mientras crece y crece el soporte para nuestros queridos Grids CSS nativos) y en la última parte veremos frameworks relacionados con componentes web.

1. Bootstrap

Probablemente, el framework más popular de la lista es Bootstrap. Se trata de un framework desarrollado por la gente de Twitter. Actualmente es uno de los más utilizados y que más se utilizan en el mercado.

Recuerda que Bootstrap consta de una librería CSS, una librería Javascript opcional (para algunos componentes que la requieren) y se le puede añadir un tema para proporcionarle una interfaz más personalizada o llamativa. Algunos temas interesantes podrían ser Material Kit, BMD o MDB (Material Design para Bootstrap), M8tro o Metro (Interfaz Metro de Microsoft), o la popular colección de temas simples Bootswatch.

2. Foundation

Foundation es casi con toda seguridad, el segundo framework más utilizado. Está orientado a la estrategia Mobile First, donde primero diseñas la interfaz para dispositivos móviles de una web, y luego vas adaptando las versiones más grandes como tablets o escritorio.

3. Semantic UI

Como su propio nombre indica, Semantic UI hace un énfasis bastante grande en la semántica del código HTML. Uno de los grandes problemas de Bootstrap, es que muchas veces debes añadir clases y código adicional para realizar cosas que ya se pueden hacer con código HTML directamente, siendo menos coherente y empeorando la calidad del código. Este framework intenta evitar precisamente este punto, manteniendo un equilibrio entre calidad de código y apariencia visual.

[...]

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

Curiosidades y teorías de Undertale que quizás desconocías

¿Te gustó Undertale? ¡Pues prepárate para descubrir más de 30 curiosidades y teorías (en español) que quizás desconocías de este maravilloso juego!

Undertale es un juego indie de rol creado por Toby Fox, un desarrollador de videojuegos y compositor de música, que (salvo algunos detalles) creó el juego íntegro con tan solo 24 años, momento en el que fue lanzado bajo crowdfunding, como una campaña de Kickstarter y un objetivo de 5.000$, sobrepasando los 51.000$ en tan solo un mes debido a la buena recepción que tuvo por su originalidad, sentido del humor y dirección del proyecto.

Aunque Undertale está en inglés, Toby Fox permite la localización del mismo siempre y cuando se cumplan dos requisitos: «que no haya ánimo de lucro y que se respeten los chistes malos». El equipo de Undertale Spanish creó una traducción muy cuidada y elaborada, que puedes descargar de forma gratuita desde Undertale Spanish.

A título personal, creo que Undertale es un juego que mezcla lo bueno de un RPG, modificando con maestría y humor las partes que hacen más aburridas y pesadas un juego de este tipo, añadiendo un toque de «elige tu propia aventura» para eliminar la linealidad (muchos detalles son difíciles de ver durante una sola partida) e introduciendo originales mecánicas de batalla, rompiendo en muchos casos la llamada cuarta pared o los «conocidos habituales».

Todo ello sin olvidar las características que, para mi son las responsables del éxito del juego: la historia, carisma y profundidad de sus personajes y la impresionante banda sonora (creada también por Toby Fox).

Lejos de querer escribir una guía, (ya hay muchas por Internet), en este artículo voy hacer un homenaje a este magnífico juego, centrándome en curiosidades particulares, personajes, secretos o teorías que pueden haber pasado desapercibidas a ojos del jugador, al estilo de otros artículos que he escrito como 42 curiosidades y teorías de Portal.

Intentaré centrarme en los hechos oficiales del juego (canon) aunque en algunas partes mencionaría posibles teorías. Obviamente, este artículo está lleno de spoilers y recomiendo leerlo sólo si ya has jugado (o no te importan los spoilers). En caso contrario te desvelaré partes importantes del mismo.

1. La historia de Undertale

Al comenzar el juego se habla brevemente de la guerra que hubo entre las dos razas principales: humanos y monstruos. En dicha guerra, acabaron venciendo los humanos, desterrando a los monstruos en el subsuelo, creando una barrera mágica que les impidiera salir.

También se nos muestra como una pequeña niña (o niño, en el juego siempre se mantiene indeterminado el sexo del personaje) llega al monte Ebott, tropieza y cae, llegando a las ruinas del subsuelo, territorio de los monstruos, donde comenzamos a jugar nuestra partida.

Aunque durante la mayor parte de la partida, se hará referencia al jugador por el nombre elegido, más adelante descubrimos que el nombre real del humano es Frisk.

2. Pantalla de selección de nombre del jugador

Antes de comenzar a jugar, se le da la oportunidad al jugador de indicar el nombre al humano caído, con el que jugará durante toda la partida. Al margen del nombre que hayamos decidido escoger, hay ciertas opciones que no se pueden elegir o muestran un mensaje gracioso al escribirlas (generalmente de personajes con el mismo nombre):

Además de estas, hay varias opciones más, como por ejemplo, nombres como aaaaaa (¿No eres muy creativo...?), Papyru (sin s, que nos permite usarlo), Chara (que muestra el llamativo mensaje «El nombre verdadero»), tEmmiE o Woshua, entre muchos otros.

Dato curioso: Si estableces Frisk como nombre, activarás el modo difícil del juego, donde será más complicado vencer a los enemigos en las batallas o encontrarás menos ítems consumibles de vida. Sin embargo, este modo difícil sólo dura hasta llegar al final de las ruinas.

3. Frisk y Chara: Ruta pacifista y ruta genocida

Una de las características más interesantes de Undertale es la no-linealidad. Además de que el juego tiene múltiples eventos que suceden por acciones previas tomadas por el jugador, muchas otras ocurren por puro azar o por visitar un lugar en el momento oportuno, lo que hace muy fácil perderse partes o que no encuentres todo lo que esconde este maravilloso juego en una sola partida.

La descripción de Undertale en Steam es «El juego RPG en el que no tienes que destruir a nadie.». Aunque no es obligatorio que sea así, si es un buen consejo de como debería jugarse por primera vez. Según las acciones del jugador, se pueden tomar varios caminos:

  • La ruta neutral: Es el camino más habitual que seguiría el jugador en su aventura, intentando no matar a ningún personaje, eligiendo siempre la opción de perdonar.

  • La ruta pacifista: Una vez terminada la ruta neutral, dependiendo de las acciones del jugador, podemos llegar a esta ruta, donde ayudaremos a Undyne y Alphys, descubriendo el laboratorio original del subsuelo, donde se puede aprender más sobre lo que ocurrió en el subsuelo en el pasado. Además, esta ruta puede desembocar en otra denominada ruta pacifista verdadera, donde descubres el verdadero final de la historia, del que hablaremos más adelante.

  • La ruta genocida: Otra de las opciones que brinda el juego es el ir contracorriente e intentar matar a todos los personajes, escogiendo siempre la opción luchar. Esta ruta es aconsejable realizarla como última opción, una vez conozcas la historia y a los diferentes personajes del juego, y así disfrutarla más.

 Las imágenes de Frisk y Chara son autoría de Ashiael.

Si escogemos la ruta pacifista, realmente estamos jugando en nombre de Frisk, el último humano caído al subsuelo, que es la representación de la bondad y la piedad. Por otro lado, si realizamos la ruta genocida, descubriremos que somos (o más bien, nos vamos convirtiendo) en Chara, el primer humano caído al subsuelo hace ya bastantes años, símbolo de la muerte y la maldad.

Una de las cronologías de Undertale que más me ha gustado es Undertale Timeline, donde se intenta simplificar los caminos que puede realizar el jugador y tener una idea clara de lo ocurrido (y lo que puede ocurrir). Si, por otro lado, te interesa más conocer la historia y los eventos previos a Undertale, echa un vistazo a esta otra: Pre-Undertale Timeline.

Por otro lado, Higurashi Karly ha creado varios mapas de las diferentes áreas del juego, entre las que se incluyen Las ruinas, Snowdin y alrededores, Waterfall, Hotland, el Hotel MTT Resort, el Núcleo y el Laboratorio original. Si buscas algo más simple y general, tienes Map of the Underground.

4. Los hermanos Sans y Papyrus

Tras comenzar el juego, conocer a Flowey (al cuál se le puede pillar siguiéndonos) y a Toriel, y finalmente abandonar las ruinas, llegamos al área de los alrededores de Snowdin, el pueblo nevado de Undertale.

A los primeros que conoceremos serán a Sans y Papyrus, dos divertidos esqueletos hermanos que deben su nombre a dos tipografías con mala reputación por su sobreuso: Comic Sans y Papyrus). El primero de ellos, Sans, es un esqueleto tranquilo y amigable que ayudará al jugador y se mantendrá en segundo plano la mayor parte del tiempo (actuando sólo para contar chistes malos), y el segundo, Papyrus, comienza siendo nuestro enemigo, ya que quiere capturar a un humano para demostrar su valía e ingresar en la Guardia Real, pero sus numerosas e ineficaces trampas, así como su inocente visión del mundo hace que nos encariñemos enseguida con él y dejemos de verlo como un enemigo.

Aunque la mayoría de los intentos de Papyrus por vencer al jugador son bastante divertidos, uno de mis preferidos es el puzzle de las baldosas multicolores:

5. Las misteriosas llamadas de teléfono

En algunas partidas, el jugador puede recibir una misteriosa llamada de teléfono equivocada, dependiendo del lugar por donde haya pasado. En ella, el interlocutor se da cuenta de su error al marcar el número, por lo que la termina la llamada de una forma inesperada:

La llamada parece ir dirigida a alguien cuyo nombre comienza por G... pero de eso hablaremos más adelante. Existen otras llamadas telefónicas equivocadas que puedes recibir, como por ejemplo un pedido de pizza de Alphys o una llamada de Sans preguntando si tu nevera aún sigue funcionando.

6. El ratón con determinación

A lo largo del juego, así como cuando perdemos en alguna batalla, se nos habla de la determinación, esa fuerza del alma del jugador que hace que continue en su aventura y no se rinda. En el juego, hay varios puntos de guardado donde aparece una mesa con comida y se nos anima a continuar con el juego, sólo con la idea de que el ratón consiga su objetivo.

A medida que avanzamos, se le complica un poco más la tarea al ratón, pero siempre estaremos llenos de determinación. I don't draw humans realiza unas excelentes ilustraciones donde podemos ver al ratón lleno de determinación (al menos, casi todas las veces).

7. Ice Wolf, el lobo que tira hielo

En el pueblo de Snowdin (y sus alrededores) podemos descubrir multitud de personajes, pero algunos que llaman mucho la atención, ya que suelen tener historia detrás que se puede descubrir investigando.

Ice Wolf es un misterioso lobo que aparece levantando bloques de hielo que salen de una torre y lanzándolas al río una detrás de otra. A medida que avanzamos en el juego, nos vamos cruzando con pantallas donde se ve el hielo flotando por el agua.

Algo más adelante, cerca del núcleo, nos encontraremos que el bloque de hielo cae en una zona y se funde en el agua. Si la llamamos al teléfono en el sitio oportuno, Undyne nos aclara que Alphys le dijo que es el sistema de refrigeración del núcleo.

La imagen de la derecha es autoría de Ratty Arts.

Finalmente, si lo visitamos al finalizar nuestra aventura y haber destruido la barrera, veremos que ha dejado de lanzar bloques de hielo y nos dice que ya no tiene que hacerlo, que por fin puede tomarse un descanso e ir a comprarse unos pantalones.

[...]

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

1 2 3 4 ... 393 #