/cv

Trabajando en desarrollo web desde el 2000.

Habilidades

Por orden alfabético. Los links hacen referencia a aplicaciones que uso actualmente.

Software

Adobe Creative Cloud
Bitbucket
Browserstack
Confluence
Chrome
DevKinsta
Docurausrus
Figma
Filezilla
Firefox Developer Edition
Fractal
Github
Github Desktop
Gitlab
Imagineoptim
Iterm
Jira
MacOsX
MacOsX Terminal
MampPro
Notion
Opera
Pixelmator
Poedit
Safari
Sequel Pro
Sip
Sketch
Sourcetree
Sublime Text
TogglDesktop
Tunnelblick
Transmit
Ubuntu
VsCode
Xcode (Simulator)

Herramientas WPO

Lenguajes (Frontend)

HTML y CSS
Liquid
Nunjucks
Javascript
Jquery
Jsp
Markdown
Php
Pug
Ruby (erb)
Scss

Otros

Astro
BEM
Eleventy
Google apps
Gulp Js
Mailchimp
Middleman
Netlify
Decap Cms
Octopus email
Wordpress

Tareas que he asumido

Durante mi carrera profesional me he visto involucrado en gran variedad de proyectos, tanto por evergadura como por metodología de trabajo. Estas son algunas de las tareas que he asumido:

Maquetación responsive

La mayor parte de mi trabajo consiste en convertir los diseños estáticos a Html semántico y Css, teniendo en cuenta los diferentes dispositivos y sus peculiaridades como el tamaño o el tipo de interacción (touch, hover).

Migración de sistemas de maquetación

He asumido en varios proyectos la migración de frameworks (Bootstrap, Tailwind) en proyectos Java y Angular, donde se maqueta con clases de utilidad en el Html a un sistema de clases únicas usando la metodología BEM para:

Mejorar la implementación de los diseños.
Personalización de componentes.
Mejorar la especificidad Css en elementos, evitando conflictos.
Reducir la carga de Css.

Aplicaciones de maquetación

Trabajando en algunos proyectos he creado herramientas de maquetación, separadas del proyecto de desarrollo. Los motivos para desarrollar una aplicación pueden ser diversos:

Desarrollo de la maquetación antes de empezar el desarrollo de la aplicación.
Privacidad del código de desarrollo
Entornos de trabajo no disponibles para mi usuario por licencias o permisos.
Imposibilidad de instalar herramientas de maquetación en los entornos de desarrollo (Sass).
Necesidad de generar diferentes archivos estáticos en proyectos multimarca de manera eficiente.
Complegidad de entornos de desarrollo.

En estos casos he asumido la creación y mantenimiento de estas herramientas, siempre con el objetivo de generar los archivos estáticos para cada proyecto. Estas herramientas suelen basarse en generadores de webs estáticas como Middleman o más recientemente Eleventy.

La implementación del código y supervisión forma parte del trabajo a la hora de implementar un sistema como este.

Sistemas de diseño

Adaptación e implementación de un sistema de diseño multimarca basado en el uso de variables de Figma, para diferentes entornos (Angular, Java). Generando la documentación, librería y guias de estilo necesarios.

Aplicación de metodologías de variables (Globales, Semánticas y de Componente) y sistemas de iconos por marca.

Análisis de proyectos

Análisis y plazos de entrega de maquetación en proyectos de diferente envergadura.

Formación

Formación del equipo de maquetación y becarios en todos los aspectos relacionados con la maquetación web creando documentación y ejercicios para asumir conocimientos.

Conceptos básicos
- Html Semántico
- Herencia y especificidad en Css.
Nuevas técnicas de maquetación con Css grid y Css flex.
Uso de variables Css en proyectos multimarca.
Refactorización, orden y buenas prácticas en Css.
Componentización de código.
- @mixins y @use en Sass.
- Uso @mixins Sass como clases de utilidad.
I+D de nuevas carácterísticas Html y Css y cuando es apropiado su uso.
- Interpretación de analíticas.
- Uso de herramientas para determinar el soporte de una característica determinada.
Conocimientos asociados a la maquetación.
- Tipografía.
- Imágenes, optimización y formatos de imagen
- Iconos. Svg como librería de iconos (svg sprites), fuentes de iconos o como imagen de fondo.
- Color.
Onboarding, formación orientada a proyectos concretos.

Creación de un Blog y Newsletter interno corporativo para mantener informados al equipo de maquetación y programadores Frontend de las nuevas carácterísticas Html y Css.

Autoformación. Seguimiento de las últimas mejoras en Css y Html, valoración de su posible implementación en proyectos revisando posibles Fallbacks y valorando la mejora progresiva (Progressive Enhancement) en cada caso.

Revisión de código

Trabajando en un equipo de maquetación he revisado “Pull request” para detectar inconsistencias, código que podría generar conflictos o posibles comportamientos no deseados.

Documentación

Documentación para la implementación de metodologías de trabajo para mentener y mejorar el código Css, tanto en proyectos nuevos como Legacy.

Como refactorizar código Html mejorando la semántica y la accesibilidad.

Mantenimiento de proyectos Legacy

Resolución de incidental y refactorización de código obsoleto.

Optimización de carga de paginas (WPO)

Análisis de los tiempos de carga con diferentes herramientas de los elementos estáticos de la web. Optimización de imágenes y carga de archivos estáticos.

Creación de plantillas a medida para frameworks y webapps

En proyectos realizados con “Framework” (Astro, Eleventy, Middelman, Wordpress) he creado las plantillas necesárias adaptándome al los requerimientos del proyecto en cuanto a estructura y lenguage (Astro, Nunjucks, Liquid, Erb, Php).