UrielArevaloFranco
logo gris con estilos filter: drop-shadow

Te cuento

Sigo en un asunto que daba por muerto. Algo que captó mi atención cuando inicié universidad comenzando los ochentas. Hace rato. Le decíamos “programar”, como ahora. Alcanzo a recordar el lenguaje de programación Fortran IV que usábamos para resolver, por ejemplo, ecuaciones simultáneas de primer grado (Leer más) .

Un computador Wang enorme estaba detrás de la sala de monitores. “Tienen suerte...”, decía la coordinadora de la sala, “a los estudiantes antiguos les tocó tarjetas perforadas”. Sigo lamentando que sólo fueran dos horas de clase a la semana en apenas dos semestres curriculares.

mi-cuaderno-1982 mesa-lampara
Apuntes de clase, 1982. Las calculadoras de bolsillo ya existían; el ábaco es para exagerar.

Por accidente tropecé con Platzi, una plataforma educativa muy reconocida en Latinoamérica hoy día. Fue en 2018. Encontré cursos que llamaron mi atención al navegar su sitio. Uno en especial: Programación básica. Contenía la palabra “programación” y era gratis. ¿Por qué no?, me dije.

Lo tomé y descubrí que el gusto por programar estaba vivo. A partir de allí me sentí con capacidad y energía para seguir aprendiendo sin tener mucha claridad de lo que iba a encontrar por el camino. Las ganas de explorar el universo web y entender qué había detrás no paraban de inquietarme. Me frustraba ser un simple usuario o un mero consumidor de contenidos. Soslayar las ganas pudo haber sido un acto de traición en mi contra, pienso ahora en retrospectiva.

En el proceso de aprendizaje he palpado que me atrae la arquitectura frontend, vale decir, aquello que vemos en las pantallas de nuestros dispositivos, lo que hace interesante la experiencia para un usuario web. Se conoce también como desarrollo frontend o desarrollo web. Esta última denominación, al parecer, tiene un alcance muy amplio. Cualquiera sea la denominación, mi deseo es estar allí, ser parte de eso.

Entrar al mundo frontend ha significado estar dispuesto a explorar una cantidad infinita de recursos que la red ofrece: youtubers, sitios web especializados, podcast, blogs, etc. El reto es ganar habilidad para filtrarlos procurando llegar a los más idóneos. Pienso que eso se logra con el tiempo tras buscar y buscar, una y otra vez.

Hay que decir de todos modos que no pasó mucho tiempo para saber de algunas fuentes muy reputadas que son el pan de cada día en la vida de muchos desarrolladores. Listo algunas para quienes puedan estar interesados:

MDN Web Docs
Stackoverflow
Github
Css-tricks
Codepen.io

Son un complemento muy importante de la oferta educativa que tengo en Platzi. Esta a su vez se fortalece con los aportes que la comunidad de estudiantes ofrece de manera constante. Por cierto, una comunidad respetuosa y de espíritu colaborativo. La oportunidad de concretar una buena ruta de aprendizaje más el acceso a cursos de buena factura, no deja de ser una buena ventaja. Esto mismo puede ser lento o difícil cuando se consumen contenidos diversos y de múltiples fuentes. Pero está bien hacerlo, de todos modos.

Los youtubers   cada día ganan más espacio como evangelizadores. Si bien hay personas que prefieren contenidos de texto para aprender o absolver dudas, ver un video puede motivar o inspirar, además de enseñar. Hoy por hoy consumo contenidos como los que ofrece Sacha Lifszyc, Coderos, Leonidas Esteban, FalconMasters, Bluuweb , Oscar Barajas , CódigoFacilito, Jonmircha, HolaMundo, por mencionar algunos.

Los contenidos en inglés son extremadamente abundantes. Saber el idioma es fundamental para crecer. Google ayuda mucho con la traducción de textos. La subtitulación de videos también ayuda. De todos modos hay que hacer los esfuerzos necesarios hasta conversar de manera fluida. Estoy en eso, ya veremos. Un reto grande que no se puede eludir.

