DEV Community: Seb Méndez

Capsula frontend #1

Seb Méndez — Mon, 14 Aug 2023 01:30:00 +0000

Después de ver esta grandiosa charla sobre el acto radical de crear tu página web personal sin importar si luce “horrible”, entre más rara mejor, y mientras preparo el siguiente gran artículo para este blog, escribo esta pequeña primera cápsula para compartirles un poco de inspiración para el front-end que he encontrado.

También lo escribo porque recién, en mi nuevo trabajo como sensei en DevF, un alumno me pidió consejo para su portafolio y le compartí algunas de la páginas a continuación.

Página personal de Greg Ives

Mientras hacía el más reciente rediseño de mi portafolio encontré la página de Greg Ives, que tiene una animación en la foto de la página principal que puede mantenerte entretenido por un largo rato, como a mí.

Algo curioso es que también Greg agrego un guestbook, muy a la vieja escuela. Quizás en el futuro agregue uno aquí.

Portafolio de Jemina Abu

La página de Jemina también fue parte muy importante para el nuevo diseño de mi portafolio, como quizás lo podrás notar. Además de que gracias a su artículo sobre cómo desarrollar un portafolio con el mejor puntaje para Lighthouse me ayuda a comprender lo necesario para hacer lo mismo con el mio.

Página personal de Lene Saile

La página de Lene me encanta porque tiene un diseño muy personal y sobrio, en mi opinión. Además de que su plantilla para crear páginas web excelentes también parte de mi inspiración para ordenar el código de mi página.

Build excellent websites

Esta inspiración además de ser visual lo ha sido para la forma en la que abordo un nuevo proyecto web. Esta página creada por Andy Bell, se explica los principios a seguir para ser el mentor del navegador y no su micromanager.

Lo recomiendo con creces, pues me ha hecho reflexionar sobre que tecnologías debo ocupar para mis próximos proyectos y me ha hecho revalorar las capacidades de la web actualmente.

Melonking

Y por ultimo pero no menos interesante, les comparto la página de Melonking. Esta bello rincón de la web es una de las tantas demostraciones de que lo que es posible plasmar con HTML, CSS y JavaScript cuando el propósito de crear es crear en sí mismo.

Una página muy divertida y llena de tantas sorpresas, te invito a visitarla.

Para concluir

Estas han sido unas de las principales inspiraciones que he tenido para seguir construyendo páginas para la web, y solo me recuerdan de lo se puede ser capaz con tan solo compartir un enlace con el mundo.

Nos vemos hasta la próxima, y sigue construyendo para la web 🌐.

Fuentes responsivas con CSS: la función clamp y el escalamiento modular

Seb Méndez — Fri, 12 May 2023 03:30:00 +0000

La parte más importante y de lo que están hechas principalmente nuestras páginas web es el texto. Es a través de este que transmitimos el mensaje que queremos hacer llegar a las personas que nos visitan. Es por eso que debemos asegurarnos de que la fuente que utilicemos sea legible tanto para dispositivos pequeños y grandes, así como para personas con discapacidades visuales.

En este artículo hablaré sobre cómo podemos configurar el tamaño de las fuentes para que este sea responsivo y sobre el escalamiento modular para la jerarquización de los títulos, subtítulos y demás textos.

Función clamp de CSS

La función clamp de CSS “sujeta” un valor preferido entre un valor mínimo y un máximo. Si el valor preferido llegara a ser más pequeño que el mínimo, tomará el valor mínimo, y si el valor preferido llegara a ser más grande que el valor máximo, no sobrepasará este último. Checa el siguiente ejemplo:

En este ejemplo, conforme vayamos cambiando el ancho de la ventana, el tamaño de la fuente cambiará de forma fluida.

El tamaño mínimo para la fuente es de 1rem, que es equivalente a 16px en la mayoría de los casos, pero habrá algún usuario que cambiará la preferencias de su navegador y el tamaño preferido sería uno más pequeño o grande.

