Estructura base

La estructura base de un sitio web es fundamental para garantizar una navegación intuitiva, coherencia visual y accesibilidad. Esta estructura se compone principalmente de tres secciones: Header (encabezado), Body (cuerpo) y Footer (pie de página).

Header

El encabezado es la parte superior de la página y suele contener elementos clave que se mantienen constantes en todo el sitio. Su objetivo es proporcionar una navegación clara y reforzar la identidad de la marca.

Elementos comunes del header:
  • Logotipo: Representa visualmente la marca y suele estar vinculado a la página de inicio.
  • Menú de navegación principal: Permite acceder a las secciones principales del sitio.
  • Barra de búsqueda: Facilita la localización de contenido específico.
  • Llamadas a la acción (CTA): Botones como "Contáctanos", "Suscríbete", entre otros.

En el sitio de la CCS, el header incluye el logotipo de la Cámara de Comercio de Santiago y un menú de navegación que dirige a las secciones: Inicio, Diseño, Desarrollo, Componentes, Contenido y Documentación.

Body (Cuerpo)

El cuerpo es la sección central de la página, donde se presenta el contenido principal. Esta área varía según la sección del sitio y puede incluir textos, imágenes, videos, formularios y otros elementos interactivos.

Componentes típicos del body:
  • Secciones informativas: Contenido dividido en bloques temáticos.
  • Artículos o publicaciones: Entradas de blog, noticias o actualizaciones.
  • Galerías de imágenes o videos: Muestran contenido visual relevante.
  • Formularios: Para contacto, suscripción o recopilación de datos.

En el sitio de la CCS, el body de cada sección proporciona información detallada y recursos relacionados con el tema correspondiente, como guías de diseño, componentes reutilizables y documentación técnica.

Footer

El pie de página se encuentra al final de la página y ofrece información adicional y enlaces útiles. Al igual que el header, suele ser consistente en todo el sitio.

Elementos comunes del footer:
  • Información de contacto: Dirección, teléfono, correo electrónico.
  • Enlaces a políticas: Privacidad, términos y condiciones, compliance.
  • Redes sociales: Iconos que enlazan a las plataformas sociales de la organización.
  • Créditos o derechos de autor: Información legal y de propiedad intelectual.

Elementos técnicos generales

Esta sección detalla los fundamentos técnicos que sustentan la estructura y funcionalidad del sitio web de la Cámara de Comercio de Santiago. Se abordan aspectos clave como el sistema de grillas, márgenes, componentes reutilizables y la clasificación del contenido mediante etiquetas.

Sistema de Grillas o Bloques

El sitio emplea un sistema de grillas basado en una estructura de 12 columnas, lo que permite una disposición flexible y coherente de los elementos en la interfaz. Este enfoque facilita la adaptabilidad del diseño a diferentes dispositivos y tamaños de pantalla, asegurando una experiencia de usuario óptima tanto en escritorio como en dispositivos móviles.

Las secciones del sitio están organizadas en bloques claramente definidos, lo que contribuye a una navegación intuitiva y a una presentación ordenada del contenido.

Márgenes

Se observa una aplicación consistente de márgenes y espacios entre los distintos elementos del sitio. Estos espacios proporcionan una separación visual adecuada, mejorando la legibilidad y la estética general. La coherencia en el uso de márgenes también contribuye a una experiencia de usuario armoniosa y profesional.

Componentes

El sitio utiliza una variedad de componentes reutilizables que mantienen una coherencia visual y funcional en toda la plataforma. Algunos de estos componentes incluyen:

  • Botones: Elementos interactivos que desencadenan acciones específicas.
  • Cartas (Cards): Bloques que presentan información relevante de manera compacta.
  • Formularios: Elementos para recopilar datos del usuario.
  • Grillas: Organizaciones de contenido en columnas y filas.
  • Menús: Navegación que permite acceder a diferentes secciones del sitio.
  • Sliders: Presentación de imágenes o contenido en forma de carrusel.

Tags para clasificación de contenido

Para organizar y facilitar el acceso al contenido, el sitio implementa un sistema de etiquetas (tags) que clasifica la información en categorías específicas. Estas etiquetas permiten a los usuarios filtrar y localizar rápidamente la información relevante, mejorando la eficiencia en la navegación.

Por ejemplo, en la sección de noticias o eventos, las etiquetas pueden incluir categorías como "Innovación", "Sostenibilidad", "Comercio Electrónico", entre otras, lo que ayuda a segmentar el contenido y a dirigir al usuario hacia sus áreas de interés.

Hoja de estilos

