Spanish (Español) translation by Carlos (you can also view the original English article)
Cuando trabajas en un sitio estático, las cosas pueden ser mucho más fáciles si tienes una manera simple de activar una vista previa local de tu diseño.
Y es mejor si esta vista previa local tiene una función de recarga en vivo para que veas automáticamente que tus cambios están surtiendo efecto a medida que trabajas. Y mejor aún, si te permite ver tu sitio a través de un protocolo https://, dado que a veces las cosas no funcionan como se esperan cuando se ven mediante un protocolo file://.
Existen múltiples formas de configurar las vistas previas locales, pero una de las más fáciles es operar directamente a través del editor de código Atom, aprovechando su excelente ecosistema de paquetes de extensión. Todo lo que necesitas hacer es instalar tu paquete preferido, activarlo, y estás listo para empezar.
En este consejo breve, te mostraré tres de los mejores paquetes de Atom para configurar de manera rápida y fácil las vistas previas locales con recargas en vivo. ¡Comencemos!
Nota: Si aún no tienes Atom, puedes obtenerlo en https://atom.io/
atom-live-server
El paquete atom-live-server es mi «mejor opción» personal cuando necesito una manera rápida y fácil de previsualizar algún código estático. Genera una vista previa local con un protocolo http:// y se actualiza de forma automática cuando se guardan los cambios en cualquiera de los archivos que se utilizan en el proyecto.
Para instalarlo, ve a Packages > Settings View > Install Packages / Themes. A continuación, busca «atom-live-server», cuando lo encuentres, presiona el botón de instalación (Install) del paquete.
Para utilizar el paquete, deberás tener una carpeta de proyectos añadida a la barra lateral Project. Desde aquí ve a Packages > atom-live-server > Start Server y se abrirá una vista previa de tu sitio en tu navegador predeterminado. Si necesitas detener el servidor de nuevo, ve a Packages > atom-live-server > Stop Server.
Si tienes varios proyectos abiertos en la barra lateral, el que esté en la parte superior es el que tendrá la vista previa. Si necesitas pasar de la vista previa de un proyecto a otra, primero detén el servidor, luego arrastra y suelta el proyecto que quieras ver en la parte superior de la barra lateral, y reinicia el servidor.
atom-html-preview
En vez de abrir una vista previa en tu navegador predeterminado, el paquete atom-html-preview te brinda una vista previa en línea de cualquier página HTML dentro del editor Atom. Para instalar este paquete sigue las mismas instrucciones del paquete anterior, pero busca «atom-html-preview».
Una vez instalado, abre el archivo HTML que desees ver, y luego ve a Packages > Preview HTML > Enable Preview. Verás tu espacio de trabajo dividido, con tu código en el panel izquierdo y tu vista previa en vivo en el panel derecho.
Cuando utilices atom-html-preview, no es necesario que guardes los archivos para actualizar la vista previa. Más bien, a medida que vayas escribiendo, tu vista previa se actualizará de manera continua.
atom-browser
El paquete atom-browser te permite tener fácilmente una vista previa de tu HTML en una ventana de navegador integrada dentro del Atom, de forma similar a atom-html-preview. Desafortunadamente las vistas previas son mediante un protocolo file://, pero incluye recarga en vivo.
No obstante, la ventaja más sobresaliente de este paquete es que puedes utilizar la ventana de la vista previa en línea como un navegador normal. Esto hace que sea muy conveniente buscar documentación mientras trabajas, o para seguir un tutorial de codificación, por ejemplo.
Instala el paquete siguiendo los pasos que se describieron anteriormente y busca atom-browser.
Después de la instalación, abre el explorador para navegar de manera habitual yendo a Packages > Atom Browser > Toggle.
Para que obtengas una vista previa de un documento HTML, haz clic con el botón derecho del ratón en él en la barra lateral Project y selecciona Atom Preview. Para habilitar la recarga en vivo mientras codificas, haz clic en el pequeño ícono de un rayo al lado del campo de la URL del navegador.
Concluyendo
Eso cubre tres superprácticos paquetes para vistas previas en vivo para Atom. Con ellos en tu kit de herramientas, ¡observar cuidadosamente tus diseños a medida que avanzas será mucho más fácil y fluido!
¿Tienes alguna otra sugerencia sobre formas rápidas y fáciles de manejar las vistas previas locales? Si es así, por favor compártelas con otros lectores de Tuts+ en los comentarios.
Enlaces relacionados
Aprende más sobre Atom
By
