Maquetando con Chuck! https://veedeo.org/c/maquetando_con_chuck/videos En general hay mucho contenido de javascript y no tanto de maquetación, semántica y CSS, por eso he montado este canal, donde poder repasar temas y ejemplos. Todo el código generado se puede consultar en https://github.com/oneeyedman/maquetando-con-chuck Sat, 23 May 2026 13:04:29 GMT https://validator.w3.org/feed/docs/rss2.html PeerTube - https://veedeo.org Maquetando con Chuck! https://veedeo.org/lazy-static/avatars/0d30478d-6fea-478b-bfdd-39bcb710b956.png https://veedeo.org/c/maquetando_con_chuck/videos All rights reserved, unless otherwise specified in the terms specified at https://veedeo.org/about and potential licenses granted by each content's rightholder. https://veedeo.org/feeds/podcast/videos.xml?videoChannelId=2857 <![CDATA[s03_e12 - [serie] Email responsive: tips /8 | Maquetando con Chuck!]]> https://veedeo.org/w/1us3Ww3v7yGx1ugRjfmW9U https://veedeo.org/w/1us3Ww3v7yGx1ugRjfmW9U Thu, 23 May 2024 19:30:08 GMT Tras 8 sesiones hoy cerramos la serie de maquetación de email responsive con un episodio resumen de cosas que hemos visto esta temporada.

Veremos como solucionar el bug de Apple mail con la última imagen cuando no hay contenido y un cierre a base de tips:

  1. Estructura básica.
  2. Tablas.
  3. Herencia.
  4. H1-6, p.
  5. Fuentes.
  6. Colores.
  7. Anchos
  8. Imágenes.
  9. Botones.
  10. Backgrounds.
  11. Clientes de MS.
  12. Flex y Grid no funcionan correctamente.
  13. No merece el esfuerzo.
]]> Maquetando con Chuck! Science & Technology nonadult s03_e12 - [serie] Email responsive: tips /8 | Maquetando con Chuck! Tras 8 sesiones hoy cerramos la serie de maquetación de email responsive con un episodio resumen de cosas que hemos visto esta temporada. Veremos como solucionar el bug de Apple mail con la última imagen cuando no hay contenido y un cierre a ... <![CDATA[s03_e10 - [serie] Email "real" /6 | Maquetando con Chuck!]]> https://veedeo.org/w/nYAfTfgYnY5hfF42AxMCbk https://veedeo.org/w/nYAfTfgYnY5hfF42AxMCbk Wed, 22 May 2024 22:49:10 GMT Continuamos con un ejemplo "real", maquillado para proteger su origen. Vemos las mejoras pendientes de la sesión pasada y hacemos el siguiente módulo de las cuentas que se apilan en móvil.

Hoy veremos que el box-sizing FUNCIONA para email y como gestionar medidas pequeñas (menor que 13px) para Outlook y sus variantes microsoftianas.

Te bajas a maquetar?

]]> Maquetando con Chuck! Science & Technology nonadult s03_e10 - [serie] Email "real" /6 | Maquetando con Chuck! Continuamos con un ejemplo "real", maquillado para proteger su origen. Vemos las mejoras pendientes de la sesión pasada y hacemos el siguiente módulo de las cuentas que se apilan en móvil. Hoy veremos que el box-sizing FUNCIONA para email y com... <![CDATA[s03_e09 - [serie] Email "real" /5 | Maquetando con Chuck!maquetando con chuck s03e09]]> https://veedeo.org/w/2Kzx1vSmYxANpjnC5FoCva https://veedeo.org/w/2Kzx1vSmYxANpjnC5FoCva Wed, 22 May 2024 13:48:50 GMT Vamos con un mail más “real” en tanto a que lo es. Un compañero frontend me ha pasado un diseño que tienen que maquetar en su empresa. Para proteger la identidad de todos he rediseñado encima reconvirtiéndolo a un recordatorio del proceso final de venta de TU ALMA!

