Este prototipo representa la nueva identidad profesional de Alexandria's Design, orientada hacia el eLearning y el Diseño Instruccional profesional. Incluye contenido real basado en proyectos actuales y una paleta de colores sobria y profesional.
| Color | Hex Code | Uso |
|---|---|---|
| Academic Navy | #1E3A5F |
Color primario - Encabezados, navegación |
| Instructional Blue | #3182CE |
Color secundario - Enlaces, botones |
| Professional Teal | #0694A2 |
Color de soporte - Acentos |
| Academic Amber | #D97706 |
Color de acento - CTAs, highlights |
- Encabezados: Poppins (Google Fonts)
- Cuerpo: Inter (Google Fonts)
- Contenido eLearning: Lato (referencia)
PROTOTIPO_V2/
├── index.html # Página principal con estructura completa
├── styles.css # Estilos CSS con nueva identidad visual
├── script.js # JavaScript interactivo
└── README.md # Este archivo
-
Navega a la carpeta:
C:\Users\LISBETH\OneDrive - LINDA-EDUCATION\Lisbeth\Nuevos Proyectos\Página Web Alexandria's Design\PROTOTIPO_V2 -
Haz doble clic en el archivo
index.html -
El prototipo se abrirá en tu navegador predeterminado
-
Abre la carpeta
PROTOTIPO_V2en VS Code -
Instala la extensión Live Server (si no la tienes):
- Busca "Live Server" en el marketplace de VS Code
- O usa:
ritwickdey.liveserver
-
Haz clic derecho en
index.html→ "Open with Live Server" -
El prototipo se abrirá con recarga automática en
http://localhost:5500
-
Abre tu navegador preferido (Chrome, Edge, Firefox)
-
Presiona
Ctrl + O(oCmd + Oen Mac) -
Navega y selecciona el archivo
index.html
✅ Misión y Visión auténticas de Alexandria's Design ✅ Proyecto Destacado: "Becoming ACEs Aware in California" ✅ 5 Sectores de especialización reales ✅ 6 Servicios detallados con descripciones profesionales ✅ 4 Proyectos de Portfolio: BUA, Knoxville College, Morgan State, ECCALON ✅ Metodología ADDIE visualizada ✅ Equipo: Dr. Marie Martin, Ed.L. y Dr. Charles Martin, Ed.D.
- ✅ Navegación responsive con menú hamburguesa móvil
- ✅ Smooth scroll entre secciones
- ✅ Animaciones al hacer scroll (fade-in effects)
- ✅ Efecto parallax suave en hero section
- ✅ Contador animado de estadísticas
- ✅ Tarjetas interactivas con efectos hover
- ✅ Barra de progreso de scroll
- ✅ Optimizado para accesibilidad (WCAG 2.1 AA)
- ✅ Desktop (1280px+)
- ✅ Tablet (768px - 1024px)
- ✅ Mobile (320px - 767px)
- Navegación - Logo, menú principal, CTA
- Hero Section - Headline principal con CTAs
- Trust Bar - Certificaciones y badges (WOSB, GSA, WCAG, Section 508, SCORM)
- Sectores - 5 tarjetas de sectores especializados
- Proyecto Destacado - ACEs Aware con estadísticas y detalles
- Servicios - 6 tarjetas de servicios principales
- Portfolio - 4 proyectos destacados
- Metodología - Proceso ADDIE visualizado
- Equipo - Fundadores con credenciales
- CTA Final - Llamado a la acción
- Footer - Información de contacto, enlaces, certificaciones
- 7 Lecciones interactivas
- Bilingüe (Inglés/Español)
- 2,500+ Médicos capacitados
- Agregar logo de Alexandria's Design (basado en propuestas del documento IDENTIDAD_MARCA_ALEXANDRIA.md)
- Incorporar screenshots reales de proyectos (BUA, Knoxville, Morgan State, ECCALON)
- Integrar fotos profesionales de Dr. Marie Martin y Dr. Charles Martin
- Agregar favicon
- Embeber videos Vyond (Box Breathing, Feeling Thermometer, Progressive Muscle Relaxation)
- Agregar demos interactivos de cursos Articulate Rise/Storyline
- Implementar formulario de contacto funcional
- Agregar integración con sistema de calendarios para consultas
- Crear modal de detalles para cada proyecto del portfolio
- Implementar filtros en la sección de portfolio
- Conectar formularios a sistema de email/CRM
- Implementar analytics (Google Analytics / Plausible)
- Configurar SEO metadata
- Implementar sistema de blog/recursos
Probado y compatible con:
- ✅ Google Chrome (recomendado)
- ✅ Microsoft Edge
- ✅ Mozilla Firefox
- ✅ Safari
Para probar el diseño responsive:
- Abre el prototipo en Chrome
- Presiona
F12para abrir DevTools - Presiona
Ctrl + Shift + Mpara modo responsive - Prueba diferentes dispositivos:
- iPhone SE (375px)
- iPad (768px)
- Desktop (1920px)
- Colores brillantes y juveniles (#6366f1, #8b5cf6, #ec4899)
- Contenido placeholder genérico
- Sin identidad de marca clara
- Paleta sobria y profesional (#1E3A5F, #3182CE, #0694A2, #D97706)
- Contenido real basado en proyectos actuales
- Identidad de marca sólida con misión/visión
- Email: info@alexandriasdesign.com
- Teléfono: (555) 123-4567
- Ubicación: Virtual Office - Serving Nationwide
- ✅ WOSB Certified (Women-Owned Small Business)
- ✅ GSA Schedule Contract Holder
- ✅ WCAG 2.1 AA Accessibility Compliant
- ✅ Section 508 Compliant
- ✅ SCORM 1.2/2004 Compatible
-
Fuentes de Google Fonts: El prototipo carga Poppins e Inter desde Google Fonts. Requiere conexión a internet para visualizar correctamente.
-
Placeholders de Imágenes: Actualmente usa placeholders visuales. Reemplazar con imágenes reales según sea necesario.
-
Enlaces Funcionales: Los enlaces internos (#sectores, #servicios, etc.) funcionan con smooth scroll. Los enlaces externos son placeholders.
-
Performance: Optimizado para carga rápida. Ver tiempos de carga en la consola del navegador.
Si encuentras problemas:
-
Abre la Consola del Navegador:
F12→ Pestaña "Console" -
Verás mensajes informativos:
- Paleta de colores cargada
- Tiempo de carga de la página
- Confirmación de funcionalidades activas
-
Revisa que todos los archivos estén en la misma carpeta:
index.htmlstyles.cssscript.js
© 2025 Alexandria's Design. Todos los derechos reservados.
Diseño y Desarrollo: Alexandria's Design Team Prototipo Creado: Febrero 2025 Versión: 2.0 (Identidad Profesional)
Para preguntas sobre este prototipo:
- Email: lisbeth@alexandriasdesign.com
- GitHub: @LisbethAlexandrias
¡Gracias por revisar el prototipo de Alexandria's Design! 🎓✨