fcbk
Conéctate con TwitterConéctate con Facebook
0

Herramientas gráficas para optimizar tu tiempo como programador

17Puntos

hace 2 años

Cuando nos dedicamos a alguna especialidad del trabajo web nuestro trabajo puede tornarse bastante repetitivo a un nivel técnico: abrir un archivo, escribir el HTML, adaptar el CSS, escribir CSS, compilar nuestros archivos de preprocesadores, recargar la web y ver cómo va quedando.

Lo ideal es agilizar estas tareas y poder enfocarnos en la parte del proyecto que representa un reto lo antes posible, para lograrlo existen una serie de herramientas que nos pueden ayudar a perder la menor cantidad de tiempo.

Hay diferentes maneras de lograrlo, pero como buen diseñador no soy un experto con la consola, ni quiero perder tiempo en ponerme a configurar complicadas opciones de red/software/etc… en el sistema operativo con el que trabaje, así que utilizo herramientas con interfaces muy simples.

De las herramientas que encontrarán a continuación algunas se adaptarán más al flujo de trabajo de cada uno o al Sistema Operativo que utilicen, (yo trabajo en Mac OS).

Pero por nuestra cordura hablaré de la mejor de ellas, de acuerdo a mi experiencia, esto no significa que no pueda eventualmente reemplazarla por una que me parezca mejor, trabajo en Internet y todos los días cambia algo, no debemos permanecer estáticos.

La primera de estas herramientas es un gestor de prototipos, ideal al momento de crear los primeros esbozos de código de la web:

Codekit

Codekit es un programa que me permite compilar mi preprocesador favorito con muchas opciones para el trabajo con CSS y HTML:

Le puede dar diferentes estilos de salida (Output) al CSS:

  • Nested
  • Expanded
  • Compact
  • Compressed

Permite las opciones básicas como elegir archivo y ruta de destino, imprimir líneas de depuración de código en nuestro CSS para detectar posibles errores, revisar la sintaxis de JavaScript por medio de JSlint, JSHint o CoffeLint, importar un framework CSS (Vendors frameworks como Susy, Foundation, Compass, etc.. o el nuestro propio) e incluso una opción para instalar componentes por medio de Bower en nuestro proyecto.

Pero hay dos razones principales que hacen que no pueda separarme de Codekit:

