Cargando…

Joe Steinbring

Sitio web personal y jardín digital

jws.dev

Un sitio personal estático en inglés y en español: experiencia profesional, currículum, viajes, proyectos y actividad pública, con su propia API JSON y alojado por mí mismo tras NGINX.

En desarrollo activo
La página de inicio de jws.dev: un retrato de cuerpo entero junto a una presentación con enlaces a mi experiencia, mi currículum y mis proyectos.
La página de inicio de jws.dev: un retrato de cuerpo entero junto a una presentación con enlaces a mi experiencia, mi currículum y mis proyectos.
La página de inicio de jws.dev, capturada de la compilación actual.

De un vistazo

Estadísticas del proyecto

Destinos de viaje
112
Idiomas
2
Tecnologías documentadas
84
Colecciones de la API
14
Disponibilidad
100 %En los últimos 30 días, según UptimeRobot.
Días desde el último cambio
51
Días desde la última compilación
0

Propósito y rumbo

El objetivo

jws.dev reúne mi trayectoria profesional, mis proyectos, mis viajes y mi actividad pública bajo un dominio que es mío y que alojo yo mismo. Está hecho deliberadamente para demostrar y no solo afirmar: cada página se prerrenderiza y NGINX la sirve como un archivo estático, de modo que Node.js solo lo usa el sistema de compilación y nunca al atender una petición. Todo el sitio se publica en inglés y en español, el mismo contenido está disponible en una API JSON con versiones para que se pueda crear una aplicación nativa sobre ella, y un conjunto de auditorías automáticas tiene que superarse antes de publicar una compilación.

Registro de cambios

Cambios recientes

Las últimas cosas que he documentado sobre jws.dev.

  1. CambiadoLo más reciente

    Lo que genera la compilación, fuera del repositorio

    Los mapas estáticos, las tarjetas sociales, las métricas del sitio y las fotografías guardadas se regeneran en cada compilación, así que no tienen por qué estar versionados.

  2. Añadido

    Una tarjeta de vista previa para cada página

    Cada página tiene ahora su propia tarjeta dibujada —un título, una línea de contexto y mi retrato o la marca del sitio— en lugar del icono de la aplicación.

  3. Corregido

    El mapa de un estado se abre sobre el estado

    Abrir Nuevo México mostraba todo Estados Unidos: el mapa fijaba su límite de alejamiento antes de encuadrar la forma, y al encuadre no le quedaba margen para nada.

  4. Añadido

    China, y Nuevo México

    Dos incorporaciones a la sección de viajes: el viaje de 2018 por Shanghái, Wuxi, Suzhou y Pekín, y una página de Nuevo México salida de dos viajes familiares a Cimarron y Taos.

Los 7 cambios

Conectado con mi experiencia

Tecnologías utilizadas

Elige una tecnología para leer más sobre mi experiencia con ella y sobre cómo la uso.

Explorar las tecnologías del proyecto

