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

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

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

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

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

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

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

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.

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.

Proyectos en los que estés trabajando en Prepros

Captura 3: La magia.

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

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

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?

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é?

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!

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