Con el inglés aprendido me lanzo con más ánimo al consumo de contenidos en ese idioma. Siento que me va bien siguiendo a youtubers que abordan temas que despiertan mi curiosidad: gráficos vectoriales escalables (svg) y animaciones. Últimamente he descubierto cosas interesantes con DesignCourse , Ed Dev   y KeyFramers.

Con este sitio web quiero mostrar buena parte del conocimiento ganado como autodidacta, ejercicio que inicié en la segunda mitad del 2018. Reflejar en cierto modo habilidades en áreas de mi interés y en las que deseo profundizar. Espero funcione para delinear un perfil de lo soy y lo que podría hacer en la industria digital.

Decidí no acudir a recursos externos (frameworks, librerías, paquetes) con la idea de examinar qué tanto podía lograr con JavaScript puro (vanilla). Es mi segundo proyecto de sitio web personal. Con el primero aprendí muchas cosas y sentí gran satisfacción cuando en 2019 subió a la red. Lo dejo aquí pretendiendo dejar trazabilidad de lo que ha sido mi evolución en frontend. Agradecido de antemano si te animas a visitarlo: uralberto.github.io/uaf1.

Si deseas explorar aún más sobre este nuevo sitio web te propongo visitar uralberto.github.io



Yo

Uriel Alberto Arévalo Franco

Desarrollador frontend

Ingeniero civil


Objetivo profesional


Contribuir a proyectos web aportando conocimiento como desarrollador frontend en entornos donde la empatía ocupe un espacio importante como cultura de trabajo. Busco afianzar el conocimiento ganado como autodidacta y persistir de igual manera en el aprendizaje de nuevo conocimiento. Todo en aras de crecer en el amplio universo frontend.



Experiencia profesional



Experiencia como frontend autodidacta (2018-2021)


Frente a la decisión de aprender frontend de manera autodidacta, tomada en 2018, los proyectos emprendidos hasta ahora son de carácter personal y enfocados al ámbito familiar, especialmente. Encontré allí una motivación importante para sacarlos adelante. Este sitio web se nutre con ellos y el ánimo es seguir incorporando más proyectos a futuro. (Visítalos aquí)

Está pensado para que sea escalable a partir de una buena estructuración del html, la definición apropiada de selectores de clase y la creación de funciones javascript que resuelven asuntos repetitivos.


Ingeniero civil independiente (1999-2020)


Proveedor de servicios relacionados con la profesión. No menos de 50 proyectos de diverso tipo, públicos y privados, ejecutados en los últimos 20 años. Destaco la construcción de edificaciones nuevas, el mejoramiento y/o mantenimiento de edificaciones, obras de urbanismo, dirección de obra a terceros e interventorías.


Experiencia relevante anterior 1999


Instituto Colombiano de la Reforma Agraria (Incora). Funciones de planeación y supervisión de proyectos de infraestructura social(1989-1992).

Consejo Regional de Planificación Económica y Social de la Orinoquia. Funciones de promoción de la política nacional para el sector agua potable y saneamiento básico; apoyo a entidades territoriales para impulsar los Bancos de Proyectos de Inversión Pública (1992-1995).

Gobernación de Arauca. Coordinación de la estructuración técnica y legal del Banco de Proyectos de Inversión Pública Departamental y acompañamiento a los municipios de la región en el mismo propósito (1995-1997).



Historia académica


Universidad Santo Tomas, sede Bogotá
Ingeniero civil (1981-1987)

Platzi, platarforma de educación online (Agosto/2018 a la fecha)


