Internet y la Web no son lo mismo

Cuando me encuentro cosas como este titular en el periódico El País:

30º aniversario de Internet: las 51 webs que han hecho de la Red lo que hoy es

Me sale un poco de espuma por la boca.

Cuando en otro artículo del periódico El País, Las tres amenazas que se ciernen sobre la web, escrito por el propio Tim Berners-Lee (TBL), leo barbaridades como:

  • 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”.

Afortunadamente, a veces se encuentran titulares bien escritos: No, hoy no es el aniversario de Internet, pero sí de la web.

Si estás leyendo todo esto y no sabes que Internet y la Web no son lo mismo, te recomiendo mi vídeo Internet y la Web:

Cómo estructurar una página web

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.

Otro artículo sobre la divitis

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

Ahora he encontrado otro artículo, Stop using so many divs! An intro to semantic HTML, que explica los siguientes problemas de la divitis:

  • 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…

Recetas de CSS

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.

Las recetas que ofrece hasta ahora son:

Recipe Description Layout Methods
Media Objects A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. CSS Grid, float fallback, fit-content() sizing
Columns When to choose multi-column layout, flexbox or grid for your columns CSS Grid, Multicol, Flexbox
Center an element How to center an item horizontally and vertically Flexbox, Box Alignment
Sticky footers Creating a footer which sits at the bottom of the container or viewport when the content is shorter. CSS Grid, Flexbox
Split Navigation A navigation pattern where some links are visually separated from the others. Flexbox, margin
Breadcrumb Navigation Creating a list of links to allow the visitor to navigate back up through the page hierarchy. Flexbox
List Group with Badges A list of items with a badge to display a count. Flexbox, Box Alignment

Mensajes de error que no deberían aparecer

Aparece el mensaje de error:

Deprecated function: The each() function is deprecated. This message will be suppressed on further calls en menu_set_active_trail() (línea 2405 de /srv/www/edutec.es/web/includes/menu.inc).

Y además, conocemos algo de la estructura de directorios del sitio web.

Excelente.

Este mensaje aparece porque la función each() ha sido “deprecated” en PHP 7.2.0:

Warning
This function has been DEPRECATED as of PHP 7.2.0. Relying on this function is highly discouraged.

Accenture denunciada por Hertz porque su sitio web no es “responsive”

En Accenture sued over website redesign so bad it Hertz: Car hire biz demands $32m+ for ‘defective’ cyber-revamp:

Car rental giant Hertz is suing over a website redesign from hell.

The US corporation hired monster management consultancy firm Accenture in August 2016 to completely revamp its online presence. The new site was due to go live in December 2017. But a failure to get on top of things led to a delay to January 2018, and then a second delay to April 2018 which was then also missed, we’re told.

As Hertz endured the delays, it found itself immersed in a nightmare: a product and design that apparently didn’t do half of what was specified and still wasn’t finished. “By that point, Hertz no longer had any confidence that Accenture was capable of completing the project, and Hertz terminated Accenture,” the car rental company complained in a lawsuit [PDF] lodged against Accenture in New York this month.

Hertz is suing for the $32m it paid Accenture in fees to get to that aborted stage, and it wants more millions to cover the cost of fixing the mess. “Accenture never delivered a functional website or mobile app,” Hertz claimed.

Accenture told El Reg on Tuesday this week it believes Hertz’s lawsuit is “without merit.”

Among the most mind-boggling allegations in Hertz’s filed complaint is that Accenture didn’t incorporate a responsive design, in which webpages automatically resize to accommodate the visitor’s screen size whether they are using a phone, tablet, desktop, or laptop.

That has been standard website practice for years and was even included in the contract that was signed, but the boffins at Accenture decided that only desktop and mobile versions were needed, according to Hertz. When the rental giant’s execs asked where the tablet version was, Accenture “demanded hundreds of thousands of dollars in additional fees to deliver the promised medium-sized layout.”

It actually gets worse.

The specs called for a common core of libraries to be “a fundamental principle of the design” so that the company could share information and structures across all its companies’ websites and apps. And Accenture, well, completely ignored that, according to Hertz.

“Accenture deliberately disregarded the extensibility requirement and wrote the code so that it was specific to the Hertz brand in North America and could not be used for the Hertz global brand or for the Dollar and Thrifty brands,” the lawsuit alleged.