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 Gridfloat fallback, fit-content() sizing
Columns When to choose multi-column layout, flexbox or grid for your columns CSS GridMulticolFlexbox
Center an element How to center an item horizontally and vertically FlexboxBox Alignment
Sticky footers Creating a footer which sits at the bottom of the container or viewport when the content is shorter. CSS GridFlexbox
Split Navigation A navigation pattern where some links are visually separated from the others. Flexboxmargin
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. FlexboxBox 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.

Microsoft renuncia a la caducidad de las contraseñas por ser un método inútil

En Microsoft renuncia a la caducidad de las contraseñas por ser un método inútil:

Microsoft renuncia a la caducidad de las contraseñas. A partir de ahora, no exigirá su cambio periódico tras comprobar que es una medida inútil e incluso peligrosa. Esta medida pretendía evitar que una cuenta fuera pirateada, pero según reconoce Aaron Margosis, consultor principal de la compañía, su efectividad es nula. “Si una contraseña no ha sido robada no hay necesidad de cambiarla. Y si hay evidencia de que ha sido robada, hay que actuar de inmediato, sin esperar a que caduque”, explica en el blog de seguridad de la compañía (Microsoft Security Guidance blog).

[…]

“La caducidad periódica de la contraseña es una fórmula antigua y obsoleta con muy poco valor y creemos que no es válida dentro de nuestra política de seguridad”, reconoce Margosis.

¿Cómo se generan las páginas web en la actualidad?

En Rendering on the Web se analizan las distintas formas que existen de generar páginas web en la actualidad:

As developers, we are often faced with decisions that will affect the entire architecture of our applications. One of the core decisions web developers must make is where to implement logic and rendering in their application. This can be a difficult, since there are a number of different ways to build a website.

Our understanding of this space is informed by our work in Chrome talking to large sites over the past few years. Broadly speaking, we would encourage developers to consider server rendering or static rendering over a full rehydration approach.

In order to better understand the architectures we’re choosing from when we make this decision, we need to have a solid understanding of each approach and consistent terminology to use when speaking about them. The differences between these approaches help illustrate the trade-offs of rendering on the web through the lens of performance.

Rendering

  • SSR: Server-Side Rendering – rendering a client-side or universal app to HTML on the server.
  • CSR: Client-Side Rendering – rendering an app in a browser, generally using the DOM.
  • Rehydration: “booting up” JavaScript views on the client such that they reuse the server-rendered HTML’s DOM tree and data.
  • Prerendering: running a client-side application at build time to capture its initial state as static HTML.

Performance

  • TTFB: Time to First Byte – seen as the time between clicking a link and the first bit of content coming in.
  • FP: First Paint – the first time any pixel gets becomes visible to the user.
  • FCP: First Contentful Paint – the time when requested content (article body, etc) becomes visible.
  • TTI: Time To Interactive – the time at which a page becomes interactive (events wired up, etc).