Cursos aprobados:
  • Programación básica
  • Marca personal
  • Introducción al marketing digital
  • Curso profesional de Git y GitHub (2018)
  • Desarrollo web online
  • Responsive Design
  • Css Grid Layout
  • Animaciones para la web
  • Fundamentos de Javascript
  • Curso profesional de Git y GitHub (2019)
  • Html y Css
  • Creación de portafolio y cv
  • AdobeXD
  • Prework: buenas prácticas y entorno de desarrollo
  • Frontend Developer
  • Básico de Vue.js
  • Asincronismo con javascript
  • Fundamentos de ingeniería de software
  • Introducción a la web: Historia y funcionamiento de la internet
  • Profesional de Javascript
  • Javascript Engine (V8) y el navegador
  • Responsive Design-mobil first
  • Curso de SASS
  • Closure y Scope en Javascript
  • Sistemas de diseño
  • Single page application con Javascript vanilla
  • Trabajo remoto o teletrabajo
  • Curso práctico de html y css
  • Curso definitivo de html y css
  • Debugging con Chrome Dev Tools
  • Ecmascript 6+


Información adicional


Idiomas:

· Inglés (lectura, nivel medio)


Hobbies:

· Contenidos de opinión política.

· Podcast (los mas escuchados):

·

Contribuí con escritos para un portal web con énfasis en La Playa de Belén, mi municipio de origen. Ir a http://www.guidoperezarevalo.org/



Areas de interés


Imágenes en formato SVG

Animaciones web

Diseño frontend

Fotografía naturalista

Salsa clásica del Caribe

Sonidos alternativos latinoamericanos



Contacto


urievalo@hotmail.com

uriel.arevalo.franco@gmail.com





Villa Las Marias

En 1999 adquirimos en familia un pequeño lote rural pensando en un espacio de encuentro. A partir de allí nos dimos a la tarea de examinar iniciativas para costearlo. En 2004 vimos la opción de iniciar una primera fase que tardó cerca de 3 años, al ritmo del flujo de caja de once hermanos. Si, somos once.

La primera imagen abajo es la proyección isométrica del proyecto, hecha a mano. Sirvió de base para discutir qué queríamos.

En 2019 celebramos 20 años del nacimiento de la idea. Pensé en la animación de la proyección isométrica para la ocasión. Trabajé una imagen vectorial con AdobeXD a fin de animarla con código JavaScript, solamente. No tiene animaciones declaradas con Css..

Además del motivo, el ejercicio fue interesante para afianzar el manejo de la herramienta AdobeXD y el uso del del método setTimeout() de JavaScript

Villa La Marias proyeccion isometrica en .png

Proyección isométrica

Proyección isométrica dibujada con Adobe-XD

Imagen Villa La Marias 2018

Villa Las Marías, espacio de encuentro, Ocaña (N. de S.). Imagen del año 2018.



Arnulfo

Se trata de animaciones programadas con código Javascript aplicadas a una imagen vectorial. Se asignan valores aleatorios (random) de opacidad a las piezas que la conforman.

El valor de la opacidad es 1 cuando la animación es detenida. Las piezas que definen la corbata terminan con un color generado aleatoriamente.

La imagen tiene 173 piezas diferentes, cada una con un tono gris particular. La aninación se activa o inactiva a gusto del usuario.

Los cambios de tonalidad gris o de color, para el caso de la corbata, son consecuencia del valor random de opacidad que cada pieza recibe por un lapso de 50 milisegundos.

Se ensayó aplicar un color final random a cada pieza pero los resultados se alejaron mucho del espiritu que la imagen original transmite. ¿Quién es él? Mi padre, hombre luchador hasta el final de sus días.

Fotografía de referencia para hacer la imagen vectorial. No es muy nítida, en realidad, pero el espíritu de ánimo que entraña favoreció su elección. Es del año 1981.
Imagen vectorial (formato SVG, del inglés Scalable Vector Graphics)

Hermelinda

En este proyecto, igual que en Arnulfo, se aplican animaciones con Javascript. Se asigna un valor inicial de opacidad cercano a cero para todas las piezas que conforman la imagen vectorial. En total son 304, cada una con un tono gris particular.

Muy cerca del final de cada ciclo de animación las piezas que definen los aretes titilan con un efecto multicolor aleatorio. Cada vez que la animación es inactivada, los aretes siguen titilando pero en tiempo muy breve dejan de hacerlo y terminan pintados con un color igualmente aleatorio .

