Ejemplos de uso

Recuerdo de amistad: Mándaselo a un amigo con el que has compartido buenos momentos. Cuando abra el archivo, verá el fondo de Inside Out y la esfera con su foto, lo que le recordará los buenos ratos juntos. Podrías agregar un mensaje tipo «Cada vez que pienso en los buenos momentos, siempre te recuerdo. ¡Gracias por estar siempre ahí!»

Reencuentro emotivo: Si tienes un amigo o familiar con el que no has hablado en un tiempo, esto es perfecto para romper el hielo. Al ver su foto en la esfera de recuerdos felices, es casi seguro que le sacará una sonrisa. Podrías acompañarlo con algo como «Aunque no hablamos mucho, siempre te tengo en mis mejores recuerdos.»

Detalle romántico: Si quieres sorprender a tu pareja, este archivo es ideal. Al pulsar el botón, verá su foto en el recuerdo feliz, y el toque de Inside Out le añadirá más sentimiento. Podrías poner algo como «Eres el motivo de muchos de mis momentos felices. ¡Te quiero!»

Tutorial paso a paso

1. Cómo obtener el código
Puedes descargar el archivo HTML y CSS desde el enlace al final de esta página. Guarda el archivo en tu dispositivo para personalizarlo y compartirlo.

2. Cómo modificar el código
El código viene con texto predefinido, pero puedes cambiarlo de forma sencilla. Aquí te muestro cómo hacerlo:

• Descarga el código en tu PC
• Ábrelo con cualquier editor de texto. Recomiendo Visual Studio Code pero si no lo tienes instalado puedes utilizar el Bloc de notas. Para ello haces clic derecho encima del archivo, pulsas la opción ‘Abrir con’ y escoges el programa.
• Busca en el archivo el texto que quieres modificar y reemplázalo por el tuyo.
• Para personalizar la imagen, primero necesitarás convertirla a formato base64. Puedes hacerlo buscando en Google «image to base64». Una vez que subas tu imagen, si es muy grande, puedes reducir su tamaño bajando la calidad, por ejemplo, enviándotela a ti mismo por WhatsApp. Luego, cuando se codifique, simplemente haz clic en el botón «Copy Image» para copiar el código. Este texto largo que se genera tendrás que pegarlo entre las comillas de background-image: url(''); en la línea 25 del código. No te preocupes, en el propio archivo te doy más detalles sobre cómo hacerlo.
• Guarda el archivo antes de cerrar, si no no se aplicarán los cambios.
• Si haces doble clic en tu archivo, se te abrirá con tu navegador por defecto y verás los cambios actualizados.
• Solo te queda enviar el archivo.

3. Cómo enviar el código
Una vez que hayas personalizado el mensaje, simplemente guarda los cambios y comparte el archivo con la persona que quieras. Aquí te doy algunos ejemplos de cómo hacerlo:

• WhatsApp: Envía el archivo directamente como documento adjunto.
• Correo electrónico: Adjunta el archivo al correo y añade un mensaje personal.
• Subir a Google Drive: Comparte el enlace con la persona para que lo descargue.