Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

La línea de comandos para el diseño web: introducción

by
Length:MediumLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Grasping the Basics

Spanish (Español) translation by Julio García (you can also view the original English article)

Durante mucho tiempo se ha considerado que trabajar con la línea de comandos estaba fuera del ámbito de los diseñadores web. Ha sido utilizada casi en exclusiva para tareas como la administración de servidores y archivos, y muchas cosas más que no tienen nada que ver con el día a día de un diseñador de páginas web.

Esto es un caso del pasado, ya que hoy en día no puede estar más lejos de la realidad.

Actualmente, existen miles de poderosas e increíbles herramientas para trabajar con la línea de comandos, disponibles específicamente para lenguajes front end y flujos de trabajo. Gracias a los enormes beneficios que ofrecen al aprovechar la línea de comandos, se está convirtiendo cada vez más en una habilidad esencial para los diseñadores web.

some familiar command line tools
Algunas herramientas para la línea de comandos usadas frecuentemente

Debo admitir que, durante algún tiempo después de mi primer encuentro con este tipo de herramientas para el diseño web, estuve un poco "línea-de-comandos-fóbica." Estaba influenciada por la idea de "para programadores, no para diseñadores", y siempre buscaba otras opciones en lugar de darle una oportunidad a la línea de comandos.

Entonces, finalmente, di el paso cuando un proyecto requirió utilizar inevitablemente interacciones a través de la línea de comandos. Estuve un poco intimidada al principio, pero para mi agradable sorpresa, rápidamente me encontré exclamando:

"¡Esto es impresionante, no sé por qué no empecé a aprender ésto mucho antes!"

A día de hoy uso la línea de comandos en cada proyecto de diseño web y no sé qué haría sin ella. Es increíblemente útil en casi todas las etapas de un típico proceso de diseño de páginas web.

Sobre esta serie

Pero el tema está así. Aunque mi vida dependiera de ello, yo no sería capaz de realizar las cosas que se pueden encontrar en un típico tutorial de "empezando desde cero con la línea de comandos". No importa que nunca hayas aprendido a utilizar mkdir o cd o ls. La verdad es que como diseñador web no necesitas ninguna de estas cosas. Los únicos conocimientos que necesitas sobre la línea de comandos son aquellos que puedan hacer más eficientes tus proyectos de diseño web.

Por eso esta serie no trata sobre "cómo ejecutar comandos ocultos para tareas que nunca has realizado." Tampoco es del tipo "cómo hacer un complicado proceso de desarrollo de manera fácil para diseñadores." Se trata de una serie específica para diseñadores web, que muestra cómo utilizar herramientas que son increíblemente útiles específicamente para proyectos de diseño web.

Una vez empieces a utilizar la línea de comandos en tus procesos de desarrollo se te abrirá un mundo de posibilidades, ahorrándote un montón de tu valioso tiempo, y, te prometo, que nunca volverás atrás.

Por qué la línea de comandos es genial para el diseño web

A lo largo de esta serie de tutoriales aprenderás procesos realizados a través de la línea de comandos que podrían cambiar la forma de enfocar tus proyectos de diseño web permanentemente.

Después de empezar con lo básico, pasaremos directamente utilizar conocimientos prácticos que puedas utilizar de inmediato. Al echar un vistazo a cada uno de los temas que trataremos, comenzarás a hacerte una idea de por qué la línea de comandos es una herramienta indispensable para el diseño web.

Los principales temas a tratar

Vamos a echar un vistazo rápido a los temas que cubriremos durante esta serie. Hay cinco áreas temáticas principales:

1. Dominar los paquetes de terceros

Los diseñadores web suelen utilizar paquetes de terceros como jQuery, Bootstrap, Modernizr, Font Awesome, Normalize.css y muchos otros más. Antes de usar la línea de comandos, utilizar estos paquetes externos normalmente significaba:

  1. Mantener una lista de marcadores de sitios donde se pueda descargar la última versión de cada paquete.
  2. Visitar manualmente estos sitios para descargar los paquetes cada vez que los necesitaras.
  3. Repetir el proceso cada vez que un paquete fuera actualizado.
  4. Transferir manualmente la versión actualizada en cada proyecto que lo estuviera usando.

Hacer frente a la gestión de paquetes de forma manual es lento y poco manejable, pero con la línea de comandos es cosa del pasado.

Puedes adjuntar paquetes directamente en tus proyectos simplemente escribiendo algunas palabras, como:

bower install jquery

Puedes mantener los paquetes actualizados con unas simples palabras como:

bower update jquery

Se acabó descargar paquetes manualmente desde la web o actualizarlos manualmente también cada vez que cambien, y esto es solo una pequeña muestra de todo lo que puedes hacer para gestionar paquetes con la línea de comandos.

2. Potenciando el código del front end

