Con el propósito de personalizar
el tamaño y la posición de los archivos multimedia, ajustaremos la presentación
de videos en un documento HTML, según las recomendaciones oficiales de este
lenguaje.
En algunos
casos el creador de páginas web pierde
tiempo cuando decide mostrar videos, debido a la edición empleada para tener
tamaños diferentes. Por lo tanto, identificaremos las etiquetas de HTML para
modificar el tamaño del video en el navegador web sin afectar el original.
Cuando visualizamos
páginas web, las presentaciones de
videos en cada una de ellas son de diferentes tamaños. Mediante el uso de las
etiquetas de HTML, ocupamos la cantidad especÃfica de pÃxeles en la pantalla,
permitiéndonos determinar el diseño deseado. En la ilustración siguiente,
tenemos la presentación del mismo video tres veces, cada uno con tamaño
diferente.
061-01_1206_ilu01. Presentación
de videos con tamaños diferentes
Para visualizar
las pantallas de video anteriores, donde existen dimensiones diferentes de cada
una, se tiene el siguiente código HTML, en el cual se le agregaron dos atributos
a cada instrucción con el fin de delimitar la ocupación del video en pantalla:
- Width para definir el
número de pÃxeles en cuanto al ancho.
- Height para definir el número
de pÃxeles para el alto.
Independientemente
de la calidad del video, los pÃxeles indicados en estos dos atributos, serán el
tamaño de la pantalla donde se mostrará el video.
061-01_1206_ilu02. Especificación
de tamaños a un video
La
oportunidad de aplicar tamaños diferentes a la presentación de un video, permite
ubicarlo en cualquier parte del documento. Por ello, en el siguiente código se
observa la especificación de un tamaño pequeño para el video, y a su vez utilizamos
la propiedad float para mostrar el
texto alrededor:
061-01_1206_ilu03.
Especificación de video flotante
En la
código anterior, en lugar de utilizar un documento CSS aparte, agregamos una
especificación de estilo en la cabecera del documento HTML, y para su correcto
funcionamiento:
- Especificamos una clase con su nombre a la etiqueta video.
- Definimos la etiqueta style
en la cabecera.
- Agregamos dentro de style
la clase del video con la propiedad float:left,
para flotar a la izquierda.
Al
ejecutar el código en el navegador web,
observamos cómo es mostrado el video en el lugar indicado.
061-01_1206_fot01. Ejecución
de código mediante navegador web
Para
presentar el video en el lado derecho del documento, solo cambiamos en la
etiqueta style el valor de float con la palabra right,
en español derecha.
Keynotes
- Cuando visualizamos páginas web, las presentaciones de videos en
cada una de ellas son de diferentes tamaños. Mediante el uso de las etiquetas
de HTML, ocupamos la cantidad especÃfica de pÃxeles en la pantalla,
permitiéndonos determinar el diseño deseado.
- La oportunidad de aplicar tamaños
diferentes a la presentación de un video, permite ubicarlo en cualquier parte
del documento.
- En lugar de utilizar un documento
CSS aparte, agregamos una especificación de estilo en la cabecera del documento
HTML, y para su correcto funcionamiento: Especificamos una clase con su nombre
a la etiqueta video. Definimos la
etiqueta style en la cabecera.
RetoCrea el fragmento de código
HTML necesario para el ajuste de la presentación de un video, según las recomendaciones
oficiales de este lenguaje.
¡Comparte el resultado
final del tu reto en vKonnect y pide
a tres compañeros una sugerencia para optimizar tu código!
Tiempo disponible: entre 15
y 30 minutos.
CierreEl ajuste de la
presentación de un video en un documento HTML, según las recomendaciones
oficiales de este lenguaje, permite descartar el uso de software de edición y, por ende, optimizamos el tiempo. Asimismo,
diseñamos de forma personalizada el tamaño y la posición de la multimedia en el
navegador web. Con orden y
creatividad aseguramos una visualización de videos acorde a las necesidades.