Hoy nos ha contratado la empresa más malvada del mundo para mejorar las comunicaciones con sus clientes con un mail que cierre el proceso de venta de almas y presente su nueva app. A TOPE.

Qué vamos a ver en el vídeo:

  • Detección de los puntos críticos
  • Planificación ANTES de maquetar
  • Timeline: gestión de las imágenes de fondo
  • Outlook: usar width en lugar de height
  • Apilado de bloques en móvil

Qué? te apuntas?

]]> Maquetando con Chuck! Entertainment nonadult s03_e09 - [serie] Email "real" /5 | Maquetando con Chuck!maquetando con chuck s03e09 Vamos con un mail más “real” en tanto a que lo es. Un compañero frontend me ha pasado un diseño que tienen que maquetar en su empresa. Para proteger la identidad de todos he rediseñado encima reconvirtiéndolo a un recordatorio del proceso final de... <![CDATA[s03_e08 - [serie] Semántica, módulos y email "The Eye" /4 | Maquetando con Chuck!]]> https://veedeo.org/w/quxPRrcCoWH5DHYY3XeQHw https://veedeo.org/w/quxPRrcCoWH5DHYY3XeQHw Wed, 22 May 2024 09:58:48 GMT Hoy vamos a ver si podemos usar etiquetas semánticas como los títulos y los párrafos, ademas veremos en qué punto está el control del modo oscuro! Además, vamos a revisar dos bloques a petición de una compañera: El típico Hero y un bloque con un botón superpuesto.

]]> Maquetando con Chuck! Science & Technology nonadult s03_e08 - [serie] Semántica, módulos y email "The Eye" /4 | Maquetando con Chuck! Hoy vamos a ver si podemos usar etiquetas semánticas como los títulos y los párrafos, ademas veremos en qué punto está el control del modo oscuro! Además, vamos a revisar dos bloques a petición de una compañera: El típico Hero y un bloque con un b... <![CDATA[s03_e07 - [serie] Email “The Eye” /3 | Maquetando con Chuck!]]> https://veedeo.org/w/6D7gmaez9uTzb9Ghtt22Cy https://veedeo.org/w/6D7gmaez9uTzb9Ghtt22Cy Wed, 22 May 2024 04:06:33 GMT Hoy también hemos picamos código! Con la excusa del segundo email sencillo repasamos las estructuras que propongo usar y por qué. Las probamos en Litmus e incluso hemos luchado alguna que otra sorpresa.

recordad que hay un archivo en Figma con emails (en móvil y desktop): https://www.figma.com/file/zMsjzt26T1k7dRgQU6yn4T/mails-responsive?node-id=0%3A1

Puede que para acceder se necesita una cuenta gratuita de Figma, o incluso que le invite… Me buscáis por Mastodon, Twitter o email y lo solucionamos.

Además, aunque se pueden exportar los assets, he dejado una versión optimizada en una carpeta pública compartida en Drive: https://drive.google.com/drive/folders/1A1WN0QZ_emEgBehKdSVI1_8LG2eDedAM?usp=sharing

Acompañadme un domingo más en esta aventura de locura con los clientes de correo en general y con ESOS clientes de correo de los que usted me habla en ese SO del que usted tb me habla, en puot particular. Con Samsung Mail como invitado especial sorpresa.

]]> Maquetando con Chuck! Science & Technology nonadult s03_e07 - [serie] Email “The Eye” /3 | Maquetando con Chuck! Hoy también hemos picamos código! Con la excusa del segundo email sencillo repasamos las estructuras que propongo usar y por qué. Las probamos en Litmus e incluso hemos luchado alguna que otra sorpresa. recordad que hay un archivo en Figma con ... <![CDATA[s03_e06 - [serie] Mi primer email, ¡Chispas! /2 | Maquetando con Chuck!]]> https://veedeo.org/w/8fdzMeFY2xFY7nJydHEAED https://veedeo.org/w/8fdzMeFY2xFY7nJydHEAED Tue, 21 May 2024 14:39:56 GMT Hoy picamos código! También hablamos de por qué usar esto o aquello, pero picando. Y PROBANDO EN LITMUS.com!!!

