Edición y publicación de tu landing

El recorrido

En la clase 3 le pediste a la IA tu landing. Este taller sigue desde ahí, en dos videos: primero la corregís sin perderte en el chat, después la subís a internet gratis y te queda un enlace que cualquiera puede abrir.

Lo que tenés que tener a mano

• La carpeta de tu landing, con el index.html y las imágenes adentro. La armaste en la clase 3.
• Google Chrome, porque The Growing Editor es una extensión de Chrome.
• Una IA de chat: ChatGPT, Gemini o Claude. Cualquiera sirve.
• Un correo o tu cuenta de Google para crear la cuenta gratis en Tiiny Host o en Netlify.

Video 1 · Corregir la landing con The Growing Editor

Cómo instalar The Growing Editor, abrir tu landing, corregir lo chico a mano y marcar lo grande para que la IA lo resuelva sin tocar lo que ya está bien.

Instalar la extensión

The Growing Editor es una extensión de Google Chrome. Se instala una sola vez y queda en la barra del navegador.

1. Abrí la página de la extensión
   Entrá a The Growing Editor en Chrome Web Store y tocá Agregar a Chrome. Chrome te pide confirmar: elegí Añadir extensión.
2. Fijala en la barra
   Tocá el ícono de la pieza de rompecabezas, arriba a la derecha. Buscá The Growing Editor en la lista y tocá el alfiler para que quede siempre visible.
3. Abrí el editor
   Hacé clic en el ícono de la extensión y elegí Abrir The Growing Editor. Se abre en una pestaña propia, con un ejemplo cargado.

Instalar The Growing Editor ↗

Abrir tu landing en el editor

El primer paso es ver tu página dentro del editor. Tenés dos caminos: pegar el código o importar el archivo.

1. Borrá el ejemplo
   En el paso 1 del editor, «Pegá tu código HTML», tocá Borrar código.
2. Pegá o importá tu página
   Pegar del portapapeles si copiaste el código de la IA, o Importar archivo para elegir el index.html de tu carpeta. Después tocá Renderizar.
3. Mirala entera
   Ocultar pasos esconde el panel de la izquierda y te deja la página a pantalla completa.

Local o en internet: cómo darte cuenta

Si hacés doble clic en tu index.html, se abre en el navegador. Mirá la barra de direcciones: si empieza con una letra de disco, como C:/ o F:/, la página está en tu computadora. Solo la ves vos. Todavía no está en internet.

La edición rápida

The Growing Editor no reescribe tu página: te ayuda a juntar lo que hay que cambiar para que lo haga la IA. Para los cambios chicos, igual, tenés la edición rápida.

1. Activá Editar rápido
   Está en la barra de arriba. Después tocá cualquier texto, botón o imagen de la página.
2. Cambiá lo que necesites
   Se abre un panel con el texto, el enlace, el color, el tamaño y la alineación de ese elemento. En un botón ves a dónde lleva: por ejemplo, a tu WhatsApp.
3. Aplicá el cambio
   Tocá Aplicar cambio y lo ves al instante en la página.

Usalo para lo puntual: una palabra mal escrita, el número de WhatsApp, el color de un botón. Para mover bloques, reacomodar imágenes o sumar secciones, marcá el cambio y pedíselo a la IA.

Marcar los cambios para la IA

Para los cambios grandes, marcás cada cosa sobre la página misma. Así la IA sabe exactamente qué elemento tocar y qué dejar como está.

1. Activá Marcar cambios
   Está en la barra de arriba. Desde ahí, cada clic en la página selecciona un elemento.
2. Seleccioná y escribí el pedido
   Tocá el bloque, el texto o la imagen y escribí qué hay que cambiar. Por ejemplo: «la foto sale muy angosta y el texto queda muy abajo; acomodá los elementos». Elegí la prioridad y tocá Guardar marca.
3. Seguí marcando
   Podés marcar todo lo que veas: una imagen fuera de lugar, «agregá íconos a las tres cajas», el texto de un botón.
4. Marcá también en el celular
   Cambiá la vista a celular y marcá lo que se ve mal ahí, por ejemplo «centrá el texto del botón en celular».
5. Pedí un cambio general
   Si es para toda la página, aclaralo en el pedido: «este cambio es general: agregá en el medio de la página un panel sobre…».

El pedido a la IA

Cuando terminaste de marcar, el editor arma el pedido completo para la IA: las reglas, cada cambio con el elemento exacto y el código entero de tu página.

1. Copiá el pedido completo
   Abrí el paso 4, «Pedile la corrección», y tocá Copiar pedido completo. Dice Gemini, pero sirve para cualquier IA.
