Presentación
Final
Karen Almaguer Segura 5PM 30 de oct de 2025 Silvestre Palafox Vargas CBTis 75 "Miguel Hidalgo y Costilla"
INTRODUCCIÓN
Esta presentación documenta la práctica de un Sitio Web Interactivo sobre el artista Tombochio. Este proyecto se fundamentó en bases teóricas esenciales para la construcción de aplicaciones web modernas, destacando la importancia de la separación de responsabilidades entre estructura, estilo y comportamiento.
OBJETIVO
Desarrollar un sitio web funcional de temática libre mediante la implementación de etiquetas HTML semánticas, elementos interactivos con JavaScript y diseño CSS responsivo. El sitio deberá ser publicado en un servidor local, y la documentación de resultados junto con el análisis del proceso de implementación serán expuestos a través de la plataforma Genially.
HTML
El código utiliza la estructura semántica de HTML para garantizar accesibilidad y un SEO óptimo.
- <header> y <nav>: Definen la cabecera y la navegación principal.
- <main>: Contiene todo el contenido único del sitio (Biografía, Discografía, Videos, Contacto).
- <section>: Secciones temáticas principales (#biografia, #discografia, #videos).
- <aside>: Barra lateral con contenido secundario y el botón de video destacado.
- <footer>: Información de derechos de autor y el botón de scroll.
- Selectores: Permiten elegir qué elemento de HTML estilizar (ej., #videos, .artista-foto, h1).
- Modelo de Caja: Define cómo se trata cada elemento HTML como una caja rectangular con propiedades como margin (espacio exterior), border (borde) y padding (espacio interior).
- Responsividad: La habilidad del sitio web para adaptarse a diferentes tamaños de pantalla (móvil, tablet, escritorio).
- @media Queries: La regla CSS que te permitió crear el diseño responsivo, aplicando estilos diferentes basados en el ancho de la pantalla (ej., @media (max-width: 768px)).
- CSS Grid: El sistema de layout avanzado que te permitió organizar el contenido en filas y columnas definidas (3fr 1fr), siendo la clave para el diseño estable de tu sitio.
CSS
CSS, que significa Cascading Style Sheets (Hojas de Estilo en Cascada), es un lenguaje fundamental en el desarrollo web. Su función principal es separar el contenido (HTML) de la presentación (estilo).
Java Script
JavaScript es el lenguaje de programación que permite implementar características complejas en páginas web. Esencialmente, es el comportamiento de tu sitio. Mientras HTML estructura y CSS da estilo, JS hace que las cosas sucedan (validar, responder a clics, moverse, cargar contenido).
PROCEDIMIENTO Y RESULTADOS
Creación de la estructura en HTML
Diseño de la estructura base de la página utilizando etiquetas semánticas como <header>, <nav>, <main>, <section>, <article>, <aside> y <footer>.Se organizaron las secciones principales: biografía, discografía, etc y un aside con información destacada.
Resultado: Se obtuvo una página con una estructura clara y ordenada, fácil de navegar y con cada parte del contenido bien identificada. La división semántica facilitó el posterior trabajo de estilo y funcionalidad.
Diseño visual con CSS
Usé una hoja de estilos externa para definir colores, tipografías y espaciados. Una cuadrícula para distribuir las secciones principales y un diseño responsivo que se adapta a diferentes tamaños de pantalla mediante media queries. También agregué estilos a los botones, formularios imágenes para mejorar la estética general.
Resultados: La página adquirió una apariencia profesional y coherente con la temática musical. Las pruebas mostraron que el diseño se adapta correctamente tanto en computadoras como en dispositivos móviles.
Programación de interactividad con JavaScript
Procedimiento: Con un archivo externo llamado interactivo.js. Añadí funciones para:
- Insertar dinámicamente la discografía desde un arreglo de objetos.
- Activar un modal con detalles de cada álbum.
- Validar el formulario de contacto (email y comentario).
- Mostrar un botón para volver al inicio con desplazamiento suave.
- Reproducir el video destacado desde el aside.
Resultado: El sitio se volvió completamente interactivo. Los álbumes se cargan correctamente, los modales se abren al hacer clic, y las validaciones del formulario funcionan mostrando mensajes adecuados. Todo el comportamiento dinámico respondió según lo esperado.
Pruebas y corrección de errores
Procedimiento
Resultados
Corregí detalles en los caracteres especiales y en la posición del modal.
Tras las correcciones, la página mostró un desempeño estable, sin errores en la consola del navegador y con una experiencia de usuario fluida.
También ajusté los márgenes y sombras en el CSS para mejorar la presentación visual.
Evaluación de resultados e incertezas
Procedimiento y resultados
Analicé posibles variaciones en el comportamiento del sitio según el navegador y la velocidad de conexión. También se consideré el rendimiento al cargar imágenes o videos externos. Cómo resultado, las incertezas fueron mínimas, principalmente relacionadas con la compatibilidad entre navegadores. El proyecto final cumplió con los objetivos propuestos, demostrando el uso funcional de HTML, CSS y JavaScript en conjunto.
CONCLUSIÓN
Esta práctica me ayudó con HTML, CSS y JavaScript, entendiendo cómo cada uno sirve para el funcionamiento de una página web. Aprendí la importancia de seguir buenas prácticas de diseño para que se vea más bonis y usar código estándar para evitar errores. También me di cuenta de que probar el rendimiento y analizar los resultados es clave para mejorar la experiencia del usuario. En general, logré cumplir con los objetivos y reforcé mucho mi comprensión sobre el desarrollo web. Me gustó mucho el resultado de mi página sobre el guapote de Tombochio :)
Gracias por su atención :)
¿Tienes una idea?
Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:
- Visita las preferencias de Analytics;
- Activa el seguimiento de usuarios;
- ¡Que fluya la comunicación!
¿Tienes una idea?
Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:
- Visita las preferencias de Analytics;
- Activa el seguimiento de usuarios;
- ¡Que fluya la comunicación!
Final
Karen Almaguer Segura
Created on October 30, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Vaporwave presentation
View
Animated Sketch Presentation
View
Memories Presentation
View
Pechakucha Presentation
View
Decades Presentation
View
Color and Shapes Presentation
View
Historical Presentation
Explore all templates
Transcript
Presentación
Final
Karen Almaguer Segura 5PM 30 de oct de 2025 Silvestre Palafox Vargas CBTis 75 "Miguel Hidalgo y Costilla"
INTRODUCCIÓN
Esta presentación documenta la práctica de un Sitio Web Interactivo sobre el artista Tombochio. Este proyecto se fundamentó en bases teóricas esenciales para la construcción de aplicaciones web modernas, destacando la importancia de la separación de responsabilidades entre estructura, estilo y comportamiento.
OBJETIVO
Desarrollar un sitio web funcional de temática libre mediante la implementación de etiquetas HTML semánticas, elementos interactivos con JavaScript y diseño CSS responsivo. El sitio deberá ser publicado en un servidor local, y la documentación de resultados junto con el análisis del proceso de implementación serán expuestos a través de la plataforma Genially.
HTML
El código utiliza la estructura semántica de HTML para garantizar accesibilidad y un SEO óptimo.
CSS
CSS, que significa Cascading Style Sheets (Hojas de Estilo en Cascada), es un lenguaje fundamental en el desarrollo web. Su función principal es separar el contenido (HTML) de la presentación (estilo).
Java Script
JavaScript es el lenguaje de programación que permite implementar características complejas en páginas web. Esencialmente, es el comportamiento de tu sitio. Mientras HTML estructura y CSS da estilo, JS hace que las cosas sucedan (validar, responder a clics, moverse, cargar contenido).
PROCEDIMIENTO Y RESULTADOS
Creación de la estructura en HTML
Diseño de la estructura base de la página utilizando etiquetas semánticas como <header>, <nav>, <main>, <section>, <article>, <aside> y <footer>.Se organizaron las secciones principales: biografía, discografía, etc y un aside con información destacada.
Resultado: Se obtuvo una página con una estructura clara y ordenada, fácil de navegar y con cada parte del contenido bien identificada. La división semántica facilitó el posterior trabajo de estilo y funcionalidad.
Diseño visual con CSS
Usé una hoja de estilos externa para definir colores, tipografías y espaciados. Una cuadrícula para distribuir las secciones principales y un diseño responsivo que se adapta a diferentes tamaños de pantalla mediante media queries. También agregué estilos a los botones, formularios imágenes para mejorar la estética general.
Resultados: La página adquirió una apariencia profesional y coherente con la temática musical. Las pruebas mostraron que el diseño se adapta correctamente tanto en computadoras como en dispositivos móviles.
Programación de interactividad con JavaScript
Procedimiento: Con un archivo externo llamado interactivo.js. Añadí funciones para:
Resultado: El sitio se volvió completamente interactivo. Los álbumes se cargan correctamente, los modales se abren al hacer clic, y las validaciones del formulario funcionan mostrando mensajes adecuados. Todo el comportamiento dinámico respondió según lo esperado.
Pruebas y corrección de errores
Procedimiento
Resultados
Corregí detalles en los caracteres especiales y en la posición del modal.
Tras las correcciones, la página mostró un desempeño estable, sin errores en la consola del navegador y con una experiencia de usuario fluida.
También ajusté los márgenes y sombras en el CSS para mejorar la presentación visual.
Evaluación de resultados e incertezas
Procedimiento y resultados
Analicé posibles variaciones en el comportamiento del sitio según el navegador y la velocidad de conexión. También se consideré el rendimiento al cargar imágenes o videos externos. Cómo resultado, las incertezas fueron mínimas, principalmente relacionadas con la compatibilidad entre navegadores. El proyecto final cumplió con los objetivos propuestos, demostrando el uso funcional de HTML, CSS y JavaScript en conjunto.
CONCLUSIÓN
Esta práctica me ayudó con HTML, CSS y JavaScript, entendiendo cómo cada uno sirve para el funcionamiento de una página web. Aprendí la importancia de seguir buenas prácticas de diseño para que se vea más bonis y usar código estándar para evitar errores. También me di cuenta de que probar el rendimiento y analizar los resultados es clave para mejorar la experiencia del usuario. En general, logré cumplir con los objetivos y reforcé mucho mi comprensión sobre el desarrollo web. Me gustó mucho el resultado de mi página sobre el guapote de Tombochio :)
Gracias por su atención :)
¿Tienes una idea?
Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:
¿Tienes una idea?
Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia: