para diseño web creativo: diseño de increíbles sitios web creativos con tecnología de Claude IA

1. INTRODUCCIÓN: Cuando intentas diseñar tu propio sitio web, normalmente, comienzas con muchos de estos garabatos, bocetos, ideas, conceptos para terminar con un sitio web roto que no funciona Bueno, ya no. En esta clase actual, te voy a mostrar cómo aprovechar el poder de la inteligencia artificial, específicamente Claude para diseñar tu sitio web, específicamente el desarrollo web front-end tal manera que no hay que pensar en codificación, estilismo, gráficos, animaciones, que suelen ser tediosos de pensar Consumen mucho tiempo, mucho esfuerzo, y se rompen con bastante facilidad. Te voy a enseñar cómo evitar todo el proceso. No se necesita ningún código, tal que simplemente te enfoques en una cosa solo como profesional creativo, la conceptualización, la ideación, tus Y te voy a mostrar cómo crear y diseñar el sitio web, desarrollo front-end web específicamente para darle vida a tu idea Ya sea que estemos hablando de navegación, estilismo, gráficos, animación. Conceptos. Estás construyendo tu cartera. Estás construyendo tu propia marca personal. Las aplicaciones son bastante infinitas. Te voy a mostrar las tácticas, cómo utilizarlas de la mejor manera posible para integrar a Claude como parte de tus esfuerzos de desarrollo web front-end, tal manera que al final de la clase, tendrás un sitio web bellamente diseñado para mostrar tu trabajo, para mostrar tu viaje creativo y para mostrar tus proyectos 2. Tu proyecto: El proyecto gira en torno a aplicar las lecciones clave enseñadas para crear y construir tu propio sitio web de varias páginas Después de lo cual vas a compartir tus resultados con la comunidad para recibir comentarios. 3. Establecer la base: Bienvenida de nuevo. Ahora, lo que tenemos que hacer es simplemente navegar a Cloud y vas a iniciar sesión, y aterrizarás en la ventana principal de la interfaz, la ventana de aviso de aquí. Ahora, como vas a estar tratando con Cloud como parte de la aplicación actual para el desarrollo web, específicamente el desarrollo web front-end, necesitamos establecer algunas bases y tácticas importantes para asegurar el éxito de nuestra aplicación. En primer lugar, vamos a estar utilizando el siguiente modelo básico, Sonic five, que está disponible para cualquier usuario que utilice la nube, ya sea la versión gratuita, la versión pro, usted es capaz de utilizarlo con bastante facilidad. Si estás en un nivel diferente o te gustaría ir por una versión diferente, depende completamente de ti. Puedes ir por Opus five, Fable o Fab five. Teniendo en cuenta, a medida que avanzas con el modelo, vas a estar utilizando más créditos, lo cual es muy, muy importante a tener en cuenta, especialmente para tareas complejas ya que estamos diseñando un sitio web, estamos editando un sitio web, vamos con códigos con pasar por diseños, personalizaciones, edición de diversos elementos Entonces es un proceso de ida y vuelta, y podría ser bastante exigente desde el modelo de IA. Por lo que consumirá muchos créditos si estás en un modelo muy avanzado. Para modelos básicos o modelos de menor complejidad, podrías hacer el trabajo sin el sobreconsumo de los créditos Entonces, si estás en la versión gratuita y vas por los modelos avanzados, podrías quedarte sin créditos bastante rápido. Entonces tienes que esperar un tiempo de reinicio, y luego podrías continuar. Si optas por el modelo actual o un modelo inferior, podríamos ir por, por ejemplo, Sonic five, que es lo que vamos a usar, que es el más eficiente para las tareas cotidianas. Hace el trabajo, sin embargo, no está gravando del todo el consumo real de crédito De esa manera, podrás hacer más ediciones, más comentarios, más iteraciones con la personalización del sitio web De esa manera estás ahorrando tiempo, ahorrando esfuerzo y obteniendo resultados sólidos. Así que tenlo en mente. Entonces es un concepto muy importante que necesitamos entender. Como estamos tratando con el diseño de un sitio web, específicamente el desarrollo web front-end, vamos a tuitearlo proyecto, algo que hacemos de manera recurrente, especialmente para el contexto profesional. No estás simplemente creando un diseño una vez, y eso es todo. Necesitas editar realmente el sitio web. Es necesario afinar la salida. Debes asegurarte de tener la capacidad de volver a visitar siempre tu trabajo anterior y retomar donde lo hayas dejado. Y por eso tenemos que abordarlo como un proyecto. Esto es muy crítico y muy importante. Lo que vamos a hacer ahora mismo, vamos a hacer clic en O plus, lo que significa agregar un nuevo proyecto, y vamos a crear un nuevo proyecto para nuestra aplicación práctica. Llamémoslo front y desarrollo web. Bien. Por lo que somos capaces utilizar esto en base a nuestra preferencia. Puedes llamarlo como quieras llamarlo, depende completamente de ti, ¿verdad? ¿Qué estamos tratando de lograr? Como parte del alcance de la aplicación, somos capaces de describir el proyecto, metas, tema, etcétera Podrías editar esto o volveremos a visitarlo más adelante. Depende completamente de ti. Lo que vamos a hacer es simplemente dar un tema básico. Vamos a diseñar el front-end de un sitio web para cualquier proyecto de negocio, aplicación creativa, etcétera. Tan simple como eso. Este es el objetivo principal. Este es el tema principal. Podrías ser específico. No obstante, en este estado actual, no es tan necesario. Entonces, una vez que creas el proyecto, que es un paso fundamental fundamental que debemos cubrir, porque esto asegurará que en una etapa posterior, vez que tengas tu sitio web real y te gustaría editar cosas, afinar las cosas, puedas volver a visitar esto y recoger cierto segmento del sitio web, editarlo con un par de clics en comparación con tener que recorrer todo proceso todo de nuevo. Entonces, una vez que aterrizas en la interfaz del producto, tienes la interfaz de chat por aquí. Tienes la opción de agregar archivos, tomar una captura de pantalla, habilidades, conectores, complementos, y la lista continúa. Echa un vistazo al lado derecho por aquí. Tenemos instrucciones. Tenemos memoria, luego obtuvimos el contexto y programamos tareas recurrentes. Estos son muy potentes si vas a llevar tu aplicación de desarrollo web front-end a un nivel completamente nuevo. Déjame mostrarte En primer lugar, vamos a agregar instrucciones. Vamos a decirle a Claude lo que estamos tratando de hacer. Esto proporcionará a Claude instrucciones e información relevantes para los chats basados en este proyecto específico. Así que ponte específico por aquí. ¿Qué estás tratando de lograr, verdad? ¿Estás intentando diseñar un sitio web para tu empresa, para tu negocio? Proyecta en el que estás trabajando o simplemente tratando de trabajar en tus habilidades de desarrollo web front-end. Siéntase libre de agregar tantos detalles como sea posible. No obstante, para que las cosas sean bastante simples, voy a mostrarte el nivel básico de instrucciones que podrías simplemente inyectar y podrías obtener resultados realmente poderosos. Entonces, ¿cuáles son las instrucciones básicas? Voy a decirle a Cloud, vamos a trabajar en el desarrollo web. O digamos un negocio hipotético, vamos a estar trabajando en una cafetería y una panadería, Vamos a estar trabajando en una acumulación para el sitio web, el desarrollo front-end para una aplicación hipotética específica, y podrías inyectar y agregar tu propia aplicación única según Entonces vamos a trabajar en el desarrollo web para un café slash Bakery Para crear un diseño de sitio web de aspecto profesional, tal manera que no dude en incluir cualquier restricción, cualquier preferencia. El diseño es profesional y editable, lo cual es muy importante porque nos gustaría editarlo fácilmente Personalizable. Los códigos relevantes para el sitio web una vez creados, incluidos HTML, CSS o cualquier otro código relevante , se extraen y modifican fácilmente para su posterior edición y uso. Entonces, lo que estoy tratando de hacer por aquí, estoy sentando las bases en base a mi preferencia. Como mencioné, como parte de la demostración, vamos a estar trabajando en un proyecto hipotético, que básicamente es un negocio Es un café y una panadería, y vamos a estar trabajando en el diseño de desarrollo web front-end para c. Siéntase libre de utilizarlo para su propia aplicación única, su propio negocio, su propio proyecto, su propia idea. Sigue la misma estructura. Entonces este prompt o las instrucciones básicas o el prompt para las instrucciones, le estamos diciendo a Cloud que necesitamos que el diseño sea bastante profesional y editable Algo no es estático, algo con lo que somos capaces de arreglar y trabajar. Fácilmente personalizable para futuras referencias, si me gustaría personalizar el sitio web, vuelvo al proyecto. Soy capaz de personalizarlo fácilmente. Los códigos relevantes para el sitio web, una vez creados, incluidos HTML, CSS o cualquier código relevante, se extraen y modifican fácilmente para su posterior edición y uso. Esto es muy poderoso porque esto le dirá a Cloud cuando estés diseñando algo, asegúrate de que el código que estás construyendo sea algo que pueda utilizar, recoger y personalizar. Si estás moviendo esto, por ejemplo, a tu propio hosting, por ejemplo, si tienes un uso más avanzado, estás tratando de elegir un determinado código del código que has creado, como un fragmento para el archivo HTML o el archivo CSS, puedes simplemente saltar a tu proyecto, obtener ese código y colocarlo directamente en tu sitio web si tienes alguno a tu propio hosting, por ejemplo, si tienes un uso más avanzado, estás tratando de elegir un determinado código del código que has creado, como un fragmento para el archivo HTML o el archivo CSS, puedes simplemente saltar a tu proyecto, obtener ese código y colocarlo directamente en tu sitio web si tienes alguno tipo de habilidades avanzadas de codificación o edición. Entonces esto te da la flexibilidad futura que necesitarás en una etapa posterior. Después la memoria para el proyecto real. Teniendo en cuenta, la función de memoria, debe habilitarla una vez que vaya a la configuración. Entonces, una vez que navegue a la configuración, asegúrese de que habilite memoria o deshabilite la memoria según sus preferencias. Sin embargo, si habilitas la memoria, comenzará a enseñar Cloud en función de los chats de aquí. Entonces, si tenemos un chat, irá a la lista, pero otro chat en la lista también, esto será parte de la memoria del proyecto. Esto es muy crítico para futuras aplicaciones de desarrollo. Y este es uno de mis casos de uso o uso reales favoritos para el contexto del proyecto, la aplicación del proyecto, que es el contexto. Entonces podríamos agregar archivos PDF, documentos, otra referencia de texto a este proyecto real Estoy más por aquí. Tengo la opción de subir los archivos, agregar ciertos contextos o incluso conectarlo a códigos externos si tienes la configuración del código como parte de Github, por ejemplo. No obstante, para nuestra aplicación, como mencioné, no vamos a estar codificando nada. Te estoy mostrando cómo pasar por el desarrollo web front-end completamente desde cero a través de Cloud sin escribir una sola línea ahora que dicho, hemos establecido la base requerida para proceder con nuestra aplicación de desarrollo web. Tenemos la configuración de nuestro proyecto, tenemos nuestras instrucciones en su lugar, memoria se activa en función de una preferencia. Ahora para el contexto, voy a mostrarles lo que vamos a utilizar para ayudarnos a ponernos al día y a correr. Sin embargo, en esta etapa actual, simplemente estamos estableciendo una base para una exitosa aplicación de desarrollo web front-end. medida que avanzas en el proyecto, mantenlo en el fondo de tu mente, tienes la opción de crear una tarea de programación donde seas capaz de, por ejemplo, nombrarla, dar instrucciones, y si quieres, por ejemplo, Cloud para escanear automáticamente a través de un código específico, por ejemplo, para tu sitio web que estás agregando y luego darte algunos tipo de comentarios donde usted aprueba manualmente o Cloud aprueba automáticamente. Esto es algo un poco más avanzado para una etapa posterior una vez que hayas terminado con el proyecto real. Si estás agregando ciertos códigos o estás conectando Cloud a códigos externos a través del contexto o a través de los conectores, por ejemplo, agregas un conector, agregas un plugin. nube tiene la capacidad de acceder a herramientas externas que hayas conectado a ella. Entonces podrías programar tareas donde Cloud puede llevar a cabo acciones específicas, y automáticamente las aprueba o te las pasa para su aprobación manual. Esta es una táctica avanzada, ten en cuenta que está ahí. Si eres alguien que es un desarrollador web profesional, te gustaría que Cloud pasara por una serie de códigos de vez en cuando. Esta es una herramienta más avanzada que podrías usar para ayudarte a lograr esas tareas repetitivas de forma programada Ahora bien, dicho eso, ya estamos en esta etapa. Hemos establecido las bases para iniciar nuestra aplicación de desarrollo web front-end. 4. Cómo agregar inspiración en el diseño: Y bienvenidos de nuevo. Así que he establecido nuestro proyecto, y hemos establecido las bases para nuestra aplicación. Esta es la etapa en la que vamos a sumar inspiración. Me escuchaste bien. Como parte de su desarrollo web front-end y sin aplicación de código, vamos a obtener algo de inspiración Por ejemplo, ¿alguna vez has mirado un determinado sitio web o tu propio sitio web o cierto papel en el que has escrito tu diseño o algún esquema o captura de pantalla determinado que hayas obtenido con fines de inspiración como parte de tu diseño? Esta es la etapa en la que vamos a empezar a agregarlo a nuestro contacto. Ahora vamos a agregar un par de archivos como parte de nuestra demostración. Vamos a estar trabajando en el desarrollo web front-end para sitio web, para una cafetería y panadería Por ejemplo, esta es la etapa en la que se agregan los elementos de branding. Puedes agregar un logotipo. Podrías agregar paletas de colores si tienes una. Eres capaz de agregar los mensajes de marca. Puedes agregar una captura de pantalla de cierto diseño que has visto en algún lugar con fines de inspiración, o incluso hacer referencia a algunos sitios web que te parecieron bastante inspiradores para ayudarte a crear un diseño único para tu sitio web o imágenes o fotos que hayas capturado a través de tu cámara o algo que hayas escrito en una hoja de papel, literalmente El contexto que podrías agregar para ayudarte con la acumulación de tu sitio web son bastante infinitos Aquí hay un par de cosas que podrías agregar para ayudarte a crear el contexto para el sitio web. Podrías agregar el logo. Podrías agregar una imagen que hayas captado a través de tu cámara. Dirás que estás caminando por la calle. Encontraste una gran planta, árbol o flor. Te inspiras para agregar ese diseño a tu sitio web. Toma una imagen, podrías subirla al contexto. O podrías tomar una captura de pantalla, por ejemplo, para tu propio sitio web actual. Y luego agrégalo si estás intentando editar un sitio web existente, o incluso mejor. Por ejemplo, digamos que estás tomando una taza de café, y en una hoja de papel, dibujas un diseño de sitio web. Toma una imagen de eso y agrégalo por aquí, incluso en una servilleta. Incluso una URL, por ejemplo, para su propio sitio web que actualmente está utilizando que le gustaría modificar, podría agregarla así como una parte de un archivo PDF, agregar todos estos detalles o imágenes, capturas de pantalla. Te estoy dando todas estas ideas inspiradoras para ayudarte a ver que eres capaz de agregar muchos detalles para ayudarte a comenzar a funcionar Entonces, en esta etapa actual, el objetivo de esta conferencia actual es traigas tu inspiración, consigas tu logo, obtén tus imágenes, obtén tus capturas de pantalla, para tu sitio web, obtén tus capturas de pantalla, para el diseño en el que estás trabajando, obtener el documento real de Word, PowerPoint, PDF , El archivo, cualquier referencia que tengas, incluso la servilleta que eres en o el papel en el que has garabateado Siéntete libre de escanearlo y simplemente comienza a agregar todos estos elementos al contexto del proyecto porque esto ayudará a Claude a analizar cómo avanzar qua de manera fácil y efectiva Entonces, en esta etapa actual, comienza a agregar tus elementos de branding, tus logotipos, una captura de pantalla de tu sitio web actual si quieres editarlo, algunos elementos inspiradores que has recopilado, y estamos listos para sumergirnos en el desarrollo web front-end de nuestro sitio web 5. Creación de un sitio web de una sola página: Y bienvenidos de nuevo. Ahora, vamos a estar creando un sitio web de una página. Esto es muy importante para cualquier negocio, cualquier profesional creativo, cualquier profesional que trabaje, comercializador, profesional de ventas, y la lista continúa Por lo general, cuando intentas llegar a, por ejemplo, un producto lanza un nuevo almuerzo de negocios o un determinado producto que te gustaría exhibir o una determinada página de destino para cualquier evento que estés realizando, normalmente crearías un sitio web de una página, ¿verdad? Digamos, como parte de nuestra aplicación actual, tenemos el lanzamiento del negocio, que es una panadería y una cafetería, que hipotéticamente se llama tazas Se trata de un negocio hipotético simplemente con fines de demostración Todos estos detalles son simplemente hipotéticos para que veas cómo se pueden mapearlos fácilmente a tu propia situación única Por lo que vamos a crear un sitio web de una sola página una manera muy creativa para anunciar el lanzamiento del negocio. Entonces, ¿cómo vamos a estar creando un sitio web de una sola página? Esto puede funcionar para cualquier cosa, por cierto, para un almuerzo de producto, un almuerzo de negocios, ciertos detalles, una página de ventas, sea lo que sea, una página de detalles sobre un evento específico sobre su empresa, sea lo que sea. Está completamente arriba así que lo que vamos a hacer es que le voy a decir que Claude actúa como desarrollador web profesional específicamente. Desarrollo frontal y web en el que me vas a ayudar a crear un sitio web de una sola página, que incluye lo siguiente. Este es un prompt muy poderoso. Da contextos y requerimientos claros. El logo de los archivos del proyecto. Vea lo poderoso que es cuando agrega muchos archivos importantes al contexto, Claude es capaz de elegir todos estos detalles y mapearlos a nuestra aplicación, el logotipo de los archivos del proyecto, la paleta de colores de las diferentes imágenes, agregó un diseño elegante profesional. Y entonces vamos a decirle a Claude totalmente personalizable. Entonces voy a Tag Cloud por aquí, actuar como desarrollador web profesional, específicamente a partir de un desarrollo web en el que me vas a ayudar a crear un sitio web de una sola página. Esta es la etapa en la que vas a agregar tu propia aplicación única de un negocio, tu empresa, tu sitio web, donde sea que esté, algo que esté relacionado con tu propia aplicación donde estés aplicando estas tácticas para. Ayúdame a crear un sitio web de una sola página para mi nuevo negocio llamado tazas, que es una cafetería y una panadería, que incluye lo siguiente Entonces le voy a decir a Claude, hágame cualquier duda relevante en el camino. Entonces esta es una estructura pronta muy poderosa porque esto le dirá a Cloud actuar como un desarrollador web profesional, específicamente desarrollo web front-end en el que me vas a ayudar a crear un sitio web de una sola página para mi nuevo negocio He agregado el tema, los contactos, derecho, incluyendo el logotipo de los archivos del proyecto, la paleta de colores de las diferentes imágenes agregadas, diseño elegante profesional, un sitio totalmente personalizable. Y código. Y voy a añadir, qué estoy tratando de obtener de este sitio web real, o simplemente podría mantenerlo como está. Entonces, si quieres simplemente ir por un sitio web de una página, que es suficiente para tu negocio, genial. Si tienes una tarea específica para ello, por ejemplo, anunciar el almuerzo del negocio, podrías agregar el requisito específico. Entonces voy a mantenerlo específico. Sitio web de una sola página para mi nuevo negocio llamado UGS, que es una cafetería y panadería El sitio de una sola página es para anunciar el próximo día y fecha de apertura. Aquí vamos. Voy a mantener la fecha y el día en blanco porque Claude definitivamente me preguntará por ellos si me gustaría cambiar la fecha del almuerzo o la apertura o fechas específicas completamente a mi altura. ¿Qué tal si vamos por día y hora? Para agregarle más variación. Entonces, como pueden ver por aquí, he empezado con un prompt genérico. Luego he personalizado el prompt como parte de prácticas adecuadas de ingeniería rápida para incluir algún contexto, tema, algunas referencias, algunas aplicaciones específicas para que veas exactamente cómo lo haría tener un sitio web genérico de una sola página a un sitio web específico de una sola página. De esa manera, podrás inspirarte y maniobrar tu camino a través de tu propia aplicación única Aquí vamos. Entonces Claude ahora mismo está pasando por el proyecto. Como podemos ver por aquí, como parte del proyecto, hemos iniciado un nuevo chat. Esto es muy poderoso porque esto nos permitirá pasar por el proceso en múltiples marcos de tiempo sin la necesidad de seguir reiniciando las cosas una y otra vez Entonces, ¿qué campos de dirección visual son adecuados para Mug? ¿Por qué Claude me hizo esta pregunta? Porque es parte de mi pronta estratégica. Hágame cualquier pregunta relevante en el camino, que es una táctica avanzada de ingeniería rápida que permite que el modelo de IA lo ayude a elevar la salida Entonces, ¿cuál es la dirección visual? Panadería cálida y rústica hacia adelante, texturas acogedoras, elegantes y minimalistas, atrevidas y modernas. Déjame decidir con base en el logo. Entonces, si tienes tu propio logotipo específico para tu empresa, para tu negocio, y simplemente te gustaría sacarlo de ahí, esto te ayudará a hacer el trabajo. Sin embargo, para fines de demostración, le estoy mostrando el alcance de la flexibilidad y las alteraciones que puede ir y que puede hacer el camino a medida que avanza en el proceso de diseño. Vamos por lo elegante y minimalista. Entonces, ¿qué secciones necesita la próxima página de Zoom? Esto es muy, muy poderoso. Esto no se colocó intencionalmente en el aviso porque le dará a Claude el margen de maniobra o la flexibilidad para sugerir artículos para que los revisemos Esto es muy crítico si eres un principiante completo el desarrollo web o el desarrollo web front-end, o no tienes suficiente inspiración para desglosar realmente las secciones reales de la página Ya has desglosado las secciones de la página como parte del contexto, entonces simplemente puedes saltarte esto por completo haciendo clic en Skip. Sin embargo, si estas salidas te están inspirando, siéntete libre de personalizar la salida porque todos estos resultados que estás viendo se basan en la sólida táctica de ingeniería rápida que te estoy enseñando Entonces, ¿qué secciones necesita la próxima página de Zoom? Solo logo, datos de apertura y cuenta regresiva, además de dirección, eso más un breve storybook sobre nosotros, eso más correo electrónico registrarse para notificaciones de lanzamiento, eso más enlaces de redes sociales ¿Qué tal si los sumamos todos? lo voy a decir a Claude. Aquí vamos. Todo lo anterior o simplemente puedo seleccionarlos todos. Depende completamente de mí. Aquí vamos. Después pasa esto a Cloud. Construiremos el completo en la página para mí. Teniendo en cuenta, simplemente nos estamos enfocando en el desarrollo frontal y web en esta etapa actual. Para usuarios avanzados, esto es algo que es muy poderoso para agilizar su proceso de desarrollo web. Sin embargo, como parte de nuestra aplicación, nos estamos enfocando en el desarrollo web front-end Echemos un vistazo a los comentarios. Lo tengo, elegante y minimalista con logo de todo, dirección de cuenta regresiva, una nota publicitaria, registro de correo electrónico y enlaces sociales Antes de comenzar a construir, necesito algunos detalles concretos. Usaré marcadores de posición de buen gusto para cualquier cosa que prefieras rellenar más tarde Esto es muy potente porque esto me permitirá echar un vistazo al diseño, tomar el lienzo y personalizarlo posteriormente en función de mis preferencias. Cuál es la fecha y hora de apertura, dirección y ubicación, asas sociales, una línea o dos sobre Tazas, correo electrónico de contacto Esto aparecerá en función de tu propia aplicación única. Siéntase libre de agregar sus propios datos si lo desea. Siéntase libre de responder lo que tiene y omitir el marcador de posición de resto para cualquier cosa que falte claramente, por lo que es fácil de detectar e intercambiar más tarde Entonces le voy a decir a Claude que proceda con los tenedores de lugar para todos ellos. ¿Ves qué tan poderoso es esto? Ahora, tengo un lienzo personalizable completo listo para utilizar basado en la configuración de mi proyecto. Entonces esto es muy poderoso porque si recuerdan, como parte de la base del proyecto para la configuración, hemos solicitado que todo sea bastante personalizable, diable, profesional Entonces esta es la base de la fundación que estás viendo ahora mismo. Si no pasamos por los pasos que te he enseñado y los pasamos en secuencia, el up from Cloud será bastante diferente. Y es por eso que muchos alumnos, muchos aprendices, muchos profesionales, están obteniendo salidas del uso básico de Cloud, en comparación con una salida completamente diferente del uso profesional de Cloud. Aquí es donde se lleva a cabo la distinción. Si estás usando Cloud casualmente con ese sólido conocimiento en cuanto a cómo usarlo como parte de la secuencia que te estoy enseñando, estarás obteniendo resultados que son bastante diferentes Sin embargo, si sigues paso la moda estratégica que te estoy mostrando, estarás obteniendo resultados de grado profesional, lo que te ayudará a ver la diferencia, y podrás destacar en base al resultado que estás al resultado que estás generando, que es bastante único, profesional al nivel comparado con un apot básico genérico que no es del todo algo que podrías utilizar como parte de tus actividades diarias. Como podemos ver por aquí, aquí vamos. Claude está ejecutando el motor para pasar por todo el proceso. Échale un vistazo a esto. Entonces como podemos ver por aquí, aquí está el sitio próximamente, HTML de punto de índice único, todo, HML, CSS, JS, autónomo, además de su logotipo guardado en los activos Excelente. ¿Qué hay en él tic? Mira los detalles donde están todos los marcadores de posición están marcados con edit Excelente. Mira lo profesional que es esto. Es construir el código real para mí con referencias a través del logotipo Entonces conseguimos el logo. Y eche un vistazo al archivo y al sitio web real, sitio web una sola página por aquí. Entonces conseguimos tazas, cafetería y panadería. Se está gestando algo cálido, un nuevo lugar en el vecindario para mañanas lentas, extracción de jamón, espresso y pan horneado desde cero todos los días Después obtuvimos el marcador de posición para la fecha. Cuando simplemente le digo a Claude, adelante, actualice el día. Arreglaremos esto automáticamente. Entonces echa un vistazo al pequeño fragmento sobre el tema del café Puedo editar esto como prefiero. Echa un vistazo a esto para los detalles también. Mantente al tanto, sé el primero por la puerta. Simplemente podrías conectar esto en una etapa posterior después que hayas terminado con el desarrollo web front-end, tenemos las redes sociales por aquí Si quisiéramos conectarlos por cierto, y una vez que hagas clic en alguno de ellos, por cierto, simplemente te dirá que abras el enlace externamente porque estos se consideran marcadores de posición para los enlaces reales Teniendo en cuenta en la etapa, estamos construyendo un sitio web de una sola página, y nuestra aplicación es completamente libre de código y específicamente para el desarrollo web front-end Entonces como puedes ver por aquí, en caso de algún error, Claude los detectará en el camino. Entonces le voy a decir a Claude que corrija cualquier error. Esto es básicamente algo que podrías hacer con Claude ya que se encuentra con errores, simplemente dile a Claude que sigue adelante, encuentra cualquier error y sigue adelante y corrige el error. Este es un sitio web de una sola página muy profesional y elegante. Como puedes ver aquí, tenemos los marcadores de posición para el logotipo real como parte del sitio web de una sola página Ahora, como Claude está arreglando los edrors, tengo la opción de descargar esto como un archivo HTML o podría agregarlo como parte de mi proyecto Simplemente diciéndole a Cloud, adelante, agregue esto al proyecto de desarrollo web front-end, que es otra aplicación u otro nivel para llevar su aplicación más allá, donde pueda obtener el resultado que está generando para afinar su proyecto Entonces, cada salida que obtenga de Cloud podría agregarse al proyecto para obtener sus resultados cada vez mejores con el tiempo. Y supongamos que eres un desarrollador web profesional, simplemente podrías navegar por el código de aquí. Podrías hacer clic en los comentarios si quieres comentar algo o editar algo. Como mencioné, nuestra aplicación es libre de código. Sin embargo, para que vea exactamente lo que está sucediendo en caso tenga interés adicional por que tenga interés adicional por aplicaciones adicionales o pueda codificar, o le gustaría aprender más a utilizar estos códigos y aplicarlos a sus propias prácticas únicas, puede ver básicamente todas estas características y opciones frente a usted para que pueda obtener inspirado y aplicarlo a tu propia situación única. Así que podemos hacer clic en el icono de Toggle por aquí. Tengo la opción de echar un vistazo a todo el código. Para el diseño del sitio web. Tengo la opción de copiarlo. Tengo la opción de descargarlo para su posterior edición o utilizarlo como parte de mi actual, por ejemplo, un alojamiento de sitios web. Si estás usando cualquier alojamiento de sitios web o estás usando cualquier creador de sitios web, como Wordpress, por ejemplo, puedes simplemente tomar el archivo HML y agregarlo a tu página de Wordpress, por ejemplo, derecho, como parte de una página recién creada Entonces estas son aplicaciones bastante únicas para que te inspires. No obstante, en esta etapa actual, todo lo que estamos haciendo sigue siendo completamente al 100% dentro de Claude y libre de código. Así que tenemos nuestro sitio web, sitio web una sola página totalmente diseñado. Como podemos ver por aquí, Claude agregó una fecha hipotética simplemente para fijar los edors lo cual es Obtenemos una fecha hipotética, un temporizador de cuenta regresiva, y simplemente podría editar cualquier parte del proceso en función de Entonces esta es simplemente la salida inicial que estamos obteniendo de Claude. Es un sitio web de una sola página basado en el contexto actual. 6. Personalización del diseño: Bienvenido de nuevo. Así que hemos obtenido nuestro resultado inicial de Cloud, y normalmente cualquier sitio web requiere alguna personalización. Y como parte de la conferencia actual, voy a mostrar cómo podrías personalizar la salida de Cloud en función de la preferencia. Simplemente podrías cambiar las fuentes, cambiar los gráficos, cambiar colores, agregar ciertos elementos. Depende completamente de nosotros. Entonces, como podemos ver por aquí, desde la salida básica, obtuvimos marcadores de posición para el logotipo real Y por mi propia preferencia, no quiero tener que lidiar con ningún segmento de los marcadores de posición, y me gustaría que todo estuviera simplemente listo para funcionar Entonces me voy a Ta Claude. La imagen del logotipo está rota en el sitio. Asegúrate de que el logo esté completamente visible y edita lo que se necesita para que eso suceda. Esto tomará Cloud. Tienes algo de flexibilidad. Mi resultado final es bastante sencillo. Me gustaría que me presentaran mi logo directamente por aquí como parte del diseño. Como puede ver, aquí es un proceso de ida y vuelta, que es típico cuando se trata de cualquier modelo de IA, y es parte de la interacción estratégica con el modelo de IA. Puedes obtener los resultados que prefieras en línea con tus preferencias cada vez. Claude simplemente está corriendo por el proceso y echando un vistazo a los archivos reales de aquí. Y como puedes ver por aquí, se está topando con los diferentes formatos del proceso, y sigue encontrando algún tipo de error con el formato, porque el logo parece coincidir con la paleta de colores real que está creando el error, que es algo bastante bueno con lo que lidiar ahora mismo. ¿Por qué? Porque si hicieras esto manualmente, estarías lidiando con el error tú mismo. Entonces, una vez que nos encontramos con un error, simplemente retroalimentarlo a Claude, esa manera Claude es capaz de corregir el error en nuestro nombre. Ahora, como podemos ver por aquí, está llegando casi. Entonces le voy a decir a Claude, bueno, el logo debería colocarse exactamente en el sitio con un marco circular. Hasta el momento, no se muestra el logotipo. Aquí vamos. Entonces, cualquier eddor con el que normalmente nos encontramos manualmente, trayendo algún tipo de activos de marca, tu logotipo, formato diferente o diferentes paletas de colores, y estás tratando de mostrarlos, estos son eddors típicos con los que cualquier desarrollador, cualquier desarrollador web front-end lucirá como parte Bueno, no tenemos que hacerlo. Simplemente siguiendo las tácticas que te estoy enseñando, podemos simplemente decirle a Claude cómo realizar el proceso de personalización y dejar que Claude haga el trabajo pesado por nosotros en términos de editar el código, personalizando la salida hasta llegar al diseño finalizado que preferimos Como podemos ver, Claude intentó incorporar un par de ediciones del logotipo, y aún así se topó con el tema en términos de llevar el logotipo para que coincidiera exactamente con nuestras preferencias Entonces esto es muy importante. Como podemos ver por aquí, podemos tener diversas ediciones para llegar a los resultados que estamos tratando de obtener Entonces Claude está tratando de arreglarlo una y otra vez, y otra vez hasta que se haga. ¿Ves qué tan poderoso es esto? Aquí vamos. Así que pudimos ver directamente frente a nosotros todas las iteraciones por las que pasó Claude por las que normalmente pasarías manualmente para hacer esto, ahorrándonos tiempo, ahorrándonos toda la molestia nosotros mismos Y aquí vamos. Podemos ver el logo bellamente presentado frente a nosotros. 7. Cómo agregar animaciones para el sitio de una sola página: Bienvenido de nuevo. Por lo tanto, hemos agregado con éxito un logo encantador como parte de nuestro sitio web de una sola página. Ahora, agreguemos más personalizaciones, ¿verdad? Estamos pasando por el desarrollo web front-end, y podríamos pasar por una serie de personalizaciones basadas en nuestras preferencias ¿Qué tal me gustaría editar esto, por ejemplo, para agregarle más de una animación Algo cálido se está gestando, por ejemplo, podría simplemente tomar una captura de pantalla por cierto de esto, arrastrarla y soltarla directamente por aquí, o simplemente resaltar el elemento, copiarlo y pegarlo en Cloud. lo voy a decir a Cloud. A mí también me gustaría agregar animación. Aquí vamos. Destaca esto. Algo caliente se está gestando, tal que se vuelve a. Digamos que algo caliente es cocinar. Aquí vamos en un estilo animado. Sugerir múltiples animaciones para seleccionar aquí vamos. Entonces esto le dirá a Cloud. Adelante. A mí me gustaría animar esto. Si tienes una animación específica en mente, depende completamente de ti. No obstante, si quieres pasar por varias opciones, ya que estás tratando de encontrar el mejor diseño para ti, la mejor animación, este prompt le dirá a Claude, adelante, lista algunas animaciones para mí, y luego voy a encontrar la que más me guste. Entonces, ¿qué estilo de animación se ajusta mejor a Brewing al intercambio de cocina? Fundido cruzado suave, Rollo vertical, tipo anterior, ¿Morph azul Bueno, se lo podría decir a Claude. A mí me gustaría probarlos a todos. Así que muéstralos uno por uno forma interactiva en el chat hasta que lo confirme Entonces, ¿qué haría esto? Al agregar la palabra interactivamente al prompt de aquí, le está diciendo a Claude, me gustaría ver las animaciones reales mostradas una por una antes confirmar realmente cuál voy a buscar, lo cual es muy importante como parte de sus personalizaciones Te gustaría ver cuáles son las mejores opciones para tu sitio web, ¿verdad? Especialmente si estás tratando de inspirarte para un determinado diseño o estás tratando de averiguar cuáles son las opciones que tienes. Al agregar este mensaje sólido, puedes decírselo a Claude en el chat. Muéstrame exactamente cómo se ve. Yo lo confirmo, entonces eres capaz de mapear. Algo caliente se está cocinando. Esta es la opción uno. Se llama soft cross fade. Bien, lo cual es bueno. Echemos un vistazo al siguiente. Voy a dar click en siguiente. Aquí vamos. Así que podemos ver la animación directa y la interacción directamente dentro de la interfaz dentro Cloud antes de migrarla a nuestro sitio web Algo caliente es cocinar, que es el papel vertical. A mí me gusta este uno más. Vamos por la opción tres. Voy a hacer click en siguiente también por aquí. Como parte de las capacidades de personalización. Entonces, como puedes ver, por aquí, puedes agregar animaciones a tu diseño. Cualquier parte del sitio web real de una sola página es completamente personalizable según sus preferencias. Eres capaz de cambiar la fuente, cambiar el color, agregar una determinada sección, por ejemplo, cambiar el gráfico. Cambiemos el gráfico por aquí. Si queremos, depende completamente de nosotros. Entonces cualquier cosa que veas como app de Claude, tienes la opción de personalizarla simplemente sigue las tácticas que te estoy enseñando. Algo caliente se está gestando. Creo que esta está bien. Voy a decirle a Claude que proceda. Con la opción tres, me gustan las dos, tres y dos. Son bastante profesionales, y se ajustan al tema del negocio actual que nos ocupa. Entonces algo cálido está brwing vamos a cambiarlo a algo caliente es cocinar, ¿verdad Entonces, como podemos ver por aquí, Cloud está corriendo por la codificación los archivos con el fin de intercambiar la salida por aquí. Y cada línea de código, como mencioné, puede encontrarlo directamente desde el menú de alternancia si desea llevar esto a su propio sitio web directo para su posterior edición. Échale un vistazo a esto. Algo caliente se está gestando. Aquí vamos. Está ejecutando el comando, y podemos ver las ediciones empezando a perfilarse por aquí Ahora, vamos a validar la salida. Algo caliente se está gestando, y todavía está ejecutando las ediciones. Aquí vamos. Lo está validando por aquí Entonces, una vez hecho, nos muestra que ya está hecho de compilar la salida Entonces tenemos la opción de ver finalmente funcionando como parte de un sitio web de una sola página. Aquí vamos. Algo caliente es cocinar, algo caliente se está gestando, y nos dirá que todo está perfectamente bien como parte de agregar las animaciones. Y la misma táctica funciona para cualquier segmento que te gustaría aquí para ayudarte a editar ese segmento específico, te gustaría agregarle una cierta animación, para agregar un aspecto y vibra extra profesional a tu propio sitio web de una sola página Y Cloud por aquí es simplemente verificar que todo está funcionando sin problemas y perfectamente. Entonces todo se echa un vistazo. El archivo HTML está limpio. Pie de página, todo está bien, lectores de pantalla, obtiene una frase estable, luego parpadeante Entonces, todos los problemas que normalmente realizarías a través del desarrollo web front-end manualmente, Claude te está ayudando a evitarlos con facilidad. Y el código está listo. Simplemente puedo hacer clic en Descargar. Podría llevarlo a mi sitio web para su posterior edición. Para crear una página U en mi sitio web. Si realmente tengo un sitio web completo como parte de mi proyecto para este negocio actual, entonces puedo agregar una página U y simplemente tener una página de Zoom de apertura. Las aplicaciones son infinitas. Entonces esta es una táctica de personalización muy poderosa que podrías agregar como parte de tu desarrollo web front-end a través de la Nube 8. Incorporación de gráficos para el sitio de una sola página: Bienvenido de nuevo. Ahora, vamos a llevarlo un nivel más allá. Digamos que me gustaría agregar algún tipo de atractivo vibrante a la página lateral única. Quisiera agregar algunas tarjetas, por ejemplo, como parte de una sección en la que se muestran nuestros productos como parte de una cafetería y una panadería. Tenemos cruasanes, tenemos espressos, tenemos baguettes. Tenemos pan, tenemos café con leche, y la lista continúa Por lo que me gustaría exhibir estos productos por aquí como parte de las tarjetas. ¿Verdad? Entonces le voy a decir a Claude, agregue una sección. Justo debajo de la fecha y hora de apertura, la sección incluirá tarjetas volteables que muestran los siguientes productos Por ejemplo, vamos a decir croissants por aquí, vamos a decir lattes o latte Vamos a decir espresso. Conservemos un solo artículo. Aquí vamos. Entonces vamos por el pan, y la lista continúa. Entonces entiendes la idea. Entonces esto le dirá a Claude, aquí vamos, crear una nueva sección entre estas dos secciones. Y agrega tarjetas volteables para reflejar estos productos. Cualquier desarrollador web front-end tendría que hacer esto si está mostrando sus productos Están mostrando sus servicios, su cartera de proyectos Eres capaz de agregar estas tarjetas flipables bellamente animadas, que normalmente te llevarán mucho tiempo tratando de hacer esto por ti mismo, o estás tratando de encontrar una versión ya hecha a través del sitio web Builders, por ejemplo, te estoy mostrando las tácticas, cómo puedes hacerlas con facilidad a través Cloud directamente como parte de la interfaz Esta es una aplicación muy poderosa, táctica muy poderosa para que te inspires, ¿verdad Entonces tenemos la opción de animar. Tenemos la opción de agregar logotipos y ciertas características e imágenes en función de nuestras preferencias, personalizando elemento por elemento en función de nuestras necesidades Entonces tenemos la opción de agregar secciones. Cualquier cosa que normalmente puedas hacer como parte de un creador de sitios web, te estoy enseñando a hacerlo a través de la nube. Al agregar animaciones a través de tarjetas, además de secciones, puedes obtener los códigos exactamente para una mayor edición y personalización. Si sabes usar estos códigos, también, tienes la flexibilidad para hacerlo siguiendo las lecciones que te estoy enseñando. Y Claude por aquí entendió el contexto real que estamos tratando de lograr, y comenzará a construir por aquí la sección. Está recorriendo el código. Vamos a expandirlo, por cierto, si quieres ver qué está pasando. Una vez que haces clic en esto, podrás ver lo que Cloud está tratando de lograr a través de los archivos. Ahora, normalmente, una vez que haces clic en esto, va a expandirlo, pero como está ejecutando muchos códigos, no va a estar expandiendo directamente en el momento en que estamos haciendo clic en él, y simplemente se expandió directamente por aquí. Entonces sí, si está ejecutando una serie de códigos espalda con espalda, simplemente podría tener un pequeño retraso en el que se puede hacer clic cuando haces clic en él para mostrarte exactamente lo que está sucediendo bajo el capó de Cloud Y solo un par de segundos, vuelves a hacer clic en él y podrás ver toda la codificación bajo el capó que se está llevando a cabo a través de Cloud hasta que haga el trabajo. Ahora, podemos ver el archivo. Debería estar listo. Nos expandimos moviendo el toggle hacia el lado izquierdo. Y aquí vamos. Justo debajo de la fecha y la hora, una muestra de lo que viene hecho fresco cada mañana cruasanes, aquí vamos, HoverTypeK, mantequilla Incluso agregó algunos elementos adicionales basados en texto para complementar la idea que tengo. Mira lo poderoso que es construirlo de la manera que te he enseñado hasta esta etapa actual que eres capaz de tener un proyecto completo, donde Claude te está dando un empujón en la dirección correcta. Tengo un latte, espresso manual y leche al vapor, excelente pan, Como puedes ver, nuestro sitio web de una sola página se está perfilando. Cambiemos el gráfico actual como parte de nuestra personalización. Se lo voy a decir a Claude. Aquí vamos. Copia y pega esto. Debajo, aquí vamos. Algo caliente se está gestando. Hay un gráfico que necesito que se cambie. Conviértelo en una taza de café. Con vapor animado saliendo de la taza. Podrías agregar tu propia visión e inspiración únicas si tienes algo en mente, pero no tienes idea de cómo codificarlo. Sigue la táctica que te estoy enseñando ahora mismo, y eres capaz de fusionarla como parte de tu diseño Simplemente se extiende más allá las tácticas básicas de desarrollo web front-end, agregando secciones, fuentes, agregando imágenes, agregando animaciones No, puedes llevarlo un nivel más allá a través de más personalizaciones Al traer tu propia visión y fusionarla dentro del aviso para decirle realmente a Claude, adelante y construirla para mí. Entonces voy a estar cambiando este gráfico actual, que no parece alinearse con el tema actual que tenemos. Por lo que hemos animado todo hasta esta etapa actual, arreglado todo hasta esta etapa actual. Todos los demás elementos son fácilmente comestibles. Son bastante simples de editar. Si has seguido hasta este punto actual, ahora simplemente voy a elevar el diseño para convertirlo en un resultado de desarrollo web front-end profesional Como podemos ver por aquí, Claude está recorriendo el diseño. Para ultimarlo en base mi visión y en base a mis preferencias. Aquí vamos. Está recorriendo el código, ahorrándome tiempo, ahorrándome esfuerzo. Entonces, nuestro sitio web de una sola página finalizado se está perfilando maravillosamente. Tenemos el pequeño logo, el logo principal. Tenemos algo caliente que se está cocinando por aquí. Luego conseguimos un nuevo lugar en el vecindario para mañanas lentas, y tiramos de los diferenciales, así que obtuvimos un temporizador de cuenta regresiva. Podríamos cambiar la fecha si quisiéramos. Entonces tenemos tarjetas volteables, excelente declaración, la ubicación que podríamos editar Entonces podríamos tener un pequeño formulario para los correos electrónicos. Si ha terminado con la acumulación del sitio web, puede utilizarlo para un mayor desarrollo más adelante si lo prefiere Obtuvimos los marcadores de posición para los enlaces de redes sociales reales, teniendo en cuenta todo lo que estamos haciendo en esta etapa actual, únicamente desarrollo web front-end, y el código está bellamente listo Entonces, como podemos ver por aquí, tenemos la Mug animada, y el sitio web de una sola página está funcionando perfectamente. Entonces, en esta etapa actual, hemos creado un sitio web personalizado y construido un sitio web de una sola página para negocios hipotéticos, que se puede mapear a cualquier aplicación que tenga en mente 9. Implementa tu sitio web de una sola página: Y bienvenidos de nuevo. creado con éxito nuestro sitio web de una sola página, que es para la gran inauguración un negocio hipotético, que es una cafetería y una panadería Hemos creado el hermoso diseño. Te he enseñado las tácticas de personalización en términos de agregar animaciones, gráficos, cada elemento de aquí, si quieres cambiarlo, simplemente sigue las tácticas que hemos cubierto y tienes la capacidad de cambiarlo. Simplemente puedes cambiar las fechas, los horarios. Puedes eliminar secciones si aún no estás listo para utilizarlas, por ejemplo, podrías eliminar secciones. Podrías eliminar, por ejemplo, los íconos de las redes sociales. Si no quieres conectarlos a las redes sociales, depende completamente de ti, ¿verdad? Pero se entiende la idea. Digamos que después de seguir todas las tácticas que te he enseñado y has personalizado tu sitio web de una página, estás listo para publicarlo y lanzarlo. La mejor manera de hacer esto para sitios web de una página, normalmente que lo estás usando para anuncios, eventos, páginas de destino, y la lista continúa, podrías lanzarla en un par de segundos simplemente a través de coágulos Una vez que haya terminado, navegue hasta la parte superior por aquí, y una vez que haga clic en publicar artefacto Antes de publicarlo, podrías agregarlo a un proyecto, que es el proyecto que ya hemos creado. De esa manera tienes todo bajo un mismo paraguas. Para futuros desarrollos posteriores, puedes simplemente saltar al proyecto, personalizar cualquier cosa, extraer cualquier código que quieras en función de tu preferencia. Y luego avanzar con facilidad en lugar de simplemente tener que hacer todo lo que hemos hecho desde cero cada vez. Entonces tienes múltiples opciones que podrías utilizar. Podrías descargarte como un archivo HTML para editarlo más o si quieres agregarlo a una determinada página como parte de tu alojamiento, eso depende completamente de ti como parte de tu creador de sitios web. Eso depende completamente de ti. agregarlo al proyecto para el desarrollo futuro si estás haciendo esto de manera recurrente para tu negocio. Y por último, si estás listo, ya estás listo para ir, ve a publicar Artefacto Da clic en Publicar artefacto y échale un vistazo a esto. Publicar este artefacto lo hará accesible a cualquier persona en Internet y potencialmente visible en los motores de búsqueda Es un sitio web completo. Tu chat permanecerá privado. Este es el nombre del artefacto real. Se llama índice HTML punto basado en la configuración real para el archivo. Entonces, una vez que haces clic en Publicar y Copiar Enlace, aquí tienes. Publicar y copiar enlace. Este es el enlace real, y está completamente publicado. Simplemente puedo despublicarlo en función mi preferencia o simplemente puedo obtener un código de inserción Si está utilizando un creador de sitios web, cualquier creador de sitios web, una vez que obtenga un código incrustar, puede incrustar esta página real directamente como parte de su sitio web actual existente. O si es una página independiente, copia el enlace, podrías compartirlo con tus amigos. Podrías compartirlo con tus clientes. Podrías compartirlo con tus compañeros. Depende completamente de ti. Y una vez que haces clic en él y simplemente navegas a la página finalizada real aquí este es el sitio web bellamente diseñado en un par de clics, bien, en un par de minutos sin la necesidad de pasar por todo desde cero. Es una aplicación muy, muy, muy poderosa para que te inspires, y forma parte de los artefactos de Cloud. Así que puedes simplemente compartir un enlace o esto o simplemente puedes navegar hacia atrás según tu preferencia. Depende completamente de ti. Pero en esta etapa actual, ha lanzado con éxito su sitio web real de una sola página. Simplemente puede navegar de regreso a Cloud, y puede ver exactamente lo que hemos cubierto hasta este punto actual como parte de la acumulación Vuelves a Claude después de lanzar tu sitio web, ya se lanzó artefacto Ya está publicado. Simplemente puedo editar esto y volver a publicarlo, o simplemente las ediciones volverán a publicarse Puedo compartirlo directamente o colocarlo directamente en el sitio web o copiar el código a mi sitio web. Todas estas son opciones que puedes utilizar con facilidad. 10. Crear tu sitio web de múltiples páginas: Y bienvenidos de nuevo. Ahora, dando inicio a las cosas, vamos a estar creando un sitio web de varias páginas Vamos a crear un sitio web W que consiste en una serie de páginas reales, una completa en el sitio web, aplicación de desarrollo web front-end De esa manera podrás llevar tu conjunto de habilidades en términos de desarrollo web front-end a un nivel completamente nuevo Ya agregamos el logo para nuestra demostración actual, el hipotético café y panadería, imágenes de referencia como parte del contexto Podríamos agregar cualquier dato adicional que nos gustaría agregar, una imagen inspiradora adicional y una captura de pantalla inspiradora que tenemos una nota inspiradora que hemos redactado en alguna Las ideas son bastante infinitas. Así que puedes agregar todos estos elementos adicionales si quieres al contexto del proyecto. Lo estás haciendo, vamos a empezar a construir nuestro sitio web de varias páginas, no un sitio web de una sola página, sino una serie de páginas, un sitio web completo, que es algo con lo que muchas empresas, muchos profesionales, muchas personas, o están interactuando en el día a día o están trabajando como parte de su entorno profesional. Entonces lo que vamos a hacer es que le vamos a decir a Claude actuar como desarrollador web profesional específicamente, desarrollo frontal y web. Teniendo en cuenta que todas las aplicaciones con las que estamos avanzando actualmente son basadas en front-end, front y desarrollo web Desarrollo frontal y web en el que me vas a ayudar a crear un sitio web completo para mi nuevo negocio, que es Mugs cafe y panadería Utilizar los archivos adjuntos en el contexto para referencia e inspiración. El sitio web debe incluir lo siguiente. Esta es la parte o el escenario en el que vas a ser creativo. ¿Cómo te imaginas tu sitio web? Por ejemplo, el sitio web consistiría en cinco páginas únicas , sección clara sobre nosotros, página de contacto, galería de imágenes y sugerir páginas relevantes basadas en el contexto y el tema. Todas las páginas deben ser completamente edib y personalizables para evitar cualquier problema de codificación que pueda encontrar para futuras ediciones Cualquier sección o segmento del sitio web se puede recuperar fácilmente como un código para una implementación futura también si está planeando llevar su sitio web, por ejemplo, a un determinado proveedor de alojamiento o está tratando de personalizarlo en el futuro, estas tácticas rápidas se asegurarán de que esté estableciendo las bases adecuadas para su aplicación para evitar cualquier problema en términos de codificación y falta de flexibilidad con la salida. Entonces le voy a decir a Cloud, adelante por aquí. Yendo a decirle a Cloud, adelante. Agregue cualquier entrada relevante que haga que diseño del sitio web sea mejor y más eficiente. Así que esto prepara el escenario para nuestro sitio web de varias páginas. Estamos creando un sitio web completo para el negocio hipotético, un sitio web de varias páginas, ¿verdad? Es básicamente para este contexto empresarial actual, que muchos de los alumnos y estudiantes resonarán con el uso de los archivos adjuntos como parte del contexto inspirador para el proyecto Cualquier restricción que le gustaría agregar, siéntase libre de agregarla. Un requisito para su propio sitio web único, siéntase libre de agregar. El sitio web, basado en mi preferencia, consistiría en cinco páginas únicas, lo que es típico estándar en muchos sitios web. Despeje sobre una sección, página de contacto, galería de imágenes y sugiera páginas relevantes basadas en el contexto y el tema. Si deseas que Claude te sugiera en base a las mejores prácticas para la aplicación específica en cuestión, lo que podría ser un buen ajuste adicional. Todas las páginas deben ser completamente editables y personalizables para su futura edición Es muy crítico si eres alguien que está familiarizado con HTML, CSS, y estás tratando de codificar por ti mismo, aunque la aplicación actual es puramente cero, sin código, eres capaz de utilizar el código, extraer el código de las salidas para tus propias preferencias y aplicaciones únicas. Cualquier sección o segmento del sitio web se puede recuperar fácilmente como código para su implementación futura. Si me gustaría extraer cierto fragmento del sitio web, o me gustaría migrar todo el archivo para el sitio web que he construido a archivo para el través de Cloud, cada pieza de contenido o código debería ser fácilmente movible, y no se rompe simplemente porque me mudé de Cloud esto es muy crítico porque esto te ayudará a toda la molestia de tratar de reelaborar las cosas desde el principio Ahora, Claude en realidad está construyendo el sitio web para nosotros basado en el prompt actual y el contexto actual. Ahora, como puedes ver por aquí, está revisando los detalles del proyecto que hemos configurado, cualquier imagen relevante, cualquier diseño relevante. Teniendo en cuenta, hay un componente muy crítico para un sitio web de varias páginas, que es la navegación. Cómo navegar de una página a otra. Y normalmente, como etapa de desarrollo web front-end, esto podría ser bastante agitado de seguir manualmente porque tú eres el responsable de la Y te voy a mostrar estrategias muy poderosas como eliminar toda la molestia de tal manera que al final de nuestra aplicación, tengas un paquete completo de desarrollo web front-end completamente listo para el sitio web Y una nube está ejecutando el diseño central por aquí. Está utilizando JavaScript, CSS, HTML, simplemente para construir todo lo que le he pedido que haga. Y una vez que haces clic en cualquiera de ellos, por cierto, sí tienes la opción de ver en qué etapa del proceso de codificación se encuentra el código. A pesar de que podría tener un par de segundos de retraso para ver qué está pasando porque el código simplemente se ejecuta a través de la serie de los códigos. aquí, por ejemplo, tenemos el JS, los archivos JSON, luego llegamos aquí los archivos CSS, y luego llegamos aquí los archivos HTML también, corriendo. Entonces está ejecutando múltiples códigos al mismo tiempo para idear el diseño. Ahora, imagina si tuvieras que hacer esto por ti mismo. Manualmente, codificando cada línea para que funcione. Es que y te llevará mucho tiempo, mucho esfuerzo hacerlo. Y simplemente por llamar por las tácticas que te estoy enseñando en este momento, eres capaz de simplemente atravesar todo el proceso Ahora, como podemos ver por aquí, Claude está casi terminado, Claude está casi terminado, y la pantalla simplemente seguirá cambiando de una pantalla a otra para reflejar el escenario en cambiando de una pantalla a otra para el que se encuentra la nube como parte del proceso de compilación. Está construyendo todo el sitio web por aquí. Podría mostrarte que hay un error. Podría demostrar que todavía está cargando. Podría mostrarte. Está compilando porque todavía está pasando por la fase de acumulación, la misma manera que lo harías manualmente Lo harás por etapas. Y a medida que haces clic en cada etapa, podrás ver qué está pasando y en qué etapa se encuentra Cloud básicamente para ayudarte a marcar el ritmo de tu propio flujo único. Dónde se encuentra ahora mismo en la etapa de desarrollo del sitio web, teniendo en cuenta, todo en lo que hemos basado el análisis se basa en un negocio hipotético Podría funcionar para tu propio negocio único, para tu propio proyecto único. Todos los personajes, todos los elementos son completamente hipotéticos Para fines de demostración para que veas que es fácilmente transferible y mapeable a tu propia carrera, a tu propio negocio creativo, a tu propio proyecto, a tu propio entorno corporativo, cualquier dominio en el que te encuentres, eres capaz de entender algo de él que te ayudará a elevar tus habilidades de desarrollo web frontal y llevarlo a un nuevo nivel. Entonces, como podemos ver por aquí, Claude simplemente está construyendo todas estas páginas 1 a la vez. Está ejecutando los códigos completos para cinco páginas únicas con todos estos requisitos basados en nuestra preferencia. Podemos ver el hogar sobre nosotros, menú, galería contacto. Añadió también reservar una tabla basada en el prompt actual que le he pasado a Claude, sugerir algo que se alinee con nuestro tema Y como va a ser un café y una panadería, Claude sugirió, ¿Sabes qué? ¿Qué tal reservar una mesa? Page, lo que tiene perfecto sentido. Entonces esto es muy potente porque siempre deja espacio para el modelo de IA comparta contigo alguna salida que te pueda resultar útil. Y como podemos ver por aquí, tenemos un archivo MD. Todo se construye desde cero. Simplemente estamos monitoreando la salida en lugar de simplemente construir todo desde cero completo. Esto es muy, muy poderoso. La acumulación de su sitio está construida. Cinco páginas HTML, CSS, JS, usando logotipos, fotos, lo que hay en casa sobre nosotros, menú, galería, contáctenos, dirección de diseño, por qué es fácil de editar y extraer. Un estilo CSS. Cada sección, cada página tiene saltos claros. Excelente. Sin paso construido, sin marco, excelente. Los archivos léeme cubren la personalización de colores. Un par de cosas que vale la pena hacer antes de lanzar, conecta el formulario de contacto a los servidores e intercambia los mosaicos de marcador de posición por tu dirección y fotos reales Ambos están marcados, excelente. Entonces como nos estamos fijando en el desarrollo web front-end, obviamente, para futuras etapas de desarrollo web, cualquier forma o cualquier externa, digamos, páginas que requieran algún tipo de llenado de un formulario para recopilar datos, por ejemplo, como parte de la suscripción a un boletín Esto se considera algo relacionado con el desarrollo del front end back end. Y como he mencionado, no estamos cubriendo eso. Nos estamos enfocando solo en el desarrollo web front-end. Como parte de nuestra aplicación. Ahora, echemos un vistazo a esto. Tenemos un archivo zip completo que podríamos simplemente descargar que incluye todo, todas estas páginas. Y esto es muy crítico, por cierto, como parte de nuestro diseño. ¿Por qué? Porque hemos creado cada página por sí misma como un solo código en lugar de simplemente tener todo compilado y agrupado Cada página podría ser personalizada por sí misma. Entonces obtuvimos el código HTML básico para nuestro sitio web, ¿verdad? Esta es una especie de columna vertebral para. Sin embargo, nos gustaría agregarle algún tipo de gráficos de personalización porque obviamente no vamos a utilizar solo un lienzo HTML simple para nuestro sitio web. No. Ahora te voy a estar mostrando después de que hayamos recogido la columna vertebral del sitio web, que es el completo en archivos HTML, y obtuvimos la carpeta zip real para el sitio web, incluyendo todos los códigos. Ahora vamos a elevar esto y de hecho convertir el sitio web en algo presentable, incluyendo gráficos y personalizaciones 11. Presentación del sitio web para aplicaciones de diseño: Bienvenida de nuevo. Así que Cloud ha creado el paquete completo para nuestro sitio web. Incluye todos los códigos HTML. Y una vez que descargue el archivo zip para el sitio web, obtuvo todos los códigos que podría utilizar si está tratando de cargar esto como parte de su creador de sitios web. Sin embargo, ese no es el objetivo que estamos tratando de lograr. Como mencioné, estamos utilizando Claude para el desarrollo web front-end completo A pesar de que este es un sitio web completo listo, te voy a mostrar las tácticas de cómo hacer todo como parte de Cloud de la A a la Z. Así que hemos creado con éxito el sitio web, ¿correcto Tenemos los códigos HTML. Ahora, digamos a Claude que necesitamos el sitio web, no que se construya para que se tome externamente. No, quiero que todo se muestre, personalice, edite, sea completamente visible dentro de Cloud. Entonces, en el prompt de Fong, quiero que el sitio web creado se muestre completamente aquí en la interfaz, incluidos los colores, el logotipo, los diseños, etcétera Entonces esto le dirá a Claude, genial. Obtuvimos la salida para el sitio web. obstante, no quiero tomarlo externamente descargando todo para trabajar externamente. No, me gustaría ver todo internamente como parte de la interfaz porque como parte del análisis para Claude, intentará hacernos el trabajo de la manera más rápida posible simplemente descargando todos estos archivos HTML separados. Podría llevarlos a un creador de sitios web, y podría descargar el archivo zip, que incluye todas las personalizaciones requeridas, los archivos CSS, que es algo más que un desarrollador web front-end avanzado estaría usando como parte de un desarrollador web front-end avanzado estaría la construcción de un Sin embargo, como mencioné, eso no es lo que estamos tratando de lograr. Estamos tratando de minimizar la interacción manual, y estamos tratando de aumentar la automatización a través de la nube para el desarrollo web front-end Entonces, al agregar el siguiente prompt, Cloud va a volver a construir la solución, directamente en la interfaz de aquí mostrándome todas estas páginas, todos estos diversos diseños, todos estos diversos elementos basados en el análisis y el contexto del proyecto y el tema y el prompt que le hemos proporcionado a Claude. Entonces, como podemos ver por aquí, extraer el contenido principal de cada página. Está recorriendo el código que nos ha proporcionado anteriormente, ensamblando la página, ensamblando todos los archivos HTML y los archivos CSS. Entonces, como puedes ver, es hacer el trabajo del desarrollador web que normalmente estaría tomando todos estos archivos y construyendo el sitio web usando estos archivos. Entonces esto te da más de un intermedio más de un sabor intermedio por lo poderosa que puede ser tu aplicación, ¿verdad? Como podemos ver, el sitio web se ha lanzado con éxito sin la necesidad yo realmente continúe y comience a descargar todos los componentes del archivo y luego llevarlos a un creador de sitios web y simplemente lanzar el sitio web o construir el sitio web. No, siguiendo la táctica, puedo lograr dos metas Ten todos los archivos listos para mí. Podría descargarlas todas. Si tienes, por ejemplo, un desarrollador web, podrías pasar los archivos al desarrollador web para trabajar en esos para futuras ediciones o si eres capaz de llevar a cabo la aplicación por ti mismo como parte del alojamiento de tu sitio web y creador de sitios web, puedes utilizarlos O no si no quieres sumergirte en ninguna aplicación que implique mover externamente un archivo que tenga un código en él, está perfectamente bien. Te estoy mostrando todas las tácticas que podrías seguir. Simplemente diciéndole a Claude que haga esto ahora mismo, te conseguiste un sitio web completo listo. Echemos un vistazo a esto. Mira lo profesional que es esto. Nos conseguimos en realidad un sitio web completo que se divide en diferentes segmentos y componentes. Teniendo en cuenta, como parte de la salida inicial de Claude, posible que te encuentres con errores, lo cual es básico, lo cual suele estar perfectamente bien, nada de qué preocuparse. Lo que estoy tratando de lograr ahora mismo es confirmar que Cloud está construyendo el sitio web en función de mis preferencias. Entonces tenemos el encabezado por aquí, luego tenemos la navegación. Si haces clic en la navegación, nada va a aparecer, derecho, lo cual es algo bastante obvio porque Cloud está armando el sitio web. Sin embargo, tenga algún eddors, estos son eddors no capturados con los que se cruzaría manualmente No, le voy a decir a Claude, adelante, arregle todos estos errores. Pero antes de hacerlo, echemos un vistazo a todos estos artículos de aquí. Si hago clic en cosas, ¿qué obtenemos? Aquí vamos. Entonces, si hago clic en, por ejemplo, café y bebidas y menú, tenemos algunos encabezados de menú, pero no tenemos características de Toggle. Podemos arreglarlo. Entonces podríamos volver a la página de inicio real. Y por cierto, una vez que hagas clic en esto porque tiene un marcador de posición para un enlace, si haces clic en Abrir enlace, no llegarás a ningún lado porque aún no se ha lanzado la página El sitio web no está activo. Puedo dar click en Reservar mesa. ¿Bien? Me lleva a esta página por aquí. Entonces podría navegar a la página principal. Entonces tenemos una configuración sólida por aquí, que requiere un ajuste fino, ¿correcto? Vamos a hacer clic en la C el menú completo. Después navegamos al menú, café y bebidas, bollería y pan, desayuno y almuerzo, de temporada, que es algo que podríamos editar en base a nuestra preferencia. Así que tenemos la configuración real en su lugar. Y si notas, por cierto, la imagen home de fondo, esta es la imagen que hemos agregado como parte del contexto, que es básicamente la parte de la configuración del proyecto. Tenemos un titular claro, que es muy profesional. Entonces todo parece estar en orden, sin embargo, requiere de un par de ediciones más, como podemos ver en el caso de hoy, algunos favoritos Esto es para la galería, como podemos ver, sin embargo porque no tenemos imágenes, aquí vamos. No tenemos imágenes colocadas como parte de la galería. Por eso no podemos ver ninguna imagen porque estamos construyendo el sitio web real para integrarlo con cualquier imagen adicional. Ahora, vamos a llevarlo un nivel más allá. Voy a Ta Claude, arreglaré cualquier error en el sitio web y me aseguro incluir imágenes proporcionadas desde el contexto del proyecto y los lugares donde se pueden agregar las imágenes, etiquetarlas con un porta lugares. Entonces esta es la primera salida que estamos obteniendo para el sitio web de varias páginas, lo cual es genial, por cierto, porque tenemos los archivos completos, además de que Claude muestre los archivos para el sitio web directamente. Y como parte del proceso, una vez que te encuentras con algún error de integración, no tenemos que hacer este menú nosotros mismos. Simplemente dígale a Claude Adelante, corrija todos estos errores y asegúrese de que el sitio sea completamente funcional. Como parte de la fase de diseño, obviamente, no vamos a tener simplemente una salida lista para ir desde la primera ejecución, sobre todo si esta es tu primera interacción con Claude. No, vamos a tener la salida base como podemos ver por aquí. Ahora estamos arreglando los errores, lo cual es muy crítico para asegurarnos de que todo sea bastante funcional. Entonces como podemos ver Claude encontró un error por aquí, está tratando de pasar por todos los errores en el código, que es algo que hay que hacer. Manualmente para asegurarse de que el sitio web es completamente funcional. Teniendo en cuenta las tácticas que te estoy enseñando te da la posibilidad de personalizar aún más el sitio web. Digamos que tienes cierta imagen que te gustaría agregar o un cierto ícono que te gustaría colocar o un determinado elemento del menú que te gustaría reemplazar, todo lo que puedes hacer directamente dentro de Claude en base a todo lo que puedes hacer directamente dentro de Claude las tácticas que te estoy enseñando ahora mismo. Entonces estamos pasando por esto como parte de etapas. Ahora estamos eliminando cualquier error dentro de la etapa actual para confirmar que todo está funcionando perfectamente bien. Y le estoy diciendo a Claude que use los recursos que le haya proporcionado. Para su propia aplicación única, si desea minimizar el tiempo de la interacción de ida y vuelta con Claude, simplemente puede decirle a Claude o agregar más imágenes, más archivos, más detalles contextuales al segmento de contexto del proyecto. Y entonces Claude simplemente podrá llenar todos estos detalles con bastante rapidez y eficacia. Ahora echemos un vistazo a esto. Ahora vamos a echar un vistazo al sitio web de aquí. Nuevamente, el archivo zip. Obtuvimos la página por sí sola. El vivo refleja todos los detalles, misma navegación, mismos colores. Todo está perfectamente en su lugar. Bien, vamos a desplazarnos por esto desde el caso de hoy, favoritos menú completo. Bueno. Esta es la columna vertebral básica para el sitio web real. Sin embargo, no está completo porque necesitamos agregarle la navegación. Este es uno. Entonces tenemos la opción editar los otros artículos por aquí, como la mesa de reserva, ver nuestro menú, que requieren una mayor personalización. Ahora, en esta etapa actual, estamos bien para ir a sumergirnos en la mejora adicional y la personalización de nuestro sitio web. 12. Website Navigation and Editing: Y bienvenidos de nuevo. Por lo que hemos lanzado con éxito la fundación para el sitio web. No obstante, necesitamos llevar a cabo algunas ediciones. Necesitamos integrar la navegación para asegurarnos de que esté completamente funcional, ¿verdad? Entonces hemos conseguido los códigos. Le hemos dicho a Claude, adelante, ejecuta los códigos dentro de Claude para ver el sitio web. Ahora vamos a ir más allá en un nivel. lo vamos a decir a Claude, asegúrate de que la navegación esté funcionando completamente. Esa es una. El menú muestra todas las páginas correctamente y los enlaces del menú a la página en cuestión correctamente. Eso es lo primero que tenemos que hacer. Aquí vamos, solo para asegurarnos de que tenemos la navegación adecuada en su lugar antes realizar más ediciones para asegurarnos de que el sitio web esté completamente funcional Entonces, ¿qué haría esto? Esto le dirá a Claude, adelante. Seguro que basado en el sitio web actual, hemos visto que cada vez que hago clic en algo, por ejemplo, no estoy viendo el completo en la navegación. Me gustaría que las cosas fueran completamente presentables de esa manera, cuando hago clic en un determinado elemento del menú por aquí, puedo navegar de una página a otra con bastante facilidad Entonces esto es muy importante. Y por cierto, una vez que hayamos terminado con esto, te voy a mostrar que cuando estés mostrando la salida de Cloud, hay un área muy importante de la que debes estar muy, muy consciente, que es la expansión por aquí porque cuando Cloud está construyendo el sitio web real, te está mostrando a veces diferentes versiones basadas en móvil o escritorio. Entonces, cuando necesite ver el completo en el sitio siendo funcional, voy a estar expandiendo esto completamente para confirmar que todo se ha construido. Y una vez que me acerco, y me doy cuenta, por ejemplo, digamos, el menú, no está funcionando en función del tamaño del móvil, voy a decir a Claude, asegúrate de que el sitio web también funcione para móviles, solo para asegurarte de que eres capaz de adaptar el sitio web en función cualquier dispositivo con el que estés tratando. Este es un consejo avanzado pro. Mantén eso de esa manera, cuando estés construyendo Cloud, siempre, una vez que hayas terminado con el diseño, intenta expandirlo para ver completamente el layout por completo porque a medida que cambias las dimensiones y el tamaño, como puedes ver por aquí, el layout real empieza a cambiar, ¿verdad? El menú empieza a cambiar, la disposición para el texto comienza a cambiar. Así que siempre ten en cuenta porque algunas características pueden depender de ciertos dispositivos. Entonces eso es parte de tu proceso de desarrollo. Yo es muy sencillo. Simplemente por una línea de código, le dices a Cloud por un mensaje, en realidad, dile a Claude, adelante y asegúrate de que el dispositivo funcione en el móvil y el escritorio. Eso es principalmente. Entonces no hay nada complejo al respecto, sino algo que debes tener en el fondo de tu mente a medida que avanzas el proceso de construcción de tu sitio web real. Entonces como podemos ver por aquí, le estamos diciendo a Claude que confirme la navegación. Es echar un vistazo a la navegación para asegurarse de que todo esté tranquilo en línea con los requisitos que tenemos. Entonces es echar un vistazo a los pasos para asegurarse de que todas las páginas anteriores que hemos creado, alrededor de cinco páginas, están correctamente enlazadas, y voy a mostrarles cómo podemos confirmar que todo está bien. Entonces está pasando por el proceso. Podría pasar por errores. Y si puedes ver por aquí, problemas reales de toggle móvil. Se ha identificado el problema móvil por sí mismo. Simplemente diciéndolo, adelante, asegúrese de que la navegación esté funcionando correctamente. Está recorriendo los códigos. Se ha enterado de eso, ¿sabes qué? Basado en el móvil, esto podría no estar funcionando correctamente. Basado en el escritorio, podría estar funcionando correctamente. Entonces esto es algo de lo que estoy muy consciente y a través del proceso, Claude logró identificarse por sí mismo. Entonces te di la propina, te di el consejo pro, pero al mismo tiempo, mantenlo en el fondo de tu mente, así como Claude simplemente te está ayudando a evitar ese obstáculo por defecto. Pero como alguien que está usando Cloud de manera profesional, una vez que haya terminado de construir su sitio web, siempre extiéndalo a todas las dimensiones del sitio web para ver las características completas, y luego le dices a Cloud, hazlo compatible con el móvil. Entonces, como podemos ver por aquí, por defecto, Cloud también está tratando de que sea compatible con dispositivos móviles. Está corriendo por la navegación, en lugar de tener que hacer esto manualmente. Estamos confirmando las etapas para la acumulación de un nivel a la vez Entonces obtuvimos el código inicial de la columna vertebral. Le hemos dicho a Cloud que lo ejecute dentro de Cloud sin ninguna referencia externa a un creador de sitios web o el uso de un creador de sitios web o alojamiento en cualquier forma o forma, entonces estamos tomando en cuenta la navegación, asegurándonos de que la navegación funcione correctamente como una acumulación completa en el sitio Así que estamos avanzando un nivel a la vez para tener un sitio web completo y finalizado que podamos utilizar y, al mismo tiempo, usted puede inspirarse para su propia aplicación única. Ahora, Claude está finalizando la aplicación por aquí. Podemos expandirlo para ver exactamente la configuración de la navegación, que es parte del proceso, de la misma manera que estás diseñando un sitio web, el front-end del sitio web, lo haces a través de etapas, ¿verdad Pasas por la acumulación, estás pasando por secciones, a través de gráficos, navegación, y lleva tiempo Se necesitan un par de semanas para construir realmente para construir un sitio web completamente funcional. Y a través de la integración de Cloud, eres capaz de minimizarlo 2 minutos a una hora como máximo te dominas las tácticas que te estoy enseñando. Entonces ahora Cloud está finalizando el Appo por aquí. Y estamos casi listos con la navegación en su lugar para nuestro sitio web. Siempre ten en cuenta, asegúrate de que Claude finalice la tarea primero antes de avanzar al resultado Ahora, está escribiendo las funciones reales. Se trata de diseñar la navegación para validarla. Puedes ver todas las diferentes etapas para la acumulación Obviamente, como parte del desarrollo para el sitio web, el desarrollo web front-end, a veces es necesario agregar textos Necesitas agregar algunas referencias para el diseño, para el proyecto en el que estás trabajando las tácticas que te estoy enseñando te dan el conjunto de habilidades para navegar a través de cualquier proyecto que estés tratando que requiera desarrollo web front-end Entonces una vez que terminamos con la navegación, estamos avanzando a otro nivel, lo que confirma que tenemos la columna vertebral, la funcionalidad del sitio web. La navegación está funcionando. No obstante, necesitamos personalizarlo más. Necesitamos agregarle algunas características , algunas animaciones, que forman parte de cualquier desarrollo web front-end Entonces Claude ahora está compilando el resultado final y el resultado final y carga la vista previa real para que confirmemos exactamente que la navegación está funcionando Y como mencioné, siempre ten en cuenta, una vez que obtengas el resultado, siempre expandido a plena forma. A través de la opción de toggle por aquí para ver el resultado finalizado. Y luego una vez ajustas el tamaño, y si notas que algo no está funcionando, por ejemplo, entonces podrías decirle a Claude Confirm. ¿Funciona en el móvil o no? ¿Funciona en escritorio o no? Y si Claude te da la confirmación, entonces sí, puede ser que estés limitado con la interfaz que estás teniendo, pero es un paso de precaución para asegurarte de que tu sitio web funcione en múltiples dispositivos Ahora, la nube de aquí está confirmando la lógica de navegación. Todo funciona perfectamente bien. Entonces necesitaba pesar correctamente, pero encontré que un problema de endurecimiento genuino puede arrojar dentro de un marco de caja de arena Entonces está pasando por el proceso de iteración que normalmente hace como parte de la búsqueda de errores, arreglando errores donde sea necesario En caso de que un eddor sea algo que impacta la salida, lo arreglará Si no tiene un impacto negativo, simplemente lo omitirá, que es algo nuevamente que también harías manualmente. Así que estamos esperando el resultado finalizado por aquí. Y como podemos ver, hay un giro en el resultado, y espero que esa nube lo confirme ahora mismo que está bien para ir. La navegación confirmada está funcionando. Mi prueba solo necesitaba pesar correctamente. Bien, ya hemos abordado ese tema. Echemos un vistazo al comando actual que se ejecuta en la vista previa. Ahora ya se verifica toda la navegación. Siempre prefiero expandirme para ver qué hay bajo el capó, qué sucede en las distintas etapas del análisis. Es un consejo profesional. Te aconsejo que lo revises porque esto te dirá en qué etapa se encuentra Claude, y en caso de que encuentres o veas algo que no prefieres, puedes abordarlo directamente. Echa un vistazo a los comentarios de Claude. Todo parece bastante alineada. Ha encontrado un error en el proceso y lo ha corregido. Además, tengo listo el archivo zip, incluyendo todos los códigos, bueno para ir. Seguirá aportando esto. Cuanto más actualizamos el archivo, más iteramos el archivo, como he mencionado, porque estás lidiando con esto como parte de un proyecto Entonces cualquier futura edición o adición o actualización o alteración a tu proyecto real, entonces eres capaz de simpatizar a Claude, adelante, actualizar el zip completo en el sitio web y enviármelo Yo me lo llevo. Y luego puedes moverlo a un creador de sitios web. Puedes moverlo a tu propio hosting en lugar de tener que hacerlo desde cero cada vez. Ahora echemos un vistazo a la salida finalizada. Aquí vamos por aquí. Ahora voy a alternar el menú superior, ampliar las características, y aquí vamos. Hermoso, ¿verdad? Tenemos la página de Abo. Excelente. Echa un vistazo a la imagen, que forma parte del contexto del proyecto. Se agregó una historia. Aquí vamos, cómo se hace. Conoce al equipo, individuos aleatorios, nombres hipotéticos, situación hipotética, proyecto hipotético Sin embargo, está bellamente diseñado. Echa un vistazo a la galería, por ejemplo, echa un vistazo a esto. Estas son las imágenes, por cierto que hemos agregado como parte del contexto. Si le echas un vistazo a esto, agrega una foto por aquí, agrega una foto por aquí. Nos está dando marcadores de posición para indicar exactamente cuáles son algunas buenas sugerencias Los títulos marcados como foto son marcadores de posición, despliega tus imágenes y podrías intercambiarlas. Potente. Contáctanos página. Aquí vamos. Tenemos un formulario. Que podríamos utilizar más adelante en el contenido, por ejemplo, básicamente, si tienes un formulario o marcador de posición adicional para esto, podríamos rectificar esto. Eso está perfectamente bien. Entonces echa un vistazo a la galería, también. Eso lo hemos visto. Este es el café, la panadería, la vida del café. Si tienes ciertas imágenes del café sobre nosotros. Esta es una de mis páginas favoritas mix, proof, shape, core, bake. Estas son adiciones sugeridas por Claude basadas en el prompt agregado, que se ajustan al tema, ¿verdad? Entonces todos estos son detalles importantes. Como podemos ver, simplemente ha proporcionado algunos nombres hipotéticos para personal hipotético que simplemente podríamos alterar y cambiar en base a nuestra preferencia, nuestros valores, ven y saluda, ponte en contacto, que es parte de la página sin contacto Vamos a ver esto. Aquí vamos. Excelente. La navegación funciona perfectamente bien. A casa, volvemos, reservamos una mesa. Antes de reservar una mesa, echemos un vistazo a esto. Algunas cosas favoritas, masa agria country, croissont de mantequilla, tazas café con leche de la casa, excelente menú completo de Ca. Hermoso, ¿verdad? Nos dieron el café. Nos dieron los pasteles. Si me desplazo esto un poco hacia un lado, si hago clic por aquí, si te das cuenta, tenemos nuestro menú, ¿verdad? Tenemos nuestro menú presente como parte de una vista móvil en comparación con simplemente una vista de escritorio, lo cual es una gran ventaja. Es una gran adición para asegurarse de que todo esté alineado y en orden La página Acerca de nosotros lo borra todo. Podemos ver el logo del lugar real, hipotéticos miembros del equipo de horno a Esto es simplemente un caso hipotético ficticio que se puede mapear fácilmente a su Estas imágenes que se han proporcionado como parte del contexto para el proyecto, han sido utilizadas para construir el sitio web. La página de inicio se ve increíble. Obtuvimos los casos de favoritos reales, los precios extraídos del menú, nuestra historia usando las imágenes proporcionadas, las direcciones también si desea agregar algún tipo de función de mapa, eche un vistazo al pie de página. Todo es genial. Experimentemos con la navegación si hago clic en Contacto. Y sí, aquí vamos. Vamos a la página de contacto. Y entonces si le echo un vistazo a la página Acerca de nosotros, sí, también está funcionando. Aterrizamos en la página Acerca de nosotros. Si le echo un vistazo al menú, pasteles y pan, sí, aquí vamos. Claude en el fondo, como mencioné, arregla esto. Estacional. Aquí vamos. Planeación Visita de grupo, Reserva una mesa. Haga clic en Reservar. Sí. Volver al menú. Aquí vamos. 13. Cómo añadir animaciones para el sitio web de varias páginas: Y bienvenidos de nuevo. Y hemos configurado con éxito en esta etapa actual, la navegación para nuestro sitio web, y hemos probado que todo está funcionando perfectamente bien. Y la configuración de la navegación, por cierto, es un proceso que consume mucho tiempo. Si has intentado hacer esto manualmente como yo, cuando estás desarrollando el front-end de un sitio web, podrías romper fácilmente diferentes enlaces, diferentes segmentos, sin mencionar cambiar entre vista móvil, vista escritorio, y la lista continúa Y a través de la integración de Cloud, la misma manera que estoy compartiendo contigo, pudimos evitar toda la molestia y aterrizar en este hermoso diseño, completamente funcional, navegación intacta. Todo está perfectamente alineado. Ahora, en esta conferencia actual, voy a estar enseñándote a aplicar una de mis partes favoritas para el desarrollo web front-end de cualquier sitio web, que es la personalización A menudo estamos limitados por temas. No tenemos idea de cómo codificar, o no tenemos idea de cómo hacer el CSS o el HTML, no hablar de romper cosas. Ahora voy a estar mostrándote cómo podemos simplemente pasar por alto todo el proceso integrando Cloud. Entonces, si echamos un vistazo al sitio web que hemos construido hasta esta etapa actual, las lecciones que voy a estar compartiendo contigo y las tácticas te ayudarán a sacar algo de inspiración en la que vas a ver que tienes la capacidad integrar diversas personalizaciones en función de tu preferencia Arrancando las cosas. Digamos, por ejemplo, como parte de la página principal de aquí, me gustaría agregar algún tipo de animación. Las animaciones son consideradas como una adición muy poderosa a cualquier sitio web, ¿verdad? ¿Qué tal si me gustaría tener el rumbo principal por aquí Algo siempre se cuece a fuego lento en las tazas. Vamos a añadir algún tipo de animación dinámica en la que vamos a tener la palabra cocer a fuego lento Digamos voltear a cocinar y cocinar a fuego lento y elaboración de cerveza. De esa manera, es algo más interactivo. Entonces le voy a decir a Claude, quiero agregar una animación dinámica al encabezado. Y luego tengo dos opciones, por cierto. O lo copio y lo pego tal cual y lo pongo entre comillas, Claude entenderá o una de mis opciones alternativas favoritas es simplemente donde puedes tomar una captura de este sitio web o de tu propio sitio web. Si estás editando tu propio sitio web, simplemente toma una captura de pantalla, arrástrala y suelta directamente como parte de la interfaz, y agrega el comando. Esto es muy poderoso. Y un consejo profesional adicional, tienes la opción cuando arrastras la captura de pantalla para decirle a Cloud, consígueme el código, el archivo HTML, que se está ejecutando detrás de la captura de pantalla. De esa manera, si quieres tomar un fragmento, ponlo en tu sitio web, por ejemplo, tienes la opción de hacerlo Es un consejo muy poderoso a tener en cuenta. Entonces quiero agregar una animación dinámica al encabezado. Siempre hay algo que hierve a fuego lento en las tazas, tal que se voltea a fuego lento Cocinar se voltea a la elaboración de cerveza, por ejemplo. Y llevémoslo un nivel más allá. Se lo voy a decir a Claude. Muéstrame las diferentes opciones de animación de forma interactiva. Agrega esta palabra siempre cuando estés tratando con Claude. Si desea ver el siguiente resultado, que es la salida directamente en el chat de aquí en comparación con tener el resultado simplemente reflejado en la salida. Una vez que agregue la palabra interactivamente, Claude entenderá que necesito mostrar los resultados aquí Y en caso que la opción de interactividad no te esté funcionando, significa que necesitas ir a la configuración y luego habilitar la interactividad Este es un protip muy poderoso que muchos no tienen idea de que existe, y te lo estoy enseñando para ayudarte a llevar tu integración de Claude a un nivel completamente nuevo Muéstrame las diferentes opciones de animación de forma interactiva, tal manera que pueda confirmar la que quiero en caso de que no tengas idea de qué tipo de animación te gustaría tener Esta es una táctica profesional muy poderosa para su desarrollo web front-end Puedes usarlo, en primer lugar, para personalizar ciertos elementos, agregar animaciones a ciertos elementos. Y lo más importante, si tienes una cierta animación en mente, siéntete libre de inyectarla como parte del baile de graduación. No obstante, ¿si no tienes idea de qué tipo de animación necesitas o cuáles son las diferentes opciones que tienes? A lo mejor te gustaría inspirarte para tu diseño, o te gustaría ver cuáles son las mejores opciones que tienes como parte de las opciones de animaciones. En general, si no estás familiarizado con esto, todo el objetivo es para ti como alguien que no tiene idea de cómo codificar, cómo utilizar cualquier tipo de código, eres capaz de llevar a cabo el desarrollo web front-end sin la necesidad de ninguno de Así que simplemente esta táctica te ayudará a inspirarte, ver todas las opciones sin realmente romper el sitio web Si has hecho desarrollo web front-end a tu propio proyecto, por ejemplo, te habrás dado cuenta si intentas editar algo, por ejemplo, por aquí, podrías romper la navegación Podrías romper la configuración, podrías romper el tema, y luego buena suerte tardando horas tratando de arreglar cualquier edición que hayas hecho. Entonces esta táctica, el siguiente prompt te ayudará a mantener todo bajo el ambiente de chat en la nube, interactividad por aquí Eres bueno con eso, lo confirmas, y luego eres capaz de migrarlo directamente a través de la interfaz. Y lo más importante, Cloud por defecto, ya que está ejecutando el comando, echa un vistazo a los pasos que está haciendo. Está construyendo las animaciones. Se trata de construir las opciones. No obstante, una vez que hagas una selección, seguirá adelante y rectificará todo como parte de tu sitio web para asegurarte de que nada se rompa Y esta es una de las poderosas integraciones de Claude porque Cloud es muy potente para la codificación Entonces tiene la capacidad de ejecutar códigos con bastante rapidez, depurar los códigos, asegurarse de que todo sea bastante funcional. Ahora echemos un vistazo a la salida. Mira lo poderoso que es esto. Esta es una táctica pro muy poderosa que te ahorrará mucho tiempo Echemos un vistazo a las salidas. Siempre se está gestando algo. Aquí vamos. Tazas a fuego lento, excelente diapositiva del odómetro. Bien. Entonces algo siempre está tazas a fuego lento o cocinando, tres D flip Entonces conseguimos crossfade plus scale, luego enfoque de desenfoque, algo siempre es una tazas, aumento de vapor en la marca Excelente. Cada carta muestra una vista previa justo en el estilo de héroe real. Excelente. Fondo oscuro. Entonces es tomar los elementos exactamente como están. Cómo se vería, y puedes ver las animaciones por aquí. Así que escojamos uno para fines simplemente de demostración. ¿Qué tal si vamos por el aumento de vapor por aquí? Voy a dar click en usar esto y echar un vistazo a la salida. Simply Cloud confirmará el requisito de diseño, el requisito de animación, y luego seguirá adelante y ejecutará el código para actualizar ese segmento específico. Entonces, todo el objetivo de esta conferencia, en primer lugar, es aprender esta nueva táctica, nuevo consejo, pero a la vez, entender que no estás limitado a tal edición solamente No. Puedes usarlo para animar el texto por aquí Podemos usarlo para animar ciertos botones, por ejemplo, animar ciertos elementos Así que eres capaz de inspirarte para aprender esta táctica y aplicarte a tu propia situación única, ayudándote a abrir muchas puertas como parte de tu desarrollo web front-end Y la táctica que te estoy enseñando ahora mismo, la interactividad, muchas veces la extrañan incluso los usuarios pro cloud Es una táctica muy poderosa, específica, ten en cuenta, necesitas ir a la configuración, habilitarlo Y luego en el prompt por aquí, mencionar la palabra interactivamente Es muy crítico porque esto le dirá a Cloud, antes de migrar nada por aquí, me gustaría que me mostraran los resultados correctamente frente a mí como parte de la interfaz. Y una vez que haga una selección, vas a migrar, y por defecto Cloud va a implementar la salida del diseño y luego asegurarse de que esté creando el archivo, ejecutando pruebas que nada se está rompiendo. Todo es perfectamente funcional. Así que siéntete libre, por cierto. Simplemente, si estás trabajando en tu propio sitio web o en tu propio diseño, tómate un momento e intenta inspirarte para construir o personalizar tu propio sitio web. O si estás construyendo un sitio web desde cero. Si estás tratando de personalizar tu propio sitio web, en realidad podrías tomar Este es más un paso avanzado profesional. Eres capaz de tomar tu diseño actual. Puedes tomar una captura de pantalla, por ejemplo, de tu sitio web y agregarla a Claude y que Claude la construya por ti y la personalice para ti, y luego pedirle a Claude que obtenga su archivo HTML, y luego pueda copiar este archivo HTML y pegarlo de nuevo en el editor de su sitio web, por ejemplo. Esto es algo para los desarrolladores web front-end que se sienten cómodos con la codificación Como mencioné, la práctica actual, la conferencia actual, las lecciones actuales, están hechas a medida para ti para alguien que no tiene idea de cómo codificar, pero al mismo tiempo, si quieres experimentar con la codificación, eres capaz de hacerlo de una manera muy ágil y sistemática. Por lo que esto es muy crítico para cualquiera que quiera trabajar en su sitio web, construir un nuevo sitio web, ya sea para su propio proyecto personal, para su propio negocio, para su propio cliente. Estas tácticas que te estoy enseñando te ayudarán a ahorrar mucho tiempo y esfuerzo. Echa un vistazo al Apu Bado como puedes ver, Claude, asegúrate de que todo esté funcionando Y cuantas más ediciones hagamos, qué notarías en función de la configuración que hemos hecho, Claude en realidad está empaquetando el sitio web nuevamente, incluyendo el archivo HTML y el paquete completo en el sitio web, incluyendo todos los últimos resultados Esto es muy crítico porque como parte de la configuración, como mencioné, siempre te gustaría volver a lo que sea que estés haciendo, ¿verdad No necesitas construir todo desde cero. Y al seguir estas tácticas, digamos, un mes más adelante, puedes simplemente volver a tu proyecto y echar un vistazo a la última edición, realizar algunas ediciones, afinar la salida y exportarla y volver a usarla Echa un vistazo a la aplicación de aquí. Y aquí vamos. Nos conseguimos una animación bellamente atractiva agregada específicamente basada en nuestra preferencia sin romper nada del sitio web real, lo cual es muy crítico. Y digamos que me gustaría cambiar a un diseño diferente, ¿verdad? Entonces simplemente subiría, echaría un vistazo a los comentarios de aquí. Entonces digamos que he cambiado de opinión. Voy a ir con este diseño por aquí. Haga clic en Usar este diseño. Aquí vamos. Tenga cuidado antes de ejecutar este mensaje. El contenido de conversación malicioso podría engañar a la nube para que intente acciones dañinas. Bueno, este es un upput automático que simplemente aparece por defecto si estás tratando de arreglar algo que ya has generado. Ocurre en el momento. Eso está perfectamente bien. No es un problema. Entonces vamos a mencionar usar la diapositiva del odómetro, animación para la palabra del título del héroe en su Simplemente agrega la palabra en su lugar, y vamos a ejecutar el código de nuevo. Entonces esto le mostrará que tengo la opción de hacer una selección, actualizar el archivo. Y luego al echar un vistazo a la salida por aquí, me di cuenta, bueno, se ve bien, basado en la marca. No obstante, me gustaría ver si la animación diferente encaja mejor en función de mi preferencia. Y si tuviera que hacer esto manualmente por mí mismo, podría romper el archivo. Podría tener que pasar mucho tiempo tratando de ver eso antes y después de la comparación, y no tengo ninguna referencia a referirme en caso de que algo se rompa, por ejemplo. Muchos de los que intentamos hacer esto manualmente enfrentamos tales problemas. Entonces, si te das cuenta por aquí, Claude va a ejecutar de nuevo el prompt básico. Arreglará la animación, actualizará todo el archivo sin necesidad de ninguna intervención. Simplemente, ten en cuenta que tienes la opción y la capacidad de seguir corriendo en segundo plano. Si estás haciendo otra tarea, simplemente agregas el prompt, deja que Claude haga la decodificación y la edición. Y una vez hecho, eres capaz de volver a ella para echar un vistazo a la salida Y aquí vamos. Échale un vistazo a esto. le tomó un par de segundos Claude le tomó un par de segundos simplemente arreglarlo todo. Y como pueden ver, esta es la última versión. Aquí vamos. Así que pudimos simplemente cambiar a esta animación actual, que es la diapositiva del odómetro Entonces, dentro de un par de clics, podemos cambiar toda la estructura de codificación para que el sitio web incorpore la animación sin necesidad de ningún tipo de codificación. Y esta táctica se aplica a cualquier segmento de tu sitio web que estés tratando construir si quieres animar Digamos, me gustaría animar esta tarjeta por aquí. Yo quisiera animar este texto por aquí. Siéntase libre de inspirarse para ayudarle a llevar su aplicación a un nivel completamente nuevo. 14. Incorporación de gráficos para el sitio web de múltiples páginas: Y bienvenidos de nuevo. Así que hemos creado con éxito las animaciones como parte de nuestros requisitos, y esto es algo que podríamos mapear en diferentes partes del sitio web. Ahora en esta conferencia actual, voy a mostrarles cómo podríamos agregar algunos gráficos. Como, digamos que te gustaría agregar algunos gráficos aquí o una parte diferente del sitio web, aquí, por ejemplo, o una sección diferente , cielo es el límite. Puedes inspirarte para aplicar a tu propia situación única. Ahora, déjame mostrarte un par de trucos en términos de agregar gráficos a tu sitio web. Le voy a decir a Claude, me gustaría agregar un par de gráficos los cuales están animados a la sección principal de héroes. Y la sección de héroes, esto es básicamente lo que llamamos como la sección de héroes de aquí, ¿verdad? Al lado del botón para reservar una mesa. Y por cierto, no es necesario pasar por la descripción completa. Como mencioné de nuevo, toma una captura de pantalla de la ubicación exacta de aquí, por ejemplo, y luego etiquétela en una hoja de papel, en una servilleta, en cualquier software que quieras. En realidad puedes escribir las ediciones que te gustaría hacer y simplemente tomar esa captura de pantalla, tomar ese pedazo de papel, tomar esa servilleta, sea lo que sea que estés haciendo las ediciones, y luego mapearla a Claude Esto, arrastrarlo y soltarlo por aquí, pero te estoy mostrando el enfoque básico más simple a través de una interacción basada en texto. Entonces le digo a Claude, me gustaría agregar un gráfico por aquí al lado para reservar una mesa. Y me gustaría tener un par de opciones. Entonces le voy a decir a Claude que agregue un par de gráficos interactivos. Aquí vamos. Sólo para asegurarme de que Claude entienda, me gustaría verlos primero antes de migrarlos. Aquí en la interfaz, aquí vamos. Así es como elevas tu prompt, que se animan a la sección de héroe principal junto al botón para reservar una mesa. También, podríamos hacerlo más específico para ser agregado. Aquí vamos. Entonces ambas indicaciones te darán resultados No obstante, si me gustaría que fuera bastante específico, donde confirmo la interactividad por aquí, puedo ver los gráficos Me gustaría echar un vistazo a un par de opciones antes de migrarlas. Entonces Claude analizará el tema, el contexto, la acumulación que hemos hecho hasta esta etapa actual, y sugerirá un par de gráficos importantes o útiles que se alineen con el caso hipotético que estamos tratando, ¿verdad? Hemos agregado un proyecto. Es un enfoque basado en el contexto. Tenemos archivos, tenemos elementos para agregar. Entonces Claude ha sido entrenado lo suficientemente bien ahora mismo para poder decir exactamente lo que necesitábamos hacer y sugerir algunos elementos importantes. Échale un vistazo a esto, gráficos animados temáticos de panadería con lluvia de ideas, que es muy potente porque esto nos dice que Claude está en la misma página que nosotros lo que estamos tratando de hacer Aquí vamos. Échale un vistazo a estos. Mesa abierta ahora. un indicador en vivo. Esto es muy bonito. Tenemos una taza, una taza. Nos dieron un día fresco. Conseguimos reservar una mesa. Eche un vistazo a estas potentes poderosas adiciones como parte de los gráficos. Entonces en base a mi preferencia, digamos, si vamos a reservar una mesa, me gustaría agregar esta característica por aquí. Entonces le voy a decir a Claude, adelante, agregue esta característica. Al pulsar abrir ahora insignia de estado junto al botón de la mesa de reserva Entonces es una animación muy bonita, y por si me gustaría es un gráfico muy bonito, que está animado. Si quisiera probar algo más sin romper el sitio real, que es algo que normalmente sucede manualmente, simplemente volvería a hacer clic en esto, usar esto y decirle a Claude que use esto en su lugar. O simplemente podría decirle a Claude, bueno, mostrarme más opciones si quisiera tener opciones adicionales para encontrar la que mejor se ajuste a mi aplicación. Pero estos son gráficos muy bonitos que normalmente debes hacer por ti mismo si estás escribiendo el código para integrarlos realmente como parte de tu sitio web. Entonces Cloud ahora mismo está arreglando el código, HTML, CSS, todo debería estar en su lugar para integrar este gráfico para elevar nuestro conjunto de habilidades de desarrollo web front-end y llevarlo a un nivel completamente nuevo Como puedes ver por aquí, Claude simplemente está corriendo a través de los comandos, ahorrándonos tiempo , ahorrándonos esfuerzo, y puedes ver qué etapa de la codificación está pasando. Como mencioné, las aplicaciones que estamos siguiendo, no necesitan que sepas codificar nada. Simplemente sigue las tácticas que te estoy enseñando y podrás hacer el trabajo como desarrollador web front-end profesional con muchas tácticas y habilidades que te ponen en la manga para permitirte destacar cuando se trata de desarrollo web front-end Ahora, echemos un vistazo a la salida, y aquí vamos. Mesas abiertas ahora. Mira lo poderoso que es esto. Complementa el diseño de manera gris. Acerca de agreguemos otro gráfico para elevar aún más el diseño. Se lo voy a decir a Claude. Para mesa de reserva, la voy a colocar junto a, por ejemplo, o dentro del botón ver nuestro menú. Entonces se lo voy a decir a Claude. Vamos a usar esto. Aquí vamos. No obstante, voy a ser específico con mi pronta. Agrega la animación del icono de la taza humeante, no junto al botón de reservar mesa No, pero voy a arreglarlo dentro del botón de ver nuestro menú. Esto es parte de tu viaje creativo, ¿verdad? A medida que estás haciendo el desarrollo web front-end, se espera que seas creativo en el proceso Y te estoy enseñando las tácticas, la misma manera que las haría normalmente, cómo voy a estar maniobrando a través de la interacción con Claude Esto me pareció bastante útil. Entonces me he dado cuenta, bueno, me gustó este gráfico. No quiero simplemente saltarlo, y encaja perfectamente bien no al lado de la mesa de reserva, sino parte de ver nuestro menú, ¿verdad? Esto es algo que harías normalmente de forma manual. O si estás trabajando como parte de una empresa, por ejemplo, tienes una reunión para discutir el diseño, la presentación, y somos capaces de integrar todos estos de la manera más rápida y efectiva posible a través de las tácticas que te estoy enseñando. Ahora, en base a mis expectativas, vamos a hacer que Claude coloque esta la taza dentro del botón que es ver nuestro menú, y aquí vamos. Vea lo poderoso que es el diseño. Totalmente dinámico, totalmente profesional, y es de primera categoría en línea con nuestros requisitos. Entonces en esta etapa actual, has aprendido a agregar gráficos como parte de tu diseño, y esto funciona en cualquier nivel o cualquier página o cualquier etapa de tu sitio web real, ¿verdad? Simplemente puede navegar a la página de contacto, sobre nosotros página. Galería, sea lo que sea, y puedes aplicar estas tácticas para ayudarte a integrar gráficos como parte de tu diseño. Y como he mencionado, hemos recibido la confirmación de Claude de que el sitio web está listo, y el diseño ha sido finalizado, donde ya hemos agregado los gráficos para mesas abiertas, y hemos agregado una taza animada para mejorar aún más la presencia visual de nuestro sitio web. 15. Barrido de fuentes en todo el sitio: Bienvenida de nuevo. Ahora, digamos que me gustaría cambiar y alterar las fuentes para todo el sitio web. Digamos que estoy pasando por el proceso de diseño y me he dado cuenta, bueno, me gustaría tener diferentes fuentes en función de mis requerimientos. Ahora bien, aunque la fuente se vea perfectamente alineada con la marca, sin embargo, me gustaría probar diferentes fuentes para ver cuál refleja mejor la esencia del proyecto actual, ya sea con fines de marketing, para su propia creación de contenido, y la lista continúa. Entonces me voy a Claude. Me gustaría probar diferentes fuentes para todo el sitio web. Mostrar muestras interactivas en el chat aquí de tal manera que pueda confirmar el barrido completo de la fuente del sitio. Entonces, ¿qué haría este prompt? En primer lugar, le decimos a Claude cuál es mi objetivo como parte de sólidas tácticas de ingeniería rápida. Y luego una vez que añadas la palabra interactividad, siempre ten en cuenta que pones la palabra interactiva, esto le dirá a Claude, ¿ sabes qué? Muestra los resultados aquí primero. Es una táctica pro avanzada muy poderosa. Para ayudarte a sacarle el jugo a Claude. En el chat aquí es tal que puedo confirmar el barrido de fuente completo. Y mencioné el barrido completo de fuentes del sitio porque esto le dirá a Claude cuál es el objetivo final. Una vez que lo confirme todo, actualizarás todo como parte del sitio web. El completo en el sitio será completamente editado y actualizado en lugar de simplemente tener que hacer esto manualmente. Échale un vistazo a esto. Echa un vistazo a la salida. Aquí vamos. Tenemos las etiquetas de fuente, la actual esta es la fuente actual. Entonces tenemos las diferentes opciones. Aquí vamos. Se puede ver el nombre de la fuente, por cierto. Si eres un profesional de marketing, eres un especialista en branding, puedes darle sentido a los nombres de las fuentes reales, el emparejamiento de fuentes y, por cierto, Claude comprenderá cuáles son las fuentes que mejor van juntas para el equipo actual con el que estamos trabajando. Cada tarjeta aplica el emparejamiento a contenido real de su sitio web. Mira lo poderoso que es esto. Puedo ver las fuentes exactas que podría usar, y Claude entiende que estas fuentes van juntas, ¿ y qué indican? Así que eres capaz de navegar a través de cualquiera de estos derechos. Y entonces eres capaz de hacer una selección. Entonces vamos a estar tocando usa esto o mantén esto para quedarte quietos y lo voy a aplicar de lado. Entonces voy a escoger cualquier fuente que se alinee con mi preferencia Escojamos uno de ellos para asegurarnos de que todo esté bastante alineado. Basado en la marca actual, creo que esta es bastante agradable. Entonces voy a estar usando el de aquí. Aquí vamos. Éste. Al hacer clic en US Does, cambia las fuentes del sitio a Lib y luego a Nunito Entonces voy a tener esta combinación juntos Liber y Nonito como combinación Y este es exactamente el diseño del panel de control único que da sus frutos. Sólo necesito cambiarme. Aquí vamos. Un elemento y Cloud es capaz de hacer que todo el sitio barre. Entonces, si aplicas las tácticas hasta esta etapa actual, cualquier edición, ya sea en este punto actual en el tiempo o en el futuro, cada vez que vuelvas a tu proyecto paralelo en curso, eres capaz de simplemente subirte al proyecto y realizar una edición en un par de minutos, si no segundos, en comparación con pasar por todo el proceso desde cero Entonces, al principio, podría llevarte algún tiempo llegar a esta etapa actual. Sin embargo, una vez que su proyecto está en funcionamiento, cualquier otra edición, es simplemente un par de segundos de una salida finalizada Ahora Cloud simplemente está recorriendo las fuentes para el sitio web y está intercambiando todos los códigos requeridos bajo el capó de Claude para cambiar el diseño y la visualización de fuentes para el sitio web Y podrías utilizar cualquier fuente que tengas en mente, por cierto, no necesitas depender simplemente las sugerencias de Claude. Ahora, si tienes tus propias fuentes o estás usando fuentes específicas como parte de tu propio sitio web actual, usando fuentes específicas como parte de tu propio sitio web actual, simplemente puedes agregarlo al prompt y Claude podrá mapearlo directamente a la salida. Claude está ejecutando el comando por aquí, y podemos ver que ha actualizado todo con éxito de manera bastante sistemática. Esperamos la confirmación, y aquí vamos. Tenemos la última edición de nuestro sitio web, y como puedes ver, las fuentes se han actualizado. Esto es muy profesional. Esto es muy elegante, y Claude pudo simplemente mapear todos estos resultados con bastante facilidad, ¿verdad? Y podemos ver la clara distinción entre el antes y el después. A través de la sección principal de héroes aquí donde podemos detectar directamente que la fuente se ha desplazado completamente. Y simplemente, podría pedirle a Claude que confirme que todo el sitio ha cambiado su fuente. En pocas palabras. Es un prompt muy básico. El sitio ha cambiado su fuente completa. Por lo que esto confirmará que Claude no se perdió nada como parte de una verificación de confirmación. Así que confirma que todo el sitio ha cambiado su fuente. Es un prompt muy básico, muy directo. De esa manera, Claude Claude dirá exactamente lo que buscamos. No obstante, si notas por aquí, como parte del cheque, siempre haz esto, por cierto. Cuando estés ejecutando algo como parte de cualquier herramienta de IA, incluyendo Claude, siempre confirma el resultado final porque al final del día, adivina qué. Una herramienta de IA comete errores en el camino. Entonces, una vez que agregues este aviso extra de precaución, confirma que todo el sitio ha cambiado sus fuentes, échale un vistazo a esto Encontré un pequeño extremo suelto para el archivo real, basado en las fuentes antiguas, encontré un comentario en alguna parte. Es puramente descriptivo. Permítanme verificar la vista previa para luego verificar el estilo calculado. Entonces tomará un paso de precaución adicional en caso de que falte algo aquí o allá como parte de la así que si echamos un vistazo a esto, confirmado, todo el sitio ahora está en la misma fuente que he seleccionado Así es como comprobó el modelo de IA, no solo globo ocular. Genial. Te mostré los pasos para la confirmación. Esto te da otra capa de confianza de salida en lugar de tener que simplemente, echar un vistazo a cada línea de fuente por sí misma, eres capaz de aplicar la táctica y luego hacer que el modelo de IA confirme exactamente la salida en caso de algún error, y tu tarea sería simplemente verificar y confirmar de una manera muy sistemática 16. Agregado de imágenes: Y bienvenidos de nuevo. Ahora, llevemos nuestras habilidades de desarrollo web, habilidades desarrollo web front-end a una altura completamente nueva mediante el uso de tela. Por lo general, cuando se trata de algún sitio web, especialmente desde el punto de vista empresarial, punto de vista creativo, necesitamos agregarle algún tipo de archivos, ¿ verdad? De vez en cuando. Por ejemplo, si recuerda, como parte de nuestra acumulación, hemos creado una galería Entonces esto es algo típico de cualquier individuo creativo. Estás trabajando en tu cartera, estás mostrando tu negocio, o estás trabajando como parte de una empresa Te gustaría exhibir tus productos. Esta conferencia actual te ayudará a inspirarte para mostrarte lo fácil que es agregar tu propia entrada única y actualizar el sitio web en un par de clics. Como parte de la acumulación para el proyecto, hemos agregado inicialmente algunas entradas contextuales como parte de la acumulación inicial Sin embargo, si nota, por ejemplo, tenemos ciertos marcadores de posición aquí para futuras adiciones como parte de la creación del sitio web. Podría agregar una foto, por ejemplo, una mesa de comedor o comedor, agregar otra foto sugerida por Claude, cruasanes frescos, agregar una foto verter sobre barra, puntuación de masa agria En el mostrador de la apertura, asiduos de la comunidad Esto es muy potente, y todos ellos, se alinean perfectamente con una panadería y una cafetería, ¿verdad? Así que puedes ver todos estos elementos típicamente en cualquier cafetería o cualquier panadería, donde tienes cruasanes frescos, tienes una masa agria Tienes un café vertido sobre la barra. Te conseguiste un mostrador en la apertura. Entonces es muy, muy realista en el sentido de que estamos obteniendo la salida. No obstante, si quisiera agregar alguna entrada de mi lado, derecho, como parte de la adición que estoy agregando a Claude, voy a, por ejemplo, digamos, me gustaría agregar un par de imágenes basadas en esta hipotética panadería Entonces en esta etapa actual, le voy a decir a Claude que agregue las siguientes imágenes a la galería. En pocas palabras, y siéntete libre de aplicar esto a tu propia situación única. Voy a agregar, por ejemplo, una imagen de una taza de café, imagen de pan, adicional u otra imagen de pan, y podrías agregar cualquier elemento contextual con el que te gustaría actualizar tu sitio. Esta podría ser tu propia obra de arte única, los proyectos de tu empresa, la inspiración y las ideas son bastante infinitas a la hora de esto. Entonces voy a Claude, agregar las siguientes imágenes a la galería y asegurarme de que estén organizadas manera profesional y eliminar cualquier marcador de posición vacío Digamos que estoy satisfecho con estas imágenes. No necesito tener marcadores de posición adicionales. Simplemente, le diré a Claude, adelante, cargue estas imágenes como parte de mi galería y cualquier marcador de posición en blanco en este momento actual, no veo que haya necesidad de ellas. Por cierto, si te has dado cuenta, Claude cambió el diseño y la personalización en función de la imagen real, los tamaños, las fuentes, la estructura para agregar el atractivo de desarrollo web front-end al resultado real o la salida real que estás obteniendo Puedes ver por aquí, consultar las imágenes subidas, verificar qué archivo subido corresponde a las ranuras reales que tenemos o los marcadores de posición, y Claude comenzará a compilar las imágenes como parte de la galería, y necesitará eliminar cualquier elemento adicional Ten en cuenta, ya que estamos construyendo el sitio web, es posible que veas algunas observaciones de Claude. No obstante, una vez finalizado el diseño, puedes simplemente Claude, eliminar todos estos comentarios. Por lo que los mosaicos están marcados en Foto son marcadores de posición. Entonces le digo a Claude, ¿sabes qué? Ya no quiero tener estos marcadores de posición. Casi he terminado con mi galería, así que no es necesario que tenga estas instrucciones o que tenga estos marcadores de posición en su lugar Muy importante si trabajas como parte de un equipo, ¿verdad? Si tienes un equipo de diseñadores, desarrolladores web front-end, puedes dejarles estos comentarios, agregar una foto para como parte de los marcadores de posición, soltar tus propias imágenes y luego intercambiarlas como parte por aquí, consulta el Read Me para obtener instrucciones exactas Esto es muy poderoso como parte de agencias de diseño o equipos más grandes donde alguien está retomando donde lo has dejado. Así que siempre mantén eso para que como podamos ver por aquí, Claude en realidad está pasando por la acumulación de la galería finalizada, y la misma táctica podría funcionar para cualquier industria en la que estés, ya sea que estés trabajando en cierta industria del arte, industria de la construcción, desarrollo, sea lo que sea, puedes hacer uso de esta táctica de galería para tu trabajo de una manera muy sistemática, y siempre puedes volver a él y luego actualizarlo La galería real al agregar entradas, la misma manera que estoy compartiendo contigo ahora mismo, eres capaz de tener a Claude, tomar estas entradas y organizarlas de manera sistemática. Y también tienes la opción de agregarle animaciones. En lugar de simplemente pasar el cursor sobre las imágenes, le puedo decir a Claude, cuando hago clic en una imagen, puedes convertirla en una carta plegable y puedes escribir una nota en ella basada en las tácticas que hemos cubierto hasta esta etapa actual, que te ayudará a inspirarte al mismo tiempo, equiparte con las habilidades para que maniobres tu camino a través de tu propio front-end desarrollo web. Como mencioné, te estoy enseñando estas tácticas, las habilidades, y eres capaz de inspirarte para aplicarlas a tu propia situación única, ya sea a un nivel individual específico o una combinación de ellas. Podrías agregar gráficos por aquí. Podrías agregar animaciones. Podrías agregar imágenes, y luego podrías combinar todo junto. Entonces Claude por aquí, como pueden ver, está parpadeando la salida, lo que indica que casi se termina con los Como puedes ver, por cierto, si tuviéramos que hacer esto manualmente, echa un vistazo a la cantidad de esfuerzo que necesitamos invertir para poder hacerlo, redimensionando, ajustando, envolviendo, marcos, lista continúa. Entonces, si has hecho este manual, esta no es una tarea fácil. A pesar de que parezca fácil, no lo es. Te tomaré mucho tiempo hacerlo. Entonces Claude está llegando a la etapa finalizada, que está validando el avance como mencioné, puedes mantener esto funcionando en segundo plano si estás trabajando en otra cosa Sin embargo, casi terminamos con la salida, y Claude simplemente está verificando que cada elemento esté perfectamente alineado, lo cual es una gran salida y un gran paso como parte del desarrollo web front-end porque normalmente, cuando agregas tipo de imágenes o elementos externos, tiendes a romper tu tema o tiendes a romper tu diseño Y muchos de nosotros experimentamos esto. Francamente, experimenté esto al construir manualmente un sitio web Que si quieres agregar una imagen, de repente rompes el diseño, y luego intentas averiguar qué pasó o las dimensiones, se ven bastante sólidas en el escritorio. No obstante, se rompen en el móvil. Entonces todos estos o detrás de escena, bajo el capó, comprobaciones de errores, confirmaciones, Claude está pasando por ellos para eliminar toda la molestia de tratar de arreglar las cosas de un lado a Ahora, examinemos la salida por aquí. Como podemos ver, Claude está haciendo un muy buen trabajo agregando las imágenes que he agregado para integrarse como parte de mi galería. No obstante, como mencioné, no tomamos el resultado directamente antes de obtener la confirmación de que todo está listo, luego saltamos a verificar realmente la salida de Claude, lo cual es muy importante y muy necesario para evitar tratar con resultados incompletos. Sin embargo, desde un primer vistazo, podemos ver que hemos agregado las imágenes por aquí, y Claude las ha arreglado y estructurado para asegurarse de que todo se vea bastante elegante y profesional. Y adivina qué? Se han eliminado todos los marcadores Se han eliminado las instrucciones de cómo usar los marcadores Este es un paso avanzado a medida que avanzas sobre la finalización de tu diseño Estás dando forma a todo el sitio web. A se están quitando los comentarios. Y como puedes ver por aquí, tenemos una galería muy bonita, incluyendo algunas imágenes relacionadas con el contexto y el caso hipotético que nos ocupa, que es una cafetería y una panadería Y entonces somos capaces de navegar a la pantalla de inicio. Todo está bastante en línea. Hemos añadido algunos gráficos. Hemos agregado algo de integración para la navegación. Tenemos algún tipo de elementos de menú hipotéticos. Todo parece bastante organizado y sistemático. Y cualquier elemento, por cierto, basado en las tácticas que te estoy enseñando, eres capaz de actualizarlo en base a tu propia preferencia. Y este es un sitio web elegante muy potente, por cierto, en el que eres capaz de inspirarte. Hemos creado un sitio web de varias páginas. Normalmente, esto te llevará un par de semanas de trabajo si estás construyendo esto desde cero, asegurándote de que estás codificando, y estás tratando de poner todo al día y funcionando, ¿verdad? no hablar de los errores, los descansos que pueden ocurrir mientras intentas actualizar las cosas aquí y allá, no, siguiendo las tácticas en este momento, podemos mantener todo compilado como un solo proyecto al que siempre podríamos referirnos. Esta es una de las lecciones más importantes que necesitas entender como parte del curso actual. No es simplemente una interacción de un solo chat lo que estás tratando con Claude en este momento. No, en realidad estás pasando por un proyecto completo construido con Cloud. Esto es muy crítico a tener en cuenta, porque si lo estás haciendo profesionalmente, posible que necesites referirte a tu diseño anterior, realizar algún tipo de ediciones Necesitas hacer algún tipo de cambios, o detectas un error en alguna parte, o si lo estás haciendo profesionalmente como parte de tu empresa o como parte de un estudio de diseño, por ejemplo, tu cliente menciona que necesitamos una actualización. No necesitas pasar por esto desde cero cada vez. No, tienes la opción de simplemente subirte al proyecto y personalizar todo lo que te gustaría personalizar en base a las tácticas que has aprendido hasta esta etapa actual, cual es muy poderosa y te brinda una gran complementación a tus habilidades de desarrollo web front-end Podemos ver por aquí, Claude simplemente está finalizando toda la salida No obstante, desde un primer vistazo, puede ver que Claude entendió el objetivo final que estamos tratando de lograr. Hemos conseguido las imágenes en su lugar, y es simplemente cuestión de un par de segundos antes de que Claude realmente finalice los resultados y confirme que todo está perfectamente alineado Así que podemos ver exactamente hacia dónde se dirige Claude. Entonces esto completa el resultado real de la lección actual, y eres completamente capaz de aplicar simplemente estas tácticas. Tenemos las imágenes en su lugar, y los marcadores de posición se han ido, y mi galería está bastante intacta, y simplemente tengo la opción para futuro sabio de seguir agregando imágenes, eliminando imágenes en función de mi preferencia Entonces puedes usar las tácticas, estas tácticas para ayudarte a integrar elementos externos como parte de tu sitio web, ya sea que estés agregando un determinado proyecto o una determinada imagen o un cierto Yo o una determinada obra de arte con la que estés trabajando. No es necesario simplemente saltar sobre el creador de sitios web real y seguir cargándolos uno a la vez. No, puedes hacerlo con un par de clics. Y aquí vamos. Esta es la reconstrucción final, y Claude simplemente está confirmando que el sitio web está listo. A pesar de que tardó un par de segundos extra en finalizar el resultado, en comparación con, por cierto, un par de días de trabajo, porque lo que está pasando bajo el capó de Claude, si te darás cuenta, está haciendo muchas ediciones para confirmar, en base a la estructura que hemos seguido que el diseño está listo porque al final de cada iteración, extra en finalizar el resultado, en comparación con, por cierto, un par de días de trabajo, porque lo que está pasando bajo el capó de Claude, si te darás cuenta, está haciendo muchas ediciones para confirmar, en base a la estructura que hemos seguido que el diseño está listo porque al final de cada iteración, parte de sólido tácticas de ingeniería rápida, estás obteniendo el código del sitio web actualizado y el paquete completo en el sitio web, lo cual es muy crítico Entonces, todas estas adiciones detrás de escena para el código HTML, el CSS, el diseño, la estructura, el dimensionamiento y mucho más Cloud está manejando. Por lo que en esta etapa actual, somos capaces de integrar imágenes y elementos externos adicionales para ser incorporados a nuestro sitio web a través de la Nube. 17. Cambia los temas del diseño de sitios web: Y bienvenidos de nuevo. ¿Crees que terminamos? Por supuesto que no. Vamos a elevar su desarrollo web front-end, habilidades de IA y llevarlo a un nivel completamente nuevo Ahora bien, en esta conferencia actual, voy a mostrarles una muy poderosa pero a menudo se considera un paso problemático dentro del desarrollo web front-end, que está cambiando el tema Cuando se trata desarrollo web front-end, por lo general, si tuviera que cambiar el tema del sitio web actual, a menudo, esto es algo que muchos desarrolladores web front-end se alejarán cuando están tratando porque esta es una receta para romper todo el No obstante, voy a estar mostrándote las tácticas ahora mismo. Cómo vamos a tener a Claude, seguir adelante y alterar el tema para todo el sitio web una manera muy estratégica. Le voy a decir a Claude, me gustaría cambiar todo el tema para el sitio web. Sugerir diferentes opciones de tema, incluyendo colores y diseños una manera interactiva para que yo elija el adecuado antes de la migración y me asegure que es muy crítico mantener una copia del sitio web actual, construir para volver a Entonces, ¿qué haría esto? En primer lugar, estoy creando una copia de seguridad a través de Claude para mi sitio web actual por si me gustaría extraerlo de nuevo. Esta es una táctica muy avanzada que muchos no están familiarizados Estoy utilizando a Claude, más un motor de respaldo para mí. Y le digo a Claude, ¿sabes qué? Voy a explorar múltiples temas desde el sitio web. Adelante, muéstrame estas opciones, pero al mismo tiempo, asegúrate de conservar el trabajo que hemos realizado. Eche un vistazo a la salida para que Claude esté pasando por el proceso, pensando en presentar diferentes opciones interactivas de sitios web para su comparación. Está construyendo esta función interactiva por aquí. Entonces guardará todo, antes que nada, guardará todo el archivo como copia de seguridad y luego me mostrará esos temas. Así que comencemos haciendo una copia la construcción actual para que siempre puedas revertir. Entonces voy a armar opciones de tema interactivo para que las compares. Ahora bien, normalmente, esta es una tarea bastante compleja. Si lo piensas desde punto de vista manual, es bastante exigente. Entonces, una vez que estamos tratando con un modelo de IA, está bien si lleva más tiempo de lo habitual porque la tarea exige más en comparación con lo habitual. Entonces, básicamente, Claude, basado en la tarea, podría variar en cuanto a la duración de la salida. Puede que te lleve un par de segundos, a veces puede tardar un par de minutos, lo cual está perfectamente bien, dependiendo de la compilación y la tarea. Echemos un vistazo a esto. En primer lugar, respaldo, confirmado y guardado. Así que estamos bien para ir a tratar de experimentar con diferentes temas. Construyamos una comparación interactiva de temas. Este es el actual de aquí. Bien. Entonces conseguimos uno diferente. Minimalista moderno. A mí me gusta este. ¿ Qué tal este de aquí? Moody exclusivo, pastel suave, audaz contemporáneo. Cada tarjeta muestra una vista previa de la misma estructura. Sin embargo, tenemos diferentes temas. Entonces tu respaldo ya está guardado. La panadería caliente actual construye las cinco páginas. Todo está bastante en línea y con cremallera, listo para funcionar. Entonces digamos, antes que nada, le puedo decir a Claude, bueno, no me gusta ninguno de ellos. Adelante, sugiera otras opciones. No obstante, me gusta este tema actual de aquí. Entonces le voy a decir a Claude, adelante, usa esto. Aquí vamos. Entonces esto es muy importante porque esto le dirá a Claude, ¿ sabes qué? A mí me gusta este tema. Adelante y reacondiciona todo el sitio web por completo. Si tuvieras que hacer esto, por cierto, de forma manual, te encuentras con el riesgo de romper el sitio web. Como lo he hecho manualmente en múltiples ocasiones, pasar de un tema a otro es suficiente para destruir todo el trabajo que estás teniendo y buena suerte tratando de encontrar los eddors aquí y allá Entonces estamos pasando por alto toda la opción. Elegimos un tema muy agradable, y simplemente le digo a Claude, adelante. Cambia todo el arreglo para el sitio web actual en función del tema que tengo en mente, y siéntete libre de incorporar por cierto elementos de marca, basados en el tema que tengas, si estás trabajando en un determinado sitio web, tu sitio web actual, puedes agregar tus propias paletas de colores, tus propias preferencias de tema De esa manera, podrás tener ediciones, que imitan completamente tu sitio web actual Echemos un vistazo a los comentarios de Claude. Hagámoslo correctamente. Primero, una auditoría completa de las hojas de estilo de referencia de cada color, exactamente lo que necesita hacer manualmente. Claude lo está haciendo automáticamente. Entonces está pasando por todas estas ediciones para asegurarse de que no pierde Todo se va a actualizar para reflejar tu propio tema único y personalizado, por cierto. Y una vez que cambies el tema, podrás pasar por las tácticas que hemos cubierto agregando gráficos, animación, imágenes. Depende completamente de ti. Por lo tanto, esta es una adición muy poderosa a tener en cuenta para ayudarlo a elevar sus habilidades de desarrollo web front-end front porque todo lo que normalmente necesitaría hacer manualmente, le estoy enseñando una manera utilizar la IA para hacerlo en su nombre Entonces, si no tienes idea de cómo codificar, eso está perfectamente bien. Eres nuevo en el desarrollo web front-end. Eso está perfectamente bien. trabajando como parte de una empresa. Estás trabajando en un proyecto, estás trabajando en un negocio, Wever que sea, las tácticas que te estoy enseñando te ayudarán a elevar tus habilidades de creación de sitios web, especialmente las habilidades de desarrollo web front-end, porque este es el núcleo de lo que estamos haciendo como parte de la lección Entonces, como puedes ver por aquí, Claude ha identificado todas las paletas de colores y las está arreglando o reemplazando por las paletas de colores alternativas en función de mi preferencia, teniendo en Esto es simplemente para fines de demostración. Prefiero el tema actual, los colores se alinean perfectamente con el hipotético negocio actual Sin embargo, para que entiendas las diferentes opciones en términos de la salida que estás obteniendo porque no estás simplemente confinado a la salida que estás obteniendo de Claude como no realmente. Tienes la opción de agregar tus propias preferencias, alterarlo, modificarlo hasta que termines con el resultado que prefieres y te sientes bastante cómodo con tener Todo el propósito es que obtengas la salida, que refleja tu verdadera visión la manera más sistemática posible. Ahora, como Claude está finalizando la salida, echemos un vistazo a la inicio real porque generalmente es aquí donde se ve el mayor barrido en términos de los cambios Y si quisiera cambiar una imagen, digamos la imagen del héroe de fondo, simplemente podría decirle a Cloud, ¿ sabes qué? Cambia esta imagen. Podría subir algo si quiero. O si tengo un gráfico en mente, puedo bosquejarlo en una hoja de papel. Toma una captura de pantalla de mi sitio web actual, y luego tengo la opción de subirla y decirle a Cloud, Sabes qué, agregarla a la compilación actual, también. Entonces estas son tácticas muy poderosas que eres capaz integrar como parte de tus actividades. Ahora, examinemos la etapa en la que se encuentra Cloud. Como puedes ver, es una gran construcción, definitivamente, porque estamos actualizando un tema completo, un tema completo. Y por eso al inicio de la clase actual, te lo dije, esto es algo que muchos desarrolladores web front-end se alejan cuando están tratando de hacer porque no tienes idea si el tema podría romper tu Sin embargo, estamos pasando por alto todos estos temas de una manera estratégica Como podemos ver, estamos en la etapa final de validación, y francamente hablando, me gusta el nuevo tema aún más en comparación con el tema anterior Esto es muy elegante, muy profesional. Podemos ver que todo está bastante alineado, y tenemos el paquete finalizado por aquí, que es la carpeta zip lista para funcionar. Y siéntete libre de hacer una pausa en cualquier momento. Digamos que si eres desarrollador web front-end profesional, para ver exactamente qué está haciendo Claude, para derivar la salida, que es algo que debes hacer de vez en cuando para asegurarte de que le estás dando suficiente supervisión humana Esto es muy crítico porque al final del día, tú eres el responsable del resultado que estás obteniendo de cualquier herramienta de IA. Ahora, como puedes ver por aquí, echa un vistazo al diseño, muy moderno, muy elegante. Todo se ha actualizado de manera bastante hermosa. Déjame examinar los menús. La navegación está funcionando. Y normalmente, cuando estás tratando con el tema, eso es lo primero que podría romperse como parte del proceso. Todo parece bastante sistemático. Déjame echar un vistazo a la galería, por ejemplo. ¿Qué tal eso? Aquí vamos. Excelente. Todo está bastante alineado. Tenemos bonitas características integradas. Y en esta etapa actual, tenemos una compilación muy poderosa para nuestro sitio web, y simplemente podemos inspirarnos para actualizar los colores, los temas, agregar gráficos, agregar imágenes cuando se trata tus propias habilidades de desarrollo web front-end Si has seguido hasta esta etapa actual, en base a lo que te he enseñado, eres capaz de llevar todas tus habilidades y llevarlas a un nivel completamente nuevo. 18. Implementa el diseño de sitios web por medio de Claude: Y bienvenidos de nuevo. Entonces, una vez que vamos a finalizar nuestro sitio web, es el momento de implementar y lanzar el sitio web Esto es muy útil si estás tratando de mostrar tu trabajo, si estás trabajando como parte de un equipo, o estás tratando de mostrarle esto a tu cliente, es muy útil lanzarlo directamente dentro de Cloud. Sí, me escuchaste bien. Puede implementar su sitio web, su sitio web directamente en vivo en Internet directamente desde la nube. Como mencioné, actualmente estamos lidiando con el desarrollo web front-end Entonces, si estás haciendo esto como parte de tu trabajo creativo, estás tratando de finalizar el diseño front-end antes seguir trabajando en tu Siempre ten en cuenta que sí tienes la opción de lanzarlo directamente dentro de Claude para ver cómo funciona también. Entonces, ¿cómo haces con esto? Simplemente navegue hasta la esquina superior por aquí. Haga clic en el menú desplegable. Tienes la opción de descargar esto como un archivo HTML. También, podrías agregarlo al proyecto. Esta es una de mis preferencias y tácticas favoritas. Una vez que hayas terminado con esta compilación, agrégala a tu proyecto en el que has estado trabajando. ¿Por qué? Porque esto entrenará a Claude para futuras ediciones. De esa manera, no tienes que empezar de cero. No, Claude tiene un proyecto completo que construye contigo para consultarlo para futuros adits. Esta es una táctica muy poderosa que elevará tu ahorro de tiempo, te ahorrará esfuerzo, elevará tus habilidades y la salida cada vez que uses el proyecto una y otra vez Y luego tienes el largometraje, que te estoy hablando, que es publicar el sitio web como artefacto Una vez que hagas clic en esto vas a tener la URL real del sitio web. Y una vez que hagas clic en publicar y Copyink por defecto, tu sitio web estará en vivo en Internet Puedes compartirlo con tus compañeros, compartirlo si estás mostrando tu propio portafolio en tu sitio web, por ejemplo, si lo estás agregando como una página extra en tu sitio web, o si estás tratando de mostrar esta actividad como parte de tu cliente, las aplicaciones son infinitas. Vamos a dar click en esto, publicar y Copiar Enlace. Ahora tardará un par de segundos en cargarse. Tengo la opción de incrustar todo este sitio web en alguna parte. Es muy útil si estás creando, por ejemplo, una pequeña pantalla dentro del sitio web, o tienes una página dedicada en tu propio sitio web actual y te gustaría agregar esto como una adición a la misma. Como mencioné, las aplicaciones son bastante infinitas. Tengo la opción de despublicar esto si me gustaría hacer algún tipo de trabajo adicional al respecto Ahora echemos un vistazo al resultado final, y aquí vamos. Este sitio web ya está en vivo en Internet. Mira lo poderoso que es esto. Tenemos la página Acerca de nosotros. Aquí vamos. Tenemos el menú. Excelente. Todo está aquí. Tenemos la galería. Todo está funcionando perfectamente bien. Como puedes ver, es un sitio web completo en funcional que pudimos construir directamente. Y Mi se han dado cuenta, una vez que haces clic en alguno de estos íconos de navegación por aquí, tienes este mensaje. ¿Por qué? Porque estamos lanzando esto en Internet dentro de Claude. Entonces seguirá recordándonos, ¿sabes qué? Estás a punto de dejar a Claude para poder acceder a esto. Entonces esto es algo a tener en cuenta, porque como mencioné, lo estamos construyendo como parte de Claude, ¿verdad? Entonces, una vez que lo haces y navegas por diferentes partes del sitio web, ya que está en vivo en Internet, lo que hace es que nos está diciendo, ¿sabes qué? Ahora es externo. Ya no está en Claude. Así que tenlo en cuenta si deseas navegar a este sitio web. Bueno, no cambia nada. Francamente, hablando, todavía está obteniendo un sitio web completo en funcional completamente desplegado en Internet Tienes la opción de compartir el enlace, tienes la opción de copiar este código e incrustarlo en tu sitio web, y las aplicaciones como he mencionado, son bastante infinitas. 19. Otras opciones para el despliegue de sitios web.: Bienvenido de nuevo. Ahora, voy a estar mostrándote otra opción muy poderosa para desplegar y lanzar tu sitio web. Si recuerda, simplemente hemos lanzado nuestro sitio web como un artefacto dentro de Claude Está completamente en vivo en Internet, y luego podemos compartir el enlace, incrustar el código. Las aplicaciones, como mencioné, son bastante infinitas. Digamos, si estás, por ejemplo, tratando de obtener este sitio web y llevarlo a tu propio alojamiento actual o estás tratando de llevarlo a tu propio creador de sitios web actual para implementarlo allí. Entonces, ¿cómo harías con esto? Este es el resultado central de la conferencia actual. Te voy a mostrar cómo simplemente le dices a Claude que te prepare un paquete completo listo para llamar de esa manera, simplemente estás descargando e implementando de la manera más rápida posible sin necesidad de una mayor intervención Entonces se lo voy a decir a Claude. Me gustaría que el sitio web estuviera disponible como un paquete completo listo para usar, incluyendo imágenes y gráficos y características que hemos construido. ¿Por qué? Porque no quieres que Claude, que es algo que le podría pasar, por ejemplo, a las imágenes de la galería o las imágenes de fondo reales para dejarlas atrás. Podría darte un marcador si eres, digamos, un desarrollador web front-end profesional, sabes codificar, estás de acuerdo con Usted es capaz de simplemente tomar el código, seguir adelante e implementarlo en su sitio web y su alojamiento web. O tu creador de sitios web, y luego agregas manualmente las imágenes. Esa es una opción. No obstante, no prefiero esa opción. Me gustaría tener un full on build in Cloud. Simplemente tomo la salida completamente, y luego la despliego completamente sin ninguna acción intermedia en el medio. Entonces me gustaría que el sitio web estuviera disponible como un paquete completo, listo para usar, incluyendo todas las imágenes y gráficos y características que hemos construido de tal manera que el archivo esté completo y nada que necesite más acción. Y asegúrate de que el archivo sea compatible con creadores de sitios web externos y hosting. Entonces esto etiquetará a Cloud. ¿Sabes qué? Compilar todo como un paquete completo y confirmar que todo lo que hemos creado y agregado, incluyendo imágenes, gráficos en la lista continúa, es parte del archivo listo para usar. Y lo más importante, debes asegurarte de que el archivo que vamos a obtener de Cloud sea compatible con creadores de sitios web externos y alojamiento, porque si lo estás usando, parte de tu alojamiento web actual o tu creador de sitios web actual. Hay muchos constructores. Hay muchos proveedores de hosting. Sin embargo, esto podría variar de alumno a alumno, de profesional a profesional, de estudiante a alumno Tenemos que asegurarnos de que Claude sea capaz de darnos el resultado, que es fácilmente mapeable a cualquier situación en la que estés lidiando Entonces, al agregar este prompt actual, cualquier compilación que estés teniendo por aquí, simplemente le estás diciendo a Claude como parte de la aplicación de desarrollo web front-end Consígueme el resultado completo tal cual, porque me gustaría tomar el sitio web actual que hemos construido y tomarlo e implementarlo como parte de mi proveedor de alojamiento, mi creador de sitios web, o cualquier otro tipo de servicio adicional que pueda tomar su código actual e implementarlo como un sitio web en vivo. Hay muchos de ellos por ahí. La lista es extensa. Siéntase libre de hacer su propia investigación, por cierto. Usted es capaz de detectar muchas de estas opciones que son completamente accesibles, donde se toma el archivo HTML completo que ha creado. Literalmente, lo arrastras y lo sueltas y tienes la URL de tu propio sitio web, y puedes agregar tu propio dominio único. Entonces esta es una especie de actividad que puedes hacer por ti mismo, pero te estoy mostrando cómo llegar a ese punto simplemente teniendo el archivo listo para ir completamente descargable, eres capaz de utilizarlo en función de tus circunstancias Si vas a aplicar esto a tu propio alojamiento web, esa es una opción para tu propio creador de sitios web parcialmente. Esa es otra opción. Vas a encontrar uno de estos servicios donde simplemente arrastras y sueltas tu archivo HTML, por ejemplo, el archivo que hemos conseguido por aquí, que es más que suficiente. Déjame mostrarte el archivo que podrías usar. Digamos que este archivo actual, el código HTML, o simplemente puede descomprimir el archivo, tomar el código HTML también, y simplemente puede implementar el sitio literalmente arrastrando y soltando el Tomas el código, lo arrastras y sueltas en cualquiera de esos servicios directos de almuerzo, y tienes tu propia URL, y tu sitio web es completamente accesible en línea. No obstante, como mencioné, estamos tratando con el desarrollo web front-end del sitio web Y hay otros componentes que van con full on web development, obviamente. Front-end es un segmento, sin embargo, tienes el back-end para otro segmento Y como parte del curso actual, estamos tratando únicamente con el desarrollo web front-end Por lo tanto, es muy importante tener esto en cuenta porque las tácticas que te estoy enseñando pueden ayudarte a mejorar tu sitio web actual, diseñar un sitio web completo desde cero, exportar todos los resultados para una mayor edición, pero siempre ten en cuenta, que cuando estés lidiando con estos resultados y los resultados del modelo de IA, debes asegurarte de que la salida está en línea con tu propia situación única a través de la aplicación de las tácticas que te estoy enseñando. Entonces, hagamos esta producción genuinamente lista. Trabajaré a través de varias brechas reales, compatibilidad de carga frontal con constructores de sitios web, formulario de contacto de trabajo con una configuración cero requerida. Como puedes ver por aquí, por ejemplo, un típico formulario de contactos, eres capaz de diseñarlo desde el front-end, pero obviamente, necesitas conectarlo para una base de datos desde el back-end Entonces esto es algo que no es como parte del alcance del que estamos hablando o que estamos tratando. Como mencioné, solo nos estamos enfocando en el desarrollo web front-end únicamente Así que tenlo en cuenta a medida que avanza sobre su propia aplicación única. Sin embargo, Claude es muy consciente de esto, y está tratando de minimizar cualquier problema de compatibilidad, cualquier problema que pueda surgir a medida que avanza por ese paso o a través de esa integración, cual es algo muy poderoso a tener en cuenta a través del prompt actual. Necesitamos el paquete para nuestro diseño web front-end sea compatible, sea fácilmente personalizable y transferible. Y luego depende completamente de usted cómo lo tomaría a partir de ahí, su propio alojamiento, su propio servicio de almuerzo directo, su propia conexión de back-end, sea lo que sea. Eres capaz de tomar la salida y luego alterar la salida en función de tu propia situación única. Y como podemos ver por aquí, Claude lo está verificando todo. El código HTML, el archivo CSS, los encabezados, las imágenes, la navegación, los gráficos, las fuentes, todo como básicamente un listo para usar, listo para exportar, listo para desplegar diseño front-end para el sitio web Ahora bien, esto es muy importante como parte de tus opciones a la hora de implementar tu sitio web. Y obviamente, varía en función de la naturaleza del sitio web. Entonces, si tienes un sitio web, que no tiene ningún requisito de formularios o integración de back-end. Simplemente puedes lanzar esto sobre la marcha. Sin embargo, como mencioné, estoy compartiendo con ustedes las diferentes opciones que tiene, incluyendo adiciones más avanzadas. Usted es capaz de utilizar la salida para facilitar ese proceso. Sin embargo, según tu situación, si no necesitas ninguna de estas características adicionales, puedes lanzar tu sitio web directamente, ya sea como mencioné a través de Cloud como artefacto, o puedes tomarlo como un archivo de salida listo para enviar, puedes implementarlo directamente como parte de tu creador de sitios web, tu alojamiento web o cualquiera de estos código directo código HTML para vivir los servicios del sitio web por ahí. Te toma un par de minutos simplemente investigar para poder identificar los que mejor se ajustan a tu aplicación. Sin embargo, como parte del resultado de la lección actual, te estamos dando el producto final, el resultado final, el resultado final, que es un sitio web completo diseñado. Y el resultado y las lecciones que has aprendido de él para personalizar la salida en función de tu propia situación única, en base a tus propias circunstancias únicas. De esa manera tienes el conjunto de habilidades, tienes la experiencia, no simplemente para quedarte atascado. Basado en tu propio resultado. No, tienes las herramientas y tienes el know how, y tienes las demostraciones para mostrarte exactamente paso a paso cómo realizar el proceso. Ahora, dicho eso, Claude está ultimando todo. Está recorriendo todas las páginas, como podemos ver. Es personalizarlo todo, y podría llegar a un límite porque es bastante exigente para Claude Simplemente pulsa en Continuar. Y si te encuentras con créditos, simplemente esperarás el tiempo de reinicio y podrás continuar con tu aplicación. No obstante, no hay necesidad de eso en esta etapa actual, y aquí vamos. Nuestro sitio web está completamente listo. Tengo el código HTML que podría descargar y puedo implementarlo como parte del HTML para vivir los servicios del sitio web. Siéntase libre de explorar diferentes opciones. Siéntase libre de investigar diferentes opciones si eso se alinea con los requisitos O simplemente puedo hacer clic en Descargar completo en archivo zip. Incluye todo lo que estoy viendo y todo lo que hemos construido a partir de ATZ Puedo tomar esto como parte de mi alojamiento web como mi sitio web actual para su posterior edición, o simplemente puedo llevarlo a un creador de sitios web y cargarlo directamente. Las aplicaciones son infinitas y puedes simplemente tener estos resultados listos para funcionar según tus propias preferencias. 20. Conclusión: Entonces, ¿qué opinas? ¿Impresionante? Realmente espero que la clase te haya resultado bastante útil, te haya ayudado a inspirarte, incluso subir de nivel tus conocimientos al menos en un 1%. Es un trabajo bien hecho. Espero recibir tus comentarios sobre la clase de tarjetas y asegurarme de que sigas mi perfil para conocer los últimos lanzamientos y actualizaciones, y te veré en la siguiente clase.