Previsualizar e inspeccionar web en dispositivo, mientras la editas, usando Prepros

Image for post
Image for post

Se podría considerar que llegué tarde al desarrollo web, mejor se podría decir que casi no llego, porque en los días que corren existen muchísimos frameworks, preprocesadores, guías de estilos y posibilidades para crear una web.

Y entre tanta mescolanza estoy yo queriéndome hacer un lugar en donde está lleno de cracks del diseño y la programación. Como eso se me hace un poco imposible, decidí empezar por el principio. Asentar las difusas bases que tenía sobre HTML y CSS y aprovechar la maravillosa época de desarrollo en que se encuentran estos dos lenguajes de marcado y estilo (sí developers, ¡no dije de programación!).

Un poco de historia

Para ello busqué en internet lo que no encontraba en ningún espacio físico. Formación, formación, formación (no puedo no recordar el famoso developers, developers, developers!). Luego de empezar cursos por distintos sitios y no hallarme en ninguno, fui a dar con un podcast que a día de hoy me tiene atento a cada nueva entrevista. Hablo, cómo no, de WeCodeSign. Un podcast de diseño y desarrollo web en el que entrevistan a cracks que trabajan en este mundo y en el cual tienen el espacio y el tiempo suficiente para explayarse e iluminar a algunos improvisados como yo.

Escuchando el podcast en el que hablaban sobre la importancia de los desarrolladores web junior de más de 30 años, me sentí tan identificado con este tema que fui a su web a escribirles para agradecerles el hablar de ello. Cuando voy a escribirles me encuentro con un comentario de un desarrollador de 47 años que pudo dar el salto al desarrollo web, imagínense, enloquecí. Y empezó una catarata de comentarios que a día de hoy creo es el podcast más comentado que hay en su web.

La importancia de colaborar

Contando cada uno la historia de su vida y su cambio profesional, aproveché y les pregunté sobre lugares para formarse online, ya que los que había visto no me llenaban o me resultaban incompletos.

Y cada uno desinteresadamente, entre ellos Jose Manuel Gallego, me fue dando tips y lugares para comenzar. Varios coincidieron en que en EscuelaIT había varios profesionales dando cursos y me bastó eso para decidirme.

No me arrepiento la verdad. Las clases están en vídeo pero suelen ser en vivo, con lo cual uno puede preguntar dudas en el momento y resolverlas. El primer curso que hice fue Fundamentos de CSS Profesional porque sentía que aunque sabía CSS, había cosas de base que nunca tuve del todo claras. Quedé fascinado con el curso. Un curso que dio Diana Aceves y que hizo que me enamore del CSS para siempre.

A qué viene este tostón

Y ahora sí vamos llegando al asunto. En el último podcast de WeCodeSign entrevistaron, adivinen, sí, a Diana Aceves. Y fue una gozada. Escucharla hablar sobre su experiencia, sobre cómo encarar proyectos, sobre no agobiarse con tantas nuevas tecnologías, sobre la especialización. Es aprender con cada palabra y cada anécdota contada.

Y tal es así que en un momento dado de la entrevista, Ignacio Villanueva (quién lleva el podcast junto a Carmen Ansio Ruiz), y Diana Aceves se pusieron a hablar acerca de cómo hacer debug de las webs en los dispositivos vía USB.

Y mi mente hizo ¡click!.

Hablemos un poco de debug

Cuando desarrollamos una web, estamos trabajando MobileFirst, esto es, enfocándonos en cómo se verá la web en el móvil antes que en otro dispositivo. En el podcast del que les hablo se comenta por demás las razones y virtudes de trabajar así.

En mi caso, a la hora de testear cómo va quedando la web en mi móvil, usaba el inspector de Chrome o Firefox, que poseen un emulador de móviles. El problema era que muchas veces cuando subíamos la web a un servidor y la veíamos desde el propio móvil, no era exactamente lo que habíamos visto en el emulador. Y eso provoca muchos dolores de cabeza.

Debug por USB

En el podcast comentaban que iOS se puede debuggear con Safari (para Mac, que es en el único S.O. que funciona) y Android con las DevTools de Chrome, ambos conectándolos al ordenador a través del puerto USB.

Con lo cual, quedábamos afuera quienes teníamos Windows y un iPhone.

Pero, oh sorpresa, resulta que esto no es tan así.

Bienvenido Prepros

Prepros es un programa de preprocesamiento (entre muchas otras utilidades). Yo lo utilizo para editar el sitio web en SASS y que me lo compile a CSS mientras le agrega los prefixes para todos los navegadores y lo minifica.

También lo utilizo para ver cómo se va actualizando el sitio web mientras lo edito, ya que posee un previsualizador en vivo que te va mostrando las modificaciones que vas haciendo en el editor de código.