En el tamaño preferido utilizamos la unidad de medida vi, que se refiere al tamaño del viewport inline, lo que es igual al ancho de la ventana cuando la dirección de lectura es horizontal. 0.5vi equivale al 0.5% del ancho del viewport.

Por último, en el tamaño máximo utilizamos 1.5rem, lo que sería equivalente a incrementar el tamaño de la fuente hasta 1.5 veces.

Y con esta simple línea de CSS nos bastaría para que el tamaño de nuestras fuentes respondan al tamaño de la pantalla y preferencias del usuario. Sin embargo, podemos ir más allá con el siguiente tema.

Escalamiento modular

El escalamiento modular es un algoritmo que nos permite escalar el tamaño de nuestras fuentes de la misma forma en que en la música se crean las armonías, para así añadir una armonía visual a la jerarquía de los textos.

En este ejemplo, la diferencia entre cada tamaño de las fuentes es de 0.5rem, la cual es regular y se denomina una serie aritmética , pero en la parte visual la diferencia no es cohesiva, pues la proporción entre cada tamaño varia. Por ejemplo, entre el tamaño --fs-sm = 1rem y el --fs-md = 1.5rem su proporción es de 1.5, pero entre --fs-xl = 2.5rem y --fs-xxl = 3rem es de 0.83.

Para crear una proporción regular utilizaremos una serie armónica , la cual es una secuencia de fracciones basada en una serie aritmética que incrementa por 1.

1,2,3,4,5,6 // Serie aritmética1,½,⅓,¼,⅕,⅙ // Serie armónica

Checa el siguiente ejemplo, utilizando la función clamp:

Primero establecemos la proporción que deseamos en la variable --ratio . Luego establecemos un tamaño base, que este caso fue --fs-md en el cuál utilizamos la función clamp para que el tamaño se vaya ajustando al tamaño de la pantalla.

Para disminuir el tamaño de fuente debemos de dividir el tamaño anterior entre el radio, como pasa con --fs-sm: calc(var(--fs-md) / var(--ratio)) , y así sucesivamente con tamaños más pequeños.

Para incrementar el tamaño debemos multiplicar el tamaño anterior por el radio, como pasa con --fs-lg: calc(var(--fs-md) * var(--ratio)) , y así sucesivamente con los siguientes tamaños.

Para terminar

Estos dos temas son uno de los tantos pasos que se necesitan para asegurar la legibilidad de los textos en nuestras páginas web. Espero te haya servido y en seguida te dejo enlaces a artículos relacionados y herramientas que te servirán.

Hasta la proxima, y sigue construyendo para la web 🌐.

Enlaces útiles

Type Scale: herramienta que te ayudará a elegir la proporción que tu proyecto necesita.
Modular scale: artículo sobre el escalamiento modular del proyecto Every Layout.
Great Typography with Modern CSS (with Mike Mai) | Some Antics: video donde Ben Myers y Mike Mai implementan consensos para la tipografía de las páginas web.

Qué es la accesibilidad web

Seb Méndez — Tue, 28 Mar 2023 00:00:00 +0000

Imagina que tu mouse deja de funcionar, entonces cambias a moverte por medio del teclado y vas a comprar uno nuevo. Pan comido.

Qué tal si hablamos de una persona que tiene parálisis en la mayor parte de su cuerpo, o es ciega. Tu nuevo mouse le será inútil a este tipo de personas, y para ellos no sería accesible la forma en que tú utilizas la web.

No todos utilizamos la web de la misma manera. Hay personas que nacen con capacidades distintas a la nuestras, incluso con la edad podemos ir perdiéndolas. Mejorar y siempre tener en cuenta la accesibilidad de nuestras páginas es importante para asegurar que todos puedan acceder a la información que hay en ellas.

¿Qué es la accesibilidad web?

La accesibilidad es una característica de la páginas web que se enfoca en la experiencia del usuario y como este puede acceder a ella. No solo se enfoca en las personas con capacidades diferentes, sino que también para facilitarnos la vida a los que no tenemos alguna discapacidad.

