Crear una página de búsqueda que se pueda compartir

Crear una página de búsqueda que se pueda compartir es un proyecto práctico de frontend para quienes tienen conocimientos básicos de HTML, CSS y JavaScript. Crearás la página de búsqueda de Fieldnote, un sitio ficticio de eventos locales cuyo enlace abre los mismos resultados filtrados y ordenados, en la misma página de resultados, en otro contexto del navegador.

Dos laboratorios guiados comienzan con una vista compartida que funciona y después desarrollan el estado de búsqueda basado en la URL y la navegación del navegador. Un desafío independiente aplica los mismos mecanismos a otra edición de eventos, con categorías y tamaño de página diferentes. Cada laboratorio proporciona sus propios archivos y datos iniciales.

Lo que aprenderás

Al completar el curso, podrás:

• filtrar, ordenar y paginar un catálogo de eventos preparado, manteniendo el contenido de cada registro asociado a su ID estable, incluso cuando varios eventos tienen el mismo título;
• leer y normalizar q, category, sort y page con URL y URLSearchParams, gestionando espacios, &, el carácter literal +, valores desconocidos y páginas no válidas;
• mantener coherentes los filtros enviados, los controles visibles, los resultados y el enlace para compartir, con estados útiles sin resultados y límites de paginación claros;
• usar pushState, replaceState y popstate para restaurar las vistas confirmadas al recargar y al navegar realmente hacia atrás y hacia delante, sin añadir entradas de historial innecesarias;
• abrir un enlace real en un contexto de navegador limpio y comparar los mismos registros en el mismo orden, conservando la ruta actual, los parámetros de consulta ajenos y el fragmento.

A quién va dirigido este curso

Este curso es para quienes quieren conectar el estado del navegador, el procesamiento de datos con JavaScript y una interfaz de búsqueda útil.

Requisitos previos: Uso básico de la terminal y las rutas; formularios HTML; diseño CSS y foco visible; objetos, arrays, funciones, selección y manipulación del DOM y eventos de JavaScript. Debes saber editar y guardar archivos del proyecto. Los laboratorios guiados enseñan codificación de URL, filter/sort/slice, copia de arrays, identidad estable de registros e historial del navegador antes del desafío. No se requiere React ni programación de backend.

Entorno de aprendizaje: LabEx proporciona un entorno de programación en el navegador, un sitio estático y datos sintéticos de eventos ya preparados. Implementas JavaScript en el navegador; el servidor solo entrega archivos. Las etiquetas del sitio y la salida de ejecución permanecen en inglés.

Preguntas frecuentes

¿Crearé un backend de búsqueda o guardaré preferencias de los visitantes?

No. El filtrado, la ordenación y la paginación se ejecutan en el navegador sobre datos locales preparados. La URL contiene la vista confirmada, por lo que otro navegador no necesita el almacenamiento guardado del primero.

¿Qué ocurre con los cambios que aún no he enviado?

Los controles contienen un borrador hasta que se envía mediante Search. Recargar restaura el estado confirmado de la URL. También practicarás cómo corregir búsquedas demasiado restrictivas y gestionar los valores predeterminados o las correcciones de página documentados; no encontrar coincidencias es un resultado válido.

¿Puedo publicar un enlace permanente con este curso?

No. Compartir se limita al laboratorio autorizado en ejecución y a su ruta disponible. Un enlace no mantiene activa una VM, no garantiza acceso entre VM de laboratorios distintos ni publica la página en Internet. El despliegue en producción y la certificación completa de accesibilidad quedan fuera del curso.