Diferencia entre revisiones de «Proyecto: Maxiscomputers.com»

De MCC™ Wiki
Sin resumen de edición
Sin resumen de edición
Línea 72: Línea 72:


== Tipos de implementación ==
== Tipos de implementación ==
* [[Proyecto: Maxiscomputers.com]]
* [[Proyecto: Via Láctea]]
* [[Proyecto: Azambaid]]


* 1. 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.
* 1. 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.

Revisión del 00:42 10 sep 2024

Introducción al Proyecto

MCC HTML5 + CSS + Javascript

Maxi's™ Computers® Corporation Website

Maxiscomputers.com Vista Superior
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)

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

  1. Clonar el Repositorio:
 
 git clone https://github.com/MaxiComputers/maxiscomputers.com.git
 
  1. 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.
  1. 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.
  1. 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

  • 1. 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.
  • 2 [[Implementación Dockerizada (Se detalla su implementación en un artículo separado)]
  • 3. Implementación en clúster de Kubernetes utilizando Helm3 (Generar imagen Docker previamente con el punto 2.

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.