Una mañana tranquila conmigo (creando mi propia web) 🍃🌷

(música) Creo que hacía meses que no grababa en fin de semana. De hecho, creo que no lo hago desde que dejé mi otro trabajo. Pero bueno, hoy realmente me apetecía grabaros este vídeo que ya veis que va a ser muy tranquilo, muy chill, muy a mi estilo de "Creamos cositas juntos mientras tenemos una charla". Sí, vamos a pasar la mañana juntos diseñando mi propia web. Y es que bueno, para ponerte un poco en situación, hace unos meses compré el dominio judithway .com básicamente porque quería un email un poquito más profesional y quería que acabara con judithway.com, así que me compré el dominio. Pero para los que estáis en Hero Hero, me seguís en mis otras redes sociales como Instagram o directamente estáis suscritos al canal, ya veis un poco el ritmo frenético que tenemos últimamente con la creación de vídeos. Y la verdad es que no he parado, estoy un poco hasta arriba. Y como digo, he ido posponiendo esto de crear la web. Bueno, ya sabéis que yo sí que creo en las casualidades y hace un par de días me escribieron los chicos de Hostinger para preguntarme cómo iba mi web. Y les dije eso, que yo es que no tengo tiempo para dedicarle, no sé, seis horas a la creación de la web. Y vaya, me retaron a poder crearla dentro de Hostinger porque me dijeron que era rapidísimo y que además utilizaba inteligencia artificial para que el proceso aún fuera más pim pam, cosa que es ideal para personas como yo que nos da bastante pereza todo este proceso. Así que eso es lo que vamos a hacer hoy. Tengo por aquí el iPad porque quiero diseñar primero un poquito cómo me imagino la estructura de la web y después dentro de Pinterest me he guardado algunos tableros, bueno, algunas imágenes de cómo me lo imagino en cuanto a distribución y también en colores. Es mi primera vez creando una web desde Hostinger así que se me ha ocurrido que, ya que querían patrocinar este vídeo, sería muy buena idea el poder enseñarte el paso a paso, el cómo lo voy a crear literalmente porque pretendo hacerlo de forma rápida. Así que creo que es ideal para todas aquellas personas, sobre todo que no tengáis nociones de diseño web ni tampoco programación, ya que, como te he dicho, en principio va a ser un proceso súper fácil. Así que voy a documentar este proceso y a ver qué sale. Te prometo que no sé cómo va a salir esto, pero bueno, vamos a empezar. Aquí tengo todas estas referencias de Pinterest que te he dicho y la verdad es que me gustan bastante, pero hay una, esta de aquí, como veis, esta de aquí sí que es por folio y creo que directamente tal vez no la estética exacta, pero más o menos es lo que quiero conseguir. Así que, nuevo documento de GoodNotes, vamos a empezar a diseñar un poquito la estructura. [Música] Vale, ya está. Ya tengo toda la estructura de la web por aquí. De hecho, para agilizar un poquito el proceso, lo que he hecho es hacerlo desde GoodNotes, como habéis visto, y ahora con la herramienta de seleccionar lo he copiado y lo he pegado en el MacBook. Ya sabéis que yo la herramienta que utilizo es Figma y aquí es donde he plasmado esta inspiración de Pinterest. He copiado lo que he diseñado ahora desde el iPad y ahora lo que voy a hacer es básicamente diseñar todos estos banners que he marcado aquí que quiero cómo hacer de separadores y también sacar la paleta de colores directamente desde aquí, desde Figma, para que luego nos sea muchísimo más sencillo. [Música] Vale, pues ahora sí que sí, ya lo tengo todo diseñado, así que vamos a empezar a plasmarlo todo en Hostinger. Sinceramente, he aceptado trabajar con Hostinger porque me pareció que la plataforma era súper sencilla, como te he dicho al principio y ahora la veremos, pero también porque tenían unos planes muy económicos y que yo misma me podía permitir. Esta es la que ahora mismo tienen en oferta y es la que yo he elegido, la Business, que como ves, te sale mucho más a cuenta elegir este plan que no el resto, ya que para empezar te regalan dos meses gratis y también te aseguras una tranquilidad de 48 meses cubiertos, cosa que yo agradezco. Si te fijas, cuando lo vamos a contratar, ya nos aplican ese descuento si elegimos este plan de Business y fíjate la cantidad de dinero que te ahorras. Así que lo único que tenemos que hacer es seleccionar el plan, que ya te digo, en mi caso, el de Business, ponemos nuestros datos, yo no lo voy a hacer porque ya lo he comprado, y ahora cuando lo tengamos ya podremos acceder a la plataforma. Así que aquí estamos. Yo cometí el error de comprar primero el dominio aparte porque me quería directamente solo crear un email y luego entré en Hostinger. Por lo tanto, el dominio lo he tenido como que importar en Hostinger, así que si es tu caso, si ya tienes tu web creada o tienes otro host, no te preocupes porque puedes moverlo todo a Hostinger en un par de clics. Pero si eres nuevo y lo que quieres es empezar de cero con Hostinger, es literalmente así de fácil. Vamos a ir a Sitios web y ahora hacemos clic en Añadir sitio web. Como veis, podemos elegir la opción WordPress o el creador de páginas web de Hostinger, que es justo el que vamos a elegir. Y como ves, también tenemos esta opción que te comentaba ahora de migrar un sitio web. Si viendo estos precios consideras que es justo lo que ya tenías pensado gastarte, que sepas que me han dado un código de descuento por trabajar con ellos. Te explica un poquito la descripción de este vídeo y vas a ver ese código escrito con el enlace. Y es que aplicándolo, aquí viene lo bueno, vais a poder conseguir un 10% adicional a la rebaja. Vaya, que se os queda aún más barato. Y no te voy a mentir, ese código lo he utilizado yo misma para poder comprarlo. Así que lo dicho, lo tenéis en la descripción. Y como te he explicado antes, yo voy a elegir el creador de páginas web directamente de Hostinger. Hacemos clic, yo ya he migrado el dominio a Hostinger, así que simplemente tengo que seleccionarlo. Y listo, ahora ya estamos dentro de la plataforma y en principio es donde Hostinger me ha prometido que iba a ser un proceso rápido y fácil. Obviamente me habéis visto ahora diseñar un montón de cosas, sacar paletas, y es que al final, como sabéis, yo soy diseñadora gráfica y llevo haciendo esto muchos años para otros clientes. Entonces, tengo mínimos conocimientos para poder hacerlo de una forma un poquito más profesional, pero por supuesto, si he aceptado también esta colaboración es precisamente porque entiendo perfectamente que mi público no está tan familiarizado con herramientas de edición y mucho menos de programación. Así que no te preocupes lo más mínimo porque literalmente vamos a hacerlo paso a paso para que veas que aunque no hayas diseñado previamente ni una estructura ni tampoco hayas seleccionado las imágenes o textos, no te preocupes porque, como te he dicho antes, también Hostinger tiene inteligente artificial y puede generarlo por ti. Así que ahora sí, vamos a crear nuestro sitio web. Vamos allá. Vale, aquí lo primero que nos dice es que debemos escribir el nombre de nuestra marca. Recordad que yo voy a hacer más un estilo porfolio, pero a lo mejor tú lo que quieres hacer es crear directamente una página web para tu negocio. Así que yo, en marca, voy a poner mi propio nombre. Aquí sí que podemos elegir qué tipo de web queremos. En mi caso, como os he dicho, voy a hacer portafolio. Fíjate que no es una descripción normal y es que vamos a utilizar la inteligencia artificial. Por lo tanto, quiero que entiendas este proceso como un prompt de chat GPT. Y aquí, como ves, ahí pone "Describe tu proyecto o marca con pocas frases, incluyendo los colores y las fuentes que te gustaría usar". He hecho una breve descripción. Como veis, quiero que sea una web sencilla, fresca, minimalista, con colores neutros. He descrito los colores beige, blanco, rosa pálido, azul bebé, grises y las fuentes que necesito son serif y manuscritas. Vamos a crearlo. Estoy realmente nerviosa. Me hace mucha ilusión porque, ya os digo, las veces que he hecho alguna web, obviamente ha sido como prototipado. Nunca he hecho realmente una web. Básicamente porque en la carrera nos enseñaron WordPress, pero nunca he tenido el tiempo suficiente para dedicarle a aprender realmente WordPress, ya que es un programa... A ver, cuando le pillas el truquito, no tanto, pero no es el típico programa de coger y soltar para que me entiendas. Y si no me entiendes, ahora verás a lo que me refiero. Así que, como he dicho al principio, al final nunca lo hacía por pereza. Vale, nos ha hecho la primera propuesta. Fijaros que si no tenéis una idea muy clara con esta propuesta que ha generado él solo, creo que nos podemos hacer una mínima idea. Pero no es lo que yo estaba buscando. Ojito, las animaciones me gustan mucho. ¿Qué podemos hacer aquí? Bueno, primero podemos volver a hacer el formulario de la Inteligencia Artificial por si no ha hecho lo que tú le habías pedido. También podemos calificar. Y luego por aquí podemos ver... Espero que lo haya hecho. Sí, ha adaptado ya la web a Responsive. Básicamente que se adapta a los tamaños de móvil. Así que que lo haga automáticamente me soluciona varios problemas. Como te he dicho, esta es una primera idea de lo que él ha entendido de lo que queremos, pero nosotros podemos editar el sitio. Vamos a ello. Repito, esta es mi primera vez haciéndolo, así que yo también estoy un poco expectante a ver qué nos enseñan. Vale, esto es lo que he estado diseñando antes. Os lo enseño así un poquito por encima. Ya os aviso, no es un diseño súper currado. Quería algo sencillo, fácil sobre todo y que no me llevara mucho rato. Así que esto es lo que he hecho. Este es el boceto que he hecho antes en GoodNotes. No me tengáis en cuenta la letra, por Dios. Es horrorosa, pero bueno, es un boceto. Y al final de todo esto que he ido poniendo, no ha acabado así, sino que he hecho como un prototipo así, ¿vale? Aquí lo que quiero hacer es un banner que ya lo he diseñado antes, que es lo que habéis visto antes con el iPad que dibujaba. Pues es esto. Quiero empezar con una foto, después mi logotipo y mi nombre. Bueno, Juice Project. Después quiero poner como los seis vídeos más trendy o no sé, más orgullosa que esté ponerlos ahí. Después hacer como una sección como mis imprescindibles de Amazon. Vamos a ver si se puede en esta plataforma, me gustaría mucho. Y esto es básicamente para que tengáis acceso a mis productitos que siempre os voy recomendando en el canal. Después he puesto como un banner que he diseñado antes por aquí de Hero Hero, que ya sabéis que es nuestra membresía privada. Después como separador quiero poner como el banner de mi canal y después ya pues sígueme en otras redes sociales. Así que lo único que tenemos que hacer en principio, en mi caso que ya la tengo diseñada, es copiar y pegar. Por así decirlo. En el caso de que tú no hayas hecho este estudio diseño previo, no te preocupes porque como te digo, lo único que tenemos que ir haciendo es, por ejemplo, elegimos esta sección de aquí y lo que podemos decir es "generar imagen con inteligencia artificial" o directamente "editar la sección". Si le decimos "generar imagen", lo que nos dice es "OK, te escribe las fotos que necesites y las vamos poniendo". Ojito cuidado con este editor. En mi caso, sinceramente voy a borrarlo todo y voy a empezar, como te he dicho, a plasmar todo lo que he diseñado antes. Ahora tengo la página vacía, por lo tanto ya sabéis que a mí me encanta hacer lienzo en blanco y empezamos de cero. Como ya te he dicho, quiero hacerlo súper sencillo y de momento una única página. No me quiero enrollar mucho. Arriba del todo acabo de ver que hay un "sticky bar" que es básicamente la típica línea que arriba pueden poner "promoción" o cosas así. Creo que podemos utilizar esta línea, que no se me había ocurrido, para poner como promoción... Estoy ahora con descuentos de Hero Hero a un euro. Así que podríamos ponerlo algo así. Vamos a intentarlo. El encabezado, vale. La cosa está en que yo no quiero tener navegación porque, como te he dicho, va a ser una única página. Así que lo que voy a hacer es borrarlas. Pero antes de borrarlas, en el caso de que tú sí tuvieras otras páginas, fíjate que es muy sencillo porque arrastramos y movemos y no tenemos que moverlo desde aquí. O sea que... No sé, el editor me parece muy sencillo. De verdad, de corazón, que lo estoy diciendo. Me parece muy sencillo. Veo que tenemos como plantillas. Tanto blog, tienda online... Voy a ocultar esto de inicio. Por aquí, ¿qué hemos dicho? Podemos agregar elemento. Esto me encanta. Podemos poner texto, botones, añadir a la bolsa vídeos. Genial, porque tenemos que poner eso. Y esto me encanta, feed de Instagram. No lo había pensado poner, pero creo que lo vamos a poner. Esto es lo que yo quería encontrar. Tenemos la Inteligente Artificial aplicada, como os he dicho, y podemos utilizarla para generador de imágenes con IA, escritor con IA, generador de páginas con IA, generador de secciones, generador de blogs... Jolín, cuantas cosas. Vale, pues vamos a ello. Voy a añadir una sección. Vale, sí, pues lo más sencillo es añadirlo de momento en blanco. Y aquí, ¿cómo lo hacemos? Configuración... Vale, he visto una cosa. No sé si será así. Pero bueno, aquí veo que tenemos Biblioteca Multimedia. Y aquí es donde podemos subir nuestras imágenes. Voy a seleccionar todas las imágenes que he creado. Vale, pues las voy a exportar y así ya las tenemos y las podemos importar directamente en la biblioteca. Vale, listo, ya tenemos esas cuatro fotos. Por lo tanto, entiendo que ahora yo puedo decirle "Agregar elemento", le puedo decir "Imagen", "Arrastro". Sí, vale, se nos ha puesto una random. Entonces ahora, ¿editamos imagen? Ah, "Cambiar imagen". Seleccionamos esta, que es la que he hecho yo. Se veía un poco pixelada, pero ya está, se ha puesto y listo. OK, vale, esto ya lo tendríamos. Ay, me gusta mucho. Vale, me gusta un montón, ¿eh? Vale, entonces, el color es este de aquí. Entonces voy a cambiarlo porque yo ya tengo el color hecho. Lo ponemos aquí en código hexadecimal. Aceptamos y ya está. ¡Ay, qué mono! Bueno, ya veis lo fácil que es, ¿eh? Añadimos después aquí otra foto, la ponemos debajo. La puedo hacer tan pequeña como quiera. Si voy arrastrándola, como ves, aparecen las líneas para que queden perfectamente alineadas. Seleccionamos esto, que es el lobo. Vale, claro, esto debería ser como mucho más grande. Así, mirad qué monada, me encanta. Me gusta mucho. Vale, yo lo que quiero hacer es poner un vídeo. Voy a ponerlo aquí. Pero lo que no quiero... Mira, así, sí. Enlace del vídeo. Vale, esto es justo lo que estábamos buscando. Duplicar y se duplica rapidísimamente. ¿Veis lo que os decía de las líneas? Es superimportante. Entonces, esto lo voy a pegar aquí directamente. Vale, pues poco más a enseñaros en cuanto a funcionalidades. Creo que queda superclaro que es facilísimo de utilizar. Así que voy a dedicarle, nada, 10 minutos a acabar de ajustar todas aquellas cositas que estoy haciendo. Y cuando acabe, os lo enseño. Bueno, ya la tenemos. Han pasado un poquito más de 10 minutos porque ya me conocéis. Soy demasiado perfeccionista. Y me daba mucho toque dejarla así como medio vacía. Así que, bueno, la he llenado un poquito más. Bueno, te presento mi nueva web. Qué guay. Así ha quedado. Se asemeja bastante a los primeros planos esbozos que he hecho en el iPad. Aquí he puesto una sección de mis imprescindibles. Bueno, os he puesto los productitos que utilizo cada día para crear contenido o en mi día a día. Después, el banner de Hero Hero, que he tenido que corregir la promoción porque han cambiado las bases legales en Hero Hero. No sé por qué. Así que, bueno, que lo sepáis quienes hagáis clic en el enlace de la descripción y queráis ir a ver esta web, que ahora mismo la voy a publicar y, por lo tanto, para ti ya estará publicada. Si deslizáis un poquito, tendréis esta promoción para nuevos usuarios, obviamente, que podréis conseguir entrar en la membresía de Hero Hero el primer mes por 1,25. Y si os gusta, pues nada, bienvenidos seréis a nuestra comunidad. Después he puesto, como te he dicho, el banner a modo separador. Y luego he hecho esto de redes sociales, que, bueno, he puesto Pinterest, que muchas veces me preguntáis. Esto de Spotify es el podcast de Sin Ningún Plan. Ha salido así el icono. Y luego sí que he puesto la cuadrícula de Instagram porque para eso me curro yo el feed de Instagram. Así que mirad qué bien queda con los colores de la web. Me encanta. Si os fijáis aquí, lo único que nos queda por hacer en mi progreso es publicar. Así que es justo lo que vamos a hacer ahora. Pero antes de publicar, comentarte un par de cosas. Y es que, ¿recuerdas antes que te he explicado el tema del responsive, lo del mobile? Vale, pues fíjate que en todo momento, como cualquier editor, podemos estar viendo cómo quedará en esa vista previa, tanto en esta versión ordenador como también en la versión mobile. Si habéis estado haciendo la edición en versión ordenador, es probable que ahora en la vista previa veáis que el teléfono está todo desconfigurado. Pero no os preocupéis porque podéis ir al editor y en cambio de estar editando en modo ordenador, le damos al móvil y aquí podemos reeditar literalmente, ¿vale? O sea, podemos ajustarlo, que de hecho voy a hacer esto, por ejemplo, de una manera rapidísima. Esto no afecta a la edición de ordenador, son como ediciones separadas. Y esto es algo, sinceramente, si habéis hecho alguna web anteriormente o prototipado, sabréis que esto es algo a valorar. La tranquilidad que te da el poder editar una versión ordenador por una parte y la versión mobile por otra, al menos yo lo valoro muchísimo. Yo creo que ahí sí que está perfecto. Ahora ya con la versión mobile revisada, corregida, sí que ya podemos publicar. Así que ahora sí, hemos finalizado. Me hace muchísima ilusión que hayáis vivido este proceso conmigo. Ya os digo, llevaba pues poniendo este momento meses y al final he tenido que poner una cámara y darle a grabar para poder sentarme aquí hoy y sacar estos minutitos para que fuera más productivo, en fin. Millones de gracias por haberte quedado hasta el final del vídeo, por haber vivido este proceso juntos. Espero de verdad que te haya servido a modo tutorial para que veas lo fácil que es crear una página web para tu proyecto o incluso tu portafolio, como he hecho yo. Portafolio, perdón, en español. Y nada más, agradecer también al equipo de Hostinger por ponerse en contacto conmigo en el momento tan preciso de haber comprado yo mi dominio y permitirme traer este vídeo al canal para que más personas como tú puedan aprender una nueva habilidad tal vez. Recuerda que en la descripción tenéis el código de descuento para poder aplicarlo a cualquier plan y de esta manera conseguir un 10% adicional al descuento que puedas obtener en Hostinger. Y nada, millones de gracias. Creo que no me queda nada más que añadir. Sinceramente, estoy muy feliz porque me hayas hecho compañía esta mañana y espero que yo te pueda hacer igual de feliz con este vídeo que está saliendo por aquí, que a lo mejor no has visto y tal vez también te interese. Un besito muy fuerte y nos vemos en el siguiente. Que te aviso que va a ser de aquí muy poquito.