All decks
  • Image Optimization Tools for Designer

  • Houdini: programming in CSS { Stay At Home Conf }

    Stay At Home Conf March '20: CSS has always been considered the least controllable, complicated, magical and sometimes somewhat random part. Houdini offers us a set of APIs and Javascript tools that give us the possibility to extend CSS to access the design process and style of the browser rendering engine.

  • Unos estáticos muy dinámicos

    En muchos proyectos, tenemos una series de recursos que no son dinámicos: imágenes, vídeos, iconos, tipografías o textos i18n. Las imágenes suelen ser las menos cuidadas, desde el punto de vista de la performance. Y lo sé de primera mano, así que os quiero contar cómo pasamos de una carpeta images desplegada en un S3, a un repositorio con unas guidelines de la estructura, naming, automatización de compresión de imágenes y generación de “Responsive Images”, test de regresión visual e incluso un garbage images collector, para hacer limpieza de esas imágenes que quedan en el olvido.

  • Web Performance con Domini Code

    Varios estudios demuestran que la velocidad de carga de una página o aplicación afecta mucho en la conversión. Vivimos en un entorno muy dinámico, cualquier distracción, como una notificación de Whatsapp o Twitter, nos hace perder el foco con gran facilidad. Como desarrollador@s debemos dar la importancia que merece a la web performance. La performance va más allá de mejorar el tiempo de carga, las animaciones y las interacciones del usuario también están llenos de puntos de mejora.

  • Optimización de imágenes JAM Stack

    Las imágenes son un recurso que está presente en cualquier proyecto web. Hay muchos formatos de imágenes, muchos compresores y cientos de posibles configuraciones. En esta charla veremos una series de buenas prácticas en optimización de imágenes y daremos un repaso a las posibilidades que tenemos para mejorar la experiencia de usuario optimizando nuestras imágenes en un JAMStack.

  • Unos estáticos muy dinámicos

    En muchos proyectos, tenemos una series de recursos que no son dinámicos: imágenes, vídeos, iconos, tipografías o textos i18n. Las imágenes suelen ser las menos cuidadas, desde el punto de vista de la performance. Y lo sé de primera mano, así que os quiero contar cómo pasamos de una carpeta images desplegada en un S3, a un repositorio con unas guidelines de la estructura, naming, automatización de compresión de imágenes y generación de “Responsive Images”, test de regresión visual e incluso un garbage images collector, para hacer limpieza de esas imágenes que quedan en el olvido.

  • Web Performance

    Varios estudios demuestran que la velocidad de carga de una página o aplicación afecta mucho en la conversión. Vivimos en un entorno muy dinámico, cualquier distracción, como una notificación de Whatsapp o Twitter, nos hace perder el foco con gran facilidad. Como desarrollador@s debemos dar la importancia que merece a la web performance. La performance va más allá de mejorar el tiempo de carga, las animaciones y las interacciones del usuario también están llenos de puntos de mejora.

  • PostCSS, the Babel for CSS

    With the PostCSS Preset Env project (based on cssdb) we can say that it is the Babel for CSS, with different states of the features as we have in EcmaScript. Finally we can focus on knowing and developing with the specifications that are being defined as CSS standards for the web.

  • Optimización de Imágenes y Vídeo para la Web

    Como profesionales del desarrollo web, nos preocupamos de escoger el mejor framework, aplicar buenas prácticas en Javascript y CSS, ser cuidadosos de la semántica en el HTML para mejorar el SEO, de la accesibilidad de nuestro contenido, empaquetar los archivos para optimizar la carga, pero ¿qué pasa con la imágenes? Las imágenes representa hasta el 60% del contenido de los sites, desde julio de 2017 en un site promedio de 3.0Mb, 1.7Mb son imágenes. Cargamos imágenes innecesarias, con formatos inadecuados y sin estar adaptadas al tamaño de pantalla del usuario. Todo esto se convierte en una peor experiencia para el usuario. Pero hay solución! Veremos cómo usar herramientas para el análisis, la optimización y la validación que harán nuestras imágenes y vídeos más ligeros, mejorando así la carga de la página y la percepción de velocidad.

  • Houdini: programming in CSS { May '19 }

    Barcelona May '19: CSS has always been considered the least controllable, complicated, magical and sometimes somewhat random part. Houdini offers us a set of APIs and Javascript tools that give us the possibility to extend CSS to access the design process and style of the browser rendering engine.

  • Creative Coding T3chFest 2019

    La programación es maravillosa, nos ofrece todo un mundo de posibilidades para crear webs, aplicaciones, herramientas, videojuegos, incluso dotar de IA a asistentes que llevamos en nuestros bolsillos. También podemos crear arte con nuestras líneas de código... no todo va a ser SOLID, DDD, TDD, BDD. Eso no quiere decir que no debamos usar buenas prácticas de programación, pero en este caso el objetivo es crear algo expresivo, más que algo funcional. Podemos utilizar multitud de lenguajes en el Creative Coding, desde Java, Python, C++, C#, Kotlin, Rust, como no Javascript y CSS (sí, sí, eso para poner colores a los botones en una web). Los lenguajes más clásicos, nos obrecen mejor performance y mejores interfaces para trabajar con diferentes dispositivos de entrada. Por otro lado, con librerías como P5.js de la Processing Foundation nos facilita utilizar este recurso en entornos web. La filosofía del Creative Coding es la de ofrecer lenguajes de programación a la gente creativa, pero también es una buena puerta de entrada para iniciarse en el desarrollo, ya que tiene un enfoque mucho más visual. El objetivo de la charla es dar a conocer el apasionante mundo del Creative Coding, conocer casos de uso e interactuar en vivo, con vuestros móviles, para generar arte dinámico entre tod@s.

  • Curso de Optimización de Imágenes para la Web

    Aprende a optimizar las imágenes de una web o aplicación y mejora rápidamente los resultados del proyecto. https://escuela.it/cursos/curso-optimizacion-imagenes-web

  • Processing Community Day 2019 Girona

    Processing Community Day és un esdeveniment que se celebra a diferents ciutats per tot el món, entre els dies 15 de gener i 15 de febrer de 2019. https://pcd2019-girona.glitch.me/

  • PostCSS Preset Env, the Babel for CSS

    With the PostCSS Preset Env project (based on cssdb) we can say that it is the Babel for CSS, with different states of the features as we have in EcmaScript. Finally we can focus on knowing and developing with the specifications that are being defined as CSS standards for the web.

  • Image Optimization + Machine Learning v2

    Como profesionales del desarrollo web, nos procupamos de las buenas prácticas en Javascript y CSS, de la semántica en HTML, de la accesibilidad de nuestro contenido, pero ¿qué pasa con la imágenes? Las imágenes representan hasta el 60% del contenido de los sites, desde julio de 2017 en un site promedio de 3.0Mb, 1.7Mb son imágenes. Ahora que sabemos que deberíamos dedicar tiempo a optimizar las imágenes, veamos los diferentes niveles de optimización, cómo automatizarlos y cómo con la ayuda del Machine Learning conseguir reducir un 15-17% el peso de algunas imágenes. En esta charla veremos herramientas para el análisis de las imágenes, la optimización, la validación (aka Tests) y cómo reducir el peso de alguna imágenes con la ayuda del reconocimiento de objetos con Machine Learning. Un frontend hablando de Machine Learning, ¿qué puede salir mal? 🤗

  • Houdini: programando en CSS

    JSDay Canarias 2018: CSS siempre se ha considerado la parte menos controlable, complicada, mágica y en ocasiones algo aleatoria. Houdini nos ofrece un conjunto de APIs y herramientas Javascript que nos dan la posibilidad de extender CSS para acceder al proceso de diseño y estilo del motor de renderizado del navegador.

  • Image Optimization + Machine Learning

    Como profesionales del desarrollo web, nos procupamos de las buenas prácticas en Javascript y CSS, de la semántica en HTML, de la accesibilidad de nuestro contenido, pero ¿qué pasa con la imágenes? Las imágenes representan hasta el 60% del contenido de los sites, desde julio de 2017 en un site promedio de 3.0Mb, 1.7Mb son imágenes. Ahora que sabemos que deberíamos dedicar tiempo a optimizar las imágenes, veamos los diferentes niveles de optimización, cómo automatizarlos y cómo con la ayuda del Machine Learning conseguir reducir un 15-17% el peso de algunas imágenes. En esta charla veremos herramientas para el análisis de las imágenes, la optimización, la validación (aka Tests) y cómo reducir el peso de alguna imágenes con la ayuda del reconocimiento de objetos con Machine Learning. Un frontend hablando de Machine Learning, ¿qué puede salir mal? 🤗

  • Image Optimization

    Como profesionales del desarrollo web, nos procupamos de las buenas prácticas en Javascript y CSS, de la semántica en HTML, de la acesibilidad de nuestro contenido, pero ¿qué pasa con la imágenes? Las imágenes representa hasta el 60% del contenido de los sites, desde julio de 2017 en un site promedio de 3.0Mb, 1.7Mb son imágenes. Ahora que sabemos que deberíamos dedicar tiempo a optimizar las imágenes, veamos los diferentes niveles de optimización y formas de hacerlo.

  • PostCSS

  • Animaciones SVG

    Presentación de la charla Animaciones SVG en el MeetUp Schibsted Spain (Barcelona | Feb. 2018)

  • CSS en tiempos modernos

    Evolución del desarrollo CSS | Codemotion 2017

  • ¿Quieres animaciones? Claro que sí, WAAPI

    Presentación de la charla ¿Quieres animaciones? Claro que sí, WAAPI | Codemotion 2017

  • CSS Craftsmanship

    Slides de la charla CSS Craftsmanship en la conferencia Software Craftsmanship Barcelona 2017 http://scbcn.github.io/

  • Arquitectura CSS con ITCSS

  • ITCSS: Especificidad CSS

    Sesión en abierto del Curso de Arquitectura Profesional CSS con ITCSS en Escuela IT

  • SVG

    Using SVG for graphics and drawings in web & apps

  • SVG Animations

    Presentación del a charla Animaciones SVG para el Codemotion 2016 (18 - 19 Nov)

  • CSS Regression Testing

  • CSS en tiempos modernos

    Evolución del desarrollo CSS

  • SVG

    Presentación para el Workshop de SVG en Schibsted Spain

  • Flexbox

  • ECMAScript 2015

  • PostCSS

  • DOM

  • Formatos Enriquezidos

  • Buenas-Practicas-Javascript