Muy interesante la colección la colección de artículos sobre la historia de la Web que se puede leer en Web History. Por ahora están publicados los capítulos:
El primer teléfono inteligente de la historia
Si se le pregunta a 100 personas cuál fue el primer teléfono inteligente (smartphone) de la historia, seguramente que más de 90 personas dirán que fue el iPhone… No, antes del iPhone hubo teléfonos con características similares. Pero ¿cuál fue el primero?
En el artículo de la Wikipedia IBM Simon podemos leer:
El IBM Simon Personal Communicator es un teléfono móvil fabricado por IBM y distribuido por BellSouth, se le considera el primer teléfono inteligente en la historia, en móviles, además también funcionó como PDA.
Este teléfono se empezó a distribuir en 1994, mientras que el iPhone fue lanzado al mercado en 2007.
En los artículos IBM Simon, el primer smartphone de la historia e IBM Simon, el primer smartphone, cumple 20 años podemos leer más sobre este teléfono inteligente.
La guía completa de los media queries
Muy completo el documento The complete guide to CSS media queries.
Soluciones para la paginación de las páginas web
Muy interesante la explicación que se ofrece en Paginación: un recorrido por diversas soluciones adoptadas en el diseño de sitios web:
Cuando se trata de mostrar grandes cantidades de información en una web, ya sean productos de una tienda, resultados de una búsqueda o anuncios en una web de empleo, tradicionalmente se ha venido utilizando un recurso de interfaz conocido como paginación web. Esta técnica permite mantener el tamaño de cada página dentro de lo manejable en cuanto a navegación e interfaz. Al mismo tiempo, permite reducir el tamaño de la página la cantidad de información a transferir, ganando en velocidad.
Soluciones a nivel de concepto y de diseño sobre una paginación para una web concreta puede haber muchas. Este apunte pretende únicamente mostrar algunos ejemplos recogidos de ciertas webs: qué elementos son comunes y cuáles originales e interesantes. A partir de ahí, cada cual puede meditar la solución más adecuada para su web.
La tabla periódica de las etiquetas de HTML
En Todas las etiquetas del HTML con aspecto de tabla periódica de los elementos se explica que existe All The Tags, una especie de tabla periódica del HTML en el que cada elemento es una etiqueta del lenguaje HTML.
¿Dónde está el botón de envío?
Una interfaz táctil avanzada como causa de un accidente naval
En The Navy installed touch-screen steering systems to save money explican la causa del accidente del buque USS John S. McCain de la marina de Estados Unidos.
MDN Browser Compatibility Report
Muy interesante el informe MDN Browser Compatibility Report:
The challenge of making web sites and applications work consistently across browsers is well known to web developers and designers. In the 2019 MDN Developer Needs Assessment, we learned that indeed it appears to be the overall top pain point when building for the web, with four of the top five frustrations/needs being related:
- Having to support specific browsers (e.g., IE11).
- (Outdated or inaccurate documentation for frameworks and libraries.)
- Avoiding or removing a feature that doesn’t work across browsers.
- Testing across browsers.
- Making a design look/work the same across browsers.
The MDN Browser Compatibility Report is a deeper dive into these issues, attempting to identify specific issues causing a lot of frustration, and what could be done to improve the situation. The research consisted of a survey focused on browser compatibility , followed by interviews with 13 volunteers among the survey participants.
Maquetación minimalista con CSS
En 1-Line Layouts se presentan 10 técnicas básicas de maquetado con CSS que ocupan muy poco:
- Super Centered place-items: center
- The Deconstructed Pancake flex: 0 1 <baseWidth>
- Sidebar Says grid-template-columns: minmax(<min>, <max>) …
- Pancake Stack grid-template-rows: auto 1fr auto
- Classic Holy Grail Layout grid-template: auto 1fr auto / auto 1fr auto
- 12-Span Grid grid-template-columns: repeat(12, 1fr)
- RAM (Repeat, Auto, Minmax) grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
- Line Up justify-content: space-between
- Clamping My Style clamp(<min>, <actual>, <max>)
- Respect for Aspect aspect-ratio: <width> / <height>
También hay un vídeo:
Content delivery networks
En Content delivery networks (CDNs) tenemos una buena explicación de cómo funciona un CDN.