Marcelo Terreni :: Portfolio

Juguete de plástico del personaje de dibujos animados Cheburashka en azul

Soy un desarrollador front⁠-⁠end especializado en CSS, Javascript, UI/UX y accesibilidad web.

Desde hace años me dedico al desarrollo de sitios y aplicaciones web. Mi trabajo se centra en el front⁠-⁠end de los proyectos y todo lo relacionado con resolver problemas y transformar diseños UX geniales en experiencias digitales fluidas y usables.

Mi área de interés actual se orienta hacia el desarrollo de interfaces accesibles con ReactJS.

Descargá mi CV en formato PDF

Algunos proyectos que desarrollé.

Una selección de algunos proyectos en los que participé en los últimos años.

Accesibilidad

Un bot literario accesible en ReactJS

Un bot publica todos los días una nueva frase del libro Autorretrato de Edóuard Levé. Este proyecto busca explorar algunas soluciones posibles para los problemas de accesibilidad más comunes en las Aplicaciones de Página Única: routing en el cliente, notificaciones de cambio de estado, manejo de focus, ventanas modales, etc. El back-end se simuló con un archivo JSON que ordenaba cada post por fecha de publicación. El texto se levantó vía PHP de las ediciones en español e inglés del libro.

Ver el código en GitHub Visitar Autoportrait
  • ReactJS
  • Accesibilidad
  • CSS
  • Diseño UX

Preservación de Artes Electrónicas

Una versión en Javascript de Pn=n! (2006) de Iván Marino

Exhibida por primera vez en marzo de 2006, Pn=n! fue una instalación desarrollada en Flash por el artista argentino Iván Marino. Para este trabajo de restauración reescribí el código de cero en ES6, actualicé el layout con tecnología CSS y recomprimí el video con el CLI de HandBrake. Pn=n! resignifica una secuencia del film “La Passion de Jeanne d'Arc” para presentarnos una meditación sobre la tortura como algoritmo. Cada plano es seleccionado aleatoriamente y colocado dentro de una nueva secuencia que se siempre se organizará bajo el estricto orden semántico de víctimas, victimarios e instrumentos de tortura.

Ver el código en GitHub Visitar Pn=n! en versión JS
  • ES6
  • CSS
  • HandBrakeCLI
  • Diseño UX

Preservación de Artes Electrónicas

Una versión en Javascript de Naranjas (2002) de Julia Masvernat

Para este pequeño experimento de restauración, elegí el “nivel violeta” de Naranjas (2002), la obra interactiva desarrollada en Flash por Julia Masvernat y lo reescribí utilizando tecnologías web modernas como ES6 o Animaciones CSS. El proceso incluyó pensar en cómo adecuar la obra original a determinadas circunstancias que no existían en 2002 como las interacciones táctiles o la adaptabilidad a diferentes dispositivos y tamaños de pantalla.

Ver el código en GitHub Visitar Naranjas en versión JS
  • ES6
  • CSS
  • Diseño UX

Desarrollo front⁠-⁠end

Desarrollo con Sass & jQuery para un canal de television infantil

Trabajé con un equipo formado por un Arquitecto UX, un Diseñador UI y un Desarrollador Back-end para lanzar la versión 2015–2021 de pakapaka.gob.ar, aún disponible con cambios menores en el logo y las imágenes de fondo. Para el desarrollo del front⁠-⁠end usé una combinación de Sass y jQuery. También me encargué de adaptar el diseño a dispositivos móviles de acuerdo con las vistas de escritorio provistas por el Diseñador UI.

Visitar pakapaka.gob.ar
  • CSS
  • jQuery
  • Diseño UX

Customización de WordPress

Un portfolio artístico desarrollado con WordPress & Bootstrap

Gabriela necesitaba un portfolio online que le permitiera organizar fácilmente el vasto acervo de serigrafías y grabados producidos a lo largo de su carrera y al mismo tiempo destacar algunos sobre otros de acuerdo con las exigencias del mercado. Diseñé una interfaz minimalista con diferentes vistas adaptadas al formato de sus obras (retrato, apaisada y serie) y desarrollé un backend personalizado en WordPress para simplificar la organización de sus trabajos.

Visitar gabrielazelentcher.com.ar
  • WordPress
  • Diseño UX
  • Bootstrap
  • jQuery

Video en Internet

Diálogo audiovisual entre artistas con Vanilla JavaScript

Desarrollo en WordPress para el que me encargué de diseñar y programar la versión definitiva de un proyecto en el que cuatro artistas de cuatro ciudades diferentes mantuvieron un intercambio epistolar en formato video por un período de cuatro años. Los usuarios pueden elegir diferentes modos de navegar la conversación además del cronológico: una serie de palabras clave incluidas dentro de la arquitectura del backend como “lluvia” o “amistad” son procesadas por un algoritmo en ES5 que crea infinitas nuevas playlists relacionadas semánticamente.

