I know you’re here to learn about manipulating colors — and we’ll get there. But before we do, we need a baseline understanding of how CSS notates colors. CSS uses two different color models: RGB and HSL.
Both the RGB and HSL color models break down a color into various attributes. To convert between the syntaxes, we first need to calculate these attributes.
With the exception of hue, each value we have discussed can be represented as a percentage. Even the RGB values are byte-sized representations of percentages. In the formulas and functions below, these percentages will be represented by decimals between 0 and 1.
I would like to note that I will not cover the math for these in depth; rather, I will briefly go over the original mathematical formula and then convert it into a JavaScript formula.
RegExr es una herramienta de gskinner para escribir y comprobar expresiones regulares, esas secuencias un tanto crípticas para los «no iniciados» en la programación, que se utilizan para buscar patrones en cadenas de caracteres.
Muy a menudo, las personas con discapacidad no pueden usar los documentos electrónicos porque presentan barreras de accesibilidad. Las tres cosas más sencillas e importantes que puedes hacer para mejorar la accesibilidad de los documentos electrónicos son:
Definir un texto alternativo para las imágenes. Pero a veces no todas las imágenes necesitan un texto alternativo y una imagen puede requerir diferentes textos alternativos según el contexto.
Elegir y usar colores adecuados. Los colores no están prohibidos, se puede usar cualquier color, lo que plantea problemas son las combinaciones de colores erróneas.
Definir una buena estructura del documento con los encabezados. No solo ayuda a las personas con discapacidad, ayuda a todo el mundo, te ayuda a ti mismo porque facilita los cambios, ¿por qué no usas lo encabezados siempre?
Estas tres cosas no garantiza la accesibilidad al 100%, pero sí que suelen ser barreras muy comunes y muy fáciles de evitar. Un pequeño gesto puede ayudar a millones de personas, ¿a qué estás esperando?
Hoy, 30 años después de mi propuesta original para un sistema de gestión de la información, medio mundo utiliza Internet.
Naturalmente, con cada nueva característica y cada nuevo sitio web, la división entre los que usan Internet y los que no aumenta y hace que sea aún más imprescindible lograr que todo el mundo tenga acceso a la Red.
Y aunque Internet ha creado oportunidades, ha dado voz a los grupos marginados y ha facilitado nuestras vidas cotidianas, también ha engendrado oportunidades para los estafadores, ha dado voz a los que difunden el odio y ha facilitado la comisión de todo tipo de delitos.
En los que se intercambia Internet y la Web (o la Red de redes), como si fueran la misma cosa, tengo que buscar el artículo original de TBL, 30 years on, what’s next #ForTheWeb?, para asegurarme de que él no ha escrito esas barbaridades:
Today, 30 years on from my original proposal for an information management system, half the world is online.
Of course with every new feature, every new website, the divide between those who are online and those who are not increases, making it all the more imperative to make the web available for everyone.
And while the web has created opportunity, given marginalised groups a voice, and made our daily lives easier, it has also created opportunity for scammers, given a voice to those who spread hatred, and made all kinds of crime easier to commit.
Y efectivamente, donde TBL puso “half the world is online”, “the divide between those who are online” y “And while the web has created opportunity”, alguien tradujo por “medio mundo utiliza Internet”, “la división entre los que usan Internet” y “Y aunque Internet ha creado oportunidades”.
En How to Section Your HTML explican muy bien cómo estructurar una página web con las diferentes etiquetas semánticas que existen en HTML5:
The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section.
Here is a brief explanation of each sectioning element and how they are used:
<nav> – Equivalent to role=”navigation”. Major site navigation that consistently appears frequently across the site. Examples include the primary navigation, secondary navigation, and in-page navigation.
<aside> – Equivalent to role=”complementary”. Content that is only tangentially related (or not related) to the main content. Think of something like a sidebar with supplementary information, a note within an article, or the outer container for a list of related articles at the bottom of a blog post.
<article> – Equivalent to role=”article”. Content that is self-contained in that it makes sense on its own when taken out of context. That could mean a widget, a blog post or even a comment within a blog post.
<section> – Equivalent to role=”region”. Content that needs extra context from its parent sectioning element to make sense. This is a generic sectioning element that is used whenever it doesn’t make sense to use the other more semantic ones.
La divitis es una enfermedad antigua, el primer artículo que conozco que habló sobre esta enfermedad es del año 2006: Divitis: what it is, and how to cure it
Accessibility – Many a11y tools are pretty smart, and try their best to parse the structure of a page to help guide users through it in the way the page’s author intends, and to give users easy jump points to navigate quickly to the section of the page they care about. But <div>s don’t really impart any useful info about the structure of a document. The smartest a11y tool in the world still ins’t a human, and can’t be expected to parse class and id attributes and recognize all the weird and wild ways that devs all over the world name their blocks. I can recognize that class=”article-header-level-2″ is a subheading, but a robot can’t. (And if it can, get it out of my computer, I’m not ready for the AGI revolution just yet.)
Readability – To read this code, you need to carefully scan for the class names, picking them out from between the <div class=”…”></div> boilerplate. And once you’re a few levels deep in the markup, it becomes tricky to keep track of which </div> closing tags go with which <div…> opening tags. You start to rely very heavily on IDE features like coloring different indentation levels or highlighting the matching tag for you to keep track of where you are, and in larger documents it can require a lot of scrolling on top of those features.
Consistency and standards – It can be frustrating to start a new job or move to a new project and have to learn from scratch all the crazy markup conventions used across the codebase. If everyone had a standardized way to mark up common structures in web documents, it would be much easier to skim an HTML file in an unfamiliar codebase and get a quick handle on what it’s supposed to represent. If only there was such a standard…
Muy interesante todo lo que se explica en CSS Layout cookbook de Mozilla Developer Network:
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