Los tres lenguajes que probablemente más veas en uso en cualquier proyecto de diseño web son CSS, HTML y JavaScript. Las herramientas de la línea de comandos abren nuevas formas de hacer que nuestras producciones y ejecuciones de código en estos lenguajes sea más eficiente y productiva.

Una de las cosas más poderosas que podemos utilizar en la línea de comandos para el CSS es compilar preprocesadores, como Stylus, Sass / SCSS y LESS. Con la línea de comandos puedes compilar rápidamente cualquier archivo de un preprocesador escribiendo solo algunas palabras. También puedes activar la compilación automática para que tus archivos CSS se recompilen cada vez que cambies algo en los archivos del preprocesador.

A través de la línea de comandos podemos mejorar nuestros flujos de trabajo con CSS haciendo algunas cosas como añadir prefijos automáticamente, limpiar archivos o comprimirlos. De igual forma, también podemos optimizar nuestro JavaScript concatenando archivos y comprimiendo su código.

Y para el HTML, tenemos acceso a lenguajes como Jade que nos da la posibilidad de escribir código de forma abreviada, y nos permite desarrollar sistemas de plantillas simples pero sofisticados para evitar estar reescribiendo trozos de código que se repiten en varios proyectos.

3. Automatización con Task Runners

Es genial poder compilar CSS con solo unas palabras, después comprimir JavaScript con otras palabras más. Pero las cosas realmente empiezan a tener súper poderes cuando puedes hacer todo lo que tu proyecto necesita con un simple comando.

Usando algo que se conoce como "task runner", con un simple comando como gulp o grunt puedes compilar tus archivos de preprocesadores, poner los prefijos automáticamente, limpiar y comprimir el CSS resultante, compilar tus archivos de Jade dentro del HTML, concatenar tus archivos JS y comprimirlos, todo en unos pocos segundos.

También puedes configurar los task runners para hacer estas tareas automáticamente por ti. Después de ejecutar un comando como gulp watch o grunt watch, puedes dedicarte a trabajar en los archivos en bruto de tu proyecto mientras, de fondo, todas las compilaciones y optimizaciones son gestionadas en tu lugar automáticamente.

Los task runners son completamente flexibles y se pueden configurar como tú quieras, por lo que las formas que tienes para configurar tus proyectos no tienen límites. Simplemente tienes que ajustar las cosas con precisión para adaptarse a cada circunstancia, según sea necesario.

4. Vista en vivo, sincronización entre navegadores y pruebas multidispositivo

La vista en vivo te permite apartar el dedo del botón actualizar y concentrarte en conseguir que todo fluya al poder observar los cambios de tu diseño en directo según los vas realizando.

Una vez tengas todo automatizado con los task runners, puedes añadir la vista en vivo a la mezcla, y encajará perfectamente en cualquier configuración que hayas creado para tus proyectos. Puedes decidir exactamente qué es lo que activará la vista en vivo, puede ser al compilar un archivo de preprocesador, al cambiar el html o cualquier cosa que decidas.

Como parte de habilitar la vista en vivo también obtendrás una previsualización del sitio preparado en localhost, por ejemplo, una simulación de un servidor web ejecutándose de forma local en tu ordenador. Esto es genial para asegurarte que todo funciona como esperas bajo el protocolo https://, al contrario que en el protocolo file://.

Además de esto también aprenderás a obtener sincronización entre navegadores, dispondrás de una URL que podrás usar en varios navegadores y tenerlos todos sincronizados. Por ejemplo, al hacer clic en un botón de tu web en Chrome, podrás ver como Firefox, Opera y Safari responden a esa misma acción al mismo tiempo.

Esta sincronización entre navegadores no se limita a un solo dispositivo. Puedes usar la misma URL en tu tablet, móvil o cualquier otro dispositivo conectado en la misma red y que cada uno muestre una vista previa sincronizada. Todo esto sucede a la vez para ofrecerte el entorno de pruebas perfecto para todos los navegadores y dispositivos.

Y gracias a que estamos construyendo todo esto a través de un task runner, podemos ponerlo en marcha con un solo comando de dos palabras como grunt start o gulp start.

5. Dando forma a nuevos proyectos

Empezar a dar forma a nuevos proyectos puede ser muy tedioso. Conseguir toda la estructura de archivos y carpetas, además de conectar todos los archivos y configurarlos para funcionar juntos es una pérdida de tiempo enorme.

Sin embargo, usando la línea de comandos puedes estructurar todo tipo de proyectos en segundos, lo cual es ideal cuando vas a utilizar frameworks populares de terceros o códigos ya preparados como Foundation, Bootstrap, HTML5 Boilerplate o Google Web Starter Kit.

Con los métodos que vamos a tratar, la estructuración de tus nuevos proyectos tendrán no solo el código que necesitan, sino también los task runners preconfigurados para realizar tareas como la compilación automática y la vista previa en local.

En marcha

Entonces, si estás preparado ¡nos vemos en el primer tutorial!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.