Ejercicio 12 de mayo

🧠 Ejercicio:

Experimentación con IA aplicada al diseño web

Fecha de realización en clase: Lunes 12 de mayo

Fecha límite de entrega: Sábado 17 de mayo

Esta semana realizaremos una actividad práctica que tiene como objetivo explorar el uso de herramientas de inteligencia artificial en el desarrollo web, específicamente en la generación de código para mailings.

🧪 ¿Qué haremos?

• Durante la clase, crearás una cuenta gratuita en la plataforma Claude AI.
• Usarás esta herramienta para solicitarle que te ayude a generar el código HTML de un mailing que promocione tu trabajo como:
  • Diseñador gráfico
  • Diseñador multimedia
  • Ilustrador
  • Artista visual

  (elige el perfil que mejor te represente)

• Personaliza tu código con tu información profesional e imágenes que hayas subido previamente al servidor de WordPress, en el espacio que ya fue asignado en clases anteriores.

📤 Entrega:

Debes entregar el archivo HTML del mailing (nombre: Claude_apellido_nombre.html) en el siguiente vínculo de OneDrive antes del sábado 16 de mayo (23:59 horas):

👉 Vínculo OneDrive grupo 1

👉 Vínculo OneDrive grupo 2

Introducción

Revisa los videos de introducción y realiza en equipo de tres personas la actividad que designe el profesor en la sesión de clase.

Estimados alumnos,

La primera actividad consiste en diseñar una interfaz para una empresa utilizando el software Photoshop.

Instrucciones:

1. Tutorial previo: Antes de comenzar, cada alumno deberá completar el tutorial Diseño de interfaz con Photoshop.
2. Trabajo en equipo: Posteriormente, trabajarán en equipos de cuatro personas.

Cada integrante será responsable de diseñar el interior de una de las cuatro páginas del sitio web de una empresa que venda diversos tipos de productos. La elección de la empresa es libre, siempre y cuando cuente con una variedad suficiente para desarrollar cuatro páginas.

 Estructura del sitio:

• Página 1: Página de inicio (home), donde se mostrará información general de la empresa y una selección de productos destacados.
• Páginas 2, 3 y 4: Cada una presentará en detalle un producto específico de la empresa.

 Ejemplo:

Si un equipo elige la empresa Volkswagen, el diseño podría organizarse así:

• Página 1: Inicio – Información general de Volkswagen y sus modelos principales.
• Página 2: Volkswagen Tiguan – Características y detalles del modelo.
• Página 3: Volkswagen Jetta – Información específica de este automóvil.
• Página 4: Volkswagen Polo – Descripción y atributos destacados.

Es fundamental que todas las páginas mantengan exactamente la misma estructura que se presenta en el tutorial Diseño de interfaz con Photoshop.

Revisión y entrega:

Durante la sesión del 24 de febrero, se asignará tiempo para revisar los avances con cada equipo, comentar detalles del diseño y realizar los ajustes necesarios. Posteriormente, se integrará el proyecto en FIGMA para la creación del prototipo final.

Si tienen dudas, pueden consultarme en cualquier momento.

 ¡Éxito con la actividad!

Video con introducción a diseño de interfaz

Video con explicación de sección 2 y footer.

La siguiente etapa de la parte práctica de la materia será la entrega de un prototipo de un sitio web (el de la marca que escogieron y se hicieron bocetos).  El prototipado lo realizarás por medio de Figma.

Deberás ver los videos sobre la realización del prototipo.

Al trabajar con FIGMA deberás generar una cuenta para tu equipo (un password y usuario y todos entran con esas credenciales). También deberás de generar un proyecto el cual deberá asignarse el nombre de tu equipo.

Para que el profesor pueda revisar tu trabajo, deberás invitarlo a participar en el proyecto de FIGMA, agregándolo con el siguiente correo:

 wordpress@plastik.com.mx

Recuerda que he solicitado la página de inicio y tres interiores (productos o categorías de productos).

Finalmente generarás una quinta página llamada créditos con los integrantes del equipo para que el docente pueda asignar la calificación. Deberás de colocar en el footer un botón que diga: Créditos y dirigir a la página correspondiente (usa la base de diseño de tu sitio, pero solo colocaras los nombres de los integrantes, es decir dejarás la base de diseño realizada anteriormente y en el primer bloque de contenido colocas los nombres de los integrantes. En esa sección podrás eliminar los bloques que no uses).

NOTA: quizá en algún video se menciona inVision, anteriormente se usaba para fines de prototipado. Actualizando la información del curso, usaremos FIGMA.

Video preliminar:

Optimización de imágenes por medio de Photoshop.

Video principal:

Cración de un prototipo por medio de Figma.

Instrucciones de ejercicio:

En este tutorial contarás con los siguientes elementos o recursos:

1) ZIP: recursos de imágenes y textos para realizar la el mailing.

2) Vínculo a sitio de SUBLIME para descargar editor HTML

3) Video 1: realización de estructura HTML

4) Video 2: edición de estilos del mailing

Video: primera parte

Revisa el video para prepararte para el Quiz que presentarás en clase y para el cual el profesor te dará indicaciones puntuales.

