saiff2026winter

## Información general Es la página de inicio oficial del evento «さっぽろすごいAIまつり», previsto para el 15 de febrero de 2026. Se trata de un sitio estático compuesto únicamente por HTML, CSS y JavaScript, sin dependencias de herramientas de construcción ni frameworks. ## Características de diseño - Animación de partículas inspirada en llamas, degradados y una paleta de colores dedicada - Tema oscuro moderno - Diseño responsive compatible con móviles, tabletas y escritorio - Interacciones como animaciones de desplazamiento y efectos parallax La paleta de colores está definida mediante variables CSS en `:root`. Es posible ajustar la combinación de colores modificando valores como `--flame-red`, `--flame-orange`, `--flame-yellow`, `--flame-bright`, `--dark-bg`, `--dark-surface` y `--dark-elevated`. ## Estructura del contenido Se presentan tres programas. 1. AIビジネスコンテスト — presentación de ideas de negocio por parte de la ciudadanía 2. AI芸術祭 — espectáculo en vivo de arte, música y vídeo creado junto con IA 3. AI展示・体験会 — exposición de obras de IA y experiencias en los stands El sitio de e-learning gratuito «すごいAI道場», que ofrece los conocimientos básicos para apoyar estos programas, aparece como una sección independiente y se enlaza externamente en dojo.sugoiai.org. También hay espacios para un enlace de financiación colectiva y un enlace de invitación a Discord. ## Estructura de archivos - `index.html` — página de inicio principal - `style.css` — hoja de estilos - `script.js` — animaciones e interacciones - `requirements.md` — definición de requisitos - `todo.md` — historial de trabajo y lista de comprobación - `README.md` — descripción ## Uso Abra `index.html` directamente en el navegador o visualícelo mediante un servidor local, como `python3 -m http.server 8000` de Python 3 o `npx http-server`. Al ser un sitio estático, puede desplegarse tal cual en Netlify (arrastrar y soltar), Vercel (integración con repositorio Git), GitHub Pages, Firebase Hosting, etc. ## Personalización - Edite el texto en `index.html` - Ajuste los colores y el espaciado mediante las variables CSS de `style.css` - Ajuste la temporización de las animaciones de desplazamiento, la intensidad del efecto parallax y los efectos hover en `script.js` Actualmente las imágenes son marcadores de posición. Se explica el procedimiento para colocar imágenes en la carpeta `images/` y sustituir los elementos `.image-placeholder` por etiquetas `img`. ## Implementación orientada al rendimiento Se incluyen un diseño con CSS Grid y Flexbox, animaciones diferidas mediante Intersection Observer, procesamiento del desplazamiento con requestAnimationFrame y aceleración por hardware mediante CSS transforms. ## Lista de comprobación previa al despliegue Se indican tareas como cambiar el enlace de invitación a Discord por una URL real, sustituir los marcadores de posición de las imágenes, configurar la imagen OGP y el favicon, configurar la analítica web, comprobar el funcionamiento de todos los enlaces y verificar la visualización en distintos anchos de pantalla. ## Información de organización La organización corre a cargo de 札幌すごいAI会. Como contacto se incluyen la cuenta de X (Twitter) @ykishimotoy y la etiqueta #さっぽろすごいAIまつり.