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 diseño web: entendiendo lo básico

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Introduction
How to Install NPM and Bower

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Hay unas cuantas cosas que necesitarás para estar listo buscando aprovechar todo el magnífico material de diseño web que puedes hacer con la línea de comandos. Muchas introducciones genéricas a la línea de comandos se enfocarán en cosas como crear directorios, mover archivos, navegar por tu sistema y cosas por el estilo. Encuentro que al enfocarme en diseño web raramente alguna vez uso  éste tipo de comandos.

Cuando comencé a aprender la línea de comandos también encontré un montón de tutoriales frecuentemente saltando directamente a instrucciones como "escriba blahdee blah blah en tu terminal" o "Ejecute el comando bloop beep boop." Ésto típicamente deja a alguien que es nuevo en la línea de comandos diciendo: "Espera un momento, ¿Cuál es mi terminal?, ¿Dónde la encuentro?, ¿Cómo la abro y cómo la uso? 

En éste tutorial vamos a asegurarnos que no tienes el mismo problema. Vamos a empezar por el principio. Aprenderás todo lo esencial para trabajar con una terminal o símbolo del sistema incluyendo como abrirla, como ejecutar comandos, como repetir comandos, como apuntar a tu directorio de proyecto cuando se ejecutan comandos, y como enfrentar el más común mensaje de error que verás.

Ésta serie proporcionará los pasos específicos necesarios tanto para Mac como para Windows-lo siento por los chicos de Linux. Sin embargo, supongo que sólo por ser un usuario Linux probablemente ya estarás algo familiarizado con la línea de comandos.  Igualmente, siendo un "sistema 'nix" la mayoría de comandos Mac son idénticos en Linux así que de todas formas no deberías tener problemas al seguir adelante.

Una nota sobre las Aplicaciones GUI

Sé lo que podrías estar pensando, y si, es posible usar aplicaciones GUI para manejar algunos de éstos tipos de procesos; yo mismo lo hago frecuentemente. Sin embargo, GUIs diseñadas para todos son por necesidad una solución uniforme, así que si quieres hacer algo para lo que una aplicación no es apta, estás varado.

Para cuando hayas concluido los tutoriales en éste serie tendrás el conocimiento para poder desarrollar tus proyectos que requieren de la línea de comandos, en cualquier momento, y en cualquier manera que los necesites.

¿Qué es la Línea de Comandos?

A grandes rasgos, la línea de comandos te da una manera de evitar el trabajar con una interfaz visual así que puedes tener una perspectiva más sólida de como se procesan las cosas y tener un mayor control. 

Para darte algunos antecedentes, cuando las computadoras aparecieron la única forma de interactuar con ellas era mediante órdenes escritas procesados por interfaces de Línea de Comandos (CLIs). Eventualmente interfaces gráficas de usuario (GUIs) surgieron dando paso a la interacción visual "apunta & da click" a la que estamos acostumbrados en sistemas operativos y programas de hoy en día.

En el mundo del diseño web las cosas han evolucionado en otra dirección. Para empezar, casi todas nuestras herramientas eran software basados en GUI. Sólo en tiempos relativamente recientes soluciones basadas en CLI para problemas de diseño web han llegado a ser lo suficientemente accesibles que la recompensa hace que valga la pena aprender a usarlas. 

Lo primero que tenemos que entender sobre la línea de comandos es que para usarla necesitas un programa especializado en el que escribir tus comandos. 

Hay diferentes opciones disponibles, sin embargo en ésta serie sólo usaremos los programas por defecto que se incluyen en Mac y Windows. En Mac el programa usado para trabajar con la línea de comandos se llama "Terminal" y en Windows se llama "Símbolo del Sistema".

Cómo abrir una Terminal / Símbolo del Sistema

Realmente encontrar y ejecutar la terminal / símbolo del sistema no es algo inmediatamente obvio si no los has usado antes. Así es cómo hacerlo en Mac y Windows.

En Mac

En Mac, la forma más fácil de abrir una terminal es solamente ir a tu Launchpad y ahí buscar Terminal.

La Terminal en Mac se ve así:

Una vez que la has ejecutado, elígela para colocarla en el Dock.  Créeme, vas a querer tenerla ahí.

En Windows

En el ambiente Windows la línea de comandos se hace vía Símbolo del Sistema.

En Windows 8: desde la pantalla inicio ve a Aplicaciones, y bajo Sistema Windows elige Símolo del Sistema.

Alternativamente presiona la tecla Windows y R para abrir una ventana de ejecutar. En el campo etiquetado Abrir escribe cmd y da click en el botón OK para iniciar el símbolo del sistema.

El Símbolo del Sistema en Windows se ve así:

