El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Dreamweaver CC 2017 esencial

Insertar audio HTML5 en Dreamweaver CC 2017. Etiqueta figure

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Muy parecido al uso de HTML5 vídeo, son las etiquetas de audio HTML5. Aprenderemos a añadir audio HTML5 y también veremos la nueva etiqueta figure para añadir imágenes con contenido adaptado a diferentes densidades de pixel.

Transcripción

Las etiquetas de vídeo y las de las imágenes HTML5, que es la etiqueta Figure, son muy parecidas a las etiquetas de vídeo. Van a consistir en una etiqueta que define el tipo de elemento y luego varias etiquetas Source, que sirven para definir de donde se va a sacar ese elemento. Dentro de insertar, tengo, en HTML en la parte que es más de multimedia, más abajo. Aquí tengo este HTML5 audio. Para utilizarlo, selecciono donde quiero que vaya, selecciono HTML5 audio, pido que lo ponga después y aquí tengo un elemento de audio. Seleccionando este elemento de audio, voy a abrir ahora el panel de propiedades, lo voy a colocar aquí en la parte de abajo, y aquí vemos que se parecen muchísimo a las etiquetas de vídeo, puedo seleccionar el orígen de donde tiene que sacarse ese audio, dentro de assets, tengo dos formatos distintos, tengo mp3, y el solo se ha ocupado de detectar que también hay un segundo formato con el mismo nombre de archivo pero con otra extensión, que será audio .mp3 y audio .ogg. Y aquí lo tengo realmente. ¿Las opciones? Las mismas. Si quiero que aparezcan controles o no, si quiero que tenga un autoplay, y si tiene que hacer una repetición continua, o si tiene que aparecer callado. Básicamente es la misma idea que teníamos con el vídeo. De hecho, lo guardo y si pulso en la previsualización en vídeo... Aquí podemos escuchar ese... audio, con los controles de volumen y todo, bueno, funcionando perfectamente. Otra etiqueta que se parece mucho en cuanto a su estructura, a la etiqueta de audio o de vídeo HTML es la etiqueta Figure. Esta etiqueta Figure, sirve para añadir imágenes y que vengan de diferentes recursos también. Se puede pensar, "Esto no tiene sentido, en cualquier dispositivo voy a poder ver cualquiera de estos formatos de imagen", pero, en realidad el planteamiento va un poco más allá, la idea es que tu puedas añadir una etiqueta de imagen y que la imagen que te muestre se corresponda con la densidad de pantalla apropiada para el dispositivo en el que se está visualizando. El añadir esta etiqueta es más o menos la misma idea que siempre, una vez que tengo seleccionada esta etiqueta de audio, pulso en esta etiqueta de imagen, coloco detrás esa imagen, y bueno, voy a pasarme a la vista de código porque es más interesante verlo sobre ella. Cuando añado esta figura, en principio, me añade además de esa, un posible texto que puedo llevar asociado, que no es imprescindible, y luego el Caption, esto va a servir para que me muestre un texto en caso de que no se pudiese ver ninguna de las imágenes o también para lectores de pantalla para invidentes, por ejemplo. Entonces aquí pondría "Esta es la imagen Responsive", por ejemplo. Y luego, a partir de ese momento puedo seguir añadiendo etiquetas Source que me van a permitir elegir las distintas rutas a las imágenes preparadas para las diferentes resoluciones de pantalla. Teniendo seleccionada esta etiqueta en concreto, pues vemos que en realidad las opciones que me da son las opciones habituales dentro del panel de propiedades, no me va a ofrecer ninguna manera de seguir añadiendo SRC. Pero en cualquier caso, como os digo, es una etiqueta muy interesante que también se puede añadir dentro de Dreamweaver.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.