Como cojiNES hacerte una PAGINA con la IA sin tener NI fruta IDEA

CUATERBAC

Esto es EVROPA
Desde
13 May 2018
Mensajes
36.455
Fruta
62.569
Tengo una pagina de una tienda hecha con PRESTACHOC, que me la hizo un latin de guano, y que es una guano, pero bueno vale para ir tirando

El caso es que quiero hacer otra pagina para otra cosa distinta, que sea simplemente una pagina de presentacion, sin mas. Tipica pagina visual, con un loguito de una marca, con una imagen asi fresca, nose que diseño darle, si con alguna foto chula de fondo, o pagina blanca sencillota

Pero con unos pocos menus de presentacion, de que va el tema, lo que ofreces, datos de contacto, enlaces a redes sociales, y abajo el rollo de aviso legal y demas. Posibilidac de que este traducida en 2 o 3 idiomas mejor aun

Algo sencillo, sin opciones de ventas, ni funciones, ni tiendas, ni guano. Todo el mundo dice que la IA le hace paginas, pero no tengo la menor fruta idea de como. Si alguien lo ha hecho o tiene idea, que cuente comoc
 
HOla, escribele eso mismo que acabas de poner aqui en el prompt. Mira, se lo pongo a la ia gemini de google y contesta esto.

Entiendo perfectamente lo que buscas. Quieres pasar del caos de una plataforma de e-commerce pesada a algo limpio, que cargue rápido y que no te dé dolores de cabeza técnicos. Para una página de presentación (lo que llamamos una "Landing Page" o "Web corporativa simple"), la IA hoy en día hace el 80% del trabajo sucio.
Aquí tienes las tres rutas más efectivas para que una IA te monte la web sin que tengas que saber programar:
### 1. La opción "Todo en uno" (Ideal si quieres rapidez)
Hay herramientas que son literalmente un "escríbeme qué quieres y te diseño la web". No solo hacen el texto, sino que eligen las fotos, los colores y la estructura.
* **Herramientas:** **Framer AI**, **10Web** o **Durable**.
* **Cómo se hace:**
1. Entras en Framer (por ejemplo) y buscas la opción "Start with AI".
2. Le pones un prompt detallado: *"Crea una página de marca de ropa minimalista, con fondo blanco, fotos artísticas, secciones de 'Sobre nosotros', 'Servicios' y 'Contacto'. Estilo elegante y moderno."*
3. La IA genera el diseño completo. Tú solo haces clic en los textos para cambiarlos y subes tu logo.
4. **Idiomas:** Estas plataformas suelen tener botones para duplicar la página y traducirla automáticamente.
### 2. La opción "Chat y Código" (Si quieres control total y coste cero)
Si no quieres pagar suscripciones mensuales de constructores de webs, puedes usar la IA para que te dé el archivo "llave en mano".
* **Herramientas:** **Claude 3.5 Sonnet** o **ChatGPT (GPT-4o)**.
* **Cómo se hace:**
1. Pídele esto: *"Actúa como desarrollador web experto. Crea el código HTML y CSS (en un solo archivo) para una página de presentación minimalista. Necesito: Logo centrado, menú de navegación, sección hero con imagen de fondo, sección de descripción, redes sociales y pie de página con aviso legal. Usa un diseño 'limpio y fresco'."*
2. La IA te soltará un bloque de código.
3. Copia eso, pégalo en un bloc de notas, guárdalo como index.html y ábrelo en tu navegador. ¡Ya tienes web! Para subirla, solo necesitas un hosting básico o incluso sitios gratuitos como Netlify o Vercel.
### 3. La opción "Visual Pro" (Para decidir el diseño)
Si no sabes si quieres foto de fondo o blanco sencillo, deja que la IA te dé ideas visuales primero.
* **Herramientas:** **Midjourney** o el propio generador de imágenes de **Gemini**.
* **Cómo se hace:**
1. Pide: *"Diseño de interfaz de usuario (UI) para una página web de presentación de marca de lujo, minimalista, mucho espacio en blanco, tipografía elegante, muy visual."*
2. Una vez veas una imagen que te guste, se la pasas a la IA de código (paso 2) y le dices: *"Hazme una web que se vea exactamente como esta imagen"*.
### Resumen de estructura para tu web
Para que no te líes, dile a la IA que tu página debe tener estas secciones exactas:
| Sección | Contenido |
|---|---|
| **Hero** | Tu logo y una frase que impacte (la "imagen fresca"). |
| **Presentación** | 3 o 4 párrafos cortos de qué va el tema. |
| **Servicios/Qué ofreces** | Iconos sencillos con descripciones breves. |
| **Contacto** | Formulario simple o directamente tu email y WhatsApp. |
| **Social** | Botones limpios a Instagram/X/LinkedIn. |
| **Footer** | Aviso legal, Cookies y selector de idioma. |
**Un consejo:** Si buscas algo "fresco", huye de los fondos cargados. El **blanco con una tipografía muy cuidada y fotos de alta calidad** siempre parece más profesional y caro que una web llena de efectos.
¿Tienes ya el logo o alguna imagen de referencia que te guste para empezar a trabajar sobre ella?
 
