Ver el código de «Proyecto: Maxiscomputers.com»

= Introducción al Proyecto =
'''MCC HTML5 + CSS + Javascript'''

= Maxi's™ Computers® Corporation Website =

[[Archivo:Maxiscomputers_1.jpeg|thumb|Maxiscomputers.com Vista Superior]]

[[Archivo:Maxiscomputers_2.jpeg|thumb|Maxiscomputers.com Vista Inferior]]

== 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.

=== Footer ===

* 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''':
  <code>
  git clone https://github.com/MaxiComputers/maxiscomputers.com.git
  </code>

# '''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.