Este soy yo de pequeño, le tengo mucho cariño a esta foto, me la hizo una pareja de italianos, les hizo mucha gracia ver como jugaba ensimismado con las algas, el agua y las piedras.
Si ahora me viesen mientras estoy programando puede que también me hiciesen fotos 🙂
Imagino que por eso elegí esta misma foto para mi primera entrada en el blog del concurso Dev Art de Google.
Me apunté porque quería saber cuanto había mejorado en diseño y desarrollo web.
En Abril de este año me he vuelto a acordar de aquello, porque aun tenía algo pendiente.
Así que este año por fin me he decidido a cerrar el circulo y terminar lo que había empezado.
Ahora la página es:
- Responsive o adaptable a móviles.
- Y el código que escribí para el concurso está integrado en la cabecera de una de las páginas.
Si tienes curiosidad por ver como ha quedado, encontrarás el enlace al final de esta entrada.
Pero si quieres ver paso a paso como evolucionó el proyecto, y lo que aprendí en cada paso sigue leyendo.
Lo que me gustó de este concurso, es que no sólo tenias que presentar un proyecto, también contaba que fueses publicando tu progreso paso a paso.
Vamos con la segunda entrada y la primera crisis 😕
Primeros pasos con HTML5 Canvas
Todo empezó muy bien con un proyecto ambicioso, pero el tiempo paso volando y no fui capaz de conseguir lo que yo quería.
Entonces decidí cambiar el alcance del proyecto y los objetivos, para añadir motivación extra y conseguir un resultado útil.
Así es como pase a tratar de rehacer el logotipo que había hecho deprisa y corriendo para mi madre:
Hace saquitos rellenos de semillas y hierbas aromáticas para aplicar terapia de calor.
Yo quería expresar que lo hace todo con mucho cariño, tanto que parece que saltan corazones cuando cose.
Superado el primer bache, todo empezó a fluir, y lo primero que tuve que hacer es dominar html canvas, estos son los primeros resultados:
Para un proyecto personal, es mejor tratar de conseguir toda la motivación extra que puedas encontrar.
Formas Básicas con CSS y Posicionamiento
Pieza a pieza conseguí tener el primer boceto de la máquina junto con las animaciones funcionando.
Está hecho colocando los elementos con css, aquí puedes ver el resultado:
Todos los proyectos tienen partes disfrutonas.
Las matemáticas del amor Quadratic Cuore
Hasta ahora para hacer las partes giratorias me había bastado con entender como funcionaban las librerías que ya estaban hechas.
Pero si quería corazones voladores tenía que escribir mis propias librerías para dibujarlos, al final encontré la manera dibujando segmento a segmento:
Después de un buen rato de lápiz y papel, este fue el primer resultado:
El mejor camino para llegar a donde quieres es el que comprendes.
Arriba los corazones
En este punto tenía ya una buena comprensión del proyecto, y conseguí avanzar bastante deprisa:
Aunque sabía que tendría que revisar el código mas tarde…
No hay buenas o malas decisiones si eres consciente de lo que estas eligiendo.
Problemas de última hora
Cambié la tipografía que no me convencía del todo y punto final, todo funcionando.
Pero al mirar la consola de desarrollo, me di cuenta de que había un montón de errores.
La hora de hacer limpieza había llegado:
Al final todo quedó limpio y ordenado, listo para entregar, saber utilizar la consola de desarrollo es una gran ventaja.
Domina tus herramientas.
Versión Final
Una vez llegas a una versión final que te gusta y es estable, podrías estar haciendo retoques hasta el infinito, pero hay que terminar.
Si te ha gustado o te ha inspirado para tu propio proyecto, puedes encontrar el código aquí, junto con todos las entradas y el resto de documentación del proyecto.
Ahora que lo he vuelto a leer mi ingles patina un poco, pero que le vamos a hacer 🙂
Si quieres empezar a aprender, las tecnologías que utilicé son las siguientes:
- html5 canvas
- javascript
- jquery
- css
Comparte.
Cerrando un ciclo
Pero el proyecto no estaba acabado, había que utilizar de alguna manera este desarrollo en la página de mi madre, y conseguir un elemento diferenciador.
Antes tenía que hacer que la página se adaptase a móviles, para que el desarrollo destaque.
La página está pensada como un catálogo online, me parece una opción interesante si no te has decidido a montar tu tienda, pero quieres empezar a enseñar tus productos a tus potenciales clientes.
Y de paso tendrás mucho trabajo adelantado cuando quieras dar el paso y abrir tu tienda online.
Si tienes curiosidad puedes verlo funcionando, pero ten cuidado porque los corazones volando te pueden hipnotizar:
Rafaela Alameda
Ha estado bien mirar por un momento hacia atrás para ver el camino recorrido, esa una buena inyección de moral y confianza.
Y como me he puesto un poco ñoño con esto de cerrar ciclos también te dejo una canción que creo que viene a cuento:
Volveré pronto con más artículos para conseguir que tu WordPress destaque en internet.
Que tengas un gran día.
0 comentarios