1.
TECNOLÓGICO NACIONAL DE MÉXICO
CAMPUS TLÁHUAC
TITULO: INFORMDE DE PROYECTO FINAL
TÍTULO DEL PROYECTO: CLOUD
INTEGRANTES: RIOS MARQUEZ AISHA THAILY, RODRIGUEZ MENDOZA MAGALI
NUMERO DE CONTROL: 221064051, 221064015
NOMBRE DEL DOCENTE: MORALES JIMENEZ ABISAI
LUGAR Y FECHA: 06 DE DICIEMBRE DE 2024
2. Introducción
El presente proyecto tiene como objetivo desarrollar una versión simplificada de
Instagram utilizando programación en HTML. Este prototipo incluirá funciones básicas
como la visualización de historias de amigos y famosos del momento. La idea es mostrar
cómo se puede estructurar una red social desde cero, explorando los fundamentos del
diseño web y la interacción con los usuarios.
3. Objetivo General
Desarrollar una página web tipo Instagram utilizando HTML, implementando funciones
esenciales como la visualización de historias y perfiles de usuarios.
4. Objetivos Específicos
• Diseñar la estructura básica de la página web utilizando etiquetas HTML.
• Implementar un sistema visual para mostrar historias de usuarios y
contenido relevante.
• Crear una interfaz amigable que permita una navegación intuitiva.
• Explorar las posibilidades de integración con CSS para mejorar el diseño
visual.
• Evaluar cómo podría extenderse el proyecto para incluir funcionalidades
dinámicas con JavaScript y bases de datos.
5. Planteamiento del Problema
Actualmente, las redes sociales son herramientas esenciales para la comunicación y el
entretenimiento. Sin embargo, muchas plataformas están limitadas por estructuras
complejas y costos de desarrollo elevados. Este proyecto busca responder a la pregunta:
¿es posible crear una versión básica de una red social popular como Instagram utilizando
únicamente HTML? A través de este prototipo, se analizarán los retos y las limitaciones de
construir interfaces funcionales con herramientas básicas.
6. Justificación
El desarrollo de este proyecto tiene un doble propósito. Por un lado, busca demostrar
cómo se pueden aplicar conocimientos fundamentales de programación para recrear
funcionalidades de redes sociales populares. Por otro, representa una oportunidad
educativa para aprender y enseñar los conceptos básicos de HTML, CSS y diseño web,
aplicándolos en un contexto práctico. (Robbins, 2018)
7. Marco Teórico
• HTML (HyperText Markup Language): Es el lenguaje base para la creación de páginas web.
Define la estructura y el contenido de los sitios.
• Interfaces de Usuario: En el diseño web, se refiere a la disposición de elementos para
garantizar una experiencia intuitiva para el usuario.
• Historias en Redes Sociales: Funcionalidad adoptada por plataformas como Instagram y
Facebook que permite compartir contenido efímero.
• Usabilidad Web: La facilidad con la que los usuarios pueden navegar e interactuar con un
sitio web. (Castro, 2011)
8. Procedimiento
1. Diseño de la Estructura:
• Crear un boceto de la página principal y la sección de historias.
• Planificar los enlaces y divisiones necesarias.
2. Programación del HTML:
• Usar etiquetas como <div>, <section>, <img> y <a> para estructurar el contenido.
• Añadir secciones para el feed y las historias.
3. Estilización:
• Incorporar un archivo CSS básico para colores, fuentes y diseño responsivo.
4. Pruebas:
• Verificar que la página se visualice correctamente en diferentes navegadores.
• Simular interacciones de usuario, como hacer clic en historias.
5. Documentación:
• Registrar cada paso y los retos enfrentados durante el desarrollo.
9. Conclusiones
• Es posible recrear funcionalidades básicas de Instagram utilizando HTML, pero con
limitaciones en cuanto a interacción dinámica.
• La implementación de CSS mejora considerablemente la apariencia del prototipo.
• Para funcionalidades más avanzadas, es necesario integrar lenguajes como
JavaScript y sistemas de almacenamiento.
10. Recomendaciones
1. Explorar el uso de JavaScript para añadir dinámicas como el desplazamiento
automático de historias.
2. Considerar la implementación de bases de datos para almacenar perfiles y
publicaciones.
3. Optimizar el diseño para dispositivos móviles.
4. Investigar frameworks como Bootstrap para mejorar la presentación sin mucho
esfuerzo adicional.
11. Glosario de Términos
• HTML: Lenguaje de marcado utilizado para la creación de páginas web.
• CSS: Hojas de estilo en cascada, utilizadas para estilizar elementos HTML.
• Usabilidad: Facilidad de uso y navegación en una interfaz de usuario.
• Responsive Design: Diseño que se adapta automáticamente a diferentes tamaños
de pantalla.
12. Bibliografía
Castro, E. (2011). HTML5 Y CSS3: Guía de referencia. Anaya Multimedia.
Robbins, J. (2018). Diseño web con HTML y CSS. Pearson Education.
a. Anexos
1. Capturas de pantalla del prototipo funcional.
2. Código fuente del proyecto en HTML y CSS.
CSS.
HTML:
3. Documentación de errores y soluciones aplicadas.