He preparado un archivo en Figma con dos emails (en móvil y desktop): https://www.figma.com/file/zMsjzt26T1k7dRgQU6yn4T/mails-responsive?node-id=0%3A1

Puede que para acceder se necesita una cuenta gratuita de Figma, o incluso que le invite… Me buscáis por Mastodon, twitter o email y lo solucionamos.

Además, aunque se pueden exportar los assets, he dejado una versión optimizada en una carpeta pública compartida en Drive: https://drive.google.com/drive/folders/1A1WN0QZ_emEgBehKdSVI1_8LG2eDedAM?usp=sharing

Acompañadme en esta aventura de locura con los clientes de correo en general y cono ESE cliente de correo del que usted me habla en ese SO del que usted tb me habla.

]]> Maquetando con Chuck! Science & Technology nonadult s03_e06 - [serie] Mi primer email, ¡Chispas! /2 | Maquetando con Chuck! Hoy picamos código! También hablamos de por qué usar esto o aquello, pero picando. Y PROBANDO EN LITMUS.com!!! He preparado un archivo en Figma con dos emails (en móvil y desktop): https://www.figma.com/file/zMsjzt26T1k7dRgQU6yn4T/mails-respons... <![CDATA[s03_e05 - [serie] Introducción al email responsive /1 | Maquetando con Chuck!]]> https://veedeo.org/w/tJuqXSEEGViF3ap6LNXYXB https://veedeo.org/w/tJuqXSEEGViF3ap6LNXYXB Tue, 21 May 2024 11:01:54 GMT En esta sesión veremos un poco en el terreno que nos movemos, porqué es tan complicado el tema del email y qué tener en cuenta antes de empezar uno.

Será una primera toma de contacto de cara a meternos en faena, en la siguiente sesión.

]]> Maquetando con Chuck! Science & Technology nonadult s03_e05 - [serie] Introducción al email responsive /1 | Maquetando con Chuck! En esta sesión veremos un poco en el terreno que nos movemos, porqué es tan complicado el tema del email y qué tener en cuenta antes de empezar uno. Será una primera toma de contacto de cara a meternos en faena, en la siguiente sesión. <![CDATA[s03_e04 - Input de tipo range | Maquetando con Chuck!]]> https://veedeo.org/w/3WEkJqG64cJVibMTrwuQuu https://veedeo.org/w/3WEkJqG64cJVibMTrwuQuu Tue, 21 May 2024 09:01:47 GMT Hoy veremos cómo plantear un campo de tipo range, que permite especificar un valor entre un máximo y un mínimo. El elemento nativo tiene una barra horizontal o vertical con un tirador para seleccionar el valor.

Normalmente estos controles se resuelven con mogollón de divs y un poco de js para gestionar los valores, control con ratón y teclado, etc.

Deberíamos usar el control nativo que ya viene con todo el tema de funcionamiento, semántica y accesibilidad solucionado.

Pasa que darle estilos no es lo más agradecido del mundo y también vamos a ver cómo resolver esta parte:

Contenidos:

  • HTML: Input de typo range:
    • Atributos min, max, value, list y step
    • Datalist (no está soportado)
    • Semántica (label, form, output)
  • Estilos: track, thumb y compatibilidad entre navegadores
  • Javascript: Control de la barra de progreso y valor

Bonus:

  • Las marcas.

