Plataforma web corporativa de DerejSoft para presentar servicios, proyectos, contenido de valor y documentación legal en una experiencia moderna, accesible y responsiva.
- Resumen del proyecto
- Objetivo y alcance
- Mapa completo del sitio
- Estructura del repositorio
- Arquitectura frontend
- Tecnologías y recursos externos
- Funcionalidades clave
- Accesibilidad y buenas prácticas
- Responsive design
- Ejecución local
- Despliegue
- Guía de mantenimiento
- Checklist de calidad
- Contacto
WebDerej es la web institucional de DerejSoft. El sistema está orientado a:
- Comunicar la propuesta de valor y servicios de la marca.
- Exponer proyectos y productos desarrollados.
- Publicar artículos y contenido informativo.
- Mostrar documentos legales obligatorios (privacidad y términos).
La solución está construida con frontend puro (HTML, CSS, JavaScript), optimizada para carga rápida y despliegue simple en hosting estático.
Consolidar una presencia web profesional y confiable para clientes, aliados y visitantes, con navegación clara, estética moderna y contenido corporativo estructurado.
- Landing principal con secciones de negocio.
- Página institucional "Nosotros".
- Sección de blog y artículos individuales.
- Sección de proyectos con páginas dedicadas.
- Documentación legal publicada en páginas propias.
- Recursos multimedia organizados por carpetas.
index.html: portada principal de la marca.nosotros2.html: presentación institucional y cultura de empresa.blog.html: índice general del blog.
alticulos/arti.htmlalticulos/arti2.htmlalticulos/arti3.html
proyectos/proye1.htmlproyectos/derejfinance.htmlproyectos/derejmotium.htmlproyectos/derejpress.htmlproyectos/derejstorage.html
Documentos_Legales/politica_privacidad.htmlDocumentos_Legales/termino_servicio.html
webderej/
|-- index.html
|-- nosotros2.html
|-- blog.html
|-- README.md
|-- alticulos/
| |-- arti.html
| |-- arti2.html
| |-- arti3.html
|-- Documentos_Legales/
| |-- politica_privacidad.html
| |-- termino_servicio.html
|-- proyectos/
| |-- proye1.html
| |-- derejfinance.html
| |-- derejmotium.html
| |-- derejpress.html
| |-- derejstorage.html
|-- imagenes/
|-- imgproye/
| |-- derejfinance/
| |-- derejmotium/
| |-- derejpress/
| |-- derejstorange/
|-- logos/
alticulos/: contenido editorial individual.Documentos_Legales/: cumplimiento legal y transparencia.proyectos/: detalle de productos/proyectos del portafolio.imagenes/: assets visuales generales.imgproye/: imágenes segmentadas por proyecto.logos/: branding, favicon y recursos de identidad.
- Sitio multipágina (MPA) con rutas estáticas.
- Navegación horizontal con versión móvil colapsable.
- Estructura visual basada en secciones (hero, bloques de valor, cards, footer).
- Estilos definidos dentro de cada HTML para autonomía por vista.
headerfijo con menú principal.- Hero visual con gradientes y/o elementos animados.
- Cards informativas para servicios, posts y proyectos.
- Footer corporativo con enlaces legales y redes.
- Botón flotante de contacto en secciones aplicables.
HTML5semántico.CSS3moderno con variables (:root),flex,grid, animaciones y media queries.JavaScript Vanillapara interacciones y comportamiento dinámico.
- Google Fonts (
Outfit,Plus Jakarta Sans,Inter,Playfair Display). - Font Awesome para iconografía.
- Devicon para iconos tecnológicos.
- SweetAlert2 (en páginas que lo incluyen) para alertas visuales.
- Navegación fija y contexto visual de la sección activa.
- Menú responsive para móviles.
- Animaciones de entrada y efectos hover en bloques interactivos.
- Sección de blog con artículos enlazados por página individual.
- Showcase de proyectos con páginas de detalle.
- Publicación de información legal accesible desde navegación/footer.
- Integración de enlaces de contacto y redes sociales.
- Uso de etiquetas semánticas (
main,section,nav,footer). - Inclusión de atributos descriptivos (
aria-label,title, textos alternativos). - Presencia de clase utilitaria
sr-onlypara apoyo a lectores de pantalla. - Jerarquía tipográfica y separación clara de contenidos.
- Contrastes y foco visual considerados en componentes interactivos.
- Diseño fluido mediante
flexboxyCSS grid. - Adaptación progresiva para escritorio, tablet y móvil.
- Menús y bloques reordenados según ancho de pantalla.
- Ajustes de tipografía y espaciado para legibilidad en pantallas pequeñas.
- Clona o descarga el repositorio.
- Abre la carpeta
webderejen VS Code. - Ejecuta
index.htmlen navegador o con una extensión tipoLive Server. - Navega al resto de vistas mediante los enlaces del menú.
- Proyecto apto para cualquier hosting estático (GitHub Pages, Netlify, Vercel estático, cPanel, etc.).
- Requiere conservar la misma estructura de carpetas para que las rutas relativas funcionen correctamente.
- No depende de backend para renderizar vistas principales.
- Crear archivo en
alticulos/con la misma convención actual. - Añadir tarjeta/enlace correspondiente en
blog.html. - Verificar navegación, estilos y enlaces internos.
- Crear nueva página en
proyectos/. - Añadir recursos visuales en
imgproye/<nombre-proyecto>/. - Integrar enlace desde portada o sección de proyectos.
- Editar archivos dentro de
Documentos_Legales/. - Validar títulos, anclas y navegación lateral si aplica.
- Confirmar que estén enlazados desde header o footer.
- Mantener consistencia visual reutilizando variables CSS.
- Evitar duplicar estilos complejos sin necesidad.
- Optimizar imágenes antes de publicarlas.
- Validar cada cambio en desktop y móvil antes de subir.
- Enlaces internos funcionando al 100%.
- Menú móvil operativo.
- Sin imágenes rotas.
- Metadatos (
title,description) actualizados por página. - Documentos legales accesibles desde la navegación.
- Pruebas en al menos 2 navegadores modernos.
DerejSoft
- Email:
derejsoft2003@gmail.com - Instagram: @derejsoft
- TikTok: @derejsoft
- WhatsApp:
+1 829 477 2269
Desarrollado con pasión por DerejSoft.