Las demás piezas aparecen de manera secuencial hasta completarse toda la imagen al término de cada ciclo de animación. Esto se logra cuando el valor final de opacidad, en este caso 1, se aplica a cada pieza de manera secuencial, no al mismo tiempo. Al detener la animación antes de terminar cada ciclo, el evento activa el llamado a la imagen completa. ¿Quién es ella? Mi madre, sigue maravillosa pese a su ausencia.

Foto base para la imagen vectorial (1994). Elegida por el semblante feliz que proyecta. Las fronteras entre luces y sombras no son tan definidas, ello implicó un mayor esfuerzo de dibujo.
Imagen vectorial (formato SVG, del inglés Scalable Vector Graphics)


Chicherme


Fraccionar-animar

Una imagen se puede fraccionar según las prestaciones del software a usar. Para este proyecto se utilizó ImageSplitter, una plataforma online gratuita. La imagen escogida se fraccionó en 228 partes las cuales se organizaron en 12 filas y 19 columnas. Cada fracción es una pequeña imagen con un número de orden diferente

Significó definir 128 contenedores en el documento html para darle cabida a cada fracción. Los editores de código ofrecen atajos para estructurarlos de manera ágil, incluidos los selectores de clase y el src de cada fracción de imagen.

Para la ubicación correcta de cada fracción fue práctico usar CSS Grid Layout, una herramienta que permite determinar número de filas y columnas, su ancho, su altura, entre otras propiedades. Si las fracciones se organizan mal, el resultado es una imagen desordenada.

Los cuatro efectos de animación que pueden observar abajo al tocar cada botón, fueron construidos con el método animate() de JavaScript. Hubo dificultad a la hora de crear, dinámicamente, los keyframes del método. Se consultaron diversos contenidos sobre el tema hasta encontrar la manera más práctica y estable. Una experiencia interesante de aprendizaje.

Carnaval Crescendo Ráfaga Persiana



Cocuy

SVG y canvas son tecnologías o herramientas para dibujar en los navegadores web. Proyectos como Villa Las Marías, Arnulfo o Hermelinda, presentados en este sitio, incluyen al menos una imagen SVG.

Cocuy, a la vez que un ejercicio de aprendizaje, fue también la oportunidad para crear algo que tuviera conexión con la región donde he vivido mis últimos años. Es el nombre de la sierra al costado oeste del departamento de Arauca. Muchos la admiramos cuando viajamos desde Arauca capital, ciudad rodeada de enormes llanuras, hacia a los municipios del piedemonte (Tame, Fortul o Saravena) por carretera. También cuando vamos a Bogotá en avión.

Más abajo encontrarán el resultado del ejercicio. Intenta recrear cómo la sierra se agranda cuando nos acercamos a ella y dejamos atrás la llanura. Está construida con la herramienta canvas. Consta de 5 capas canvas más una fotografía de la sierra al fondo (background). Esta se desvance para darle paso a las capas que emergen de abajo hacia arriba de manera escalonada, efecto logrado con funciones JavaScript. Las capas reproducen de manera aproximada las formas o el relieve que la fotografía muestra.

Las capas se redimensionan dependiendo del dispositivo que se use. Los puntos que definen las formas de relieve se recalculan en función del ancho de la ventana gráfica del dispositivo (viewport). Las formas del relieve son curvas bezier consecutivas. Cada curva bezier está definida por 4 puntos: uno inicial, uno final y dos intermedios llamados puntos de control. Cada capa requrió de al menos 3 curvas bezier. La capa que muestra el pico más alto requirió 5. El número total curvas bezier utilizadas fue de 14.

Cliquea en el botón para ver la animación.



Foto inicial del fondo: Sierra del Cocuy vista desde la ciudad de Tame, Arauca.

botón play

Imagen vectorial animada 1