La World Wide Web Consortium (W3C) es la que se encarga de la estandarización de las directivas para la web y su accesibilidad. El rango de capacidades que una página web debe dar acceso son:

Auditivas
Cognitivas
Neurológicas
Físicas
Del habla
Visuales

Los objetivos de la accesibilidad web son la inclusión, un diseño universal y para todos y disminuir la brecha digital. No solo se trata de las distintas capacidades físicas y mentales de una persona, sino también de la calidad de su conexión a internet y la capacidad de cómputo que tiene disponible.

Pero antes incluso de empezar a leer las directivas e implementarlas, debemos entender que la accesibilidad es sobre las personas. La web no debería ser una barrera para conectar y participar para las personas con discapacidades, sino la solución.

Modelos social y médico de las discapacidades

Imaginemos una persona en silla de ruedas que quiere entrar a un edificio, y la única forma que tiene para acceder a él son escaleras. ¿Cuál sería el verdadero problema aquí?

En el modelo médico de las discapacidades , se tiende a buscar “curar” la discapacidad de las personas para que así sean capaces de ser parte de la sociedad. En este modelo la discapacidad se ve como un defecto en las personas que lo padecen.

En el modelo social de las discapacidades , se distinguen a las discapacidades como las restricciones impuestas por la sociedad. La solución no es “arreglar” al individuo sino a la sociedad para que esta sea más incluyente.

Eliminar las discapacidades sería limitar el número de experiencias distintas para experimentar el mundo, así como de voces, opiniones e ideas que muy pocas veces son escuchadas.

Características de una página web accesible

Crear páginas accesibles para todos es crear páginas web de calidad. Asegurar un diseño universal y escribir un buen código es clave para un mayor alcance de lo que publicamos, pues le damos la oportunidad a muchas más personas de acceder a lo que queremos compartir.

Para lograr lo anterior, debemos tener en cuenta las siguientes cuatro características que una página web debe cumplir para ser accesible:

Perceptible

Toda la comunicación depende en los sentidos. Que el contenido de una página no sea perceptible por los sentidos de la vista, del oído o del tacto, es por definición inaccesible.

Por ejemplo: el diseño web puede ser una poderosa herramienta para asegurar tráfico y una buena experiencia para los personas que visiten nuestras páginas, pero para las personas con discapacidades visuales dependerán de lectores de pantalla , como son los que leen en voz alta o pantallas de braile, para acceder a ellas. Es por eso que la buena estructura y el uso de las etiquetas semánticas al maquetarlas le facilitarán la vida a estas personas.

Para las personas con discapacidades auditivas , los vídeos con subtítulos o audios con su respectiva transcripción serán necesarios para poder acceder a este tipo de contenido.

Usable

Para las personas con discapacidades físicas podrán utilizar tecnologías que las asistan para interactuar con su computadora como son controles de sorbos y soplos, joysticks o el teclado para moverse por las páginas. Un orden lógico y estructura semántica facilitarán su navegación.

El uso de animaciones y los límites de tiempo pueden ser problemáticos para personas con discapacidades cognitivas , pues estas pueden ser confusas u obstaculizar su interacción con la página, y a veces imposibilitar su uso.

Entendible

Que una página sea entendible se refiere al uso de un lenguaje sencillo y accesible para todos, y una estructura donde sea fácil navegar a través de ella, además del uso de representaciones complementarias o alternativas para el contenido.

El uso de ilustraciones, gráficos, vídeos, audios, entre otros facilitan la compresión del contenido mostrado, y eso no solo ayuda a las personas con discapacidades cognitivas sino también para las personas que apenas estén explorando el tema.

Robusta

Una página robusta es aquella a la que se puede acceder en la mayor cantidad de dispositivos , ya sean recientes o antiguos. Cuando una persona accede a la web, espera que esta funcione; algunos usuarios querrán utilizar las tecnologías más nuevas y otros las desactivarán. Cuando las personas pueden decidir qué tecnologías utilizar, le estamos dando más poder para acceder a la web.