2. Pegalo en tu IA
   Abrí ChatGPT, Gemini o Claude y pegá el pedido. Es un texto largo, porque lleva adentro todo el código de la página. Envialo así como está.
3. Descargá el HTML nuevo
   La IA te devuelve el index.html corregido. Descargalo y guardalo en tu carpeta, en el lugar del anterior, con el nombre index.html.
4. Abrilo y revisalo
   Hacé doble clic y mirá la página. Si algo quedó mal, volvé a marcarlo y repetí el pedido.

Si usás la IA con acceso a tus archivos, como Claude o ChatGPT en la computadora, el cambio se hace directo sobre tu index.html. En el chat del navegador te devuelve el archivo para descargar. Las dos formas sirven igual.

Las demás herramientas

Además de editar y marcar, el editor tiene herramientas para revisar la página y no perder versiones.

Video 2 · Subir la landing gratis

Cómo subir tu landing gratis a dos plataformas, Tiiny Host y Netlify, y quedarte con un enlace público para compartir.

La carpeta y el ZIP

Las dos plataformas reciben tu página en un archivo comprimido, un ZIP, que lleva adentro el HTML y las imágenes juntos.

mi-landing/
├── index.html
└── img/
    ├── foto-1.jpg
    └── foto-2.jpg

1. Dejá solo la versión final
   En la carpeta, quedate con el index.html bueno y las imágenes. Sacá las versiones viejas.
2. Revisá el nombre del archivo principal
   Tiene que llamarse index.html. Es el que la plataforma muestra cuando alguien abre tu enlace.
3. Comprimí la carpeta
   Clic derecho sobre la carpeta → Enviar a → Carpeta comprimida (en zip). Si tenés 7-Zip o WinRAR, también sirve. Te queda un archivo .zip al lado de la carpeta.

Publicar en Tiiny Host

Tiiny Host es la más directa: creás la cuenta, soltás el ZIP y en segundos tenés el enlace.

1. Elegí el plan gratis
   En tiiny.host vas a ver los planes pagos primero. Buscá la opción gratis: con ella alcanza para esta práctica.
2. Creá la cuenta
   Con tu cuenta de Google o con correo y contraseña. Te pide nombre y cómo los conociste.
3. Subí el ZIP
   En el panel, Upload file → soltá el ZIP → publicá.
4. Copiá tu enlace
   Te muestra «Success!» con tu enlace, del estilo nombre.tiiny.site. Ya está en internet.
5. Probalo en incógnito
   Abrí el enlace en una ventana de incógnito: así lo ves como cualquier persona que llega, sin tu sesión iniciada.

Ver el ejemplo en Tiiny Host ↗

Publicar en Netlify

Netlify pide unos pasos más al crear la cuenta, y a cambio te deja elegir el nombre del enlace.

1. Creá la cuenta
   En netlify.com → Log in, con Google o con correo. Respondé la encuesta: experiencia «principiante», proyecto «Marketing site».
2. Salteá el agente de IA
   Netlify te ofrece armar un sitio con IA. Ya tenés tu página: salteá ese paso.
3. Subí el ZIP
   En Upload your project files, soltá el ZIP de tu carpeta.
4. Si te pide renombrar, aceptá
   Si tu archivo principal no se llama index.html, Netlify te ofrece Rename and deploy: renombrarlo y publicar. Aceptalo, o la página da «Page not found».
5. Elegí el nombre del enlace
   Netlify le pone un nombre al azar. En Domain tocá Edit y escribí el tuyo: queda tu-nombre.netlify.app.
6. Hacelo público
   Tocá Make public para que cualquiera pueda abrirlo. Después copiá el enlace y probalo en incógnito.

El plan gratis y el dominio

El plan Free de Netlify trae un cupo de créditos por mes que alcanza de sobra para una landing. Para sacar la marca de Netlify hay que pasar a un plan pago. Desde el proyecto también se puede comprar o conectar un dominio propio: la página no cambia, cambia la dirección.

Ver el ejemplo en Netlify ↗

Tiiny Host o Netlify

Las dos sirven. Elegí una y usala: no hace falta tener la página en las dos.

Si querés comparar con otras opciones gratis (Vercel, Cloudflare Pages, GitHub Pages), están en la tabla de la clase 5. Los planes gratis cambian: revisá las condiciones antes de lanzar algo grande.

La prueba final

Antes de compartir el enlace, revisá esto. Es la misma prueba que hace Gabriel en el video.

Esta lista es para tu revisión en esta pantalla; no envía nada.

Cuando quieras corregir algo

Volvé a empezar el círculo: marcás el cambio en The Growing Editor, la IA te devuelve el HTML, lo reemplazás en tu carpeta y subís la carpeta de nuevo al mismo proyecto. Así tu enlace no cambia y lo que ya compartiste sigue funcionando.