Nuevo proyecto personal – DEV BLOG #1

Sí, me aventuro en un desarrollo que pretende ser mi primera aplicación pública con la que sin duda voy a sacar provecho. No necesariamente monetario, pero el aprendizaje y el reto que consiste en llevar un concepto desde la mesa de dibujo hasta la publicación final, ya sea exitosa o no, es valioso y me va a otorgar prespectiva de lo que es un proyecto. Voy a experimentar la diferencia entre la expectativa y la realidad, tanto de carga de trabajo, como de resultado final. Creo que este es el proyecto indicado para un comienzo. Una idea simple, rápida de hacer, os la comento:

Hace poco le hice un regalo a una persona especial que vive lejos, por lo que decidí regalarle una pequeña página, hecha en puro HTML, CSS y quizás un poco de Javascript, nada que no se pueda ejecutar con doble click en un .html. La clave era esa, que fuera solo para ella, no quería publicarlo porque era algo personal, y para securizarlo adecuadamente tendría que contratar un cloud service.

Sin más rodeos este vídeo simula algo similar a lo que le regalé, solo que en esta muestra he cambiado el textos y las etiquetas por unos más genéricos de ejemplo:

Bien, os hacéis la idea, un regalo original que la otra persona puede usar en momentos muy diversos y puede que tarde bastante en acabar de abrir. En cada sobre habrá un texto que acompañará a esa persona en malos momentos o que anime más los buenos.

La idea de negocio

Mi idea es crear una página en la cual puedas crear tu propio regalo personalizando el contenido de los sobres, las etiquetas, el título y quién sabe cuántas cosas más. Al acabar y previsualizar el resultado, se ofrece al usuario la posibilidad de generar un enlace personalizado a cambio de un precio muy reducido, que podrá entregar como regalo.

Soy consciente de que no hay mucho público al que le pueda interesar hacer un regalo como este y que dejar que una plataforma se encargue de «fabricarlo» hace que pierda un poco la esencia del detalle de crearlo por tí mismo para una sola persona. Sin embargo no pretendo ofrecer un servicio para que la gente presuma de un regalo «hecho a mano», pienso que el valor de este regalo es lo que tú quieras expresar en esas cartas, y el tiempo que dediques a escribir es lo que valorará el receptor.

El progreso

Hoy es mi primer día, y he dedicado principalmente a configurar el entorno de modo que ¿qué puedo decir? Doy por comenzado el desarrollo. No tengo espectativas de finalizarlo ni pronto ni tarde, faltan muchas características por definir, no sé cuánto tiempo le voy a dedicar a la semana ni cuán fino quiero que sea el acabado.

Habiendo comenzado por hoy, no os voy a mostrar el progreso de la configuración del entorno local ni os voy a hablar de la arquitectura, esos detalles me los reservo para la próxima entrada. En su lugar, os presento una muestra de la animación con la que pretendo que se abran las cartas y que he «programado» con tan solo una pincelada de Javascript, siendo casi enteramente puro CSS.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dato curioso: el Javascript implicado tan solo se encarga de guardar el estado de «abierto» y «cerrado», y de aplicar las clases CSS al hacer click.

He de decir que estoy orgulloso del resultado, aunque es cierto que he de trabajar un poco la parte responsive, concretamente en la parte mobile, y arreglar cosas como abrir la carta sin mucho espacio horizontal, y tener en cuenta que en una pantalla táctil no se va a ver la animación de al pasar el ratón por encima. (La muestra está actualizada)

Esta animación la he publicado como open source y podéis encontrarla en Codepen.

Me despido por el momento, seguiré informando del proceso. ¡Y gracias por interesarte!

Sé el primero en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada.