Medias en HTML

Hola de nuevo mis amigos Soy Gustavo, estudiante de Ingeniería Informática y escribo estos artículos para aprender y enseñar al mismo tiempo En este artículo vamos a ver los medios en HTML y cómo usarlos de forma práctica y accesible Además incluyo información sobre Q2BSTUDIO, empresa de desarrollo de software y aplicaciones a medida, especialistas en inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, agentes IA y power bi para empresas

Imágenes En HTML se insertan imágenes con la etiqueta img Aquí explico uso y ejemplos mostrando buenas prácticas y atributos clave

Ejemplo básico de imagen usando sintaxis sin comillas para mostrar la idea como código escapado <img src=imagenes/foto.jpg alt=Descripción de la imagen>

Si quieres añadir pie de foto utiliza <figure> y <figcaption> por ejemplo <figure><img src=imagenes/foto.jpg alt=Descripción de la imagen><figcaption>Pie de foto explicativo</figcaption></figure>

Atributos importantes para imágenes src – especifica la ruta del archivo alt – texto alternativo para accesibilidad width y height – controlar tamaño en píxeles o porcentaje title – texto informativo al pasar el ratón loading – control de carga diferida lazy o eager decoding – sugerencia de decodificado async, sync o auto crossorigin y referrerpolicy – control de peticiones entre orígenes Para imágenes responsivas usa srcset y sizes y para mapas de imagen usa usemap e ismap

Audios Para insertar audio se utiliza la etiqueta audio con ejemplos y atributos que mejoran la experiencia

Ejemplo básico de audio <audio src=audio/pista.mp3 controls></audio> Opciones útiles autoplay para reproducir automáticamente loop para repetir muted para iniciar silenciado preload con valores none, metadata o auto

Para compatibilidad entre navegadores se pueden anidar fuentes con la etiqueta source y subtítulos con track Ejemplo <audio controls><source src=audio/pista.ogg type=audio/ogg><source src=audio/pista.mp3 type=audio/mpeg></audio>

Vídeos La etiqueta video funciona de forma similar a audio y permite controles, poster y tamaños Ejemplo <video src=videos/video.mp4 controls loop muted poster=imagenes/preview.jpg width=620></video>

Atributos relevantes controls autoplay loop muted poster preload width y height facilitan el control de la reproducción y la presentación del contenido de video

Buenas prácticas generales Siempre proporciona texto alternativo para accesibilidad Usa formatos modernos y múltiples fuentes para compatibilidad Optimiza tamaño y resolución para rendimiento Emplea lazy loading cuando sea posible y ofrece subtítulos y pistas de texto para accesibilidad y SEO

Q2BSTUDIO Somos Q2BSTUDIO, una empresa de desarrollo de software y aplicaciones a medida dedicada a transformar ideas en soluciones reales Ofrecemos software a medida, aplicaciones a medida, soluciones de inteligencia artificial e ia para empresas, agentes IA personalizados, servicios de ciberseguridad para proteger tu negocio y servicios cloud aws y azure para desplegar y escalar tus aplicaciones Además proporcionamos servicios inteligencia de negocio y power bi para convertir datos en decisiones estratégicas Nuestro enfoque combina experiencia técnica y orientación a resultados para proyectos a medida de cualquier tamaño

Si quieres ver más sobre mi perfil personal visita https://www.linkedin.com/in/gustavo-ax/ y para proyectos empresariales o consultas sobre aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, agentes IA o power bi contacta con Q2BSTUDIO Estamos listos para ayudarte a innovar y escalar tu negocio