Si eres desarrollador o diseñador web, es posible que te encuentres trabajando con un gran número de archivos HTML. Si bien estos archivos pueden contener contenido valioso, a veces pueden ser difíciles de leer o editar debido a problemas de formato.
Embellecer tus archivos HTML, o darles el formato adecuado, permite que sean más fáciles de leer, modificar y depurar. Sin embargo, embellecer manualmente un gran número de archivos HTML puede ser una tarea que lleve mucho tiempo.
“Embellecer HTML”
Scripting para Embellecer archivos HTML
Afortunadamente, con un poco de conocimiento de scripting, puedes automatizar el proceso de embellecimiento de archivos HTML usando un script Bash en tu Mac. En este artículo, te guiaremos a través del proceso de creación de un script Bash que te permitirá embellecer tus archivos HTML por lotes.
Al final de este tutorial, tendrás un script Bash completamente funcional que podrás usar para embellecer rápida y fácilmente múltiples archivos HTML a la vez, ahorrándote tiempo y esfuerzo.
Así es como se ve un archivo HTML sin formato o desordenado:
<!DOCTYPE html><html><head><title>Ejemplo SitioWeb HTML</title>
<link rel="stylesheet" href="style.css"></head><body>
<div class="header"><h1>Bienvenido a nuestro sitio web </h1><nav><ul><li>
<a href="index.html">Inicio</a></li><li><a href="about.html">Acerca de</a></li><li><a href="contact.html">Contacto</a></li></ul></nav></div><div class="content"><h2>Acerca de</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ultrices mauris. Sed finibus mauris et tortor malesuada, at elementum nunc lacinia. Donec euismod elit nec arcu vulputate eleifend. Duis euismod mauris at nisl consequat, sit amet pretium dolor luctus. Etiam lobortis, ex vitae consectetur congue, magna odio dignissim ante, eu tristique sapien turpis id odio. Nam dignissim tellus et ligula dignissim, a sollicitudin magna posuere. Nulla facilisi. Donec et metus volutpat, feugiat quam non, dictum libero. Curabitur auctor, libero sit amet interdum facilisis, ante sapien eleifend turpis, at congue ex mi id velit.</p></div>
<div class="footer"><p>© 2024 HTMLDESDECERO.ES</p></div></body></html>Y así es como quedaría después de formatearlo:
<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="HTML Tidy for HTML5 for Apple macOS version 5.8.0">
<title>Ejemplo SitioWeb HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>Bienvenido a nuestro sitio web</h1>
<nav>
<ul>
<li>
<a href="index.html">Inicio</a>
</li>
<li>
<a href="about.html">Acerca de</a>
</li>
<li>
<a href="contact.html">Contacto</a>
</li>
</ul>
</nav>
</div>
<div class="content">
<h2>Acerca de</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ultrices mauris. Sed finibus mauris et tortor malesuada, at elementum nunc lacinia. Donec euismod elit nec arcu vulputate eleifend. Duis euismod mauris at nisl consequat, sit amet pretium dolor luctus. Etiam lobortis, ex vitae consectetur congue, magna odio dignissim ante, eu tristique sapien turpis id odio. Nam dignissim tellus et ligula dignissim, a sollicitudin magna posuere. Nulla facilisi. Donec et metus volutpat, feugiat quam non, dictum libero. Curabitur auctor, libero sit amet interdum facilisis, ante sapien eleifend turpis, at congue ex mi id velit.</p>
</div>
<div class="footer">
<p>© 2024 HTMLDESDECERO.ES</p>
</div>
</body>
</html>El siguiente es el script bash que necesitarás.
#!/bin/bash
# Comprueba si la herramienta de línea de comandos `tidy` está instalada
if ! command -v tidy &> /dev/null
then
echo "Error: tidy no está instalado. Por favor, instala tidy usando el comando 'brew install tidy-html5'." >&2
exit 1
fi
# Comprobar si se proporciona el argumento de la carpeta de entrada
if [ $# -eq 0 ]
then
echo "Error: No se ha proporcionado ninguna carpeta de entrada. Por favor, proporciona una carpeta de entrada como argumento." >&2
exit 1
fi
# Comprobar si existe la carpeta de entrada
if [ ! -d "$1" ]
then
echo "Error: La carpeta '$1' no existe." >&2
exit 1
fi
# Recorre los archivos HTML de la carpeta de entrada y embellécelos
find "$1" -type f -name "*.html" -print0 | while read -d $'\0' file
do
# Embellecer el código HTML y sustituir el archivo original
tidy -indent -wrap 0 -quiet -m -i "$file"
done
# Salir con éxito
exit 0Qué Hace el Script Bash
Este script está escrito en el lenguaje de programación Bash y automatiza el proceso de embellecimiento masivo de archivos HTML en un Mac.
El script comprueba si la herramienta de línea de comandos ‘tidy’ está instalada y si se proporciona una carpeta de entrada como argumento. Si la carpeta de entrada existe, el script recorre todos los archivos HTML de la carpeta de entrada y los embellece utilizando la herramienta de línea de comandos “tidy”. Los archivos HTML originales se sustituyen por las versiones embellecidas.
Si ‘tidy’ no está instalado o la carpeta de entrada no existe, el script mostrará un mensaje de error y saldrá con un estado de error. Si todo se ejecuta correctamente, el script sale con un estado de éxito.
Instalación de tidy:
brew install tidy-html5Cómo Utilizar este Script
Aquí tienes una guía fácil de seguir para utilizar el script para embellecer un único archivo HTML o varios archivos en bloque.
- Abre un editor de texto en tu Mac, como TextEdit o Sublime Text.
- Copia y pega el script en un nuevo archivo.
- Guarda el archivo con un nombre, como “
embellecedor_html.sh“, y asegúrate de que la extensión del archivo sea “.sh“. - Abre la aplicación Terminal en tu Mac.
- Navega hasta el directorio donde está guardado el archivo de script utilizando el comando “
cd“. - Escribe
chmod +x embellecedor_html.shy pulsa Intro para que el script sea ejecutable. - Escribe
./embellecedor_html.sh /ruta/a/carpeta/entraday pulsa Intro para ejecutar el script, sustituyendo /ruta/a/carpeta/entrada por la ruta real a la carpeta que contiene los archivos HTML. - Espera a que el script termine de ejecutarse. Recorrerá todos los archivos HTML de la carpeta de entrada y los embellecerá utilizando la herramienta de línea de comandos “tidy“.
Una vez que el script se haya ejecutado, los archivos HTML se habrán embellecido y guardado como archivos originales.
Herramientas Online para Formatear Código HTML
Embellecer archivos HTML puede ser un proceso laborioso si se realiza manualmente, es por eso que te hemos proporcionado un script eficiente para automatizar varios archivos a la vez.
Sin embargo, si solo tienes un archivo que “embellecer”, existen algunas herramientas en línea “formateadoras de HTML online” que pueden lograr el mismo resultado con solo unos pocos clics.
A continuación, se presentan algunas herramientas online populares para embellecer archivos HTML:
- DirtyMarkup Formatter (https://www.10bestdesign.com/dirtymarkup/): Esta herramienta permite pegar directamente el código HTML y aplicar formateo automático. Con opciones para ajustar la indentación, eliminar espacios en blanco innecesarios y resaltar la sintaxis, es una opción confiable para embellecer archivos HTML de manera rápida y precisa.
- Embellecedor HTML (https://geeks.tools/es/html-beautifier): Embellecedor HTML ofrece una interfaz sencilla y potente para formatear archivos HTML. Es la más básica de utilizar, pero cumple con el propósito.
- HTML Formatter (https://htmlformatter.com): Esta herramienta permite cargar el archivo HTML o simplemente pegar el código en su editor en línea. Con varias opciones de formateo, como ajuste de indentación, eliminación de etiquetas vacías y compresión de código, es ideal para embellecer archivos HTML y optimizar su rendimiento.
- Online HTML Editor (https://html-online.com/editor): Además de ser un editor en línea, esta herramienta cuenta con la capacidad de embellecer automáticamente el código HTML ingresado. Solo basta con copiar y pegar el código en el editor, y la herramienta se encargará de aplicar el formateo necesario para una presentación limpia y bien estructurada.
- Pretty HTML (https://prettyhtml.netlify.app/): Pretty HTML es una herramienta fácil de usar que permite cargar archivos HTML o ingresar el código directamente. Proporciona opciones para ajustar la indentación, eliminar etiquetas redundantes y aplicar un estilo uniforme, lo que resulta en un archivo HTML visualmente atractivo y fácil de leer.
Palabras Finales
En conclusión, embellecer archivos HTML por lotes en Mac utilizando un script bash es una solución eficiente y automatizada. Al aprovechar las capacidades del scripting en bash, podemos formatear y mejorar la apariencia de múltiples archivos HTML al mismo tiempo, ahorrando tiempo y esfuerzo en comparación con el formateo manual.
Esta técnica nos permite mantener un código HTML limpio, legible y de fácil mantenimiento, lo que contribuye a un desarrollo web más eficiente y profesional en entornos de macOS.
