Siglo XXI. Diario digital independiente, plural y abierto. Noticias y opinión
Viajes y Lugares Tienda Siglo XXI Grupo Siglo XXI
21º ANIVERSARIO
Fundado en noviembre de 2003
Ciencia
Etiquetas | web | Diseño | Remitido
Una opción es cambiar la resolución de pantalla

Cómo saber cuando una web es Responsive

|

Una Web responsive o el denominado "Responsive Web Design" o RWD es una técnica de diseño y desarrollo de páginas y aplicaciones Web que permite que éstas se adapten al tamaño, orientación y la resolución y de la pantalla; lo que equivale a decir que se adaptan eficazmente al dispositivo de los usuarios. Se consigue mediante un código único, una única página, una única URL.

¿Cómo sabes si una Web es responsive?

No es necesario visualizar una Web en diferentes dispositivos para comprobar si es responsive o no. Tan solo necesitas visualizarla desde tu escritorio y redimensionar la pantalla del navegador. Según vayas variando el tamaño de la pantalla, comprobarás, o no, que el diseño, el contenido y las imágenes se reconfiguran automáticamente.<br><br>

Otra opción válida es cambiar la resolución de pantalla: Selecciona una resolución baja y comprobarás la visualización de la Web para esa resolución. ¿Funciona? Ya sabes si una Web es responsive o no, por si continuas teniendo dudas, aquí tienes un ejemplo de  sitio “responsive”, en este caso esta totalmente optimizado y se adapta a cualquier navegador, resolución de pantalla,etc...

Ahora pasemos a ver cómo adaptar un vídeo en una Web responsiva

Primero de todo, hay que diferenciar dos tipo de vídeos: HTML5 y los de los servicios externos: Youtube, Vimeo, etc.... Donde son <iframe> y tendremos que incrustarlo.

Vídeo HTML5

Para estos no hay ninguna complicación, es como utilizar un elemento <img>.

Si tenemos que adaptar el vídeo al ancho total de la pantalla, haríamos:

video {

width:100%;

}

Ya contamos con el tamaño máximo que y cuando no se pueda adaptar a la página por cambio de dispositivo o tamaño, se hará automáticamente más pequeño:

img {

width:100%;

max-width:640px;

}

Servicios externos

Trabajando con vídeos con etiquetas <iframe> se complica la adaptación. Para ello hay que hacer un proceso algo complejo.

Contamos con 2 opciones:

1- El vídeo se adapta al ancho del contenedor (el estándar es de 640 píxeles).

2- Limitamos el ancho a uno concreto.

A continuación:

Redimensionamos el contenedor del vídeo para que conserve el ratio- relación entre el alto y el ancho-.<br>

Hacemos:

Introducimos <iframe> dentro de una etiqueta <div> con alto 0px y ancho 100%, y usamos un truquillo para que cuente con el tamaño del vídeo padding-top y establecemos el valor porcentual de su ratio de imagen, que suele ser 16:9, voy a poner varias relaciones:

Dividimos el alto entre el ancho y el padding-top se adaptará según esta relación al ancho:<br><br>

16:9--->9/16*100 = 56,25%

4:3--->3/4*100 = 75%

Ya lo tenemos listo para la etiqueta <div y con ella nos aseguramos que se va a adaptar para tener el ratio adecuado, ahora hacemos que el <iframe> flote sobre la etiqueta anterior y se adopte a su alto y ancho (alto y ancho: 100% y posición: absolute).

Como último paso si no queremos que el vídeo ocupe el 100% del ancho de la página o contenedor), lo delimitaremos con otra nueva etiqueta <div> que contarán el ancho máximo que necesitamos.

Cómo saber cuando una web es Responsive

Una opción es cambiar la resolución de pantalla
Redacción
martes, 13 de octubre de 2015, 05:57 h (CET)

Una Web responsive o el denominado "Responsive Web Design" o RWD es una técnica de diseño y desarrollo de páginas y aplicaciones Web que permite que éstas se adapten al tamaño, orientación y la resolución y de la pantalla; lo que equivale a decir que se adaptan eficazmente al dispositivo de los usuarios. Se consigue mediante un código único, una única página, una única URL.

¿Cómo sabes si una Web es responsive?

