aprendo;
metoLaPata;
sigoAdelante;
repito;

Reseña

El propósito principal de este trabajo es compartir tanto a mis seres queridos, que no están familiarizados con el tema, como a quienes sí lo estén, mi proceso de aprendizaje y desenvolvimiento en el desarrollo web y programación.

Sobre mí

De parto peruano, de amor argentino. Voy, como haciendo camino al andar y ello me permite descubrir grandiosas sorpresas, tanto a mi alrededor como en mi interior.
Hoy atravieso por el aprendizaje del desarrollo web, que en estos tiempos extraordinarios me sirve de alternativa y complemento a mi pasión por las artes plásticas.

Mis proyectos

Este primer trabajo fue inspirado por el primer proyecto que hicimos. Busqué transmitir un mensaje positivo que motive a la acción.
Con la elección de tonos quise transmitir amor y esperanza.
  • Maquetado en Figma.
  • Fue hecho con un 99% HTML y CSS y unos eventListeners de JavaScript para lograr que el menu desplegable se ocultase después de hacer click.
  • Los objetos fueron posicionados con grid y flex-box.
  • El efecto Parallax lo incorporé con background:url(''),fixed.
  • El "menú hamburguesa" lo hice con pseudo-elementos ::before y ::after, y de esa manera pude darle color como si fuera texto.
  • El título y texto de la imagen principal es responsive con font-size: __vw.
  • Las tarjetas giratorias con CSS. Usa relative y absolute lo cual me dificultó posicionarlas.
  • Usé de referencia a W3Schools casi la mitad del proyecto, la otra mitad de las clases y del internet.

En este proyecto busqué transmitir, modestamente, con algunas imágenes la belleza del lugar y despertar la curiosidad en una de las provincias de este hermoso país.
Usé tonos que transmitieran esperanza, tranquilidad y atracción.
  • Hice un prototipo de animación y maquetado en Figma.
  • En este proyecto usé en su mayoría el framework de W3Schools.
  • W3CSS usa floats y %s. Ahora prefiero usar grid y flex-box para el posicionamiento, así que evité sus .containers.
  • Para el menú desplegable, tuve que usar el mismo que en la página anterior, ya que el de W3CSS no me respondía como quería.
  • Incorporé imágenes con formato .svg para los botones, que descargué desde Figma.
  • Para los sliders tuve que crear activadores independientes en JavaScript para cada grupo de fotos.
  • Los emojis del cuestionario son .svg convertidos a texto. Coordenadas para que el navegador las renderice.
  • Descubrí por casualidad una animación sencilla con :hover{padding}.

Este proyecto fue planeado como una especie de portafolio y bitácora a la vez. Me pareció excelente idea incorporar información técnica sobre como resolví algunas cosas y probé otras. Todo lo tomé del internet y saqué el máximo provecho a las clases de Desarrollo Web. De esta manera busco contribuir con un granito de arena a la comunidad Open-Source que nos da tanto día a día.
  • Esta vez no boceté mucho en Figma.
  • Elegí un tema gratuito de Bootstrap que se acercara a lo que tenía en mente en Bootswatch.
  • En vez de descargar los archivos .css y .js, y modificarlos manualmente, enlacé los CDN y sobreescribí con clases adicionales propias y las que conseguí desde el Inspector de Firefox.
  • La fascinación por el formato .svg me llevó a probar dibujar los íconos e imágenes en Inkscape y convertirlos a texto en SVGOMG.