Lo que no sabía, y a lo que viene todo este choclazo de artículo, es que Prepros también tiene la posibilidad de previsualizar en el dispositivo móvil. Cosa que es una pasada. Porque me permite ver en tiempo real cómo va a quedar el sitio web exactamente mientras lo voy creando.

Genial, ¿no?.

Cómo hacerlo

Esta es la parte divertida. La que da frutos. La que deja el blablabla y termina en “ooooohhhhhhhhh!!!”. Y qué mejor que unas capturas para eso:

Image for post
Image for post
Menú de Prepros con los proyectos iniciados y el inspector y previsualizador

Captura 1: Acá podemos ver el ícono de móvil junto con la señal WiFi que nos permite leer un código QR o ingresar a la IP que nos dará para ver cualquiera de los proyectos que tengamos en Prepros.

Como ven en el ejemplo, tengo 4 proyectos que veremos más adelante.

Image for post
Image for post
Código QR o IP para previsualizar web en el dispositivo

Captura 2: Según la red WiFi de nuestra conexión de hogar o laboral, tendremos una IP específica del ordenador en el que estemos trabajando.

Aquí Prepros nos indica a qué dirección IP ir en tu navegador móvil o también escaneando el código QR para que te lleve directamente sin tener que escribir todos esos números.

Image for post
Image for post
Proyectos en los que estés trabajando en Prepros

Captura 3: La magia.

Acá vemos en el navegador móvil los proyectos que tenemos en Prepros. Basta con entrar a cualquiera de ellos para que levante el index.html y podamos navegarlo tranquilamente.

Luego lo dicho, editar tu sitio en el ordenador y verás cómo en el móvil se va actualizando mientras lo vas guardando.

Conclusiones

Con esto el flujo de trabajo se acelera muchísimo y nos evita el tener que utilizar el emulador de Chrome o Firefox para ver algo que quizás no es fiel al resultado final. Con esta técnica vemos en el mismo dispositivo cómo quedará.

Quizás esto no es nuevo para nadie, pero tampoco encontré mucha información al respecto en internet, con lo cual si alguien distraído como yo no sabía que podía hacerse, me alegrará el saber que pude aportar algo de mi poquísimo saber en este mundo fantástico que es el desarrollo web.

Otra solución

Que ya termino, que sí, que es el artículo más largo que se haya escrito en Medium.

Buscando entender cómo sucedía esto, rápidamente me di cuenta que todo este proceso podría hacerse sin Prepros. Simplemente utilizando algún editor que nos permita montar nuestro sitio localmente bastaría. Por ejemplo, Brackets es un editor de Adobe que nos permite previsualizar en vivo la web mientras la editamos. Para eso monta un servidor local en un puerto determinado.

Con lo cual, una vez que conozcamos esa dirección IP y ese puerto, nos bastará con introducirlo en el navegador del dispositivo móvil para previsualizar allí también lo que vayamos editando.

Genial otra vez, ¿a que sí?.

¿Y entonces?

Te estarás preguntando entonces para qué escribí un artículo hablando de Prepros ¡Y DE MI VIDA! pero es que me pareció interesante nombrar este maravilloso programa que tiene muchísimas funciones útiles.

Y también es una forma de agradecer y dar importancia a la gente que desinteresadamente ayuda a otras a aprender, ya que este mundo es muy grande y todos necesitamos ayuda en el camino. Y por suerte la hay.

¿Y ahora qué?

¿Todavía sigo escribiendo? ¿Y vos leyendo? Si es así, gracias. Por tomarte el tiempo y por opinar sobre lo que escribí si tenés ganas. Acepto sugerencias, insultos, cosas como “¡pero esto lo sabe cualquiera!” ya que es probable que todos tengan razón en mayor o menor medida.

Y si hay ganas de estar en contacto, bueno, acá está mi Twitter por si las moscas :)

¡Saludos!

Que tengan una gran vida de cervezas, CSS y ¡rimbambón!.

¡Edición de último momento!

Como me comentó Diana Aceves y como reza el título del artículo, esto que describo sirve para previsualizar la web. Pero también hay una utilidad más que es inspeccionar el sitio web para ver dónde hay un error específico que no detectamos.

Con Chrome o Firefox, esto se hace con las herramientas de desarrollo que poseen los navegadores. Pero siempre emulando el dispositivo. En Prepros también está la posibilidad de inspeccionar la web en el dispositivo físico para ir detectando los fallos que tengamos.

Inspeccionar en el dispositivo

No lo escribo, lo muestro:

Image for post
Image for post

No puedo mostrarles lo que sucede en el dispositivo, pero les aseguro que si lo hacen, mientras van marcando los distintos elementos del HTML, se va resaltando en el dispositivo. Y a medida que cambien propiedades, van cambiando en el momento.

Con lo cual, ¡completo desarrollo y sin estar atado a ningún sistema operativo!.

Ahora sí, a menos que surjan nuevas cosas en qué pensar, ¡artículo terminado!. ¡Arrivederci!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store