Programa · 24 horas · 3 días
Día 1
Fundamentos
Hoy van a entender cómo funciona la IA, y a construir dos cosas.
Ver
Cómo se entrena un modelo, y van a entrenar uno.
¿Qué es la inteligencia artificial?
A0 Verdadero o falso
A0 La IA es la simulación de las tareas de la inteligencia humana.
Simulación. No es que piense: es que se le parece lo suficiente.
A0 Las neuronas de
Terminator
y perritos bonitos
A1 
VS
A1 ??? PERRO
A1 ??? PERRO
A1 No se le explica. Se le enseña con ejemplos. Muchos.
PERROS
NO PERROS
A1 
A1 
A1 
A1 
EXAMEN
A1 A1 
A1 Le enseñaron a pasar un examen. No a decir la verdad.
Por eso revisas lo que te da.
A1 Ya vieron cómo se entrena un modelo. Ahora entrenen ése mismo.
Con las mismas fotos que acaban de ver. En el navegador, sin instalar nada y sin crear cuenta. Veinte minutos.
¿Cuántos ejemplos creen que necesitan para que funcione?
A1c Bajen el paquete de fotos
1-entrenar/
Cuatro perros y seis no-perros. Pocos a propósito
2-probar/
Diez que nunca vio: seis perros distintos, tres animales lejanos, y un lobo
3-agregar-y-reentrenar/
Dos lobos más, para cuando descubran que hacen falta
A1c Así se ve. Son tres paneles y ya.
Arrastran las carpetas. Ustedes solo etiquetan
Un botón, treinta segundos. El ciclo del examen, comprimido
Le suben una foto y les dice qué cree, y con cuánta seguridad
A1c ¿Y con diez fotos basta? No: es que no empieza de cero.
Lo que ya venía sabiendo
Una red entrenada por Google con millones de fotos de mil cosas distintas.
Ya sabe ver bordes, texturas, pelo, orejas, patas.
Eso costó meses y mucho dinero. Ya está pagado.
Lo que ustedes le enseñan
Nada más a separar sus dos montones.
Usando lo que esa red ya ve.
Por eso tarda treinta segundos y no meses.
A1c Entrénenlo, y luego rómpanlo con el lobo
Parámetros de la tarea
- Dos clases con las carpetas de 1-entrenar/. Entrenen.
- Prueben los seis perros de 2-probar/. Ninguno los vio antes. ¿Con cuáles duda?
- Prueben el ave, el calamar y el pez. Fáciles… ¿o no tanto?
- Ahora lobo.jpg. ¿Qué dijo? ¿Con cuánta seguridad?
- Metan 3-agregar-y-reentrenar/ a «No perro», reentrenen y prueben otra vez.
A1c No les dijo «no sé». Les dijo «perro», y con mucha seguridad.
Ese número que les puso al lado no es la probabilidad de acertar. Es qué tan convencido está.
Y estar convencido no es lo mismo que tener razón. Nadie le enseñó a dudar: le enseñaron a elegir entre dos montones.
Así que siempre elige uno.
A1c Entender
Lo mismo, pero con palabras. Eso es ChatGPT.
Todo eso fue con fotos. Pero ustedes no le van a mandar fotos: le van a escribir.
Mismo proceso. Diferentes datos.
Clasificador de imágenes
Ve fotos.
Aprende a decir perro / no perro.
Alguien etiquetó cada foto a mano.
Modelo de lenguaje
Ve texto.
Aprende a decir cuál es la siguiente palabra.
Nadie etiquetó el texto.
A1a Nadie tuvo que etiquetar el texto. La respuesta correcta ya estaba ahí.
Para los perros, alguien tuvo que ver miles de fotos y escribir «perro» o «no perro» en cada una. Eso cuesta dinero y tiempo.
Para el texto no hace falta: la respuesta correcta es la palabra que sigue, y ya viene escrita.
Por eso se pudo entrenar con cantidades de texto que nadie habría podido etiquetar a mano.
A1a Cómo aprende, en tres fases
Fase 1 · Lee todo lo que encuentra
▊
A1a Y los patrones que encuentra no son todos del mismo tipo
Porcentajes de ejemplo, para ver la forma de la decisión
A1a Con eso solo tendrías un completador. Falta una segunda fase.
A1a LLM: Large Language Model. Modelo Grande de Lenguaje.
El teclado de su teléfono
1.4 millones
de parámetros
Un modelo de chat
175 mil millones
de parámetros
¿Qué tan grande es «grande»?
A1a En el fondo, un modelo hace una sola cosa.
Recibe información (texto, imágenes, audio, archivos) y predice qué sigue.
Todo lo demás son capas encima de eso.
A1a 
Nunca contó los dedos.
Nadie le enseñó que una mano tiene cinco. Vio millones de fotos y aprendió cómo se ve una mano: piel, uñas, dedos alargados saliendo de una palma.
Cinco no era una regla. Era una frecuencia.
A4 Un dedo de más se nota. Una cifra de más, no.
Alucinación: un dato falso, dicho con la misma seguridad que uno cierto.
No mintió, porque mentir es saber la verdad y decir otra cosa.
No consultó nada. Calculó qué texto era el más probable, y un dato inventado que suena bien es de lo más probable que hay.
A4 Los tres que les van a pasar a ustedes
A4 En consultoría, una alucinación no es un error gracioso: es un riesgo de credibilidad
FRAGMENTO GENERADO POR IA
«Según el Observatorio Nacional de Productividad Digital, el 68 % de las pymes mexicanas que adoptaron IA reportaron 31 % más productividad en el primer semestre.»
Suena perfecto. ¿Lo mandarían así?
A4 Encuentren los datos falsos
Consigna
Señalen qué no se sostiene, y digan cómo lo comprobarían en menos de dos minutos.
FRAGMENTO GENERADO POR IA
«Según el Observatorio Nacional de Productividad Digital, el 68 % de las pymes mexicanas que adoptaron IA reportaron 31 % más productividad en el primer semestre.»
A4 Los tres, y por dónde se cae cada uno
FRAGMENTO GENERADO POR IA
«Según el Observatorio Nacional de Productividad Digital, el 68 % de las pymes mexicanas que adoptaron IA reportaron 31 % más productividad en el primer semestre.»
el instituto
Búscalo por nombre. No existe, y con eso ya no hay nada más que revisar.
el 68 %
Sin estudio no hay muestra, ni año, ni quién preguntó. Un porcentaje sin eso no es un dato.
el 31 %
«Más productividad» medida ¿cómo? Nadie mide productividad de una pyme en un semestre.
A4 Tres cosas que sí funcionan
A4 Pedir
Su primer programa, y cómo pedirle bien.
Vocabulario mínimo
Ya saben qué es un modelo. Estas cuatro las van a usar el resto del programa.
Prompt
Lo que le escribes o le pides.
«Hazme un diagnóstico de este grupo»
Modelo
El programa entrenado que responde.
ChatGPT · Claude · Gemini
Contexto
Todo lo que tiene disponible para responderte.
Tu conversación · tus archivos · tus instrucciones
Herramienta
Lo que le conectas para que haga más que texto.
Buscar · leer archivos · escribir código
A3 En los próximos 15 minutos van a hacer su primer programa.
Sin instalar nada. Con la cuenta de Google que ya traen. Se llama Canvas, y está dentro de Gemini.
A5 Escriban un prompt de UNA línea y vean qué sale
Parámetros de la tarea
Por defecto: un quiz sobre su tema de especialidad. Misma dificultad que un juego, pero se lo llevan y lo usan el lunes.
Si prefieren jugar: un arcade simple de atrapar objetos.
A5 No salió a la primera. No fue culpa del modelo.
La mayoría de la frustración con IA no es del modelo. Es del prompt.
¿Qué le pidieron que en realidad nunca le dijeron?
B1 Cinco cosas que sí cambian el resultado
B1 ¿Y el rol? Sirve, pero no para lo que todos creen
Para lo que NO sirve
Para que acierte más.
Se probaron 162 roles distintos contra 2,410 preguntas, en cuatro familias de modelos.
Poner rol no mejoró la exactitud.
Para lo que SÍ sirve
Para el tono y el registro.
Escribir para un consejo directivo o para un taller no es lo mismo, y el rol mueve eso de una frase.
Es una palanca de estilo, no de verdad.
B1 Y tres cosas que ya no hace falta escribir
| Lo que dicen los cursos | Por qué ya no | Quién lo dice |
|---|---|---|
| «Piensa paso a paso» | Los modelos de razonamiento ya lo hacen por dentro. Pedirlo estorba | OpenAI, guía oficial |
| «Sé exhaustivo, no te dejes nada» | Hoy se pasan de largo solos. El trabajo es frenarlos, no empujarlos | Anthropic, guía oficial |
| Ser amable, ofrecer propina, amenazar | El efecto no se sostiene al medirlo en serio | Estudios de 2025 y 2026 |
B1 Reescriban su prompt del juego con los cinco
Parámetros de la tarea
Sobre el mismo juego o quiz de hace rato. Los cinco son obligatorios.
Objetivo qué tiene que lograr
Contexto qué necesita saber, y para qué
Ejemplos tres a cinco de cómo se ve bien
Formato cómo lo quieren de vuelta
Restricciones qué NO debe hacer
Corran el prompt nuevo y comparen con lo que tenían.
B1 Vibe coding no es «pedir y rezar»: es dirigir a la IA con un plan claro
¿Alguien ya vivió el caos de pedir y rezar con IA?
E1 Seis principios para dirigir a un agente
Ser preciso
Ambigüedad adentro, ambigüedad afuera
Una tarea a la vez
No cinco cosas en un prompt
Prompts específicos
«Arréglalo» no es una instrucción
Proyecto ordenado
Si tú no lo entiendes, él tampoco
Sesión fresca
No arrastres lo de ayer
Paciencia al depurar
El primero casi nunca es el bueno
E1 Pedirle que se autocritique mejora el resultado más que pedirle que regenere
Actúa como crítico experto en [X].
Evalúa esto contra [criterio].
Sé específico en lo que fallaría.
«Hazlo mejor» le pide adivinar qué está mal. Esto le dice contra qué medirse.
B2 Pídanle crítica a su propio prompt
Parámetros de la tarea
B2 Por dentro
Ahora sí: qué pasa entre que escriben y aparece la respuesta.
Saquen su teléfono. Escriban «Hola» y toquen la sugerencia del centro diez veces.
«Hola cómo estás bien y tú qué haces por acá…»
Su teléfono escribió una frase perfecta sin entender ni una palabra. Solo predijo la siguiente.
¿Qué les salió?
A1b No lee palabras. Lee pedazos que se llaman tokens.
«Camarón que se duerme» no se parte en palabras. Se parte en siete pedazos:
1 token
«perro» · «casa» · «inteligencia»
4 tokens
«electromovilidad» · «psicosocial»
A1b ¿Y por qué pedazos, y no palabras completas?
Antes
Palabra por palabra
Un diccionario cerrado. El del teclado de su teléfono tiene 10,000 palabras. Lo que no está en la lista, no existe.
«electromovilidad» → ???
«Cd. Juárez» → ???
«chilaquiles» → ???
Ahora
Por pedazos
Entre 100 y 200 mil pedazos, según el modelo, con los que se arma cualquier palabra, en cualquier idioma.
elect + rom + ov + ilidad ✓
Cd + . + Ju + árez ✓
ch + ila + qu + iles ✓
A1b Y lo único que hace es adivinar el siguiente
Más vale pájaro en mano que ____
Porcentajes de ejemplo, para ver la forma de la decisión
A1b Bajo el capó: ¿qué es realmente ChatGPT?
A1b Las instrucciones no son órdenes. Son el principio del texto que va a completar.
Por eso funcionan las instrucciones de un asistente, y por eso el problema que escriban esta tarde cambia lo que la IA construye con él.
A1b ¿Y cómo sabe que «taller» y «curso» se parecen?
Porque cada palabra tiene una ubicación. Las que se usan parecido quedan cerca.
distancia(«taller», «curso») = 0.12, muy cerca
distancia(«taller», «pizza») = 0.89, muy lejos
Cada palabra es una coordenada
«taller» = [ 0.82, -0.15, 0.43, … ]
«curso» = [ 0.79, -0.12, 0.51, … ]
«examen» = [ 0.31, 0.88, -0.05, … ]
«pizza» = [ -0.31, 0.67, -0.22, … ]
Y se pueden sumar y restar
Rey − Hombre + Mujer ≈ Reina
El parecido entre palabras es una operación, no una intuición
A1b Al leer una palabra, mira a las demás y les da un peso
Toquen cualquier palabra de la frase.
Pesos de ejemplo, para ver la forma del reparto
A1b Y ese peso cambia según la frase
Pesos de ejemplo, para ver la forma del reparto
A1b Solo puede ver una cantidad limitada de tokens a la vez.
Se llama ventana de contexto.
Por eso a media conversación parece que «se le olvidó» lo que le dijeron al principio. No se le olvidó: ya no lo está viendo.
A1b Cuánto cabe en esa ventana, y cómo ha crecido
| Cuándo | Modelo | Cuánto ve de un jalón | Más o menos |
|---|---|---|---|
| 2020 | GPT-3 | 4 mil tokens | unas 6 páginas |
| 2023 | GPT-4 | 128 mil tokens | unas 190 páginas |
| Hoy | Claude, Gemini, GPT-5.6 | 1 millón | unas 1,500 páginas |
Aun así se llena. Y cuando se llena, lo viejo deja de verse.
A1b Véanlo ustedes: cuántos tokens gasta su propio texto
Peguen cualquier párrafo suyo en platform.openai.com/tokenizer y vean cómo lo parte.
Prueben con una palabra técnica de su sector. Casi siempre gasta más tokens de los que esperan.
A1b Todo lo que vimos fue con texto. El mismo truco funciona con imagen, con audio y con video.
Clasificar y generar no son lo mismo
Lo que ustedes entrenaron
Ve una foto y elige entre dos montones: perro o no perro.
No produce nada. Solo señala.
Se le llama modelo de clasificación.
Lo que usan todos los días
Recibe una instrucción y produce algo que no existía.
Un texto, una imagen, una voz, un video, código.
A esta familia se le llama IA generativa.
A2a El modelo y la herramienta no son la misma cosa.
Uno es el motor. La otra es el coche. Y hay marcas que le pusieron el mismo nombre a los dos.
A2a Dos capas: la que abren y la que la mueve
Lo que ustedes abren
↓ por dentro le llama a
Lo que la mueve por dentro
A2a Modelo + Herramientas = Agente
Mañana van a construir con un agente. No es magia: es este ciclo, repitiéndose.
A2 Y dentro de cada marca hay tres gamas. Escoger mal se paga.
| Para qué | Cómo se llaman hoy | Cuesta |
|---|---|---|
| Rutina clasificar, resumir, extraer | Haiku 4.5 · GPT-5.6 Luna · Gemini 3.1 Flash-Lite | $0.20 a $1 |
| Trabajo diario escribir, analizar, responder | Sonnet 5 · GPT-5.6 Terra · Gemini 3.8 Flash | $0.75 a $2 |
| Lo difícil razonar largo, programar | Opus 5 · GPT-6 Astra · Gemini 3.1 Pro | $2 a $10 |
Dólares por millón de tokens de entrada. Precios oficiales de septiembre de 2026.
A2 Y todos tienen una fecha después de la cual no saben nada
Sin buscar en internet
«¿Cuántos centros de capacitación certificados hay hoy en Chihuahua?»
Inventa un número, dice que no sabe, o te da uno de hace dos años sin avisarte cuál de las tres cosas hizo.
Con búsqueda web
La misma pregunta
Busca, y te da algo verificable y con fecha. Que puedes abrir y comprobar.
A2 Qué sí puede y qué no, en corto
Sí puede
Resumir documentos largos
Escribir y explicar código
Analizar datos que le pegues
Traducir
Razonar paso a paso
Proponer un diagnóstico a partir de señales
No puede
Garantizar que lo que dice es cierto
Hacer cuentas exactas sin calculadora
Acordarse de la conversación de ayer
Dar la misma respuesta dos veces
Saber lo que pasó después de su fecha de corte
Decirte cuándo se está equivocando
A2 Definir
Un problema real, escrito de forma que se pueda dibujar.
Ya saben pedirle bien. Ahora hay que decidir QUÉ construir, y que sea un problema real.
Una idea vaga nunca se construye. Un problema bien definido sí.
Idea vaga
Problema definido
¿Cuántos proyectos han visto morir por quedarse en idea vaga?
D1 El Need Card cabe en una frase con tres huecos
Cuando [situación], quiero [lograr qué], para poder [resultado].
D1 El caso de egresados, escrito así
Coordinadora de vinculación
Cuando pasan seis meses de la graduación, quiero saber quién sigue en el sector, para poder invitarlos a los talleres que sí les tocan.
D1 Su Need Card: la frase y la señal
Parámetros de la tarea
D1 Su Need Card todavía es una hipótesis.
El temario pide evidencia de que el problema es real. Una opinión no es evidencia.
D2 Pregunten por el pasado, no por intenciones futuras
Produce cortesía
¿Te parece buena idea?
¿Usarías algo así?
¿Esta función suena útil?
Produce datos
¿Cuándo te pasó por última vez?
¿Qué hiciste para resolverlo?
¿Cuánto tiempo o dinero te costó?
Lo de la izquierda se siente como validación de mercado. Es un montón de consuelos difíciles de usar para decidir.
D2 Tres reglas, y ninguna habla de su idea
D2 Tres preguntas que no se pueden contestar con un cumplido
«Cuéntame la última vez que te pasó.»
«¿Qué has intentado para resolverlo?»
«¿Y por qué te tomas la molestia de hacerlo así?»
D2 Y tres respuestas que suenan a sí y no lo son
Cumplidos
«Qué buena idea», «me encanta». Se sienten como validación y no sirven para decidir nada
Humo
Generalidades («siempre», «normalmente»), promesas («lo usaría») y condicionales («podría»)
Peticiones
«Deberían agregarle X». Es su solución, no su problema
La frase más peligrosa que van a oír es «sin duda yo lo usaría».
D2 Reescriban tres preguntas de validación
Consigna
¿A quién pueden llamar hoy mismo, aunque sean cinco minutos?
D2 Ya tienen un problema real y escrito. Después de comer lo van a ver corriendo en una pantalla.
Construir
El problema que definieron en la mañana deja de ser papel: hoy corre.
Ya saben pedir bien. Falta un lugar donde eso se vea.
¿Alguna vez vieron código correr en el mismo lugar donde se escribió?
F1 Un Artifact es lo que Gemini escribe, y lo que corre, en la misma pantalla
F1 Tres lenguajes, tres trabajos distintos
HTML
La estructura. Paredes y cuartos: qué hay en la pantalla
CSS
El estilo. Pintura y muebles: cómo se ve
JS
El comportamiento. Puertas que abren, luces que prenden: qué hace cuando lo tocan
F1 Un Artifact no es una app completa: no guarda datos entre visitas, no tiene servidor propio.
Sí es el lugar perfecto para probar una idea en minutos, antes de construirla de verdad con herramientas como estas.
F1 ¿Para qué pedirle a Gemini en vez de escribirlo a mano?
Escribir a mano
Pedirle a Gemini
F1 El lenguaje no es solo una herramienta para transmitir información, sino el medio mismo a través del cual construimos la realidad, estructuramos el pensamiento y nos relacionamos con el mundo.
Por eso describir en español simple no es un atajo pobre frente a escribir código: es usar la misma capacidad con la que ya piensan y se comunican, para construir algo que corre.
F1 Cuatro palabras que van a usar en los próximos 90 minutos
Artifact
El resultado que corre en el panel, aparte de la conversación
Iterar
Pedir el siguiente cambio sobre lo que ya existe, no empezar de cero
Librería
Código de alguien más que se agrega para hacer algo que solos no harían fácil
Sandbox
La caja aislada donde corre el Artifact, sin acceso al resto de su computadora
F1c Laboratorio: toquen el código y miren qué cambia
Parámetros de la tarea
F1b Lo que se rompió, y por qué
Faltó cerrar una etiqueta
HTML se confunde y deja de mostrar lo que sigue
El id no coincidía
JS busca "btn" pero el botón se llama distinto: no truena, simplemente no hace nada
Faltó un símbolo
Una coma, una llave, un punto y coma. El navegador es literal, no adivina
F1b Para seguir cada lenguaje por su cuenta
No hace falta ahora. Es el mapa para cuando quieran profundizar en uno solo.
HTML
Etiqueta, atributo, elemento: las piezas con las que se arma la estructura
CSS
Selector, propiedad, clase: cómo se elige qué pintar y con qué regla
JS
Variable, función, evento: dónde vive el dato y qué lo dispara
F1b Ya tocaron código escrito por ustedes. Ahora uno que lo escribe Gemini.
Un contador de vueltas. Nueve líneas, las tres partes a la vista
HTML — qué hay:
<button>Sumar</button> <p>0</p>
CSS — cómo se ve:
button { background: morado; color: blanco; }
JS — qué hace:
al hacer clic, sumar uno al número
Corriendo de verdad, aquí mismo
F2 ¿Cuál Gemini? Elegir dónde antes de arrancar
Gemini normal
gemini.google.com. Ahí está la opción de Artifacts, es la que usamos hoy
Gemini en Workspace
Si su cuenta es del trabajo o la escuela, Artifacts puede estar apagado por su administrador
Otra IA
Claude, Lovable y v0 hacen lo mismo con otro nombre. Están en la lista de bonus al final del bloque
F2 Cómo se abre uno
F2 Generen su primer Artifact
Parámetros de la tarea
Abran Gemini y descríbanle, en español, el problema que definieron en la mañana. No pidan el sistema completo: pidan un piloto, una sola pantalla que se pueda ver.
F2 Muéstrenle su Artifact a la mesa de al lado
Consigna
¿Alguien tiene algo que a ti no se te hubiera ocurrido pedir?
F2 Cómo pedir un cambio bien
F3 Pídanle un cambio, sin tocar código
Consigna
¿Qué cambió y qué se quedó igual?
F3 Ya vieron que pedir un cambio no rompe el resto. Ahora un reto más largo: crecer un proyecto en tres vueltas.
Un proyecto aparte, tres vueltas, cada una más ambiciosa
El problema de cada equipo es distinto, así que su piloto no sirve para comparar. Este es un proyecto chico y compartido, solo para practicar el patrón de pedir en tres vueltas. Su proyecto real sigue guardado, no se toca ahora.
Elijan ahora: ¿portafolio personal, o menú de un restaurante?
F5 Base: la página sola, sin nada extra
Consigna
Cópienlo tal cual, cambien solo lo que va en corchetes.
¿Qué hizo Gemini sin que se lo pidieran?
F5 · vuelta 1 Con estilo y movimiento
Consigna
¿Se rompió algo de la vuelta 1?
F5 · vuelta 2 Con una librería de verdad (esta vuelta es opcional)
Consigna
¿Qué tan lejos llegaron con tres prompts?
F5 · vuelta 3 Muestren su Artifact, en 30 segundos por equipo
Consigna
¿Cuál vuelta les costó más, y cuál les sorprendió más rápido?
F5 Cierre del bloque
Hoy le dieron a su problema un lugar donde correr
Tips extra: de dónde se roba buen diseño
Esto no es para hoy. Es para cuando su Artifact ya funcione y quieran que además se vea bien.
F4 · bonus Tips extra: con qué seguir cuando un Artifact se queda chico
Un Artifact no guarda datos ni tiene servidor propio. Estas son las puertas de salida cuando ya lo necesitan.
Alternativas a Artifacts
Mismo concepto (piden y ven correr), otro proveedor
IDE en el navegador
Cuando un Artifact se queda chico y quieren más control
F4 · bonus Tres palabras antes de pedir colores
Matiz
El color en sí: azul, rojo, verde. En Gemini, «un azul»
Saturación
Qué tan intenso o apagado. «Un azul grisáceo» baja la saturación
Luminosidad
Qué tan claro u oscuro. «Un azul casi negro» baja la luminosidad
F4b · bonus Cuatro formas de armar una paleta, sin improvisar
Monocromática
Un solo matiz, distintas luminosidades. La más segura, casi nunca se ve mal
Análoga
Matices vecinos en la rueda de color. Se siente armoniosa, poco contraste
Complementaria
Dos matices opuestos. Alto contraste, útil para un botón que debe resaltar
Triádica
Tres matices a la misma distancia. Vivo, arriesgado si se usan los tres al 100 %
F4b · bonus Por qué todo lo que genera una IA se ve parecido
Prompt genérico
Prompt específico
F4b · bonus Que se vea bien en la compu y en el celular
Responsive
La misma página se acomoda sola según el tamaño de pantalla, sin hacer una versión aparte
Cómo se rompe
Texto que se sale, botones encimados, columnas que ya no caben en una pantalla angosta
Cómo se pide
«Que se vea bien también en celular» es suficiente. Gemini ya sabe qué técnica usar
F4b · bonus Un prompt maestro de diseño, para pegar al final
F4b · bonus Antes de publicar: rendimiento, SEO y accesibilidad
Un Artifact no se indexa ni se publica, así que nada de esto aplica hoy. Es el hábito que sí importa en Día 2, cuando lo que construyan salga a una URL real.
Rendimiento
- Imágenes comprimidas, no las originales de la cámara
- Sin librerías de más: cada una pesa y tarda en cargar
SEO
- Título y descripción propios de cada página, no genéricos
- Un solo encabezado principal por página
Accesibilidad
- Contraste de texto que se lea incluso con sol en la pantalla
- Botones grandes: fáciles de tocar con el dedo, no solo con mouse
F4c · bonus Máximo dos tipografías, con jerarquía clara
Todo del mismo tamaño
Portafolio de Ana
Diseño y desarrollo web
Ver proyectos recientes
Con jerarquía
Portafolio de Ana
Diseño y desarrollo web
Ver proyectos recientes
"Usa una tipografía [seria / juguetona], máximo dos familias, con jerarquía clara entre título y texto"
F4d · bonus El espacio en blanco no es espacio vacío
Sin aire
Con aire
"Dale más espacio entre secciones, que respire más"
F4d · bonus Cuatro palabras que explican por qué algo se ve ordenado
Contraste
Lo importante se ve distinto a lo demás, no se confunde con el fondo
Repetición
El mismo estilo de tarjeta, botón o ícono se repite en toda la página
Alineación
Todo cuelga de la misma línea invisible, nada queda flotando suelto
Proximidad
Lo que está relacionado se agrupa cerca, lo que no, se separa
F4d · bonus El mejor crítico de diseño ya está ahí adentro
F4d · bonus Un botón que no reacciona se siente muerto
Pasen el mouse sobre el botón de la izquierda, en vivo
"Que los botones tengan un efecto al pasar el mouse, y que los deshabilitados se noten apagados"
F4d · bonus Un prompt de diseño, para pegar en cada ticket
Es el mismo prompt para los tres tickets del backlog que viene. Se pega tal cual, después de describir qué hace el ticket.
F5a Su backlog: el primer paso de su proyecto real
Parámetros de la tarea
- Pídanle a la IA quince a veinte tickets desde su Need Card.
- Táchenle todos los que no pasen la pregunta: ¿qué se vería?
- Escojan el esqueleto que camina y pónganlo de primero.
- Ordenen los dos siguientes. Con esos tres arrancan mañana.
F5b Fin del Día 1
Hoy construyeron. Mañana eso habla con un servidor
- Entendieron cómo aprende un modelo, y entrenaron uno con sus propias manos
- Aprendieron a pedir bien: los 5 elementos de un prompt, sin alucinar
- Definieron un problema real, con Need Card y Mom Test
- Convirtieron ese problema en un piloto que corre, con Gemini Artifacts
- Lo hicieron crecer en tres vueltas, sin tocar código a mano
- Armaron el backlog de su proyecto real, con sus tres primeros tickets
Mañana · Día 2
Interactividad con servidor
Lo que hoy corrió en una pestaña, mañana guarda datos de verdad: un formulario, una base de datos, y una vista que se llena sola con lo que ustedes mandaron.