📚 Proyecto Educativo y Ejercicio de Programación
Esta es una propuesta conceptual y ejercicio de programación que demuestra cómo crear una plataforma digital educativa para compartir herramientas y conocimientos sobre el uso responsable de la tecnología e inteligencia artificial. Aunque hace referencia a la comunidad de Jerusalén como ejemplo, los conceptos y recursos son aplicables a cualquier comunidad interesada en educación digital responsable.
🎯 Objetivo del Proyecto: Demostrar cómo desarrollar recursos digitales que promuevan el pensamiento crítico, la verificación de información y el uso ético de la tecnología.
En nuestra era digital, enfrentamos desafíos importantes:
- Falta de información confiable sobre tecnología e IA
- Mal uso de redes sociales que puede afectar nuestro bienestar emocional
- Propagación de noticias falsas y contenido no verificado
- Necesidad de herramientas para el uso ético de la inteligencia artificial
Esta página busca ser un espacio seguro donde niños, adolescentes, adultos y adultos mayores de nuestra comunidad puedan encontrar orientación para usar la tecnología de manera responsable y constructiva.
- Contenido Verificado: Información basada en fuentes oficiales como UNESCO
- Navegación Sencilla: Diseño accesible para todas las edades
- Recursos Prácticos: Prompts y consejos para el uso responsable de IA
- Enfoque Comunitario: Pensado específicamente para Jerusalén
- Educación Digital: Herramientas para desarrollar pensamiento crítico
- Alternativas Saludables: Opciones a las redes sociales tradicionales
/
├── index.html # Página principal con recursos
├── assets/
│ ├── css/
│ │ └── styles.css # Estilos accesibles y modernos
│ ├── js/
│ │ └── main.js # Interacciones responsivas
│ └── img/ # Imágenes educativas verificadas
├── README.md # Esta guía
├── LICENSE # Licencia MIT
└── .nojekyll # Configuración técnica
Para Navegar Seguro:
- Siempre verifica la fuente de la información
- Lee completamente antes de compartir contenido
- Usa sitios web con certificados de seguridad (https://)
- Mantén actualizados tus navegadores
Para Todas las Edades:
- Niños: Navega siempre con supervisión de adultos
- Adolescentes: Desarrolla hábitos de verificación de información
- Adultos: Comparte conocimientos responsablemente
- Adultos mayores: No temas preguntar sobre tecnología nueva
¿Qué son los Prompts? Los prompts son instrucciones que damos a la IA para obtener respuestas útiles y apropiadas.
Prompts Básicos Recomendados:
- "Explícame esto de manera sencilla y verificable"
- "¿Puedes darme fuentes confiables sobre este tema?"
- "Ayúdame a verificar si esta información es correcta"
Evitar el Mal Uso: Mediante prompts bien estructurados podemos:
- Evitar información incorrecta
- Proteger nuestra privacidad
- Desarrollar pensamiento crítico
- Crear contenido constructivo
Importancia para Nuestra Comunidad: El uso responsable de IA fortalece nuestra capacidad de tomar decisiones informadas y mantiene unida a nuestra comunidad, evitando la polarización que puede generar la desinformación.
En lugar de redes sociales tradicionales, considera:
- Leer blogs educativos y creativos
- Crear contenido original (escritura, arte, música)
- Participar en actividades comunitarias presenciales
- Usar plataformas más seguras como Signal o blogs personales
Para Evitar Problemas Emocionales: El consumo excesivo de memes y contenido superficial puede llevar a:
- Comparaciones sociales dañinas
- Reducción de la capacidad de concentración
- Problemas de autoestima, especialmente en jóvenes
Según la UNESCO y documentos sobre ética en IA:
- Transparencia: Entender cómo funciona la tecnología que usamos
- Responsabilidad: Ser conscientes del impacto de nuestras acciones digitales
- Inclusión: Asegurar que todos tengan acceso a tecnología beneficiosa
- Privacidad: Proteger nuestra información personal
Para WhatsApp:
- "Ayúdame a verificar si este mensaje es confiable"
- "¿Cómo puedo reportar contenido inapropiado?"
- "Explícame las configuraciones de privacidad"
Para Instagram:
- "¿Cómo identifico contenido patrocinado?"
- "Ayúdame a configurar mi cuenta para mayor privacidad"
- "¿Qué significa este tipo de interacción?"
Más Privadas y Seguras:
- Signal: Mensajería encriptada
- Zoom: Videollamadas profesionales
- Teléfono convencional: Para conversaciones importantes
- Cartas físicas: Para comunicación reflexiva y personal
- Correo electrónico: Para comunicación formal
Para Creatividad Familiar:
- Blogs familiares: Compartir experiencias de manera controlada
- Proyectos creativos offline: Manualidades, jardinería, cocina
- Bibliotecas digitales: Recursos educativos verificados
Según documentos oficiales de ética en IA:
- Siempre cuestiona la fuente de información
- Compara múltiples perspectivas
- Verifica datos con fuentes oficiales
- Mantén un equilibrio entre tecnología y vida real
Beneficios:
- Mejora la creatividad personal
- Permite compartir talentos de manera segura
- Desarrolla habilidades digitales útiles
- Crea un espacio personal en internet
Para Niños y Adolescentes:
- Portfolios de arte y proyectos escolares
- Documentación de aprendizajes
- Espacio para expresión creativa controlada
Para Adultos:
- Desarrollo profesional
- Compartir conocimientos con la comunidad
- Preservar experiencias y sabiduría
Características de Sitios Verificables:
- Certificados de seguridad (https)
- Información de contacto clara
- Fuentes citadas y verificables
- Actualizaciones regulares
Para Mejorar Participación Comunitaria:
- Sitios web locales de Jerusalén
- Plataformas educativas oficiales
- Portales de gobierno transparentes
- Organizaciones sin fines de lucro verificadas
Beneficios:
- Pensamiento crítico desarrollado
- Mejor toma de decisiones comunitarias
- Participación ciudadana informada
- Fortalecimiento del tejido social
Más Privadas:
- Signal: Para comunicación personal segura
- Zoom: Para reuniones familiares o educativas
- Correo electrónico: Para comunicación formal y reflexiva
Para Mantenerse Informado:
- X (Twitter): Siguiendo fuentes verificadas únicamente
- Reddit: En comunidades moderadas y educativas
- Mastodon: Alternativa descentralizada y más controlada
- Medios locales verificados: Periódicos y radios de Jerusalén
Recomendaciones:
- Verifica siempre con múltiples fuentes
- Prefiere medios con historial de credibilidad
- Evita compartir información no verificada
- Discute noticias importantes en persona cuando sea posible
Este proyecto busca que la comunidad de Jerusalén y personas de todas las edades desarrollen conciencia sobre el uso responsable de la tecnología en múltiples ámbitos:
- Verificación de información de salud
- Uso responsable de aplicaciones médicas
- Consulta con profesionales antes de autodiagnósticos
- Fortalecimiento de lazos sociales reales
- Participación ciudadana informada
- Preservación de tradiciones a través de tecnología apropiada
- Comunicación respetuosa y constructiva
- Prevención de polarización y conflictos digitales
- Promoción de diálogo intergeneracional
- Desarrollo de habilidades de escucha
- Comunicación cara a cara valorada
- Uso de tecnología como herramienta, no substituto
Nuestra meta es crear una comunidad digitalmente alfabetizada, crítica y unida, que use la tecnología para mejorar la vida real, no para escapar de ella.
- Un editor de código (recomendado: VS Code)
- Un navegador web moderno
- Opcionalmente: servidor web local para desarrollo
- Clonar o descargar este repositorio
- Abrir VS Code y seleccionar "Archivo > Abrir Carpeta"
- Seleccionar la carpeta del proyecto
- Instalar extensiones recomendadas:
- Live Server (para servidor local)
- HTML CSS Support
- Auto Rename Tag
- Prettier (para formateo de código)
- Instala la extensión "Live Server" en VS Code
- Haz clic derecho en
index.html - Selecciona "Open with Live Server"
- El sitio se abrirá automáticamente en tu navegador
- Navega hasta la carpeta del proyecto
- Doble clic en
index.html - El archivo se abrirá en tu navegador predeterminado
- Textos: Edita directamente en
index.html - Estilos: Modifica variables y reglas en
assets/css/styles.css - Interacciones: Ajusta comportamientos en
assets/js/main.js
En assets/css/styles.css, modifica las variables en :root:
:root {
--color-primary: #2563eb; /* Color principal */
--color-secondary: #64748b; /* Color secundario */
--color-accent: #f59e0b; /* Color de acento */
}Nota: Se realizan cambios recurrentes en las variables de color para mantener la coherencia visual.
- Coloca las imágenes en
assets/img/(Tomar en cuenta el contexto e informar sobre su uso) - Referencia con rutas relativas:
./assets/img/mi-imagen.jpg - Optimiza las imágenes para web (WebP, JPEG optimizado)
Este repositorio incluye configuración automática para GitHub Pages. Una vez configurado, el sitio se desplegará automáticamente en cada push a la rama main.
- Subir código a tu repositorio de GitHub
- Ir a Settings > Pages en tu repositorio
- En Source, seleccionar "GitHub Actions"
- El sitio se desplegará automáticamente y estará disponible en:
https://tu-usuario.github.io/nombre-repositorio
- ✅ Push automático: Cada vez que hagas push a
main, el sitio se actualiza - ✅ Sin configuración adicional: El workflow ya está configurado en
.github/workflows/deploy.yml - ✅ Despliegue rápido: El sitio estará disponible en 1-2 minutos después del push
- ✅ Notificaciones: GitHub te notificará del estado del despliegue
- Ve a la pestaña Actions en tu repositorio
- Verás el historial de despliegues con estado verde ✅ o rojo ❌
- Haz clic en cualquier ejecución para ver los detalles
Si prefieres no usar GitHub Actions:
- Subir código a tu repositorio de GitHub
- Ir a Settings > Pages en tu repositorio
- En Source, seleccionar "Deploy from a branch"
- Seleccionar "main" como branch y "/ (root)" como folder
- Hacer clic en Save
- Tu sitio estará disponible en:
https://tu-usuario.github.io/nombre-repositorio
- ✅ Archivo
.nojekyllincluido para evitar procesamiento Jekyll - ✅ Rutas relativas para funcionar en cualquier subdominio
- ✅ Workflow de GitHub Actions preconfigurado
- ✅ Sitio completamente estático sin configuración adicional
Si el despliegue falla:
- Ve a Actions en tu repositorio
- Haz clic en la ejecución fallida para ver el error
- Verifica que el archivo
index.htmlesté en la raíz del repositorio - Asegúrate de que todas las rutas de archivos sean relativas (
./assets/...)
Si GitHub Actions no aparece como opción:
- Asegúrate de que tu repositorio sea público
- O que tengas GitHub Pro/Teams para repositorios privados
- Verifica que el archivo
.github/workflows/deploy.ymlesté presente
En index.html, agrega fuentes de Google Fonts:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">Luego en assets/css/styles.css:
:root {
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}- Copia la estructura de una sección existente en
index.html - Modifica el contenido y los IDs únicos
- Agrega estilos específicos en
assets/css/styles.css - Actualiza la navegación si es necesario
En assets/js/main.js, busca el módulo ScrollAnimations para:
- Cambiar efectos de entrada
- Modificar umbrales de activación
- Agregar nuevos elementos animados
El sitio utiliza un enfoque mobile-first:
- Breakpoint principal: 768px (tablets y desktop)
- Grid y Flexbox para layouts fluidos
- Imágenes responsivas con
srcsetcuando sea necesario - Menú hamburguesa para móviles
Características implementadas:
- Navegación por teclado completa
- Landmarks semánticos apropiados
- Atributos ARIA donde son necesarios
- Contraste de colores optimizado
- Soporte para
prefers-reduced-motion
- Revisar enlaces rotos
- Optimizar imágenes nuevas
- Actualizar contenido desactualizado
- Validar HTML y CSS periodicamente
- HTML Validator
- CSS Validator
- Lighthouse para auditorías de rendimiento
Este proyecto está bajo la Licencia MIT - información disponible para uso comunitario y educativo.
Las contribuciones de la comunidad son bienvenidas, especialmente:
- Recursos educativos verificados
- Experiencias positivas con tecnología
- Sugerencias para mejorar la accesibilidad
- Traducciones a otros idiomas hablados en Jerusalén
Para obtener ayuda:
- Consulta con miembros experimentados de la comunidad
- Verifica información con múltiples fuentes
- Participa en talleres comunitarios sobre tecnología
- Contacta a organizaciones locales de educación digital
¡Juntos construimos una comunidad digitalmente responsable! La tecnología debe servir a las personas, no al contrario.