Aquí se toma de nuevo la imagen del proyecto Arnulfo para mostrar otras opciones de animación con más color y movimiento. Si visitaste el proyecto Arnulfo es posible que sepas que la imagen original está formada por 172 piezas grises. En esta oportunidad los grises se vuelven colores vivos y las propiedades que definen el borde de las piezas se transforman. Css y JavaScript referencian el borde con la palabra stroke, trazo.

En la imagen abajo las piezas no tienen color de relleno pero si borde amarillo y punteado. Se logra con una función JavaScript que hace precisamente eso: quita el relleno (fill ) y el borde (stroke) lo pinta como una línea discontinua. La propiedad que se manipula para este efecto se llama stroke-dasharray. Indica el patrón de rayas y espacios del borde. Si se quiere, con la propiedad stroke-width podemos darle un mayor o menor grosor.

La imagen, que pretende simular un efecto de lámina metálica perforada, es el estado inicial de donde parten las animaciones que se muestran al cliquear en el botón. En la primera animación, cada pieza recibe un color aleatorio cada 10 milisegundos. En la subsiguiente, las piezas se mueven y cambian de color aleatoriamente. En cada ciclo de animación el color y el movimiento de cada pieza siempre son diferentes.

La última animación juega con el color, el grosor y el patrón de rayas y espacios del stroke de cada pieza. Una función JavaScript manipula aleatoriamente el valor de tales propiedades. No se interviene el relleno (la propiedad fill ) del espacio interno.



Imagen vectorial animada 2

Este proyecto considera de nuevo la imagen vectorial del proyecto Hermelinda incluido en este sitio. Si ya lo visitaste probablemente sabrás que la imagen consta de 304 piezas grises diferentes. Las piezas están marcadas con etiquetas <path>. Estas a su vez las envuelve un contenedor <g> (grupo). El contenedor <g>, por su parte, es contenido por un contenedor <defs>. Finalmente, <defs> es contenido por la etiqueta <svg>. El documento html se ve mas o menos así:

       
<svg>
  <defs>
    <g  id= "img-uno"> 
      <path/> 
      <path/> 
      .
      .
    </g>
  </defs>
</svg>

En <g> se pueden incluir clases para aplicar estilos a los <path> que envuelve. La etiqueta <defs> es un contenedor a introducir si se quiere usar la imagen en otro lugar del documento html. Para ello se utiliza la etiqueta <use>. Una manera de hacerlo es es ubicarla justo antes de cerrar la etiqueta <svg>. Así:

     
<svg
 propiedades, clases...
>  
  <g> 
    <use href="img-uno"></use>
  </g> 
</svg>


"#img-uno" se refiere al selector id dentro del contenedor <g id="img-uno"> más arriba.

Cada pieza, definida por un <path> particular, se traslada, rota o escala dependiendo de la animación que se active con los botones previstos (ver más abajo). En la imagen inicial las piezas tienen un tamaño 5 veces menor al original. Es para observar la progresión desde una escala menor hasta alcanzar la escala original (Tocar el botón Escalar). El punto de origen del escalamiento es el centro del contenedor de cada pieza.

Con el botón Rotar las piezas rotan con referencia a un centro de giro exterior a su propio contenedor. El centro de giro es aleatorio, significa que la animación será diferente con cada toque de botón. Con el botón Dispersar se activan de igual manera animaciones aleatorias pero esta vez con movimientos de traslación en sentido X o Y . Al parecer los movimientos de giro y traslación no pueden ser simultáneos, un tema pendiente de examen.

Finalmente, el botón Desvanecer activa la rotación de las piezas alrededor de un eje central horizontal (eje X). Cada pieza tiene su propio eje central de giro. Si se observa con cuidado es posible detectar tres imágenes superpuestas en posiciones ligeramente diferentes. Se hace con la etiqueta <use>, según se indicó arriba. Le da un toque interesante a la animación o al menos muy distinto si una sola imagen se utiliza

Si vamos a las opciones que JavaScript ofrece para animar tendríamos un menú infinito de posibilidades. El reto es lograr animaciones creativas o al menos interesantes.