Para asegurar la robustez de nuestras páginas en el futuro deberemos utilizar las especificaciones actuales, con eso podemos tomar ventaja de las características actuales de la tecnología que los navegadores y tecnologías que asisten a las personas con discapacidades podrán interpretar correctamente en el futuro.

Para terminar

La accesibilidad es esencial para unos, y útil para todos. La accesibilidad web y las tecnologías de asistencia no solo facilitan el acceso a las personas con discapacidades o de bajos recursos, sino que también a los que no las tienen. Es importante no dejar de lado o para después la accesibilidad de nuestras páginas para darle mayor alcance y acceso a más personas en el internet.

Este es un tema mucho más extenso y en este artículo te lo he resumido a modo de introducción para invitarte a que lo sigas leyendo por tu cuenta y lo practiques en tus proyectos nuevos o ya existentes.

Por una internet más accesible, sigue construyendo la web 🌐.

Referencias

Cómo funciona la cascada de CSS

Seb Méndez — Fri, 10 Mar 2023 18:00:00 +0000

Empecemos con un ejemplo sencillo. Tenemos dos títulos, ambos con la clase title.

<h2 class="title">
  Hola, esto es un título
</h2>
<h2 class="title" style="color: green">
  Hola, esto es otro título
</h2>

Y tenemos nuestro código CSS que hemos incluido en el head de nuestro html:

.title {
  color: blue;
}

h2 {
  color:hotpink;
}

Tenemos declarado un color para la clase title, tenemos otro para los elementos h2, y además el segundo título tiene una declaración de estilos inline. ¿Qué color saldrá ganador para cada uno de los títulos? Tómate tu tiempo y después puedes confirmar tu respuesta en seguida.

En el primer título ha ganado el color azul, y para el segundo el color verde.

¿Por qué ha sucedido esto? Para el primero ha ganado el estilo por la especificidad del selector de clase que es más alta que la de un selector de elemento. En cambio, el segundo titulo ha resultado verde a pesar de que tiene la clase title, aquí la cascada has decido que el estilo inline que tiene este elemento es el ganador.

Ahora, si tenemos un proyecto más complejo donde trabajamos con un equipo con diferentes personas, y que pueden existir muchos más conflictos, o incluso hablando de un proyecto superpersonalizado como puede ser tu web personal o para un cliente, ahí es donde entender la cascada nos ahorrara varios malos ratos.

¿Qué es la cascada en CSS?

En simples palabras, la cascada es el algoritmo que decide que estilo tiene prioridad sobre otro. Esta contiene distintos pasos que determinan que estilos se van aplicar a nuestros documentos HTML. Visualmente sería algo parecido a la siguiente imagen, donde algunos chorros de agua caen desde distintas alturas en la misma cascada.

Pasos de la cascada

Estas serían las “caídas” de la cascada de CSS, empezando desde las más prioritarias:

Origen e importancia

Este primer criterio esta basado en el origen de los estilos y de si son declarados como importantes o no, con el uso de !important.

Declaración de transiciones: aquellas, que con el uso de la propiedad transition , declaran la forma en que las propiedades de un selector se modifican con un tiempo y forma determinado.
Declaraciones importantes del user agent: estas son las que cada navegador aplica por defecto a los documentos HTML con !important.
Declaraciones importantes del usuario: las que el usuario mismo de nuestras páginas puede aplicar, ya sea con una extensión o a través de las herramientas de desarrollo del navegador.
Declaraciones importantes del autor: o sea, nosotros los desarrolladores que escribimos el código.
Declaraciones de animaciones: esas que creamos a partir de keyframes y describimos de que forma las propiedades de un elemento cambiaran a través del tiempo.
Declaraciones normales del autor.
Declaraciones normales del usuario.
Declaraciones normales del user agent.

Contexto

Este se refiere al contexto en que los elementos están agrupados dentro del DOM, donde podemos tener shadow trees. Estos sub-arboles del DOM están encapsulados y pueden contener sus propios estilos sin afectar a los del árbol principal.

