transparencia
Como equipo, es menester poner en práctica lo recabado durante la investigación académica, por lo que, a través del portal de Laboratorio de IA Sociedad e Interdisciplina (LIASI) del Centro de Investigaciones Interdisciplinarias en Ciencias y Humanidades (CEIICH) de la UNAM, encontramos la Declaración cualitativa del uso ético de la IA. Este se refiere a la apertura de transparencia de uso de herramientas de IA como un espacio de crítica y reflexión sobre la utilización de dichas recientes creaciones tecnológicas; la intención es justificar los motivos, situaciones y razones por los cuales se usó la IA.
Nuestro trabajo es: El Uso de la Inteligencia Artificial en los medios de producción de contenido noticioso en México, en el caso de N+, El Universal, Animal Político y El Sol de México.
La IA fue utilizada con el objetivo de apoyar a realizar la producción de la página web, ya que, las miembros del equipo no son especialistas en informática ni en diseño de animación, sin embargo, poseen conocimientos básicos de programación HTML y CSS, al igual que los funcionamientos de dominios y programadores web, por otra parte, el diseño original fue creado por el equipo, pero requirió de detalles como volumen, profundidad y la animación de este. El equipo de investigación fue asesorado por Alfonso Herrera, quien se dedica a la realización de páginas web y la sugerencia de él fue apoyarnos en la herramienta IA, específicamente, Gemini Pro. También, fue utilizada para apoyar con las dimensiones tridimensionales y animación en video del logotipo de la productora Glitch Digital Media.
Por desconocimiento, se usó la IA para aclararnos dudas y generar propuestas estéticas, dando como resultado los códigos en HTML para su creación. Se le indicó a Gemini Pro mediante los prompts la realización de los HTML con indicaciones específicas y exactas de lo que previamente se había investigado, maquetado y consultado con el asesor para optimizar tiempo al igual que proponer estrategias que cumpliera el objetivo del reportaje: ser interactivo y atractivo visualmente para el usuario.
A continuación, se presenta un ejemplo de los prompts que se usaron para ambas cuestiones:
Prompt 1: Maquetación Inicial
"Con la información completa anterior, no omitas nada, escribe el código para insertar un HTML en un sitio web basado en WordPress con Elementor como constructor. Utiliza los siguientes colores: background: F5F5F5/Color Hex whitesmoke. Font: 0A0A0A/Color hex gray 4, los botones de CTA (call to action) los colores son los siguientes: 2AA39A/Dark cyan, 1F7F7A/Dark Slate Cyan, 6B6B6B/Dim Gray, 2D2D2D/Dark Charcoal. Todo el sitio, lleva las siguientes fuentes: Playfair Display es una fuente que será usada exclusivamente para títulos, subtítulos o pies de página con la intención de resaltar y diferenciar la redacción de texto. Lora será para el texto en general. En la sección de casos de estudio, dividelo por medio de cuatro tarjetas, contempla espacios o placeholders para colocar imágenes de referencia en cada sección. Al inicio del sitio coloca también un placeholder para colocar un vídeo, todo optimízalo para que sea una experiencia de usuario adaptable a diferentes pantallas. Contempla las mejores prácticas y estrategias para diseño responsivo y experiencia de usuario."
Generación de estructura web
Prompt 2: Animación de Logo
"Animación de 5 segundos con esta imagen en formato horizontal para un video de youtube"
Soporte multimedia
Prompt 3: Integración de CSS
"Hola. Del código anterior quiero que integres los elementos de CSS en uno solo de HTML. Quiero que tengas presente que alojamos nuestra página web en el dominio de Hostinger. El acceso que tenemos es a wordpress con elementor gratuito. Al ser la versión gratuita, no podemos integrar únicamente los códigos CSS personalizados, por lo que quiero que me ofrezcas la alternativa de ponerlo todo en un HTML o en su defecto, dame instrucciones específicas para poder integrar todo el diseño de forma optimizada. No quiero que se pierda el diseño al pasar el código a elementor."
Optimización técnica
Prompt 4: Scrollytelling y Alineación
"Con la información completa anterior, no omitas nada, escribe el codigo para insertar un HTML en un sitio web basado en WordPress con Elementor como constructor. Utiliza los siguientes colores: background: F5F5F5/Color Hex whitesmoke. Font: 0A0A0A/Color hex gray 4, los botones de CTA (call to action) los colores son los siguientes: 2AA39A/Dark cyan, 1F7F7A/Dark Slate Cyan, 6B6B6B/Dim Gray, 2D2D2D/Dark Charcoal. Todo el sitio, lleva las siguientes fuentes: Playfair Display es una fuente que será usada exclusivamente para títulos, subtítulos o pies de página con la intención de resaltar y diferenciar la redacción de texto. Lora será para el texto en general. En la sección de casos de estudio, dividelo por medio de cuatro tarjetas, contempla espacios o placeholders para colocar imágenes de referencia en cada sección. Al inicio del sitio coloca también un placeholder para colocar un vídeo, todo optimízalo para que sea una experiencia de usuario adaptable a diferentes pantallas. Contempla las mejores prácticas y estrategias para diseño responsivo y experiencia de usuario. Necesito que busques la manera dentro del codigo de emparejar las imagenes con el texto y no se vean desnivelada. Tambien me gustaria que agregues animaciones de scrolytelling."
Interactividad visual
Con el apoyo de la IA, el equipo logró culminar con éxito el reportaje en tiempo oportuno y la calidad esperada. Su integración en la página web estuvo supervisada bajo el asesor, al igual que las integrantes del proyecto, haciendo diversos cambios y estilos que se adecuaran a Glitch Digital Media. Reconocemos su aporte durante su elaboración, sin embargo, las indicaciones no son suficientes, requiere de la validación humana, así como el conocimiento e indagación previa para lograr el objetivo planteado.