Ejemplos y ejercicios de la Guía 1

Seleccione uno de los siguientes enlaces para visitar los ejemplos, ejercicios y resultados del proyecto de inteligencia artificial.

Ejemplo 1

Ver ejemplo 1

Ejemplo 2

Ver ejemplo 2

Países de Centroamérica

Ver países de Centroamérica

Mi programa favorito

Página sobre The Mentalist, sus personajes principales y los datos generales de la serie.

Ver mi programa favorito

Proyecto de inteligencia artificial

1. Selección y diagnóstico

Sitio salvadoreño seleccionado: Casa Rivas S.A. de C.V.

URL original: https://casarivas.com/load_productos_catalog

Captura de la página de inicio original de Casa Rivas

Resultados publicados

Resultado del prompt genérico:

Abrir Casa Rivas — resultado genérico

Resultado del prompt elaborado:

Abrir Casa Rivas — resultado elaborado

Video explicativo

Ver video explicativo en YouTube
Elementos encontrados en el resultado generado por la IA (Se que la guía dice 2 columnas, pero me pareció más bonito organizarlo así en 3.
Análisis de correspondencia
Elemento Función que cumple Clasificación
Etiquetas svg y path Las usó en conjunto para generar el logo de Casa Rivas a forma de vectores con trazos manuales sin usar el original. Nuevo
Etiquetas HTML 5 A pesar de no haberlo especificado explícitamente, sí usó la semántica requerida por HTML 5 que hemos visto en clase. No recurrió al uso excesivo de div's. Conocido
Atributos aria Dotan a lectores de discapacidad de mejor accesibilidad para usuarios con visión reducida. Nuevo

Guía 2 — Selectores CSS avanzados y modelo de caja

Ejercicio 1 — Altamar

Ver ejercicio 1

Ejercicio 2 — Tablero de damas

Ver ejercicio 2

Ejercicio complementario — Biografía

Ver biografía

Reto IA

Ver vídeo del reto

Resultado final:

Abrir Casa Rivas — resultado final. Ahora elaborado con Codex y potenciado por un DESIGN.md

Guía 3 — Posicionamiento, visualización y maquetación de sitios web

Ejemplo 1 — Maravillas del Mundo

Ver ejemplo 1

Ejemplo 2 — Compañía Miau

Ver ejemplo 2

Ejercicio complementario — Posicionamiento y z-index

Resultado 1

Resultado 2

Reto IA — CSS Grid

Abrir Casa Rivas — versión con CSS Grid

Guía 5 — Introducción a JavaScript

Ejemplos 1 al 4 y ejercicio 1

Ver ejemplos

Ejercicio 2 — Pedidos de cafetería

Ver ejercicio 2