[CSS-TRICKS] Styling Cross-Browser Compatible Range Inputs with CSS : https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

]]> Maquetando con Chuck! Science & Technology nonadult s03_e04 - Input de tipo range | Maquetando con Chuck! Hoy veremos cómo plantear un campo de tipo range, que permite especificar un valor entre un máximo y un mínimo. El elemento nativo tiene una barra horizontal o vertical con un tirador para seleccionar el valor. Normalmente estos controles se re... <![CDATA[s03_e03 - Generador de estáticos: 11ty (2/2) | Maquetando con Chuck!]]> https://veedeo.org/w/bdDyuwWifHYmDf2hm4CMMJ https://veedeo.org/w/bdDyuwWifHYmDf2hm4CMMJ Tue, 21 May 2024 01:05:33 GMT Ya está subida a la web y repo toda la información de la sesión de hoy de #MaquetandoConChuck.

url: https://spacenomads.com/maquetando-con-chuck

En la sesión de hoy hemos:

  • Arreglado el tema de versiones con el node-fetch
  • Usado el Eleventy-fecht que cache las llamadas
  • Modificado los datos entrantes
  • Copiado carpetas (CSS/IMG)
  • Creado componentes
  • Hecho un pequeño blog basado en archivos Markdown.
]]> Maquetando con Chuck! Entertainment nonadult s03_e03 - Generador de estáticos: 11ty (2/2) | Maquetando con Chuck! Ya está subida a la web y repo toda la información de la sesión de hoy de #MaquetandoConChuck. url: https://spacenomads.com/maquetando-con-chuck En la sesión de hoy hemos: Arreglado el tema de versiones con el node-fetch, Usado el Ele... <![CDATA[s03_e02 - Generador de estáticos: 11ty (1/2) | Maquetando con Chuck!]]> https://veedeo.org/w/2QDS4AuRqr5VrJMwCmnFWk https://veedeo.org/w/2QDS4AuRqr5VrJMwCmnFWk Mon, 20 May 2024 17:59:34 GMT Hoy vamos a ver un generador de estáticos más de nuestro mundo de maqueta: Eleventy o 11ty.

Se trata de un generador fácil de instalar y suficientemente potente que nos permite usar:

  • Variables
  • Parciales/componentes
  • Plantillas

En esta sesión hemos:

  • Instalado 11ty de manera básica
  • Usado Nunjucks como sistema de plantillas
  • Usado parciales y variables
  • La petición de datos ha ido reguler (pero la veremos el domingo que viene)

Las urls que hemos visto son:

]]> Maquetando con Chuck! Entertainment nonadult s03_e02 - Generador de estáticos: 11ty (1/2) | Maquetando con Chuck! Hoy vamos a ver un generador de estáticos más de nuestro mundo de maqueta: Eleventy o 11ty. Se trata de un generador fácil de instalar y suficientemente potente que nos permite usar: Variables, Parciales/componentes, Plantillas, En... <![CDATA[s03_e01 - Estilos para lista de tareas | Maquetando con Chuck!]]> https://veedeo.org/w/eMqAw2tpMppMD1PwwwcKuz https://veedeo.org/w/eMqAw2tpMppMD1PwwwcKuz Mon, 20 May 2024 17:46:56 GMT Empiezo la tercera temporada con un "poner bonica" una lista de tareas en React. Muy a modo de aperitivo y porque me estaba costando empezar.

