Proyecto: Maxiscomputers.com
Introducción al Proyecto
MCC HTML5 + CSS + Javascript
Maxi's™ Computers® Corporation Website
Descripción
Este es el sitio web de Maxi's™ Computers® Corporation, una empresa que ofrece servicios de consultoría IT desde el año 2003. El sitio está diseñado para proporcionar información sobre los servicios de la empresa, su historia, y facilitar a los clientes el contacto mediante varias vías de comunicación como correo electrónico, teléfono, y redes sociales.
Tecnologías Utilizadas
- HTML5: Estructura principal del sitio.
- CSS3: Para el diseño y la estética del sitio.
* Se incluye una versión para pantallas más pequeñas mediante media queries.
- Animate.css: Para las animaciones de los elementos del sitio.
- Font Awesome: Para los iconos de redes sociales y servicios.
- JavaScript: Incluye código que maneja la carga de la API de YouTube y el manejo dinámico del año en el footer.
- YouTube API: Para integrar un reproductor de videos dentro del sitio.
Estructura del Proyecto
Head (Cabecera del Documento)
- Configuración de metadatos para SEO y optimización en redes sociales (Open Graph y Twitter Cards).
- Carga de fuentes, estilos y archivos externos.
- Declaración de `meta` tags para mejorar la indexación del sitio y su accesibilidad.
Body (Cuerpo del Documento)
- Menú de Navegación: Contiene enlaces a las principales secciones del sitio y un menú desplegable para cambiar entre diferentes idiomas.
* Idiomas soportados: Inglés, Español, Italiano, Francés, Alemán, Portugués.
- Secciones Principales:
* About Us: Breve historia sobre la empresa y sus orígenes. * Servicios: Descripción detallada de los principales servicios que ofrece la empresa: * Webhosting, Redes, Soluciones de Software, Soporte IT, Publicidad, Estudios de Grabación. * Nueva Sección: Más detalles sobre la empresa y un formulario de contacto. * Footer: Contiene información de copyright y enlaces a redes sociales como WhatsApp, LinkedIn, Instagram, YouTube, entre otros.
- Video de YouTube: Sección para incrustar un reproductor de video mediante la API de YouTube.
- Incluye la protección de derechos de autor actualizada dinámicamente con JavaScript.
- Enlaces a perfiles sociales y contacto directo.
Funcionalidades Especiales
- Multimedia: Integración con plataformas de streaming y redes sociales para maximizar el alcance de la empresa.
- Responsive Design: Mediante el uso de `@media` queries para adaptar el diseño a pantallas más pequeñas como móviles y tablets.
- Enlaces Externos Seguros: La mayoría de los enlaces en el sitio abren en nuevas pestañas para garantizar una navegación fluida sin perder la página original.
Instrucciones para Desarrolladores
- Clonar el Repositorio:
git clone https://github.com/MaxiComputers/maxiscomputers.com.git
- Instalar Dependencias:
Este proyecto no requiere la instalación de dependencias de backend ya que es un sitio web estático. Sin embargo, asegúrate de que los archivos CSS y JS se descarguen correctamente mediante las CDNs configuradas.
- Personalizar los Estilos:
Si deseas hacer modificaciones a los estilos, puedes editar los archivos CSS en la carpeta `/css/`. Hay un archivo específico para dispositivos móviles, `styles_m.css`, que se carga solo en pantallas más pequeñas.
- Modificar Contenido:
Para actualizar los textos o enlaces, edita directamente el archivo `index.html`. Los textos están en etiquetas `p`, `h2`, y `a`.
Tipos de implementación
- Servidor Físico/VM, simplemente cope todo el contenido de la carpeta html del repositorio en la carpeta www o public_html de su servidor y el código debería funcionar, verificar que esté abierto el puerto 80.
- MCC - Implementación Dockerizada
- MCC - Implementación en cluster de Kubernetes utilizando Helm 3
- Si opta por implementar en un clúster, deberá generar la imagen Docker previamente.
Mejoras Futuras
- Integración de un CMS (WordPress o similar) para manejar el contenido de manera más dinámica.
- Mejorar la integración de SEO con análisis de palabras clave más detalladas.
- Expansión de la funcionalidad del formulario de contacto para manejar consultas directas mediante backend (PHP/Node.js).
Créditos
Desarrollado por Massimo para Maxi's™ Computers® Corporation.
© 2024 Maxi's™ Computers® Corporation. Todos los derechos reservados.