Este sistema ha sido desarrollado bajo el lenguaje de programación PHP en su versión más reciente 8. Versiones anteriores a 7.3 no han sido testeadas y por lo que no garantizo el funcionamiento pleno en versiones abajo a 7.3.
Si usted no ha modificado su archivo .ini de apache la sugerencia es modificarlo y cambiar el valor de tamaño máximo de archivos de subida. Usted decide el valor que considere necesario. Idealmente establecerlo mayor a los 40MB.
Si piensa montar este proyecto en un hosting gratuito, la sugerencia es no hacerlo, ya que la mayoría son demasiado limitados y la exigencia de este proyecto es alta con respecto a conexiones. Se realizaron las correcciones pertinentes y pruebas reutilizando y acortando las mismas, pero aún así presentan inestabilidades y en algunos casos, los procesos simplemente no se muestran o realizan. Mientras usted no tenga un hosting premium o servidor dedicado lo ideal es que lo maneje de manera local. Para asi evitar molestias innecesarias.
😉 Gracias por tomar en cuenta las indicaciones respectivas, ahora vamos a lo que interesa, información técnica de este proyecto:
Este sistema se encuentra desarrollado bajo el lenguaje de programación PHP, utilizando el patrón MVC (Modelo, Vista, Controlador). SGBD MySQL y todas las gestiones y procesos bajo AJAX - JQuery, complementos JQuery y Javascript. La finalidad de este proyecto es representar en un rango básico - medianamente avanzado el funcionamiento de algunas de las redes sociales tradicionales. No se pretende competir o hacer alusión que el funcionamiento de este proyecto es empíricamente estricto a las más reconocidas, simplemente es una demostración y poner en práctica nuevos conocimientos.
- Publicar imágenes con una descripción haciendo referencia a una "historia".
- Seguir a otros usuarios registrados. Es de aclarar que dentro de este sistema se ha ocupado el término "Amigos", pero la lógica aplicada son solicitudes de seguimiento, cada usuario decide a quién seguir.
- Comentar publicaciones de otros usuarios, interactuar (Puedes introducir emojis en los comentarios). Inclusive reaccionar a las publicaciones Dar Me Gusta - Like.
- Participar en el chat general y compartir ideas o pensamientos momentáneos con todos los usuarios registrados.
- Publicar vídeos musicales a la vista de todos los usuarios.
- Visitar y ver los perfiles de otros usuarios registrados (siempre y cuando cumplan con los requisitos establecidos dentro de la plataforma).
- Ver absolutamente a todos los usuarios registrados sin excepción con la posibilidad de ser "Amigos".
- Ver y registrar nuevos eventos sociales Según tu país de registro.
- Si tu sigues a otros usuarios, podrás ver el listado en tu inicio de cumpleañeros del día.
- Cambiar foto de perfil y portada (solo perfil, o ambas cosas).
- Registrar detalles más específicos sobre tí.
- Puedes hacer uso de tu cámara web para subir tu fotografía instántanea en editar perfil o completar perfil de usuarios.
Inicio: Puedes consultar publicaciones recientes de tus "Amigos", ver lista de eventos disponibles en tu localidad, ver lista de cumpleañeros del día
Mi Perfil: Puedes consultar todas tus historias publicadas en esta red social, ver tus detalles de usuarios, ver tus "Amigos" y ver el listado completo de fotografías que hacen alusión a tus historias publicadas.
Mis Amigos: Listado completo de todos tus "Amigos" aceptados. Además de gestionarlos y ver sus perfiles de usuario.
Explorar Amigos: Listado completo de todos los usuarios registrados en esta red social, en dónde puedes enviar solicitudes de amistad y ver sus perfiles de usuarios.
Mis Notificaciones: Consulta completa de todas las interacciones que otros usuarios hacen en tus publicaciones, y solicitudes de amistad aceptadas. No es posible ver tu misma actividad.
Registrar Eventos: Formulario de registro de nuevos eventos sociales según tu localidad (país).
Ver Eventos: Listado completo registrados por todos los usuarios de esta red social de eventos sociales disponibles según tu localidad (país).
Mensajes: Consulta de chat general de esta aplicación, puedes interactuar con todos los usuarios, además de gestionar tus mensajes. La mensajería privada no está disponible.
Multimedia: Puedes consultar los vídeos musicales registrados por otros usuarios, además de publicar nuevos vídeos Según la capacidad de tu servidor y gestionarlos.
Editar Perfil: Puedes editar tu información personal, cambiar contraseña, foto de perfil, foto de portada y detalles sobre tu usuario.
Este sistema a nivel de código y base de datos se encuentra distribuido de la siguiente manera:
- Base de Datos:
- 13 Tablas.
- 63 Procedimientos Almacenados.
- 18 Vistas.
- 8 Disparadores.
- Sistema:
- Lenguaje de Programación PHP.
- Versión 8.
- Patrón MVC (Modelo, Vista, Controlador).
- Gestiones AJAX, JQuery.
- Complementos JQuery, Javascript
- Plantilla Bootstrap.
Es importante mencionar que dentro del código del sistema no existen llamadas directas en código SQL, sino únicamente los llamados a los procedimientos almacenados declarados en la base de datos, con su pase de parámetros respectivos.
Para la subida de archivos multimedia, por favor tome nota que únicamente puede subir archivos hasta un máximo de 8MB. Además de tomar las diferentes restricciones dentro de la plataforma. NO existen roles de usuario estrictamente asignados.
1. Al momento de registrarte, es de estricta obligación completar tu perfil de usuario, de lo contrario no podrás hacer uso de la aplicación. Si deseas cancelar el registro. Solamente tienes que dirigirte al formulario "Cancelar Registro" y explicar los motivos de tu cancelación, una vez procesado no hay vuelta atrás y pierdes el acceso a la plataforma, así como la posibilidad de usar ese mismo correo.
* Completar Perfil de Usuarios Nuevos
* Formulario Cancelar Registro
2. El sistema está validado para uso exclusivo a personas mayores o igual a 18 años.
3. Tienes límites de subidas de fotos y vídeos, por favor atender las indicaciones respectivas en los formularios en cuestión.
4. Está red social es privada, ningún usuario sin iniciar sesión o registrarse puede consultar los detalles de otros usuarios.
5. No es obligatorio completar los detalles Sobre Mí de tu perfil de usuario; sin embargo al no hacerlo, los demás usuarios de esta red social no podrán visualizar tu perfil de usuario, además de no poder consultar tú mismo tus detalles de usuario. En su lugar te aparecerá un mensaje de advertencia citando lo anteriormente descrito.
6. Puedes hacer uso de la cámara web Solo de manera local en tu servidor, o en un hosting que cuente con certificado SSL vigente.
En el año 2026 se llevó a cabo una refactorización y expansión significativa de la plataforma Secret Social. El objetivo principal fue modernizar la experiencia de usuario, introducir funcionalidades de tiempo real, corregir deudas técnicas acumuladas y elevar el estándar visual y de interacción al nivel de las redes sociales comerciales contemporáneas. A continuación se detalla el alcance completo de dichas modificaciones.
- Eliminar por completo la dependencia de recargas completas de página (full page reloads) durante las interacciones del usuario.
- Implementar un sistema de notificaciones y actualizaciones en tiempo real mediante sondeo AJAX (long polling).
- Introducir nuevas secciones y funcionalidades de alto impacto visual: Historias efímeras estilo Instagram, Secret Reels (vídeos verticales), Notas de Música y Marketplace.
- Rediseñar la interfaz de usuario con un sistema de diseño premium, incluyendo soporte de modo oscuro, glassmorfismo, animaciones de micro-interacción y tipografías modernas de Google Fonts.
- Corregir bugs críticos en los flujos de confirmación de SweetAlert2 que bloqueaban el UI tras interacciones de gestión de amistades.
- Fortalecer el esquema de base de datos con nuevas tablas, columnas y vistas para soportar las nuevas funcionalidades.
| Tabla | Propósito |
|---|---|
historias |
Almacena las historias efímeras publicadas por los usuarios (imagen + texto, duración de 24 horas). |
historia_vistas |
Registra qué usuarios han visualizado cada historia, permitiendo mostrar el conteo de espectadores al autor. |
historia_megusta |
Gestiona las reacciones (likes) sobre las historias efímeras, con detección de estado previo para toggle. |
notas_musica |
Almacena las notas musicales publicadas por usuario (canción asociada desde iTunes API, texto libre). |
videos |
Tabla extendida para el módulo Secret Reels, con soporte de vídeo vertical MP4/WebM y sistema de likes por vídeo. |
video_likes |
Tabla de reacciones sobre los Reels, con lógica de toggle y conteo en tiempo real. |
marketplace_productos |
Repositorio de productos publicados en el Marketplace integrado de la plataforma. |
llamadas |
Infraestructura de soporte para el módulo experimental de llamadas entre usuarios. |
- Columna
fecha_creacion TIMESTAMP DEFAULT CURRENT_TIMESTAMPañadida a la tablasolicitudamistadpara ordenamiento cronológico en el sistema de notificaciones unificado. - Columna
typing_atañadida al módulo de mensajería para soporte de indicador "escribiendo..." en tiempo real. - Vista
vista_solicitudesamistadrecreada para exponer el campousuario(username único), permitiendo enlaces directos al perfil del solicitante desde la campana de notificaciones. - Vista
vista_notificacionesamigosrecreada con el mismo propósito de enrutamiento por username.
Se implementó un sistema de historias efímeras con una experiencia de usuario completamente fiel a la de Instagram y Facebook. Las historias duran 24 horas desde su publicación y desaparecen automáticamente. Las funcionalidades incluyen:
- Barra de historias tipo carrusel horizontal en el feed principal, con burbujas de avatar con anillo degradado para historias no vistas.
- Visor de historias a pantalla completa con barras de progreso animadas por
requestAnimationFrame, navegación por toque/clic en zonas izquierda/derecha, y pausa automática al enfocarse en el campo de respuesta. - Sistema de respuesta directa a historias integrado con la mensajería privada.
- Panel de espectadores visible únicamente para el autor de la historia, con conteo de vistas y likes.
- Botón de like (❤️) con animación de latido para usuarios espectadores.
- Modal de creación de historias con soporte de texto libre y carga de imagen, accesible desde el avatar del usuario en la barra de historias.
- Actualización en tiempo real de la barra de historias sin recarga de página.
Se creó una sección dedicada de Reels, accesible desde la barra lateral de navegación. Esta funcionalidad es análoga a Instagram Reels y TikTok:
- Reproductor de vídeo vertical en pantalla completa con desplazamiento snap-scroll (una tarjeta por vista).
- Reproducción automática al entrar en el viewport mediante la API
IntersectionObserver. - Control de silencio/sonido global persistente entre tarjetas.
- Sistema de likes por Reel con toggle instantáneo vía AJAX y animación de corazón flotante al hacer doble clic.
- Indicador animado de reproducción/pausa al hacer clic simple.
- Botón flotante de acción para subir nuevos Reels con validación de tamaño de archivo del lado cliente y servidor.
- Estado vacío (empty state) ilustrado cuando no hay Reels publicados.
Sistema de "notas musicales" similar al de Instagram, donde los usuarios publican la canción que están escuchando actualmente:
- Búsqueda de canciones en tiempo real integrada con la iTunes Search API de Apple.
- Visualización en el feed de las burbujas musicales de los contactos del usuario.
- Tooltip interactivo al pasar el cursor sobre la nota de un contacto para ver el título y artista.
- Gestión de nota propia (crear, actualizar, eliminar) con UX de un solo clic.
Se integró un módulo de Marketplace dentro de la plataforma que permite a los usuarios publicar y explorar productos:
- Publicación de productos con nombre, descripción, precio y fotografía.
- Vista de catálogo en tarjetas con filtrado dinámico.
- Soporte para múltiples imágenes por producto.
- Panel de administración de los propios listados.
El sistema de notificaciones fue completamente rediseñado para soportar todos los tipos de eventos en una única vista consolidada:
- Las últimas 15 notificaciones de todos los tipos se muestran en el dropdown de la campana (🔔), ordenadas cronológicamente de más reciente a más antigua.
- Tipos de notificaciones soportados: solicitudes de amistad pendientes, amistades aceptadas, comentarios en publicaciones, reacciones (Me Gusta) en publicaciones, reacciones en historias y mensajes privados nuevos.
- Sondeo automático (polling) cada 10 segundos mediante
setInterval+ AJAX al endpointlive-notifications. - Toasts de notificación push de tipo glassmorfismo que aparecen automáticamente al detectar una nueva notificación, sin acción del usuario.
- El dropdown de solicitudes de amistad se reconstruye dinámicamente en el DOM, sin requerir recarga de página, mostrando los botones "Confirmar" y "Rechazar" funcionales desde el propio header.
- Los contadores y puntos indicadores (badge rojo) en el ícono de campana y de amigos se actualizan en tiempo real.
| Archivo | Bug Corregido |
|---|---|
alerta-solicitudesaceptadas.js |
El executor de la promesa preConfirm de SweetAlert2 no invocaba resolve(), dejando el modal en un estado de carga infinita al confirmar una solicitud de amistad. |
alerta-eliminarsolicitudamistad.js |
Mismo bug de promesa no resuelta al rechazar solicitudes de amistad. |
alerta-eliminaramigos.js |
La eliminación de amigos recargaba la página completa en lugar de hacer un fade-out dinámico de la tarjeta. |
alerta-eliminarnotificacionesamigos.js |
Las notificaciones eliminadas requerían recarga de página para desaparecer del listado. |
alerta-eliminarnotificacionescomentarios.js |
Idéntico al anterior para el tipo comentario. |
alerta_eliminarhistorias.js |
La eliminación de publicaciones del feed causaba una recarga completa en lugar de una animación de desvanecimiento (fadeOut) de la tarjeta específica. |
alerta_publicaciones.js |
Al publicar una nueva historia, el modal no se cerraba y el feed se recargaba completamente en lugar de insertar el nuevo elemento dinámicamente. |
Uno de los cambios arquitectónicos más importantes de la actualización 2026 fue la eliminación sistemática de todos los window.location.reload() e header('Location: ...') del flujo de usuario. Se adoptó el siguiente patrón:
- Creación de publicaciones: El modal se cierra, el formulario se limpia y el feed se reinicia dinámicamente llamando a
window.FeedInfinito.reset(), que borra el DOM actual y carga la primera página de publicaciones fresca desde el servidor. - Eliminación de publicaciones/amigos/notificaciones: La tarjeta correspondiente realiza una animación
fadeOut(400)y es removida del DOM sin afectar el resto de la página. - Confirmación/rechazo de solicitudes de amistad: Se actualiza el badge de conteo, se oculta el punto indicador si el contador llega a cero, y se muestra un toast de confirmación premium.
- Feed Infinito: Se implementó el objeto público
window.FeedInfinitocon un métodoreset()accesible globalmente, que permite a cualquier módulo de la aplicación reiniciar el feed sin comunicación entre páginas.
- Modo Oscuro (Dark Mode): Toggle de tema oscuro/claro persistido en
localStorage, con transiciones CSS suaves y soporte completo en todos los componentes de la interfaz. - Navegación lateral premium: Rediseño del sidebar con iconografía mejorada, estados activos por sección y menú colapsable en dispositivos móviles.
- Buscador estilo Facebook en el header: Búsqueda AJAX en tiempo real con debounce de 300ms que muestra resultados de usuarios y publicaciones en un dropdown con scroll, sin requerir envío del formulario.
- Toasts de notificación Premium: Sistema
window.SN(Secret Notifications) con tarjetas flotantes de glassmorfismo, soporte de íconos por tipo, botón de acción directo y auto-descarte con animación de deslizamiento. - Tipografía: Migración a Montserrat y Poppins de Google Fonts en toda la plataforma, con jerarquía tipográfica clara y consistente.
- Animaciones de micro-interacción: Efectos hover, transformaciones
scale, transicionescubic-beziery animaciones@keyframesen botones, tarjetas, modales y elementos interactivos. - Selector de fondo degradado en publicaciones: Al crear una publicación, el usuario puede seleccionar entre 5 fondos de degradado predefinidos (Atardecer, Océano, Fuego, Neón, Mágico) para personalizar el fondo de su post.
- Selector de sentimientos en publicaciones: Campo de estado emocional con emojis integrado en el formulario de nueva publicación.
- Carga de múltiples imágenes con collage: Soporte para subir hasta 5 imágenes por publicación con previsualización de collage antes de publicar y soporte de arrastrar y soltar (drag and drop).
- Todas las respuestas AJAX ahora incluyen una extracción robusta del JSON desde la respuesta del servidor, manejando prefijos de texto/advertencias PHP con un índice del primer
[o{. - Validación de tamaño de archivo multimedia en cliente y servidor para uploads de Reels, con mensajes de error específicos (
LIMITE_EXCEDIDO,FORMATO_INVALIDO,CAMPOS_VACIOS,ERROR_UPLOAD). - Las conexiones a base de datos en
premium_topnav.phpse cierran explícitamente antes del renderizado del contenido para evitar el error "Commands out of sync" de MySQLi en páginas con múltiples conjuntos de consultas. - Todas las sesiones verifican
session_status() === PHP_SESSION_NONEantes de invocarsession_start()para prevenir errores de sesión duplicada en includes. - Control de acceso reforzado en todas las páginas nuevas: redirección inmediata a la página de acceso denegado si el usuario no tiene sesión activa.
Después de las modificaciones 2026, el sistema se distribuye de la siguiente manera:
| Componente | Original (2021) | Actualizado (2026) |
|---|---|---|
| Tablas de Base de Datos | 13 | 21+ |
| Procedimientos Almacenados | 63 | 80+ |
| Vistas SQL | 18 | 22+ |
| Disparadores (Triggers) | 8 | 8 |
| Archivos JavaScript | ~15 | 25+ |
| Módulos del Sistema | 9 | 14 |
| Vistas PHP (páginas) | ~12 | 18 |
- 🐘 Backend: PHP 8+ — Patrón MVC estricto, sin ORM, 100% Procedimientos Almacenados.
- 🗃️ Base de Datos: MySQL 8 con uso intensivo de vistas, triggers, stored procedures y transacciones.
- ⚡ Frontend: JavaScript ES6+, jQuery 3, Bootstrap 4, AJAX asíncrono con manejo de errores robusto.
- 🎨 CSS: Vanilla CSS con variables CSS custom properties, complementado con Bootstrap. Glassmorfismo, dark mode, animaciones CSS3.
- 🔤 Tipografía: Google Fonts — Montserrat + Poppins.
- 🔔 Íconos: Remix Icons 2.x + Line Awesome.
- 💬 Alertas: SweetAlert2 v10 con integración de promesas asíncronas.
- 🎵 API Externa: iTunes Search API (búsqueda de canciones para Notas de Música).
| Archivo | Tipo | Descripción |
|---|---|---|
vista/reels.php |
Vista | Página de Secret Reels con reproductor de vídeo vertical snap-scroll. |
vista/marketplace.php |
Vista | Módulo de Marketplace para compra y venta entre usuarios. |
vista/stories_viewer.php |
Vista/Componente | Visor de historias efímeras embebible, compatible con el feed y el perfil. |
vista/premium_sidebar.php |
Vista/Componente | Barra lateral de navegación rediseñada, incluida como componente PHP reutilizable. |
vista/premium_topnav.php |
Vista/Componente | Barra de navegación superior premium con buscador AJAX, dropdowns de notificaciones y solicitudes en tiempo real. |
vista/js/historias_envivo.js |
JavaScript | Módulo completo del sistema de historias efímeras: carga, renderizado, reproducción, interacciones. |
vista/js/notas_musica.js |
JavaScript | Módulo de Notas de Música con integración de iTunes API. |
vista/js/push_notifications.js |
JavaScript | Sistema de polling de notificaciones en tiempo real, reconstrucción dinámica de dropdowns y push toasts. |
vista/js/notificaciones-premium.js |
JavaScript | Librería window.SN para mostrar toasts premium de glassmorfismo. |
vista/js/feed-infinito.js |
JavaScript | Feed de publicaciones con paginación infinita por IntersectionObserver y método público reset(). |
controlador/cHistorias.php |
Controlador | Controlador backend de historias efímeras: listar, crear, registrar vistas, dar/quitar like, responder, listar espectadores. |
controlador/cNotasMusica.php |
Controlador | Controlador backend de notas musicales: CRUD y proxy de búsqueda a iTunes API. |
La actualización 2026 fue realizada con el objetivo de demostrar que una aplicación PHP MVC nativa puede alcanzar el nivel de interactividad y experiencia de usuario de las redes sociales comerciales modernas, sin necesidad de frameworks frontend reactivos como React o Vue. Todos los efectos en tiempo real, las animaciones y la gestión dinámica del DOM se lograron exclusivamente con JavaScript vanilla y jQuery, manteniendo la filosofía original del proyecto.
"No es la herramienta lo que hace al artesano, sino el conocimiento y la dedicación con que la emplea."