Visitar thisisjusttosay.net
  • ES5
  • WordPress
  • FFMPEG
  • CSS
  • Diseño UX

Accesibilidad

Una introducción a la Accesibilidad Web en video

El Ministerio de Educación de la Nación Argentina me encargó la escritura de diez guiones literarios (junto con ideas y sugerencias propias de un guión técnico) para un grupo de animaciones que introducen la Accesibilidad Web a adolescentes. Los videos forman parte de una colección de animaciones de dos o tres minutos dirigidas a estudiantes de secundario que hacen sus primeros pasos en el mundo del desarrollo web.

Ver episodio sobre Ayudas Técnicas
  • Accesibilidad
  • Docencia

Algunos lugares donde trabajé.

Una selección de alguna de las empresas de las que formé parte.

2002–2021

Desarrollador Front-end y Diseñador UX Freelance

  • CSS
  • Javascript (ES5 & ES6)
  • WordPress
  • HTML5
  • jQuery
  • Bootstrap

Actualmente trabajo como freelancer full-time en desarrollos WordPress customizados, diseño UX/UI y trabajos de front-end para sitios institucionales, proyectos creativos y portfolios artísticos.

  • Utilicé una variedad de lenguajes de programación, frameworks y CMS como JavaScript, Bootstrap, WordPress o Laravel.
  • Durante el período 2018–2020 llevé adelante varios proyectos llave en mano en WordPress que me permitieron volver a trabajar en diseño UX/UI.
  • Algunos clientes para los que trabajé son ACE Seguros, Techint, Editorial Momofuku, UNTREF y el Ministerio de Educación de la Nación Argentina

Proyecto This is just to say, diseñador y desarrollado con Javascript (ES5), CSS, FFMPEG y WordPress

2005–2017

Desarrollador Front-end y Referente en Accesibilidad para Educ.ar S.E.

  • CSS
  • HTML5
  • jQuery
  • Bootstrap
  • WordPress
  • FFMPEG
  • Laravel

Educ.ar S.E. es una empresa del Estado que mantiene una serie de proyectos de internet y televisión educativa, como un portal web con más de un millón de visitas mensuales (educ.ar) y tres canales de televisión de gran renombre local (Encuentro, Pakapaka y DeporTV). Mis responsabilidades cubrían un amplio espectro de proyectos que unían los mundos de las TICs y la educación. Trabajé principalmente como Desarrollador Front-end con algunos roles temporarios como Responsable de Accesibilidad Web y Especialista de Video en Internet.

  • Formé parte del equipo de diseñadores y desarrolladores que implementaron los sitios institucionales de Canal Encuentro (2012–2016), Canal Pakapaka (2015–2021) y el proyecto InfinitoxDescubrir (2016).
  • Supervisé la implementación de los Criterios de Conformidad AA (WCAG 2.0) estipulados por la Ley Nº26.653 de Accessibilidad para Sitios Web del Sector Público como Responsable de Accesibilidad (2011–2014). También desarrollé componentes accesibles y realicé consultorías y code reviews para proyectos tercerizados.
  • Trabajé como Desarrollador UI (XHTML 1.0, CSS 2.1, ES3) y Autor de CD-ROM multi-plataforma en la distribución offline de contenido web educativo para alumnos de escuela primaria (Colección Educ.ar). Más de un millón de CD-ROMs enviados a todo el país de sus primeros 23 números (2004–2008).
Captura de pantalla de la página de inicio de Canal Encuentro, se destacan el logo sobre un fondo celeste y un carrusel de programas

Sitio de Canal Encuentro. Fui responsable del desarrollo front-end y la implementación de soluciones de accessibilidad para la versión 2012–2016 del sitio. Trabajé con un equipo de un Arquitecto UX, una Diseñadora UI y un Desarrollador Back-end.

Captura de pantalla de un artículo de Infinito por Descubrir, foto de niños con lentes de Realidad Virtual

infinitoxdescubrir.gob.ar (2016) Desarrollo front-end para una red nacional de centros de innovación tecnológica en Argentina.

2008–2020

Profesor de programación creativa en UNTREF y otras instituciones

  • HTML5
  • CSS
  • jQuery
  • FFMPEG