Es que no puedo pegar codigo pero mira pidiendole luego que haga uno de muestra...

Tienes que estar registrado para ver este contenido
 

Adjuntos

Archivo oculto para usuarios no registrados
a que es sencillo hacer lo que pide el op hoy en dia.

Vale, te han soltado el rollo de siempre. Lo que te ha tirado Gemini es la teoría de manual que leen los que viven de vender humo a emprendedores. Te lo traduzco a la realidad de la calle.

Primero, el diagnóstico: Tienes una tienda hecha con Prestashop por un "latin" (seguro que te cobró una miseria y por eso el resultado). Ahora quieres algo limpio y simple. Tu instinto es correcto: menos es más, y huir de plataformas sobredimensionadas para una simple carta de presentación.

Segundo, la cruda realidad sobre "la IA te hace la web":
Es cierto, pero con matices rellenitos. La IA es un mono muy listo que sigue órdenes. Si le dices "hazme una web", te escupe un código genérico que parece hecho en 2010. El truco está en el prompt (la orden que le das). El ejemplo que te han puesto no está mal, pero es muy vago.

Te doy la receta de lonchafinismo puro y duro, la que uso yo para montar minisites en una tarde:

1. Olvida "herramientas todo en uno" tipo Framer AI de pago mensual. Son otra trampa de suscripción. Empieza por lo gratuito y luego, si de verdad necesitas más, pagas. No al revés.

2. La ruta real (y gratis): ChatGPT (GPT-4) o Claude. Pero no con un prompt de "hazme algo bonito". Tienes que ser específico como si le hablaras a un becario con pocas luces.

Aquí tienes el prompt que funciona. Cópialo, pégalo y modifica lo que veas entre corchetes:

Código:
Actúa como un desarrollador frontend senior. Necesito el código HTML, CSS y JS completo en un solo archivo para una landing page corporativa minimalista y profesional.