Preview es la opción que me permite cargar mi proyecto por medio de una URL virtual (http://wakkos.local:5757/) y poder acceder a ella desde cualquier dispositivo conectado a la misma red. Es genial si trabajamos mobile first y maquetamos mientras vemos el resultado en el móvil, o para probar en diferentes dispositivos/OS.

Siempre es mejor probar y testear en el propio dispositivo y no en un emulador online que no nos emulará el bug de cambio de orientación de iOS, el uso de flexbox en Android o muchísimas características de CSS/JS que varían según el Sistema Operativo.

La segunda opción es el lenguaje kit que implementa Codekit y que me permite hacer imports de archivos y usar variables dentro del mismo HTML o archivo .kit. Similar al include de PHP.

Esto me permite gestionar mi proyecto de un punto de vista Atómico y crear archivos muy pequeños (Átomos) con elementos independientes que luego puedo incluir en Moléculas e ir creando de esta manera la guía de patrones/estilos de la web con imports sin tener que usar otro lenguaje más que el de Codekit.

Lamentablemente Codekit está solo para Mac OS, pero hay opciones como Mixture, Prepros y muchas otras que, desde mi punto de vista, deben mejorar lo de importar archivos. Nada que PHP no pueda solucionar llegado el momento.

Preprocesadores

CSS siempre ha sido complicado desde el punto de vista de escalabilidad y crecimiento. Si tenemos un color (#F08178) para los bordes y en un momento del proyecto queremos cambiarlo, debemos ir buscando en todo el proyecto y sustituyendo ese color por el nuevo.

Los preprocesadores nos permiten solucionar ese problema creando variables en CSS de manera que #F08178 sería una variable $color-border : #F08178; cada vez que queremos utilizar el color de bordes solo tenemos que llamar a la variable $color-bordes; si queremos cambiar ese color en todo nuestro proyecto, solo tenemos que cambiar el valor de esa variable:

$var1 : 20px;
$var2 : 40px;
$var3 : $var1 + $var2;

.selector {
    width:$var3;
}

Y eso se compilaría en:

.selector {
    width:60px;
}

Los preprocesadores son el Mjolnir del CSS.

Con esas variables podemos hacer operaciones matemáticas, pero no se limita a esto simplemente, podemos crear bucles y condicionales y muchas más opciones que hacen que nuestro CSS pueda crecer sin problemas y sin tener que decir “vuelva en 15 minutos” cuando tenemos que hacer un cambio de color que afecta toda nuestra web.

Los preprocesadores han sacado a la luz una necesidad implícita el CSS y lo normal es que poco a poco CSS se vaya comportando como un preprocesador en sí mismo.

Mozilla ya ha empezado con drafts y propuestas, lo cual da un poco de esperanza en este tema, pero todos sabemos lo rápido que van las propuestas en la W3C así que por ahora podemos salir adelante con preprocesadores.

No quiero entrar a escribir a fondo sobre preprocesadores, ya encontramos bastante material en la web:

Editor de código

En materia de editores de código no me atrevo a recomendar uno sobre otro ya que cada persona se adapta a un editor de manera diferente y depende en gran medida de la función que estemos ejecutando.

No usará el mismo editor alguien que trabaje en .NET que un UX Designer, que un Desarrollador de Wordpress. Sin embargo estamos hablando casi exclusivamente de prototipos, frontend y UI, así que puedo comentar ventajas del editor que yo utilizo:

SublimeText

Sublime se ha convertido en un editor de referencia para los desarrolladores / diseñadores web. Lo usen o no, casi todos lo conocen y tienen su opinión acerca de éste popular editor.

Su principal ventaja es la comunidad que tiene detrás desarrollando plugins y addons que de una manera u otra nos benefician a todos.

Mi configuración en SublimeText es muy simple, pero si hay un plugin que tengo que definir como indispensable es el Emmet (que no solo está para Sublime, sino además para una larga lista de editores entre los que se encuentran TextMate, Coda, Expresso, Notepad++, Brackets, Dreamweaver, NetBeans, Komodo y otros).

Basado en la sintaxis de CSS, permite escribir abreviaciones y convertirlas en bloques de HTML y CSS como por ejemplo:

section>article.class$$*3>header>h2^+p+footer  

Emmet, pulsando tabulador, lo convierte en:

<section>  
    <article class="class01">
        <header>
            <h2></h2>
        </header>
        <p></p>
        <footer></footer>
    </article>
    <article class="class02">
        <header>
            <h2></h2>
        </header>
        <p></p>
        <footer></footer>
    </article>
    <article class="class03">
        <header>
            <h2></h2>
        </header>
        <p></p>
        <footer></footer>
    </article>
</section>  

Agilizando la escritura de nuestro código a pasos agigantados.

El tema (o combinación de colores) que uso en Sublime es para mí muy importante ya que me permite ubicar rápidamente los selectores con un simple barrido usual y evita que se me cansen los ojos. Es el Tron Legacy de Dayle Rees, a quien le agradezco que después de quitarlo en una actualización nos hiciera caso en Github y lo volviera a incluir en el Package.

Pero repito, cada quien tendrá un editor con el que las cosas le van genial, no pretendo que lo cambien pero sí que prueben otros editores, los que sean: siempre podemos encontrarnos una sorpresa que nos haga replantearnos nuestro actual editor. Yo mismo estoy esperando dos o tres features en Brackets para usarlo definitivamente, me parece un editor con futuro en mi workflow.

Ghostlab

Navegación sincronizada para web y móvil. Eso dicen que es Ghostlab en su web. Es muy parecido al sistema de IP que tiene Codekit, con la diferencia que la navegación es, efectivamente, sincronizada entre varios dispositivos: si cargamos la IP que nos da Ghostlab en un móvil y en desktop a la vez, y rellenamos un campo de un formulario en uno de ellos, veremos como ese mismo proceso ocurre en los otros dispositivos.

Las razones principales por las que uso Ghostlab son: porque podemos navegar por todo nuestro sitio y ver el comportamiento en diferentes dispositivos sin tener que repetir el proceso en todos ellos por separado, y porque puedo dejar URLs como proyectos y no solo carpetas locales.

La ventaja de poder dejar URLs consiste en que podemos tener varias URLs en Ghostlab y cargarlas solo con un click en todos los dispositivos y poder comprobar detalles como Breakpoints y Mediaqueries que un dispositivo implementa en landscape o portrait, por ejemplo, o ver la profundidad de pixels de su display o pantalla. Yo tengo siempre estas dos webs a la mano en Ghostlab para comprobar estas dos características antes mencionadas:

Hay muchas otras herramientas online/offline que pueden ser puntuales en un proyecto o fase del proyecto, pero estas mencionadas aquí son una constante en todo el proceso.

Daniel
Daniel
@Wakkos

17Puntos

hace 2 años

Todas sus entradas