Entre los años 2008 y 2015 me desempeñé como profesor titular de un taller en programación creativa con tecnologías web para la Licenciatura en Artes Electrónicas ofrecida por la Universidad de Tres de Febrero. El curso estaba dividido en dos secciones: la primera parte introducía a los estudiantes en el desarrollo web bajo estándares W3C. En una segunda fase se analizaban obras web que buscaban correr los límites de lo posible con esas mismas herramientas y se llevaban adelante una serie de trabajos prácticos orientados a experimentar con nuevas formas de navegación e interacción.

  • Cerca del 10% de mis estudiantes terminaron en puestos de desarrollador front-end siendo mi materia la única del programa de la Licenciatura (hasta ese momento) que cubría tecnologías web (Tecnología Hipermedial, UNTREF, 2008–2015)
  • Pude viajar al extranjero para dictar charlas sobre Lenguajes No-Lineales en el Arte de los Nuevos Medios en San Petersburgo, Rusia (4hs, CYLAND MediaArtLab, 2015) y Estrucutras Narrativas No-Lineales y Transmedia en Tandil (36hs, UNICEN, 2018)
  • Trabaje junto a otras tres profesoras en un curso de Introducción a las Artes Electrónicas para alumnos de primer año que a pesar de la pandemia de 2020, obtuvo un gran nivel de compromiso y una evaluación destacada por parte de los alumnos (Laboratorio I, UNTREF, 2019–2020)
Cara de una mujer con flequillo cubierta de docenas de cursores, un texto dice  “Hacé una máscara”

Ejercicio de clase que combinaba Video HTML5, Canvas, jQuery y JSON para exponer los engranajes detrás del video musical colaborativo donottouch.org (2013) de Studio Moniker.

Profesor con barba y remera verde al frente de una clase, se ve una diapositiva proyectada en el fondo

Clase sobre net.art y otras prácticas artísticas de vieja escuela en la web para mi cátedra Lenguajes No⁠-⁠Lineales (2011–2020) en la UNTREF. Foto de Anita Piñero (2019)

Pantalla violeta, una línea de cuadrados también violetas se reducen en el centro por acción del mouse

Reconstruir Naranjas (2002) de Julia Masvernat sirvió de gran pretexto para aprender sobre bucles, eventos y animación con jQuery y CSS.

2004

Diseñador Web y Ayudante de Cátedra en MECAD / ESDI

  • Flash (AS2)
  • HTML
  • Fireworks
  • After Effects

Situado en la ciudad de Barcelona, e Media Center d’ Art i Disseny (ESDI) era un centro educativo que coordinaba tres programas de Master y una serie de proyectos relacionados con el Arte de los Nuevos Medios para distintas instituciones. Aquí trabajé como Diseñador Web en proyectos de e-learning, festivales de video y arte de los nuevos medios y subsidios para producir obras de net.art.

  • Desarrollé y dicté cursos online para la plataforma de e-learning MECAD/ESDI/UNESCO especializada en arte de los nuevos medios.
  • Realicé tutorias para estudiantes de Master y tuve mis primeras experiencias en la enseñanza con cursos de Flash (AS2), Macromedia Director y After Effects.
  • Asistí a becarios en el desarrollo de catálogos interactivos para la mediateca del Caixa Forum (Flash, AS2).
Captura de pantalla de un tutorial con un menú sobre la izquierda y dos capturas de pantalla de la interface de Director con texto explicativo en el área principal de texto

Curso online sobre Diseño de Interfaces con Macromedia Director que preparé para la plataforma de e-learning MECAD/ESDI/UNESCO para Arte de los Nuevos Medios. Cada curso se desarrolló en HTML 4.01 con tablas y frames, ES3, video multi-plataforma (Windows Media, Quicktime, Real) y un poco de CSS.

2002–2003

Diseñador Web y Desarrollador Multimedia en Repsol-YPF

  • ActionScript 2
  • HTML
  • ASP + SQLServer 2000
  • Fireworks

Trabajé dos años para el departamento de márketing de la compañía líder en producción de gas y petróleo de la Argentina. Mi rol pivotaba entre tareas de diseño y trabajos de desarrollo e incluyó varios proyectos en Flash y HTML para los sitios institucionales de la empresa y sus intranets. También participé de campañas de e-mail marketing, envío de boletines y minisitios promocionales que incluían funcionalidades simples en ASP y SQL Server 2000.

  • Diseñé y desarrollé un catalogo interactivo en AS2 para el programa de fidelización Serviclub (2003) junto a dos desarrolladores back-end.
  • Desarrollé un puzzle en Flash para promocionar la Guia YPF (una guía turística con mapas y recomendaciones de hoteles y restaurantes) y una trivia que celebraba el lanzamiento del nuevo portal institucional de YPF Chile (los premios incluían camisetas, cascos y una moto deportiva).
  • Diseñé y animé banners e iframes interactivos que fueron publicados en los sitios de noticias más visitados de Argentina (Clarín, Infobae, La Nación, Yahoo! News)
Captura de pantalla de una pregunta con cuatro opciones, a la derecha se destaca la figura del motociclista Carlo de Gavardo

Desarrollé, diseñé y animé un juego de preguntas para YPF Chile con Macromedia Flash (AS2), ASP y SQL Server 2000. El proceso también incluía registro de usuarios, validación de cupones y actualizar puntajes de los participantes.