Aprende a dividir el contenido de tus páginas en columnas responsive usando solo unas pocas reglas de CSS.

Una de las cosas que más echábamos de menos los diseñadores al pasarnos de print a web en épocas pretéritas, era la posibilidad de dividir el texto en columnas. Por suerte, todo esto cambió con la llegada de CSS3. Usando CSS3 tenemos la posibilidad de organizar los contenidos de una página web en columnas sin tener que crear elementos HTML extra, algo muy útil si estamos maquetando una web con mucho contenido o donde la longitud de línea nos quedasen demasiado grandes (como periódicos o revistas digitales). Antes, hacer esto era totalmente impensable sin la ayuda de JavaScript. [Más]

Un motivo por el que se selecciona un framework frente a hacerlo todo a mano desde cero es el tiempo que te ahorras. El tiempo de un desarrollador es tremendamente importante (y caro) por eso existen herramientas como Angular, que proporcionan técnicas para optimizar el tiempo de desarrollo. Aparte de escoger correctamente el framework, es muy importante aprender a trabajar de manera productiva con él, y esto implica aprender a configurar nuestro entorno de trabajo para facilitar el día a día. En este artículo te mostramos una configuración productiva para trabajar con Angular, aunque la mayoría de puntos son aplicables a cualquier otro framework JavaScript. [Más]

En las anteriores partes de esta serie hemos trabajado con Jekyll y hemos visto todo el proceso de publicar gratuitamente páginas y blogs basados en este generador de sitios estáticos aprovechando Github. También vimos cómo extenderlo mediante plugins, cómo compilar todo en local para poder comprobarlo antes de subirlo a Internet, y cómo realizar el proceso de publicación automáticamente. Ahora vamos a ver cómo hacerlo en la práctica, para lo cual te dejamos este vídeo de David Charte en el que resume todo el proceso. [Más]

Ya conoces el proceso de construcción de un sitio estático utilizando el generador Jekyll de principio a fin. Además, Jekyll soporta el uso de plugins adicionales para generar algunos tipos de páginas automáticamente o modificar el comportamiento de distintas formas. Sin embargo, el uso de plugins está restringido en GitHub Pages por motivos de seguridad. Para aprovechar todas las posibilidades que nos ofrece el generador estático, vamos a aprender cómo automatizar el propio proceso de generación para GitHub Pages mediante un sistema de integración continua como Travis CI, y a extender la funcionalidad del sitio con distintos plugins. [Más]

A lo largo de esta serie ya has aprendido a construir un primer sitio estático con Jekyll y a llenarlo de contenido, aprendiendo a ponerlo en funcionamiento en local. Ahora vamos a entender cómo está estructurado tu sitio y cómo procesa Jekyll cada parte, para poder hacer cualquier modificación y construir nuevos sitios desde cero. [Más]

En el primer artículo de esta serie, estudiamos los fundamentos de Jekyll y creamos un primer sitio estático sencillo. En esta entrega aprenderemos a compilar el sitio estático en nuestra propia máquina para probarlo en local antes de subirlo a Github. También veremos cómo componer publicaciones y ver los resultados. [Más]

Al principio de los tiempos las páginas se hacían todas "a manivela", una por una. Luego vinieron los primeros gestores de contenidos y finalmente monstruos como Wordpress, que para cualquier tontería necesitan megas y van lentos a menos que los optimices. Una tendencia que hay desde hace relativamente poco tiempo es el uso de generadores estáticos de páginas, el más conocido de los cuales es Jekyll. Con la colaboración de Github es posible usar ambas herramientas para conseguir sitios web y blogs albergados gratuitamente y rapidísimos. En esta serie de posts que empezamos hoy te contamos lo que necesitas saber para ponerlos en marcha. [Más]

El comportamiento de un elemento con position:absolute; quizá te puede parecer errático de entrada, especialmente si no tienes suficiente experiencia maquetando con CSS y no conoces el detalle fundamental que te voy a contar en este post. Así que, si alguna vez te has desesperado al intentar posicionar un elemento de forma absoluta, mejor sigue leyendo. [Más]

Hace unos días Bootstrap liberó su versión 4.2.0, con algunas novedades dignas de mención que vamos a repasar a continuación, entre ellas unos nuevos componentes para denotar progreso en tareas en segundo plano, unas nuevas notificaciones e interruptores sí/no del mismo estilo que los que tiene iPhone. Además también han incluido unas cuantas mejoras de características ya existentes. Vamos a verlas. [Más]

No te alarmes por el título de este post. Esto no va de mindfulness ni de autoayuda, y, por supuesto, no te vamos a tocar los chakras. Es simplemente un ejercicio de pensar un poquito diferente para mostrar lo amplio que es el abanico de posibilidades al definir reglas CSS. Tampoco es que estemos descubriendo la pólvora, simplemente se trata de darte pistas para encontrar alternativas eficaces a la hora de resolver tus maquetaciones que quizá no te habías planteado. [Más]