En esta sesión vemos:

  • CssComb
  • Accesibilidad en el botón de cerrar
  • Aplicaciones para los elementos ::before y ::after
  • Añadir fuentes propias
  • Uso de SVG decorativos
  • Un poquito de flex de batalla.
]]> Maquetando con Chuck! Science & Technology nonadult s03_e01 - Estilos para lista de tareas | Maquetando con Chuck! Empiezo la tercera temporada con un "poner bonica" una lista de tareas en React. Muy a modo de aperitivo y porque me estaba costando empezar. En esta sesión vemos: CssComb, Accesibilidad en el botón de cerrar, Aplicaciones pa... <![CDATA[s02e12 - BEM | Maquetando con Chuck!]]> https://veedeo.org/w/2YDdUDjAMj3sdvN4F93Wjh https://veedeo.org/w/2YDdUDjAMj3sdvN4F93Wjh Sun, 19 May 2024 19:00:28 GMT Vamos a repasar BEM y a asentarlo de una vez, hombre ya! Vamos a ver qué magia negra es esta y cómo usar los guiones medios y bajos, por qué dos y otros misterios de la nomeclatura de clases. Nos sirve para invocar a satanás o para eso no?

]]> Maquetando con Chuck! Science & Technology nonadult s02e12 - BEM | Maquetando con Chuck! Vamos a repasar BEM y a asentarlo de una vez, hombre ya! Vamos a ver qué magia negra es esta y cómo usar los guiones medios y bajos, por qué dos y otros misterios de la nomeclatura de clases. Nos sirve para invocar a satanás o para eso no? <![CDATA[s02e11 - Figma para frontenders | Maquetando con Chuck!]]> https://veedeo.org/w/nwF3NnpiJ5U2RHuvhjJkpG https://veedeo.org/w/nwF3NnpiJ5U2RHuvhjJkpG Sun, 19 May 2024 18:40:37 GMT A veces pasa que nos encontramos en solitario (o no) frente al diseño de nuestro proyecto en Figma, pero nosotros no somos diseñistas, somos frontenders!

Por eso vamos a darle un repaso a la interfaz y ver qué cosas nos ofrece, cuáles no queremos, comentarios y más.

He dejado un diseño de prueba para seguir esta sesión... Y UN PROTOTIPO.

Diseño en Figma:

https://www.figma.com/file/avOGafquVtTp6yviFcMgDt/Figma-para-frontenders?node-id=0%3A1

Prototipo:

https://www.figma.com/proto/avOGafquVtTp6yviFcMgDt/Figma-para-frontenders?page-id=1%3A471&node-id=1%3A472&viewport=359%2C48%2C1.13&scaling=scale-down&starting-point-node-id=1%3A472

]]> Maquetando con Chuck! Science & Technology nonadult s02e11 - Figma para frontenders | Maquetando con Chuck! A veces pasa que nos encontramos en solitario (o no) frente al diseño de nuestro proyecto en Figma, pero nosotros no somos diseñistas, somos frontenders! Por eso vamos a darle un repaso a la interfaz y ver qué cosas nos ofrece, cuáles no quer... <![CDATA[s02e10 - Checkbox y radio, accesibles y sin JS | Maquetando con Chuck!]]> https://veedeo.org/w/pHCneAVGrsMsx1HT5jg7su https://veedeo.org/w/pHCneAVGrsMsx1HT5jg7su Sun, 19 May 2024 18:16:13 GMT Vamos a aprender de una vez a hacer unos elementos custom sin reemplazar a los nativos: Checkbox y Radio accesibles y sin JS.

]]> Maquetando con Chuck! Science & Technology nonadult s02e10 - Checkbox y radio, accesibles y sin JS | Maquetando con Chuck! Vamos a aprender de una vez a hacer unos elementos custom sin reemplazar a los nativos: Checkbox y Radio accesibles y sin JS. <![CDATA[s02e09 - CSS Comb | Maquetando con Chuck!]]> https://veedeo.org/w/jzkppeCdoEnR73JHweAgNX https://veedeo.org/w/jzkppeCdoEnR73JHweAgNX Sun, 19 May 2024 18:15:51 GMT Hoy veremos una utilidad para mantener un estilo uniforme en nuestros css: CSS Comb.

Repo: https://github.com/oneeyedman/maquetando-con-chuck

]]> Maquetando con Chuck! Science & Technology nonadult s02e09 - CSS Comb | Maquetando con Chuck! Hoy veremos una utilidad para mantener un estilo uniforme en nuestros css: CSS Comb. Repo: https://github.com/oneeyedman/maquetando-con-chuck <![CDATA[s02e08 - Menú (3) | Maquetando con Chuck!]]> https://veedeo.org/w/vhXD76QDFtC946j12EmrVj https://veedeo.org/w/vhXD76QDFtC946j12EmrVj Sun, 19 May 2024 17:58:25 GMT Hoy vamos a afinar la funcionalidad de desplegado, aplicar estilos e ir al grano fino para dejarlo como en el diseño.

