Prepros: usar preprocesadores y ver los cambios en tiempo real

Si trabajamos haciendo diseño de sitios web una de las herramientas con la que nos debería interesar trabajar es Prepros.

Prepros: usar preprocesadores y ver los cambios en tiempo real

Prepros nos sirve para ver en nuestro navegador en tiempo real, los cambios que vamos haciendo sobre un sitio web, o blog. Prepros es lo que podríamos llamar la alternativa a Codekit (en Mac) pero para Windows, Mac OS y Linux.

Prepros para quienes usan preprocesadores

Una de la grandes virtudes de Prepros es trabajar con los preprocesadores de Html, CSS y Javascript.

Entre los más populares están Jade, Sass, Stylus, Less, Compass, entre otros.

Gracias a que Prepros tiene integrado un servidor propio, es posible que usemos los preprocesadores sin necesidad de instalar nada más.

Por ejemplo, si uno quiere usar Sass, una de las condiciones (sin usar Prepros) es que primero tenemos que instalar Ruby. Si queremos usar Stylus es necesario instalar primero Node.js. Pero si usamos Prepros esos requerimientos no son necesarios.

Prepros para los que trabajamos con WordPress

Un dato importante es que podemos usar Prepros para trabajar con el diseño de themes (temas o pieles) para WordPress. Para Como sabemos los themes están diseñados usando código PHP. Para que esto funcione tenemos que tener instalado y corriendo un servidor de PHP (puede ser Xamp, Mamp o Wamp).

Cómo configurar Prepros para PHP

Lo primero es cargar el proyecto. Eso es sencillo. Basta con arrastrar y soltar la carpeta con el theme que queremos modificar en la interfaz de Prepros.

Una vez que esté cargado, ahora tenemos que ir al menú superior y hacer clic en «More Options». Luego en «Project Options».

Prepros: usar preprocesadores y ver los cambios en tiempo real

Con eso se abre una ventana en la que tenemos que buscar la sección “Live Preview”. Allí es necesario que marquemos el casillero que dice: “Live Preview Custom Server”.

De esa forma aparecerá una caja de texto para que escribamos la URL de nuestro servidor local. Aquí puedes ver una imagen de lo anterior:

Prepros: usar preprocesadores y ver los cambios en tiempo real

Como ves tienes que escribir http://localhost/elnombredetuweb (obvio que tienes que cambiar ‘elnombredetuweb’ 🙂 )

Cuando hayas hecho esos ajustes, haz clic en el botón «Save Options» para guardar los cambios. Así se cierra esa ventana y nos muestra la principal.

Una vez allí es necesario que primero sincronicemos el navegador. Para esto tienes que hacer clic en el menú «Sync Browsers», que está arriba. Luego activa el botón «Preview» (haz clic en él) para que muestre en el navegador tu sitio web o blog. Es posible que se habra una ventana de confirmación, solo haz clic en el botón que dice «Open Live Preview», en esa ventana emergente.

Así ya tendremos nuestro Prepros enlazado con nuestro navegador y nuestro servidor PHP. Con esto podemos hacer cambios en el código del theme de WordPress, y ver los cambios en tiempo real.

Desde su página web podemos descargar Prepros para el sistema operativo que estemos usando. No es gratuito. Tiene una versión gratuita y otra de pago. La versión gratuita nos permite trabajar perfectamente, aunque de vez en cuando nos dirá que compremos la versión premium. Lo que puede molestar un poquito cuando estamos muy concentrados en nuestro trabajo.

Sin embargo, vale destacar a Prepros como una de las herramientas a tener entre nuestras utilidades de trabajo.

Paypal lanzó una nueva aplicación para iOS y Android
Una combinación de Dropbox con Pinterest: Tagmmer

SERVICIOS WEB

NUEVOS POSTS EN PORTADA


¿Que opinas? escribe un comentario :)