Veamos el siguiente ejemplo. Puse un titulo nativo con un color purpura que obtiene de la clase title. Luego creé un componente web llamado mi-titulo en un shadow tree, añadiéndole una clase con el mismo nombre que la anterior y además le agregue la propiedad !important.

Si abres las herramientas de desarrollo del navegador podrás notar que mi componente web esta encapsulado en un shadow-root, por lo que existe en un contexto diferente al del resto del DOM. Es por eso que la regla !important dentro de este componente no afecta al título fuera de él.

Estilos `inline` de los elementos

Estos son lo que encontramos adjuntos a los elementos en el mismo documento HTML, y su origen se considera parte de los estilos del autor. Su especificidad es mucho más alta que cualquier otro selector. De este caso ya vimos un ejemplo al principio.

Layers

Layers, o capas en español, son una característica que recientemente se ha agregado a la especificación de la cascada y herencia de CSS nivel 5. Las capas nos proveen una forma estructurada de balancear y organizar los estilos que provienen de un mismo origen.

Entre los layers gana la que sea declarada al último , y dentro de ellas siguen las misma reglas que en el criterio de origen e importancia. Las últimas declaraciones normales ganan, y con las importantes ganan las primeras.

En el ejemplo anterior podrás notar que agregué tres layers (layerA, layerB y layerC), pero en la primera línea del documento CSS declaré de forma explícita el orden con el cual deben ser interpretados. Como puse el layerB en la última posición se han aplicado sus estilos, pero sin esa primera línea hubiera ganado el layerC.

Especificidad

La especificidad es calculada a partir del valor de cada tipo de los selectores. Esta da como resultado una triada de números (A, B, C) que representan que tan específica es una combinación de selectores. Donde:

A representa a los selectores de ID.
B representa a los selectores de clase, de atributo y pseudo-clases.
C representa a los elementos y pseudo-elementos.

La combinación de selectores con el número más alto de especificidad gana.

#greeting {/**/} /*(1, 0 ,0) */
#greeting::before {/**/} /* (1, 0, 1) */

nav > a:hover::before {/**/} /* (0, 1, 3) */
.text {/**/} /* (0, 1, 0) */

Orden de aparición

Si ninguna de todas las anteriores resuelve el conflicto entre estilos, la cascada le dará la victoria al último estilo que aparezca declarado. Aquí también entra en juego la regla @import, pues su posición también afecta al orden de aparición. Por ejemplo:

@import 'blocks.css';
@import 'utilities.css';

Aquí las declaraciones dentro de utilities serán las ganadoras sobre las de blocks porque las hemos importado al último en nuestro documento global de CSS. Parecido a como lo vimos con los layers, cuando declaramos su orden de forma explícita.

Para terminar

Las cascada de CSS, que es de ahí de donde saca la “C”, es una parte fundamental de entender para cuando creemos nuestros estilos. En este artículo te resumí muy brevemente como funciona y la verdad es que este tema abre la oportunidad para hablar de los demás que la componen.

Próximamente compartiré nuevos artículos más detallados sobre la especificidad y los layers, y otras cosas interesantes sobre CSS para ahorrarte los momentos de “no tengo idea que estoy haciendo” con este poderoso lenguaje.

Hasta la próxima, y sigue construyendo la web 🌐.

DEV Community: Seb Méndez

Capsula frontend #1

Página personal de Greg Ives

Portafolio de Jemina Abu

Página personal de Lene Saile

Build excellent websites

Melonking

Para concluir

Fuentes responsivas con CSS: la función clamp y el escalamiento modular

Función clamp de CSS

Escalamiento modular

Para terminar

Enlaces útiles

Qué es la accesibilidad web

¿Qué es la accesibilidad web?

Modelos social y médico de las discapacidades

Características de una página web accesible

Perceptible

Usable

Entendible

Robusta

Para terminar

Referencias

Cómo funciona la cascada de CSS

¿Qué es la cascada en CSS?

Pasos de la cascada

Origen e importancia

Contexto

Estilos inline de los elementos

Layers

Especificidad

Orden de aparición

Para terminar

Referencias

Estilos `inline` de los elementos