El sitio implementa una hoja de estilos centralizada que define las reglas de presentación visual para todos los elementos de la interfaz. Esta hoja de estilos permite mantener una identidad gráfica coherente, respetando los lineamientos visuales institucionales de la Cámara.

  • Variables: Se utilizan variables para manejar colores institucionales como azul, gris, blanco y acentos secundarios, permitiendo un fácil mantenimiento y consistencia cromática.
  • Tipografías: La tipografía principal se declara globalmente, respetando jerarquías visuales claras entre títulos, subtítulos, párrafos y destacados.
  • Estilos responsivos: La hoja de estilos incluye reglas para adaptar el sitio a diferentes resoluciones (media queries), garantizando compatibilidad con móviles, tablets y desktop.
  • Estilos de componentes: Cada componente reutilizable (botones, tarjetas, bloques de texto, formularios) tiene clases CSS específicas, con una nomenclatura clara y orientada a la reutilización.
  • Sistemas de espaciado y grillas: La hoja define márgenes, paddings y grids mediante clases utilitarias que aseguran orden y armonía visual.

Accesos

El acceso a las plataformas digitales de la Cámara de Comercio de Santiago está gestionado de forma segura y estructurada. Para ello, se han definido distintos niveles de acceso según el tipo de usuario, sus responsabilidades y las secciones del sitio a las que debe ingresar.

El sistema está diseñado para garantizar una experiencia fluida y ordenada, permitiendo que cada persona acceda solo a las funcionalidades que necesita, protegiendo así la integridad del contenido y la operatividad de la plataforma.

Autenticación de usuarios

El sitio cuenta con un sistema de autenticación estándar de WordPress, que requiere nombre de usuario y contraseña para ingresar. Este mecanismo permite validar la identidad de cada usuario antes de otorgar acceso a áreas restringidas del sitio.

La autenticación puede complementarse con medidas adicionales de seguridad, como el uso de contraseñas seguras, buenas prácticas de gestión de cuentas, y eventualmente autenticación en dos pasos (2FA) según el nivel de criticidad.

Control de roles y permisos

Para obtener acceso a Wordpress coordinar el acceso con la Gerencia de Comunicaciones – Soledad Castro a su correo scastro@ccs.cl

Indicar en el correo a que sitio tendrá acceso y cuales serán sus labores a realizar.

Debe definir uno de los siguientes roles para acceder:

  • Editor: Puede publicar y gestionar publicaciones, incluyendo las de otros usuarios
  • Autor: Puede publicar y gestionar sus propias publicaciones
  • Contribuidor: Puede escribir y editar sus propias publicaciones, pero no publicarlas directamente.
  • Suscriptor: Solo tiene la capacidad de leer contenido.

Los roles de administrador son de uso exclusivo para el equipo de la Gerencia de Servicios Tecnológicos de la CCS.

Exploradores soportados

El sitio web de la Cámara de Comercio de Santiago ha sido desarrollado siguiendo estándares modernos de compatibilidad y accesibilidad, asegurando una correcta visualización y funcionamiento en los principales navegadores del mercado.

Navegadores compatibles

Se garantiza el soporte completo en los siguientes exploradores actualizados:

  • Google Chrome (versión 100 o superior)
  • Mozilla Firefox (versión 100 o superior)
  • Microsoft Edge (basado en Chromium)
  • Safari (última versión estable en macOS)

Además, el sitio es compatible con dispositivos móviles, considerando las versiones más recientes de:

  • Safari iOS
  • Google Chrome para Android
  • Opera (versión 90 o superior)

Consideraciones de compatibilidad

  • El sitio utiliza tecnologías web modernas (HTML5, CSS3, JavaScript ES6), por lo que se recomienda mantener el navegador actualizado para una experiencia óptima.
  • La compatibilidad con versiones antiguas de Internet Explorer no está garantizada, ya que este navegador ha sido descontinuado por Microsoft.
  • Las pruebas de compatibilidad se realizan regularmente para asegurar que el sitio funcione correctamente en los navegadores más utilizados por los usuarios.

Categorías

Diseño

Incluye lineamientos visuales, tipografías, colores y maquetas. Garantiza una identidad coherente en todo el sitio web.

Componentes

Reúne piezas reutilizables como botones, cards y módulos. Asegura consistencia y eficiencia en el desarrollo.

Contenido

Incluye textos, imágenes y recursos multimedia validados. Está estructurado para comunicar con claridad y enfoque institucional.

Documentación

Describe procesos, decisiones técnicas y manuales de uso. Es clave para la continuidad del proyecto y traspaso de conocimiento.