No es necesario visualizar una Web en diferentes dispositivos para comprobar si es responsive o no. Tan solo necesitas visualizarla desde tu escritorio y redimensionar la pantalla del navegador. Según vayas variando el tamaño de la pantalla, comprobarás, o no, que el diseño, el contenido y las imágenes se reconfiguran automáticamente.<br><br>

Otra opción válida es cambiar la resolución de pantalla: Selecciona una resolución baja y comprobarás la visualización de la Web para esa resolución. ¿Funciona? Ya sabes si una Web es responsive o no, por si continuas teniendo dudas, aquí tienes un ejemplo de  sitio “responsive”, en este caso esta totalmente optimizado y se adapta a cualquier navegador, resolución de pantalla,etc...

Ahora pasemos a ver cómo adaptar un vídeo en una Web responsiva

Primero de todo, hay que diferenciar dos tipo de vídeos: HTML5 y los de los servicios externos: Youtube, Vimeo, etc.... Donde son <iframe> y tendremos que incrustarlo.

Vídeo HTML5

Para estos no hay ninguna complicación, es como utilizar un elemento <img>.

Si tenemos que adaptar el vídeo al ancho total de la pantalla, haríamos:

video {

width:100%;

}

Ya contamos con el tamaño máximo que y cuando no se pueda adaptar a la página por cambio de dispositivo o tamaño, se hará automáticamente más pequeño:

img {

width:100%;

max-width:640px;

}

Servicios externos

Trabajando con vídeos con etiquetas <iframe> se complica la adaptación. Para ello hay que hacer un proceso algo complejo.

Contamos con 2 opciones:

1- El vídeo se adapta al ancho del contenedor (el estándar es de 640 píxeles).

2- Limitamos el ancho a uno concreto.

A continuación:

Redimensionamos el contenedor del vídeo para que conserve el ratio- relación entre el alto y el ancho-.<br>

Hacemos:

Introducimos <iframe> dentro de una etiqueta <div> con alto 0px y ancho 100%, y usamos un truquillo para que cuente con el tamaño del vídeo padding-top y establecemos el valor porcentual de su ratio de imagen, que suele ser 16:9, voy a poner varias relaciones:

Dividimos el alto entre el ancho y el padding-top se adaptará según esta relación al ancho:<br><br>

16:9--->9/16*100 = 56,25%

4:3--->3/4*100 = 75%

Ya lo tenemos listo para la etiqueta <div y con ella nos aseguramos que se va a adaptar para tener el ratio adecuado, ahora hacemos que el <iframe> flote sobre la etiqueta anterior y se adopte a su alto y ancho (alto y ancho: 100% y posición: absolute).

Como último paso si no queremos que el vídeo ocupe el 100% del ancho de la página o contenedor), lo delimitaremos con otra nueva etiqueta <div> que contarán el ancho máximo que necesitamos.

Noticias relacionadas

El Global Shading Day, celebrado el pasado 21 de marzo, es de crucial importancia para recordarnos la necesidad de la instalación de protección solar como paso directo para combatir el cambio climático y crear edificios más sostenibles. Esta sencilla medida evita el sobrecalentamiento de los edificios, reduce las necesidades de aire acondicionado y reduce las emisiones de dióxido de carbono (CO2).

El Proyecto ‘Libera’, de la Sociedad Española de Ornitología (SEO)/BirdLife y Ecoembes, caracterizó más de 77.000 residuos abandonados en ríos, lagos y embalses de España, en la séptima edición de su campaña de ciencia ciudadana ‘1m2 por los ríos, lagos y embalses’. Del 9 al 24 de marzo tuvo lugar esta edición, en la que participaron casi 7.000 personas en la recogida y caracterización de basuraleza en los entornos fluviales.

Los investigadores Cristina Linares Gil y Julio Díaz Jiménez, del Instituto de Salud Carlos III (ISCIII), serán los coordinadores científicos del nuevo Observatorio de Salud y Cambio Climático (OSCC) y codirectores de la Unidad de Cambio Climático, Salud y Medio Ambiente Urbano en la Escuela Nacional de Sanidad (ENS) del Instituto.

 
Quiénes somos  |   Sobre nosotros  |   Contacto  |   Aviso legal  |   Suscríbete a nuestra RSS Síguenos en Linkedin Síguenos en Facebook Síguenos en Twitter   |  
© Diario Siglo XXI. Periódico digital independiente, plural y abierto | Director: Guillermo Peris Peris
© Diario Siglo XXI. Periódico digital independiente, plural y abierto