Nota rápida: Por brevedad, en lugar de decir "terminal / línea de comandos" a través de ésta serie solo utilizaré la palabra "terminal" de aquí en adelante, a menos que me refiera a funciones específicas en Windows.

Ejecutando y Repitiendo Comandos

Para ejecutar un comando, espera a hasta que veas un prompt o conjunto de caracteres a la espera de una orden. En Mac puedes reconocer el prompt por el signo $ con el que finaliza, y en Windows finaliza con un signo >:

El Prompt en la Terminal de Mac
El Prompt en Windows a la espera de una orden

Cuando ves un prompt puedes escribir tu comando luego presionar enter para ejecutarlo:

Una cosa super útil para saber es que si quieres repetir un comando puedes presionar las flechas arriba/abajo en el teclado para desplazarte a través de comandos previamente ingresados.

Encontrarás que hay frecuentemente comandos que querrás ejecutar más de una vez, y poder desplazarte con la flecha arriba y luego el presionar enter es mucho más fácil que volver a escribir comandos.

Abriendo una Terminal en un Directorio Específico

Para la mayoría de las tareas que realizarás en la línea de comandos para diseño web necesitarás que tu terminal apunte al directorio que alberga tu proyecto.

Tu terminal mostrará el nombre del directorio en el que estás trabajando:

Es posible navegar por tu computadora usando el comando cd, abreviación de "cambiar de directorio". Sin embargo, probablemente se te haga mucho más fácil dar click derecho dentro de tu directorio de proyecto, luego abrir una terminal desde ahí apuntando ya al lugar correcto.

Personalmente hago ésto todo el tiempo, aún cuando probablemente sea más rápido usar el comando  "cd", pues mi mente de diseñador prefiere trabajar de ésta forma.  Así es como puedes hacer ésto en cada sistema operativo.

En Mac

Uso una aplicación llamda XtraFinder (gratuita, y tiene un montón de características realmente útiles) que te permite añadir una opción New Terminal Here (Nueva Terminal Aquí) al menú contextual en Finder.

En Windows

Mantén presionada la tecla Shift (Mayúsculas) y da click derecho en el directorio de tu proyecto. En el menú contextual deberías ver una opción que dice Abrir ventana de comandos aquí.

En Windows así es como siempre abro el símbolo del sistema pues me parece la forma más sencilla.

EACCES ¿No tienes Permiso? Sudo.

Una de las cosas que podrías encontrarte frecuentemente en Mac es una variedad u otra  de un mensaje de error que contiene las letras EACCES.

Será acompañada frecuentemente por algo como "Por favor intente éste comando de nuevo como raíz/Administrador."

Si ves ésto significa que tratas de completar una tarea que requiere privilegios elevados para accesar. Éste sistema es para ayudarte a asegurarte que nadie puede hacer cambios significativos a tu máquina sin autorización.

La forma más fácil de verificar que estás autorizado es añadiendo la palabra sudo al inicio de tu comando, que es una abreviación de "super user do".

Se te pedirá ingresar tu contraseña antes que puedas proceder.

Cuando agregas sudo a un comando estás operando como el "super usuario" del sistema más  bien que un usuario regular. Con éstos privilegios elevados deberías encontrar que funciona adecuadamente el comando que tratas de ejecutar.

Alternativas a sudo

Deberías estar consciente que hablando generalmente hay otras maneras además de sudo para resolver los errores de nivel de acceso, como cambiar la forma en la que están configurados los permisos en tu máquina.  Sin embargo, los pasos típicamente requeridos  para ésta clase de procesos son un poco más complejos del nivel básico que estamos cubriendo aquí.

Estará bien utilizar sudo en el contexto que cubriremos en ésta serie. Dicho ésto, cuando estés más cómodo con la línea de comandos podrías  buscar otras opciones si lo quieres.

Aquí un proceso para analizar más tarde sobre arreglar permisos npm, la relevancia de éste llegará a estar más claro en un próximo tutorial. 

Cómo usar sudo se indicará en ésta serie

Donde tengas que usar sudo en un comando, escribiré el comando así:

Ésto no significa que literalmente debas escribir [sudo] con los corchetes incluídos, pero más bien podrías o no podrías necesitar usar sudo.

o

Si tienes duda, siempre puedes intentar el comando sin sudo y luego intentar de nuevo con él, si ves un error EACCES.

En el Próximo Tutorial

En el próximo tutorial abordaremos técnicas que puedes poner a trabajar en tu flujo de trabajo de diseño web existente, al conocer como usar la línea de comandos para el manejo de paquetes de terceros.

Aprenderás cómo empezar con dos de los sistemas de manejo de paquetes más populares en la web hoy en día, y cómo usarlos para encontrar, instalar y actualizar paquetes para utilizar en tus proyectos. 

¡Nos vemos ahí!

¡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.