PROYECTO 01 · SITIO PUBLICADO
ScarlisLabsPortafolio y herramientas online
Este proyecto documenta el desarrollo del sitio que estás recorriendo: su estructura, sus herramientas y una alternativa para seguir mejorándolo.
Vista general
Un sitio para usar y documentar
Reúno herramientas online y proyectos de programación en un mismo sitio. La portada permite buscar una utilidad, entrar a su página y consultar el portafolio. La imagen muestra la portada publicada, no una maqueta.
Arquitectura
Cómo está construido
WordPress administra las páginas, los proyectos y las imágenes. El tema ScarLabs Dark usa PHP para generar las vistas y HTML y CSS para presentarlas. JavaScript ejecuta las herramientas en el navegador. El sitio está alojado en Hostinger.
Ejemplo de uso
De un formulario a un archivo Excel
En Excel fácil, elegís una plantilla, agregás filas con campos identificados y descargás una copia XLSX. Esta captura usa datos de ejemplo: un ingreso de 1.500 y un gasto de 350, con saldo 1.150. JavaScript procesa la planilla localmente y ExcelJS genera el archivo.
Interfaz e idiomas
Encontrar una herramienta y abrirla
El catálogo tiene búsqueda por nombre y filtros por categoría. Cada herramienta tiene su propia página con instrucciones y preguntas frecuentes en español e inglés. La portada cambia de idioma con EN / ES. CSS adapta la distribución al ancho de la pantalla.
Alternativa propuesta
Otra forma de construir la misma página
Una alternativa sería crear la portada con bloques de WordPress y mover las herramientas a un plugin propio. Los textos y la distribución se editarían desde el administrador, y las herramientas podrían seguir disponibles al cambiar de tema. Esta opción exige mantener por separado el diseño y la lógica. Es una propuesta, no la implementación actual.
Usá las flechas, el teclado o deslizá sobre la imagen. El recorrido no avanza automáticamente. Las capturas muestran la interfaz en español.
DECISIONES DE DESARROLLO
Qué hace cada parte
- Tema personalizado
- Las plantillas PHP generan la portada, el catálogo y las páginas de herramientas. CSS define el diseño oscuro y su adaptación a distintos anchos.
- Procesamiento local
- Las herramientas procesan los archivos en el navegador. Excel fácil usa ExcelJS; los conversores usan las funciones de imagen del navegador. WordPress sirve la interfaz y no recibe esos archivos.
- Páginas e idiomas
- Las herramientas tienen URLs propias en español e inglés, títulos, instrucciones y preguntas frecuentes. Los proyectos se administran desde la sección Proyectos de WordPress.