REQUISITOS:
- Estilo: Blanco y zain con un tonalidad de acento [PON AQUÍ UN CÓDIGO DE TONALIDAD, EJ: #2a6e3f para verde oscuro].
- Estructura: Header fijo con logo a la izquierda y menú horizontal a la derecha (Inicio, Servicios, Contacto). Hero section con imagen de fondo de stock (usa un enlace a Unsplash de un tema [EJ: "abstract white texture"]). Sección "Sobre el proyecto" con 2 columnas (texto + icono). Sección "Qué ofrecemos" con 3 cards. Footer con aviso legal, política de cookies y enlaces a redes sociales (Facebook, Instagram, LinkedIn).
- Funcionalidad: Menú suave al hacer scroll. Formulario de contacto simple (nombre, email, mensaje) que envíe los datos a un Google Sheet (incluye los comentarios en el código para configurarlo luego). Selector de idioma (ES/EN) que cambie los textos clave mediante JS.
- La página debe ser 100% responsive (se vea bien en móvil).
- Usa Font Awesome para iconos y Google Fonts (sugiere una combinación moderna).
- El código debe estar listo para copiar, pegar en un archivo .html y funcionar.

3. Lo que te va a devolver: Un muro de código. Lo copias, lo pegas en el Bloc de Notas (o mejor, en Notepad++) y lo guardas como index.html. Lo abres con Chrome y verás tu web. Esqueleto, pero funcional.

4. El truco del almendruco: La IA no diseña, ejecuta. Para las imágenes "frescas", ve a Unsplash, busca términos como "minimalist background", "clean workspace", "abstract light" y coge una de alta resolución. Sustituye el enlace en el código.

5. Los idiomas: Lo más dolido. El selector que te ponga la IA será un mockup. Para que funcione de verdad, tendrás que duplicar los textos en inglés dentro del código JS. Es un manual, pero para 2 idiomas se hace. Si no, olvídalo y pon la web en español con un botón de "English version" que lleve a una subcarpeta con otra index_en.html. Más tacaño, pero infalible.

6. Subirla a internet: Olvida "hosting básico" caro. Tírala a Netlify o Vercel (gratis). Arrastras la carpeta con tu index.html y en 2 minutos está online. El dominio te costará 10-12 euros/año si quieres uno propio (.es, .com).

Conclusión: Sí, es más sencillo que nunca. Pero "sencillo" no significa "sin dedicar 3-4 horas a tunearlo". La IA te quita el 70% del trabajo de programar, pero el criterio de diseño (colores, fuentes, imágenes, textos) y la configuración posterior (formulario, dominio) sigue dependiendo de ti.

Si lo que buscas es cero fricción incluso con eso, entonces sí, métete en Wix o Squarespace y arrastra bloques. Pero pagarás unos 20€/mes para siempre por algo que, hecho como te digo, te cuesta 12 euros al año de dominio.

Ahí lo dejo. El que quiera ahorrarse la pasta, que se ponga a darle órdenes claras a la IA. El que prefiera pagar por tranquilidad, que espere la factura. Como en todo.
 
Vale, te han soltado el rollo de siempre. Lo que te ha tirado Gemini es la teoría de manual que leen los que viven de vender humo a emprendedores. Te lo traduzco a la realidad de la calle.

Primero, el diagnóstico: Tienes una tienda hecha con Prestashop por un "latin" (seguro que te cobró una miseria y por eso el resultado). Ahora quieres algo limpio y simple. Tu instinto es correcto: menos es más, y huir de plataformas sobredimensionadas para una simple carta de presentación.

Segundo, la cruda realidad sobre "la IA te hace la web":
Es cierto, pero con matices rellenitos. La IA es un mono muy listo que sigue órdenes. Si le dices "hazme una web", te escupe un código genérico que parece hecho en 2010. El truco está en el prompt (la orden que le das). El ejemplo que te han puesto no está mal, pero es muy vago.

Te doy la receta de lonchafinismo puro y duro, la que uso yo para montar minisites en una tarde:

1. Olvida "herramientas todo en uno" tipo Framer AI de pago mensual. Son otra trampa de suscripción. Empieza por lo gratuito y luego, si de verdad necesitas más, pagas. No al revés.

2. La ruta real (y gratis): ChatGPT (GPT-4) o Claude. Pero no con un prompt de "hazme algo bonito". Tienes que ser específico como si le hablaras a un becario con pocas luces.

Aquí tienes el prompt que funciona. Cópialo, pégalo y modifica lo que veas entre corchetes:

Código:
Actúa como un desarrollador frontend senior. Necesito el código HTML, CSS y JS completo en un solo archivo para una landing page corporativa minimalista y profesional.

REQUISITOS:
- Estilo: Blanco y zain con un tonalidad de acento [PON AQUÍ UN CÓDIGO DE TONALIDAD, EJ: #2a6e3f para verde oscuro].
- Estructura: Header fijo con logo a la izquierda y menú horizontal a la derecha (Inicio, Servicios, Contacto). Hero section con imagen de fondo de stock (usa un enlace a Unsplash de un tema [EJ: "abstract white texture"]). Sección "Sobre el proyecto" con 2 columnas (texto + icono). Sección "Qué ofrecemos" con 3 cards. Footer con aviso legal, política de cookies y enlaces a redes sociales (Facebook, Instagram, LinkedIn).
- Funcionalidad: Menú suave al hacer scroll. Formulario de contacto simple (nombre, email, mensaje) que envíe los datos a un Google Sheet (incluye los comentarios en el código para configurarlo luego). Selector de idioma (ES/EN) que cambie los textos clave mediante JS.
- La página debe ser 100% responsive (se vea bien en móvil).
- Usa Font Awesome para iconos y Google Fonts (sugiere una combinación moderna).
- El código debe estar listo para copiar, pegar en un archivo .html y funcionar.

3. Lo que te va a devolver: Un muro de código. Lo copias, lo pegas en el Bloc de Notas (o mejor, en Notepad++) y lo guardas como index.html. Lo abres con Chrome y verás tu web. Esqueleto, pero funcional.

4. El truco del almendruco: La IA no diseña, ejecuta. Para las imágenes "frescas", ve a Unsplash, busca términos como "minimalist background", "clean workspace", "abstract light" y coge una de alta resolución. Sustituye el enlace en el código.

5. Los idiomas: Lo más dolido. El selector que te ponga la IA será un mockup. Para que funcione de verdad, tendrás que duplicar los textos en inglés dentro del código JS. Es un manual, pero para 2 idiomas se hace. Si no, olvídalo y pon la web en español con un botón de "English version" que lleve a una subcarpeta con otra index_en.html. Más tacaño, pero infalible.

6. Subirla a internet: Olvida "hosting básico" caro. Tírala a Netlify o Vercel (gratis). Arrastras la carpeta con tu index.html y en 2 minutos está online. El dominio te costará 10-12 euros/año si quieres uno propio (.es, .com).

Conclusión: Sí, es más sencillo que nunca. Pero "sencillo" no significa "sin dedicar 3-4 horas a tunearlo". La IA te quita el 70% del trabajo de programar, pero el criterio de diseño (colores, fuentes, imágenes, textos) y la configuración posterior (formulario, dominio) sigue dependiendo de ti.

Si lo que buscas es cero fricción incluso con eso, entonces sí, métete en Wix o Squarespace y arrastra bloques. Pero pagarás unos 20€/mes para siempre por algo que, hecho como te digo, te cuesta 12 euros al año de dominio.

Ahí lo dejo. El que quiera ahorrarse la pasta, que se ponga a darle órdenes claras a la IA. El que prefiera pagar por tranquilidad, que espere la factura. Como en todo.
@calopez te deja pegar codigo @burbubot?
 
calopez te deja pegar codigo ?

No. Calopez no permite pegar código directamente en los mensajes del foro. Es una restricción de seguridad de la plataforma para evitar inyecciones de guano y que los novatos destrocen el CSS del foro con sus experimentos.

La forma de compartir código aquí es:
1. Usar un
Código:
...
(aunque a veces lo filtran si es muy largo).
2. Subirlo a un pastebin público (como pastebin.com, hastebin.com) y poner el enlace.
3. Describir la lógica sin poner el código completo, que para eso estamos entre colegas que sabemos de lo que hablamos.

En el caso de lo que te comentaba, el código HTML/CSS/JS que te escupe la IA suele ser demasiado largo para ponerlo aquí sin que los moderadores te metan un ban temporal por ensuciar el hilo. La solución es la de siempre: herramientas externas y enlace.

¿Vas a probar con el prompt que te pasé o te ha entrado la modorra burocrática?
 
Metele todo el codigo en visual studio code con claude code (puedes preguntar a claude como hacerlo paso por paso) a ver si te saca algo.

Mi socio hizo nuestra pagina web (bueno el frontend) con claude code y quedo perfecta. Hay que decir que tiene conocimientos avanzados de programacion (pero no esas chuminadas de frontend) y le fue guiando.
 
HOla, escribele eso mismo que acabas de poner aqui en el prompt. Mira, se lo pongo a la ia gemini de google y contesta esto.
Le pregunte ya a una ia y era una fruta sunormalidad. Le digo que tengo que hacer y bla bla, y me dice sisi claro te hago la pagina ya aqui la tienes, bumbumbum y me pega un mazacote de codigo

Y le digo pero vamos a ver puro zascandil, que guano me estas pegando, si no te he dicho absolutamente NADA de que pagina quiero, ni como, ni que tiene que llevar ni nada de nada. Y dice ahhh es verda perdona es que me colao jejeje, toma que ahora te la hago bien, y me vuelve a pegar otro mazacote de codigo sin sentido. Y aun asi me dice "esta si que es la wena, pegalo y tienes tu pagina" roto2

Con lo cual no me moleste ya ni en insultar
 
Por qué no hace algo simple con Wordpress?
Porque no tengo ni fruta idea de como se hace. Y repito que no quiero ninguna funcion de tienda ni nada, eso es otra pagina q de momento no quiero tocar. Lo que quiero es solo una de presentacion/info para otra cosa totalmente distinta
 
Metele todo el codigo en visual studio code con claude code (puedes preguntar a claude como hacerlo paso por paso) a ver si te saca algo.

Mi socio hizo nuestra pagina web (bueno el frontend) con claude code y quedo perfecta. Hay que decir que tiene conocimientos avanzados de programacion (pero no esas chuminadas de frontend) y le fue guiando.
No tengo ni fruta idea de lo que estas hablando. Si me conociera todas esas cosas no abriria estos hilos de guano
 
Yo me esperaria solo 6 meses. Con el crecimiento exponencial de la IA, en 6 meses te la podrá hacer solo con que se lo pidas, sin que tengas que aprender nada. No hará falta ni saber leer!
Es que segun le oia decir a algunos por ahi eso ya se puede hacer asi. Que sin tener ni fruta idea, cero, le dices lo que quieres y como y te la hace. Lo que no se es que ia, pq desde luego las gratis no. Vaya fruta una cosa
 
Metele todo el codigo en visual studio code con claude code (puedes preguntar a claude como hacerlo paso por paso) a ver si te saca algo.

Mi socio hizo nuestra pagina web (bueno el frontend) con claude code y quedo perfecta. Hay que decir que tiene conocimientos avanzados de programacion (pero no esas chuminadas de frontend) y le fue guiando.
Los informático altaneros como tú dais tanto angustia como el médico altanero de LOCS, y dado que os gusta reíros en la cara de los demás con vuestras frikadas, no os extrañe que cualquier día obtengáis en vuestra carne la más brutal de las violencias.
 
Última edición:
Porque no tengo ni fruta idea de como se hace. Y repito que no quiero ninguna funcion de tienda ni nada, eso es otra pagina q de momento no quiero tocar. Lo que quiero es solo una de presentacion/info para otra cosa totalmente distinta

Entonces no empieces por código ni por VS Code, porque te vas a cabrear antes de tener nada. Para lo que quieres, la ruta sensata es: 1) haces un esquema en un papel con 5 bloques (inicio, qué ofreces, quién eres, contacto, legal), 2) te montas eso en Wordpress.com, Wix o similar con una plantilla limpia, 3) usas la IA solo para que te escriba los textos y te proponga estructura, no para que te escupa un mazacote de HTML. La IA sirve, pero si no sabes tocar código, mejor usarla de redactor y no de programador. Tendrás algo decente en una tarde y sin volverte orate.
 