WordPress se puede instalar de diversas maneras. Cada proveedor tiene su forma de hacerlo. El video de te muestra como hacerlo con Hostinger.

Clase del 31 de marzo

Después de ver los videos de esta sección, contesta las siguientes preguntas

1. ¿Cuánto cuesta en la actualidad un dominio?
2. ¿Cuesta lo mismo un domino .com que un .mx?
3. ¿Qué necesito para poder instalar WordPress para poder diseñar mi sitio web?
4. ¿Menciona tres proveedores de hospedaje y has una tabla comparativa de doble entrada con al menos cinco elementos a comparar?
5. ¿Qué es el cPanel?
6. ¿Qué es PHP y cuál es su relación con MySQL?
7. ¿Qué es un tema de WordPress?
8. ¿Qué es DIVI y que necesito para instalarlo?

Con toda la información consultada, realiza la cotización (costo anual) para un cliente de los aspectos técnicos que se mencionan para poder tener listo un espacio en servidor y comenzar a trabajar con WordPress y Divi. (menciona a los proveedores que seleccionaste y coloca los URL a los costos que encontraste).

Sube tus respuestas y resultados al siguiente por medio de un PDF (portada con los integrantes del equipo):

Fecha límite 31 de marzo.

Grupo 1-Respuestas sobre WordPress

Grupo 2- Respuesta sobre WordPress

Actividad: se realiza de forma individual

Sitio Web Biográfico tipo Onepage con Enfoque de Portafolio Profesional (Usando Divi en WordPress)

Objetivo: Crear una página web personal de tipo Onepage utilizando el constructor visual DIVI, que funcione como una carta de presentación profesional. Este sitio debe combinar una narrativa biográfica con elementos visuales de portafolio.

Instrucciones:

Tu sitio debe incluir las siguientes secciones, claramente diferenciadas dentro de la misma página:

Introducción visual (Hero section: es la primera sección visible al cargar una página web, diseñada para captar la atención del visitante. Suele incluir una imagen destacada, un mensaje clave y una llamada a la acción).

Usa un módulo de Texto + Imagen o Encabezado con fondo para incluir tu nombre, una foto profesional y una frase breve que resuma tu identidad como diseñador/a.

Sobre mí: Usa un módulo de texto para escribir una biografía de 350–500 palabras. Incluye tus intereses, habilidades y enfoque profesional.

Portafolio: Incluye al menos cinco proyectos en un módulo de Galería de imágenes. Por cada uno:

• Imagen representativa
• Breve descripción del proyecto (puede ir como texto alternativo o en un módulo de texto complementario)

Habilidades destacadas: Usa un módulo adicional opcional que complemente tu identidad profesional.

Contacto: botones de enlaces a redes sociales profesionales (LinkedIn, Instagram, etc.).

Requisitos técnicos:

El sitio debe estar realizado completamente con el constructor DIVI en WordPress.

El diseño debe estar contenido en una sola página.

Deben utilizarse al menos los siguientes módulos básicos de Divi:

• Módulo de texto
• Módulo de imagen
• Módulo de galería
• Módulo de botones

Por el momento el sitio debe estar diseñado para el tamaño de escritorio. No se trabajara el diseño responsivo.

Cuida el uso de tipografías, colores y márgenes. Esto es un ejercicio de diseño, no un collage digital. Por lo cual, es importante que recuerdes los principios de diseño que se han estado revisando hasta este momento en el curso.

Entrega:

Genera la página dentro del espacio que se asignó para tu grupo.

En la página llamada  inicio, deberás de entrar a editar un botón para colocar tu nombre y primer apellido:

• Colocarás el URL de tu OnePage
• El botón debe estar configurado para que abra otra pestaña del navegador al darle click.

Fecha límite: viernes 11 de abril a las 23:59

Criterios de evaluación:

Contenido bien organizado y profesional (25%)

Fotografía personal con calidad profesional (10%)

Uso adecuado de módulos y herramientas de Divi (15%)

Diseño visual atractivo y coherente (20%)

Navegación fluida y experiencia de usuario (15%)

Creatividad y diferenciación personal (15%)

En clase se darán los vínculos de acceso al WordPress para cada equipo.

Video sobre Affinity Photo y GIMP

Alternativa on-line de Photoshop

Material complementario:

El video te muestra como realizar el logotipo con el nombre de tu pintor por medio de DaFonts y Photoshop.

Video con algunos recursos útiles para editar tu video sobre el pintor.

Nota importante: Esta sección contiene información básica, útil únicamente si no tienes experiencia previa en edición de video. Como la mayoría ya cuenta con conocimientos elementales, se recomienda trabajar con un software profesional como Premiere.

Nota importante: Esta sección contiene información básica, útil únicamente si no tienes experiencia previa en edición de video. Como la mayoría ya cuenta con conocimientos elementales, se recomienda trabajar con un software profesional como Premiere.

Cómo grabar video desde Windows 10.

https://www.youtube.com/watch?v=mVJsm_000c0

Editar video con FOTOS en Windows 10:

https://www.youtube.com/watch?v=CUuWg6nroQU&t=111s

Como generar el PDF que deberás de realizar como soporte de entrega de ejercicio del segundo parcial.