Repo: https://github.com/oneeyedman/maquetando-con-chuck

]]> Maquetando con Chuck! Science & Technology nonadult s02e08 - Menú (3) | Maquetando con Chuck! Hoy vamos a afinar la funcionalidad de desplegado, aplicar estilos e ir al grano fino para dejarlo como en el diseño. Repo: https://github.com/oneeyedman/maquetando-con-chuck <![CDATA[s02e07 - Menú (2) | Maquetando con Chuck!]]> https://veedeo.org/w/jv9xnrHBJY4NKFQfgvxVNg https://veedeo.org/w/jv9xnrHBJY4NKFQfgvxVNg Sun, 19 May 2024 17:36:47 GMT Hoy rematamos el menú responsive, vamos a que funcione como un menú de verdad y dejarle el js básico puesto... Te bajas a maquetar?

Repo: https://github.com/oneeyedman/maquetando-con-chuck

]]> Maquetando con Chuck! Science & Technology nonadult s02e07 - Menú (2) | Maquetando con Chuck! Hoy rematamos el menú responsive, vamos a que funcione como un menú de verdad y dejarle el js básico puesto... Te bajas a maquetar? Repo: https://github.com/oneeyedman/maquetando-con-chuck <![CDATA[s02e06 - Menú (1) | Maquetando con Chuck!]]> https://veedeo.org/w/5KCXqcmqZ5SG4KQRurntcr https://veedeo.org/w/5KCXqcmqZ5SG4KQRurntcr Sun, 19 May 2024 16:12:00 GMT Hoy vamos a plantear un menú responsive desde cero, con sus cosas mobile, con su disposición de escritorio. Veremos sobre el papel qué necesitamos y haremos una prueba de concepto antes de tirarnos horaquens picando código y que luego vengan los llantos. Yay or nay?

Repo: https://github.com/oneeyedman/maquetando-con-chuck

]]> Maquetando con Chuck! Science & Technology nonadult s02e06 - Menú (1) | Maquetando con Chuck! Hoy vamos a plantear un menú responsive desde cero, con sus cosas mobile, con su disposición de escritorio. Veremos sobre el papel qué necesitamos y haremos una prueba de concepto antes de tirarnos horaquens picando código y que luego vengan los l... <![CDATA[s02e05 - Modales (3) | Maquetando con Chuck!]]> https://veedeo.org/w/ggkyiieBL6GVPRKo4cXyGW https://veedeo.org/w/ggkyiieBL6GVPRKo4cXyGW Sun, 19 May 2024 16:02:07 GMT Vamos a pulir la modal y a asegurarnos de que podemos meter diferente contenido! O qué?

Repo: https://github.com/oneeyedman/maquetando-con-chuck

]]> Maquetando con Chuck! Science & Technology nonadult s02e05 - Modales (3) | Maquetando con Chuck! Vamos a pulir la modal y a asegurarnos de que podemos meter diferente contenido! O qué? Repo: https://github.com/oneeyedman/maquetando-con-chuck <![CDATA[s02e04 - Modales (2) | Maquetando con Chuck!]]> https://veedeo.org/w/xpPHNCE8jKqv5uNQyjbgKe https://veedeo.org/w/xpPHNCE8jKqv5uNQyjbgKe Sun, 19 May 2024 14:57:16 GMT Vamos a pulir la modal y a asegurarnos de que podemos meter diferente contenido! O qué?

Repo: https://github.com/oneeyedman/maquetando-con-chuck

]]> Maquetando con Chuck! Science & Technology nonadult s02e04 - Modales (2) | Maquetando con Chuck! Vamos a pulir la modal y a asegurarnos de que podemos meter diferente contenido! O qué? Repo: https://github.com/oneeyedman/maquetando-con-chuck