AstroRutas estáticas, páginas de contenido generadas, metadatos, entrega optimizada de imágenes y un resultado de producción que sirve NGINX.Vue.jsComponentes renderizados en el servidor, e islas interactivas concretas para los mapas, los carruseles de fotos, el explorador de viajes, los feeds de actividad y los artículos relacionados.Node.jsGeneradores de contenido en tiempo de compilación, auditorías de coherencia, procesamiento de datos y la generación del currículum; el servidor web de producción no necesita Node.js.Componentes webComponentes reutilizables basados en estándares que funcionan sin problemas junto a Astro y Vue.Web AwesomeTarjetas, maquetación de páginas, observadores, controles y otras piezas básicas de la interfaz, instalados en local.Font AwesomeIconos semánticos servidos desde el propio sitio para la navegación, las acciones, las referencias a tecnologías y los metadatos.LeafletMapas de viaje interactivos, reforzados con alternativas estáticas locales para que funcionen sin conexión.HTML semánticoUna estructura de página con significado, para la accesibilidad, la visibilidad en buscadores y un contenido que funciona sin scripts.AccesibilidadSoporte de teclado, comportamiento con movimiento reducido, contenido multimedia descrito, puntos de referencia y mensajes de estado claros.InternacionalizaciónCada página en inglés y en español a partir de una sola fuente de contenido, con rutas por idioma y un único catálogo de textos de la interfaz que comparten las páginas de Astro y las islas de Vue.Desarrollo de APIUna API JSON con versiones que refleja el contenido del sitio, con un manifiesto de hashes de contenido para que un cliente sepa qué ha cambiado antes de descargar nada.Posicionamiento en buscadoresCanónicas por idioma, hreflang recíproco entre inglés y español, un mapa del sitio generado y metadatos estructurados en cada ruta.WebAIM WAVELa API de WAVE de WebAIM puntúa una muestra de las páginas publicadas; de ella sale la puntuación AIM de más abajo, con el día en que se tomó.Alojamiento e infraestructuraAlojado en mi propio servidor y servido como archivos estáticos tras NGINX, sin analítica ni seguimiento de terceros.SpaceshipEl VPS en el que funciona el sitio, donde NGINX sirve las páginas prerrenderizadas como archivos estáticos.CloudflareEl proxy inverso que hay delante del sitio, entre sus visitantes y el servidor.GitControl de versiones del código fuente y del contenido del sitio, con cada cambio registrado.

Preparado para un segundo frontend

La API JSON

El mismo contenido con el que se generan estas páginas se publica como una API JSON con versiones, para que se pueda crear una aplicación nativa sobre ella sin extraer los datos del sitio. La versión 1 ofrece 14 colecciones en 2 idiomas desde 15 endpoints.

Un cliente solo necesita una URL. El manifiesto enumera todas las colecciones con un hash de su contenido, de modo que una aplicación puede comparar hashes y saber qué ha cambiado desde su última sincronización antes de descargar nada.

Leer el manifiesto

Medido, no afirmado

Rendimiento y accesibilidad

Estas cifras se generan durante la compilación midiendo el resultado, así que describen la versión del sitio que estás leyendo y no un buen día en una herramienta de pruebas.

Páginas prerrenderizadas
604Cada ruta es HTML estático; nada se genera al recibir una petición.
JavaScript enviado
895 KBEn todo el sitio. Las islas interactivas solo se cargan donde una página las necesita.
CSS enviado
120 KBEn todo el sitio, casi todo en una hoja de estilos que comparten todas las páginas.
Página HTML mediana
50 KBSolo el HTML, sin scripts, estilos ni imágenes. La más grande ocupa 391 KB.

Puntuaciones de accesibilidad

WCAG 2.2 A y AA
301 / 301Páginas sin fallos, comprobadas por axe-core en un navegador real.
Contraste de color AAA
301 / 301Páginas en las que todo el texto alcanza 7:1, o 4,5:1 si es grande.
Puntuación AIM de WebAIM
10,0 / 10Media de 8 páginas a través de la API de WAVE, medida el 4 de octubre de 2026.

axe-core 4.13.0 cargó todas las páginas en inglés en Chrome sin interfaz el 11 de noviembre de 2026, mapas incluidos, y las comprobó con las WCAG 2.0, 2.1 y 2.2 en los niveles A y AA, y con el nivel AAA de contraste. Las páginas en español comparten sus plantillas. Ninguna página falló ninguna comprobación. La puntuación AIM, de WebAIM, valora una página del 1 al 10 frente a un millón de páginas de inicio; 5 es más o menos la media.

Accesibilidad en las 604 páginas

  • Declaran el idioma del documentotodas las páginas
  • Tienen exactamente un encabezado principaltodas las páginas
  • Tienen una región principaltodas las páginas
  • Describen todas las imágenestodas las páginas
  • Evitan los tabindex positivostodas las páginas

Son comprobaciones que una compilación puede hacer con honestidad; el contraste lo mide la ejecución en el navegador de arriba. El orden del foco se verifica a mano, porque hace falta un teclado de verdad para juzgarlo.