A.- Adaptabilidad en los dispositivos

Hace 10 años las páginas web eran accedidas al 99% de probabilidad desde un ordenador personal, con resoluciones de pantalla muy determinadas (1024x768, 1920x1080...). Esto permitía realizar unos diseños bastante fijos, en los cuales los contenidos de la web no tenían que desplazarse demasiado por la pantalla.

El escenario actual es radicalmente diferente, cualquier web debe de poder ser accedida desde cualquier dispositivo, independientemente de la medida de la pantalla y su resolución. Por eso, si queremos una web actualizada y útil, ésta tiene que lograr los objetivos de adaptabilidad en toda clase de dispositivos. Esta propiedad se denomina RESPONSIVIDAD (que no se os olvide la palabrita, si sois el/la encargado/da de la web del centro, es vuestra responsabilidad que la página tenga responsividad). ¿Cómo se hace esto? ¿Yo qué sé de responsiviqué...? No sufráis, Portal.edu lo hará por nosotros. Entonces, ¿cuál sería nuestra tarea en este apartado? Pues no sería mala idea...

• Evitar incluir imágenes demasiado anchas.
• No usar tablas para organizar los contenidos ni de la web ni de las entradas, es mejor usar columnas, que pueden deslizarse si la página es más grande o más pequeña.
• Acceder en la web del centro desde otros dispositivos (tabletas, móviles, televisores...), y comprobar que la apariencia se mantiene.
• Comprobar la visibilidad y funcionalidad de los menús de navegación en todos los casos.

Si no tenéis otro dispositivo al alcance, existe otra manera de comprobar la reponsividad de vuestro sitio web. Probad la siguiente combinación de teclas (si utilizáis otros navegadores, podéis hacer una búqueda en Internet):

• FIREFOX: ctrl-shift-M en Windows/Linux o cmd-opt-M en Mac
• CHROME i OPERA: ctrl-shift-C en Windows/Linux ocmd-opt-C en Mac

Podréis modificar el tamaño de vuestro navegador a la resolución que queráis. Probad a hacerlo en vuestro equipo. En la siguiente imagen podéis ver cómo funciona esto en Firefox, con el ratón podemos variar el tamaño de nuestra pantalla, si el tema de Wordpress es realmente responsivo, el contenido se tendrá que adaptar al espacio que tenga.

 

TAREA: Probando la adaptabilidad de mi sitio

Analizamos hasta qué punto la responsividad puede determinar que nuestra página sea práctica, dada la utilización de la web en la actualidad. Para lo cual haremos un ejemplo rápido, en el cual usaremos una tabla para mostrar contenido, y después meteremos el mismo contenido directamente en columnas. Comprobaremos su comportamiento si vemos esa página en dispositivos con resoluciones menores.

1. Dirígete a la página de pruebas del editor visual que incluye PortalEdu, y accede a la demo de constructor de páginas. Por defecto carga una página con bastantes elementos ya incluidos, lo cual resulta bastante incómodo. Elimina todos los elementos desde el menú que aparece en la barra superior al pasar el ratón por cada uno.

1. Con la página limpia, sin contenido, incluiremos una distribución en 3 columnas, con el botón + que aparece en la parte superior de la pantalla:

1. Incluye ahora, en cada una de las columnas un elemento Text Editor, y mete el texto que quieras.
2. Visita una web que te ayude a hacer una tabla HTML rápidamente, aquí tienes un ejemplo de generador de tablas HTML en linea. Haz una tabla de una sola fila y tres columnas. Llena las columnas con el mismo texto que has metido en el punto anterior.
3. Genera el código HTML de la tabla y cópialo.
4. En la demo del editor visual, incluye ahora un elemento HTML, bajo del contenido que ya tienes. El aspecto de tu página tendría que ser parecido al siguiente (hemos metido borde en la tabla por comodidad):

Ahora puedes probar la responsividad de una opción y otra, si recuerdas lo que comentaremos en el apartado de Adaptabilidad en los dispositivos, en las recomendaciones de diseño, puedes hacer que tu navegador cambie de resolución. De este modo comprobarás que el contenido que NO está dentro de la tabla puede deslizarse si la pantalla es más grande o más reducida.

Última actualización: Martes Agosto 30, 2022 16:45:05 GMT-0000