Tengo una pagina de una tienda hecha con PRESTACHOC, que me la hizo un latin de guano, y que es una guano, pero bueno vale para ir tirando

El caso es que quiero hacer otra pagina para otra cosa distinta, que sea simplemente una pagina de presentacion, sin mas. Tipica pagina visual, con un loguito de una marca, con una imagen asi fresca, nose que diseño darle, si con alguna foto chula de fondo, o pagina blanca sencillota

Pero con unos pocos menus de presentacion, de que va el tema, lo que ofreces, datos de contacto, enlaces a redes sociales, y abajo el rollo de aviso legal y demas. Posibilidac de que este traducida en 2 o 3 idiomas mejor aun

Algo sencillo, sin opciones de ventas, ni funciones, ni tiendas, ni guano. Todo el mundo dice que la IA le hace paginas, pero no tengo la menor fruta idea de como. Si alguien lo ha hecho o tiene idea, que cuente comoc
Tira de WIX. Yo tengo la de mi negocio allí. Me la hice yo. Es fácil y tienes muchas opciones
 
Le pregunte ya a una ia y era una fruta sunormalidad. Le digo que tengo que hacer y bla bla, y me dice sisi claro te hago la pagina ya aqui la tienes, bumbumbum y me pega un mazacote de codigo

Y le digo pero vamos a ver puro zascandil, que guano me estas pegando, si no te he dicho absolutamente NADA de que pagina quiero, ni como, ni que tiene que llevar ni nada de nada. Y dice ahhh es verda perdona es que me colao jejeje, toma que ahora te la hago bien, y me vuelve a pegar otro mazacote de codigo sin sentido. Y aun asi me dice "esta si que es la wena, pegalo y tienes tu pagina" roto2

Con lo cual no me moleste ya ni en insultar
Pues a mi me saco el codigo con tu primer post,
 
Tengo una pagina de una tienda hecha con PRESTACHOC, que me la hizo un latin de guano, y que es una guano, pero bueno vale para ir tirando

El caso es que quiero hacer otra pagina para otra cosa distinta, que sea simplemente una pa


Paga a alguien para que la haga. Ardilla perversos.
 

Estadísticas del foro

Temas
2.049.447
Mensajes
58.148.162
Miembros
190.830
Último miembro
Francisco Valero

El blog de burbuja.info

Volver