Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Linkoteca. HTML

htmx. High power tools for HTML

Imago voragine.net
• , ,

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

htmx is small (~16k min.gz’d), dependency-free, extendable & has reduced code base sizes by 67% when compared with react
motivation

Why should only &

be able to make HTTP requests?
Why should only click & submit events trigger them?
Why should only GET & POST methods be available?
Why should you only be able to replace the entire screen?

By removing these constraints, htmx completes HTML as a hypertext

How to Create Accessible Infographics And Data Visualizations

Imago voragine.net
• , , ,

Accessibility in infographics and data visualizations ensures that all users, including those with disabilities, can access and understand the information presented. This is not just a matter of compliance with accessibility standards like the Web Content Accessibility Guidelines (WCAG), but also an intrinsic element of inclusive design.

With that said, to truly make data-driven content accessible to all users, including those with visual impairments, following accessibility guidelines and design techniques is essential. In this short guide, we’ll examine proven techniques for creating accessible infographics and data visualizations that are inclusive and understandable to a wide audience.

Web Accessibility Initiative: Forms Tutorial

Imago voragine.net
• , , , , ,

Forms are commonly used to provide user interaction on websites and in web applications. For example, login, registering, commenting, and purchasing. This tutorial shows you how to create accessible forms. The same concepts apply to all forms, whether they are processed client or server-side.

Aside from technical considerations, users usually prefer simple and short forms. Only ask users to enter what is required to complete the transaction or process; if irrelevant or excessive data is requested, users are more likely to abandon the form.

Forms can be visually and cognitively complex and challenging to use. Accessible forms are easier to use for everyone, including people with disabilities.

  • People with cognitive disabilities can better understand the form and how to complete it, as making forms accessible improves the layout structure, instructions, and feedback.
  • People using speech input can use the labels via voice commands to activate controls and move the focus to the fields that they have to complete.
  • People with limited dexterity benefit from large clickable areas that include the labels, especially for smaller controls, such as radio buttons and checkboxes.
  • People using screen readers can identify and understand form controls more easily because they are associated with labels, field sets, and other structural elements.

What is an H1 Tag? SEO Best Practices

Imago voragine.net
• , ,

Google’s John Mueller says using multiple H1s per page is fine.

If you’re using HTML5, this is strictly true. There’s nothing technically wrong with using multiple H1 tags in different sections.

Given that this isn’t best practice by W3C standards, why is this Google’s advice?

Answer: Because they’ve developed mechanisms to deal with the common problem of multiple H1s on a web page.

So although it probably doesn’t matter that much for SEO whether you use one or multiple H1 tags, we still think it’s best practice for most websites.

Electron. Build cross-platform desktop apps with JavaScript, HTML, and CSS

Imago voragine.net
• , , , ,

https://www.youtube.com/watch?v=8YP_nOCO-4Q

Building cross-platform desktop applications comes with a unique set of challenges that can stand in your way when you are trying to transform your ideas into software. Web apps avoid some of these hurdles, but they have limitations that make them impractical for building native desktop applications. Electron lets you harness the best parts of these technologies to build beautiful, cross-platform desktop applications using HTML, JavaScript, and CSS.