Caso de estudio · Producto
NotiTech
Curaduría técnica en español, sin clickbait ni sobrecarga de información.
Recorrido
Un recorrido por lo que hace el producto.
Seis piezas que explican la idea: entender rápido, preguntar con fuentes, comparar con criterio, aprender y encontrar trabajo, descubrir y guardar sin cuenta.
01 Síntesis con IA
Decidir en menos de un minuto si algo merece la lectura.
Cada noticia abre un panel con su síntesis: un resumen generado por IA, marcado como «Síntesis con IA» y «Generada automáticamente», seguido de por qué importa, para qué sirve y a quién le interesa. Tiene un tope de 120 palabras y un botón que lleva al artículo original: es un adelanto, no un sustituto de la fuente.
- Resumen, por qué importa, para qué sirve y a quién le interesa
- Etiquetada como contenido generado por IA
- Botones para leer en la fuente, guardar o compartir
En el código ItemModal.tsx · Sheet.tsx · resumen_ia.py
02 El Cerebro
Preguntar y recibir una respuesta con sus fuentes.
El Cerebro es un buscador conversacional: escribes una pregunta, busca en las noticias, vídeos y herramientas recientes de NotiTech y responde citando sus fuentes, con un aviso visible de que puede equivocarse. Combina búsqueda semántica con embeddings y una cadena de proveedores de IA que prueba el siguiente si uno falla.
- Respuesta con la lista de fuentes enlazadas
- Búsqueda semántica sobre el contenido reciente
- Aviso de que la IA puede equivocarse, y límite de 10 consultas por minuto
En el código cerebro/page.tsx · embeddings.py
03 Modelos e IA
Especificaciones técnicas como en una ficha de hardware.
Modelos e IA compara los modelos con los datos que importan al elegir: índice de calidad, ventana de contexto en tokens, coste por millón de tokens de entrada y salida, y tipo de licencia. Hay tabla con búsqueda y filtros (frontera, pesos abiertos, alta eficiencia), gráfico de dispersión, fichas técnicas y un comparador cara a cara. Un proceso diario sincroniza precios y especificaciones con el catálogo público de OpenRouter.
- Índice de calidad, contexto y coste por 1M de tokens
- Licencia: pesos abiertos o API en la nube
- Tabla, gráfico de dispersión, fichas y comparador
En el código ia-devs/page.tsx · modelos_ia.py
04 Cursos y empleos
Aprender y encontrar trabajo, con metadatos útiles.
Dos directorios para crecer. Los cursos reúnen plataformas como Coursera, Udemy, IBM SkillsBuild o Santander Open Academy, con nivel, duración, si son gratuitos o de pago y si dan certificado, y se filtran por especialidad. Los empleos agregan ofertas de varias bolsas (Ticjob.es, Get on Board, Remotive, RemoteOK y WeWorkRemotely), extraen con IA el salario, la modalidad, la ubicación y el stack, y se pueden buscar y filtrar.
- Cursos: plataforma, nivel, duración, precio y certificado
- Empleos: salario, modalidad, ubicación y stack extraídos con IA
- Búsqueda y filtros por especialidad en ambos
En el código cursos/page.tsx · empleos/page.tsx · empleos.py
05 Herramientas y creadores
Lo que está en tendencia y quién lo explica.
Herramientas muestra repositorios de GitHub en tendencia con estrellas, forks y colaboradores, un repositorio destacado de la semana, filtros por lenguaje y por estrellas, y un botón para copiar el comando git clone. Creadores es un directorio de canales de YouTube de tecnología con su último vídeo, y Ciberseguridad agrupa vulnerabilidades, CVE y amenazas.
- Repositorios con estrellas, forks y copia de git clone
- Directorio de canales de YouTube con su último vídeo
- Sección de ciberseguridad con CVE y amenazas
En el código herramientas/page.tsx · creadores/page.tsx · github.py
06 Guardados · local-first
Tu lectura vive en tu dispositivo, sin crear una cuenta.
Guardados reúne las listas de lectura, el boletín diario y las preferencias en el propio navegador. No hay registro ni inicio de sesión, y la interfaz avisa de que lo guardado no se sincroniza entre dispositivos. El boletín diario se confirma con doble confirmación por email y se cancela con un clic.
- Sin registro ni inicio de sesión
- Listas con nombre, con opción de mover o quitar
- Boletín con doble confirmación y baja con un clic
En el código mi-espacio/page.tsx · lib/saved.ts · email_boletin.py
Ingeniería
Decisiones de ingeniería que sostienen la experiencia.
Pocas decisiones, todas con una razón visible para quien usa el producto.
Una sola pieza editorial
Una unidad para todo el contenido y un único modal.
Noticias, cursos, herramientas y empleos se muestran con la misma unidad editorial (guardar, compartir, abrir detalle), y el detalle se abre siempre sobre un único componente de hoja: el foco queda atrapado y se devuelve al cerrar, Esc cierra, el fondo queda inerte, el scroll se bloquea y en móvil se arrastra para cerrar.
En el código EntityUnit.tsx · Sheet.tsx
Navegación por intención
Una única fuente de verdad para las rutas.
La navegación se organiza por lo que el lector quiere hacer (ponerse al día, explorar, preguntar, guardados, buscar) y se declara en un solo archivo. La barra superior, la barra de pestañas del móvil, el pie, el mapa de Explorar y el sitemap lo leen, así que una ruta nueva se añade en un único sitio. La búsqueda global se abre con ⌘K, Ctrl K o /, y busca al pulsar Intro para respetar el límite de peticiones.
En el código nav-config.ts · SearchProvider.tsx
Sistema visual accesible
Tema claro, oscuro o automático, con contraste y tamaño táctil comprobados.
Los colores salen de variables para claro y oscuro, con texto secundario de al menos 4,5:1 de contraste. El tema sigue la preferencia del sistema salvo que el lector elija otro. Los controles miden al menos 44 px en táctil y 16 px en móvil, y los materiales translúcidos tienen alternativa sólida para quien reduce la transparencia o pide más contraste. Las tipografías se sirven desde el propio dominio.
En el código globals.css · tailwind.config.ts · lib/theme.ts
Privacidad y seguridad declaradas
Sin cuentas, con un aviso claro de lo que se guarda.
No hay cuentas: las listas y las preferencias viven en el navegador y un aviso explica qué se guarda. La seguridad se apoya en una CSP con nonce por petición, límites de peticiones en los endpoints públicos y validación estricta de entradas, y el proyecto documenta una auditoría de seguridad y otra previa al despliegue. Lo único que sale del dispositivo son interacciones anónimas, como «visto», ligadas a un identificador de sesión efímero.
En el código middleware.ts · lib/api.ts · docs/seguridad
Del ruido de las fuentes a un feed que se puede leer.
El ciclo del contenido, en tres etapas. Es el modelo conceptual del producto, sin detalles de infraestructura.
01
Ingesta
Tres veces al día se leen fuentes públicas: feeds de noticias, canales de YouTube, repositorios de GitHub y ofertas de empleo; a diario, los cursos y el catálogo de modelos de IA. Las URLs se validan antes de descargarlas.
02
Filtrado y síntesis
Una evaluación con IA puntúa la relevancia y detecta el clickbait: lo que no pasa el umbral se descarta. Lo que pasa recibe su síntesis y un vector para la búsqueda semántica. Si un proveedor de IA falla, se prueba el siguiente.
03
Distribución optimizada
El contenido llega por tipo en el feed, en el panel con su síntesis, en las respuestas de El Cerebro y en un resumen diario por email. Es un radar, no un archivo: lo antiguo caduca a las 72 horas, y lo que guardas conserva su título y su enlace en tu dispositivo.
Resultado
En producción, en uso.
NotiTech está en producción en notitech.tech tras un rediseño integral: reúne noticias, vídeos, cursos, herramientas, modelos de IA y empleos en español, resume cada pieza en un adelanto que lleva a la fuente original y responde preguntas citando sus fuentes. Sin cifras de uso publicadas: no hay mediciones auditadas que citar.