Diseño de materiales

didácticos web para

dispositivos móviles:

Buenas prácticas

Susana Trabaldo

Mercedes Kamijo

Patricio E. Rey* 

*Net-Learning 

DISEÑO DE MATERIALES DIDÁCTICOS WEB PARA

DISPOSITIVOS MÓVILES: BUENAS PRÁCTICAS 

1

Susana TrabaldoMercedes Kamijo

Patricio E. Rey* 

Resumen 

Con el avance sostenido del Mobile Learning y gracias a la existencia de herramientas web que no requieren conocimientos especializados, docentes, formadores, profesionales de diversas áreas y estudiantes diseñan y desarrollan sus propios materiales didácticos para dispositivos móviles. No obstante, las características específicas de los teléfonos celulares y tabletas exigen que el diseño de materiales educativos cumpla con determinados requisitos para alcanzar un óptimo nivel de usabilidad y accesibilidad. 

En el presente trabajo nos referiremos a recomendaciones relacionadas con materiales a acceder desde la web desde cualquier tipo de dispositivo móvil. 

Palabras clave: Dispositivos móviles. Aprendizaje móvil. Flipped Classroom. BYOD. Diseño adaptativo. Diseño sensible. Herramientas web. 

*Net-Learning 

Diseño de materiales didácticos web para dispositivos móviles: Buenas prácticas 

Introducción

El concepto del E-learning ya utilizado desde hace tiempo en los procesos formativos y favorecidos por el extraordinario avance tecnológico de los últimos años, en especial el vinculado con el desarrollo de las telecomunicaciones y las redes de datos, ha dado origen al nuevo concepto de Mobile Learning, o aprendizaje móvil. 

Ya en pleno siglo XXI, cada día más instituciones y empresas de todo el mundo adoptan el Mobile Learning como modalidad de formación en entornos de aprendizajes formales e informales.  

El aprendizaje móvil ofrece métodos modernos de apoyo al proceso de aprendizaje mediante el uso de instrumentos móviles, tales como los teléfonos inteligentes o smartphones, las tabletas informáticas, los lectores MP3, los PDA, los iPods, etc. 

Lo que caracteriza entonces al Mobile Learning es que se refiere a los ambientes de aprendizaje basados en la tecnología móvil, orientados a optimizar el aprendizaje muy relacionado con el U-Learning (Ubiquitous Learning, o aprendizaje ubicuo), concepto que hace referencia al aprendizaje apoyado en la tecnología y que se puede realizar en cualquier momento y desde cualquier lugar. 

En el documento Directrices para las Políticas de Aprendizaje Móvil del año 2013 de la Organización de las Naciones Unidas para la Educación, la Ciencia y la Cultura (UNESCO) se señala que en el mundo hay registrados 3200 millones de usuarios de teléfonos móviles, lo que da una idea acerca de cómo esta tecnología se ha convertido en pocos años en una de las más usadas. 

2

En el citado documento, se informa también que en los países desarrollados, cuatro de cada cinco personas -es decir el 80 %-  poseen y utilizan un teléfono móvil y, aún en los países en desarrollo, esa relación es de dos a cinco, no obstante lo cual resulta que es justamente en estos últimos países en donde se registra el crecimiento más rápido de penetración en el mercado.

Siguiendo esa línea, el documento afirma que para el año 2017, aproximadamente la mitad de la población de los países en desarrollo tendrá al menos una suscripción activa a un teléfono móvil (GSMA, 2012) y para el año 2016 se prevé que se venderán probablemente tantas tabletas de pantalla táctil como PC o incluso más (NPD, 2012). 

Por otra parte, a medida que el Mobile Learning se expande, también crece la necesidad de capacitar a docentes y formadores en el uso y aplicación de esta tecnología innovadora, de modo que puedan incorporarla con éxito en la práctica pedagógica de formación, a través de metodologías adecuadas. 

En ese sentido, es necesario tener presente que la capacitación de los docentes y los recursos humanos en general, es en realidad más importante que la inversión en la propia tecnología, ya que sin la primera se tiende a utilizar generalmente esta última para hacer “lo mismo de siempre pero de otra manera”, en lugar de innovar y transformar los enfoques del proceso de enseñanza-aprendizaje y optimizar los resultados a alcanzar. 

LAS NUEVAS TENDENCIAS Y MODELOS DE APRENDIZAJE INTEGRADOS AL M-LEARNING

La irrupción del Mobile Learning ha inspirado nuevas tendencias, prácticas, escenarios y modelos de aprendizaje tanto en el entorno educativo como en el empresarial.

3

 

Cada uno de ellos favorece una continua interacción entre el que aprende y el que enseña, entre el alumno y el profesor, entre el usuario y el capacitador. 

Entre los nuevos modelos de aprendizaje integrados al Mobile Learning más recientemente difundidos, podemos mencionar el conocido en inglés como Flipped Classroom ("el aula al revés" o “aula invertida”) y el BYOD (Bring Your Own Device - Trae tu propio dispositivo). 

El primero, Flipped Classroom, es un modelo de aprendizaje en el que los alumnos o usuarios acceden a los contenidos desde sus hogares y luego realizan ejercicios en clase con la guía del docente, quien orienta y responde las dudas que hayan surgido. Se invierte de esta manera la secuencia de los modelos educativos tradicionales. En muchos casos, son los propios profesores quienes elaboran sus propios materiales -generalmente en formato de video- y los distribuyen por distintos medios para que los estudiantes accedan fuera del horario de clase a través de ordenadores de escritorio y portátiles, tabletas y smartphones. 

Imagen Nº 1: Nuevos modelos de aprendizaje integrados al M-Learning

4

El segundo modelo, BYOD, se refiere al uso por parte de los empleados de una empresa o de los alumnos de una escuela, de su propio dispositivo móvil (smartphone, tablet, etc.) que utilizan para el trabajo o el aprendizaje, en lugar de emplear ordenadores o dispositivos proporcionados por la institución educativa o por la empresa a la que pertenecen. Los contenidos y materiales deben cumplir con determinadas características para una óptima visualización a través de distintos dispositivos móviles. 

ALGUNAS TÉCNICAS PARA LA PRODUCCIÓN DE MATERIALES PARA DISPOSITIVOS  MÓVILES

Entre las diversas técnicas existentes a utilizar para la producción de materiales que puedan ser accedidos desde dispositivos móviles, se pueden mencionar las siguientes: 

a) Diseño sensible (Responsive Design, en inglés): Busca reestructurar en la pantalla del dispositivo móvil los elementos de la web para optimizar todo el espacio disponible y ofrecer una excelente experiencia al usuario, lo cual se consigue estableciendo medidas de ancho y márgenes de diseño en tamaños proporcionales, en lugar de establecer valores fijos en los pixeles. 

b) Diseño adaptable o adaptativo: Es una técnica de diseño y desarrollo que busca adaptar la apariencia de las páginas web de cualquier sitio al dispositivo que se esté utilizando para visualizarlas adecuadamente, ya sean tabletas, teléfonos inteligentes, e-books, etc., para cada uno de los cuales existe una serie de características a considerar, tales como tamaño de pantalla, resolución, potencia del procesador, capacidad de memoria, entre otras. Lo

5

que se busca, en que con un solo diseño web, se alcance una correcta visualización en cualquier dispositivo móvil. 

c) ePub (acrónimo de la expresión inglesa electronic Publication) es un formato redimensionable de código abierto para leer textos e imágenes, diseñado para adaptarse a distintos tamaños de letra y pantalla. El formato ePub3 del año 2011, permite también adjuntar audio. 

Si bien cada una de estas técnicas presenta sus ventajas y desventajas, el diseño sensible aparece como la opción más acertada y viable en la actualidad. 

Por otra parte el llamado diseño líquido o fluido, una solución fácil y conocida, que busca muchas veces enfrentar la adaptación a diversos tamaños de pantalla, consiste básicamente en que el sitio expande o contrae el ancho de sus elementos según parámetros en porcentajes, para encajar con los diversos tamaños de pantalla, evitando así que los usuarios tengan que recurrir al scroll. 

El problema, es que esa técnica sólo se preocupa de tamaños y porcentaje de pantalla que ocupa cada elemento, causando problemas justamente en resoluciones extremas; por ejemplo, en televisores LCD las líneas de texto quedarán demasiado largas o en teléfonos inteligentes las imágenes se escalarán hasta volverse imperceptibles. 

EL DISEÑO DE MATERIALES EDUCATIVOS PARA MÓVILES AL ALCANCE DE TODOS 

Aunque las técnicas de diseño sensible y diseño adaptativo requieren conocimientos especializados, hoy en día el desarrollo de materiales educativos para dispositivos móviles se ha transformado en una competencia accesible a todos, gracias a la existencia de herramientas online y de fácil uso. 

6

A continuación enumeramos algunas herramientas web que permiten crear presentaciones multimedia optimizadas para teléfonos celulares y tabletas, independientemente del modelo y sistema operativo (Imagen Nº 2): Google Drive, SlideShare, Prezi, Knovio, Emaze, Vcasmo, SlideShark, Zoho, PowToon, entre otras. 

Imagen Nº 2: Herramientas para crear presentaciones en M-Learning

7

Al estar sustentado en el uso de dispositivos móviles, el M-Learning posee características muy específicas que lo diferencian de otras modalidades como ser el E-learning, y que condicionan el diseño de materiales formativos. Podemos mencionar los siguientes factores: 

a) Características de la conexión inalámbrica 

Si bien las nuevas generaciones de dispositivos móviles poseen acceso a redes WiFi, facilitando un acceso sin restricciones a los contenidos on-line, existen otros dispositivos que no poseen aún esa funcionalidad y deben conectarse a Internet con un costo elevado, resultando en muchos casos más lenta la carga de las páginas. 

Además es necesario tener presente que las comunicaciones inalámbricas presentan en general una capacidad limitada, de calidad fluctuante y con interrupciones más frecuentes de lo deseado. 

b) Características físicas de los dispositivos móviles 

Los dispositivos móviles poseen características muy diferentes respecto de una laptop o un ordenador de escritorio. Sus pantallas son pequeñas y a menudo de poca resolución, y sus teclados reducidos pueden derivar en dificultades ergonómicas para la escritura, dificultando en consecuencia la navegación.  La duración de la batería suele ser escasa en la mayoría de los dispositivos. Por ello es importante que el diseño de materiales educativos se adapte a esas especificidades. 

c) Heterogeneidad de la tecnología móvil 

Tan amplia es la variedad de dispositivos móviles existentes así como sus características técnicas -resoluciones de pantallas, sistemas operativos involucrados, conectividad, compatibilidad, tamaños, etc.- que pueden limitar la

8

estandarización de los formatos de los contenidos a generar, dado que en muchos casos, se necesita disponer de un software determinado que depende de cada modelo según el dispositivo móvil que se considere. 

LAS BUENAS PRÁCTICAS PARA EL DISEÑO DE MATERIALES 

 Teniendo en cuenta los factores mencionados anteriormente, a la hora de diseñar materiales didácticos para utilizar con dispositivos móviles, conviene tener en cuenta algunas buenas prácticas para alcanzar el mayor nivel de usabilidad y accesibilidad: 

1) Diseñar contenidos breves y concisos, fáciles de absorber. Las características físicas de los dispositivos móviles, los entornos en los que se utilizan, y la poca duración de la batería requieren cápsulas pequeñas de contenidos.

2) Ser minimalista; buscar la claridad visual a través del diseño de pantallas sencillas, con poco texto, buscando incluir solo la información importante y sustancial, reemplazando lo accesorio con imágenes, cuadros, diagramas, videos, audio, etc. Esto facilita una cómoda navegación; por ejemplo 240 x 320 pixeles en pantallas de tres pulgadas. 

3) Prestar atención a la tipografía y a la extensión de los textos: la rápida evolución de las aplicaciones móviles, aleja a los diseñadores de usar las fuentes estándar del sistema y los impulsa a utilizar tipografías más específicas. 

9

Al respecto, algunos consejos que se recomienda tener en cuenta son: 

• El texto resulta mejor cuando es grande, fácil de leer y no subordinado a otros elementos de la interfaz. 

• La altura del texto debe ser uniforme y equilibrada. Las letras minúsculas idealmente deben ser al menos 2/3 de la altura de la letra mayúscula, lo que se conoce como la “altura de la x.” 

• En cuanto al grosor y el contraste de la fuente, no debe ser demasiado delgado o demasiado pesado; lo ideal, es un término medio. 

• Utilizar oraciones y párrafos cortos; utilizar un teclado real o virtual  de menos teclas que se manipula con una sola mano; recurrir a la pantalla táctil. 

• Evitar en lo posible el scroll horizontal, para que los usuarios no tengan que desplazarse horizontalmente o usar el zoom en sus dispositivos móviles. El scroll vertical es perfectamente amigable y, por lo tanto, la opción adecuada para reorganizar una página web. 

• Utilizar fondos y tipos de letra contrastantes, que faciliten la legibilidad de los contenidos. 

10

 

Imagen Nº 3: Recomendaciones relativas al texto y las imágenes 

4) Utilizar íconos y símbolos de tamaño adecuado para las pantallas de los dispositivos móviles. 5) Utilizar contenidos audiovisuales para una experiencia amena, pero no

abusar de ellos. Las imágenes que acompañan los contenidos y no entregan información sustancial se pueden eliminar para darle más relevancia al texto. 

6) Asegurarse de que los formatos sean compatibles con los dispositivos móviles. Evitar el formato flash y utilizar en cambio contenidos en HTML5 y CSS3 como lenguajes que definen estructura y estilo visual en una web. 

7) Teniendo en cuenta posibles limitaciones de la red móvil, reducir el tamaño y la calidad de los videos y recursos de audio para lograr una óptima tasa de transferencia y alcanzar menores costos. Una página web móvil tiene

11

que cargarse rápido y aun cuando se amplíe la velocidad de descarga del 3G o del 4G, los usuarios que consultan las páginas web desde su dispositivo móvil son más impacientes que los que lo hacen desde su ordenador de escritorio.

8) Facilitar una navegación cómoda con una estructura de navegación bien definida, con títulos claros y enlaces etiquetados y que funcionen correctamente. Se debe definir un árbol de navegación que se parezca lo más posible a la versión de escritorio.

Imagen Nº 4: Recomendaciones relativas a formatos y contenidos multimedia  

9) Proporcionar retroalimentación visual que permita al usuario saber si la acción que ha realizado ha funcionado correctamente. Es necesario confirmar inmediatamente la acción realizada, con algún feedback visual.

 10) Lo mejor es trabajar la fluidez de una página web móvil, con elementos

que se distribuyen por la pantalla de manera uniforme y más allá de un modelo

12

otro del teléfono inteligente. Para comprobar esa fluidez en todos los dispositivos, existen recursos que permiten comprobar la visualización en distintos dispositivos, como por ejemplo www.responsinator.com. 

11) Por lo general, el menú se debe colapsar o comprimir para optimizar el espacio, así se podrá dar prioridad al contenido y simplificar la navegación. 

12) Para quienes se ocupan de los aspectos publicitarios, los banners responsive son una opción para que se no corten las imágenes ni deformen el sitio. 

 En el diseño didáctico de materiales es imprescindible mantener un

equilibrio en el eje tecnología/pedagogía: son los objetivos pedagógicos los que deben determinar la elección de las herramientas y el diseño de los materiales, y no a la inversa. 

Finalmente, es importante considerar algunas barreras que dificultan el desarrollo y la producción de materiales para M-Learning: 

• Falta de una planificación adecuada.  • Escasa disponibilidad de recursos humanos idóneos.  • Necesidad de capacitación y formación permanentes. 

Otros aspectos -no menos importantes- que se pueden mencionar son: infraestructura de hardware disponible, aspectos comerciales, financieros, legales y de divulgación, compromiso institucional, restricciones en el diseño y plazos para alcanzar los objetivos. 

Todos esos obstáculos pueden ser superados a través de la planificación e implementación estratégicas de una propuesta de M-Learning donde se tenga en

13

cuenta el contexto institucional, los destinatarios, los objetivos de aprendizaje y los recursos tecnológicos y humanos disponibles, entre otros. 

CONCLUSIONES

Queda claro entonces que no es lo mismo navegar un material formativo en un dispositivo móvil que en un ordenador de escritorio. Por tanto, la forma de presentar el contenido, ampliar la información, introducir elementos multimedia (videos, imágenes, documentos, audio, etc.) debe ser abordada desde una perspectiva global e integral, pero teniendo en cuenta que el teléfono inteligente o smartphone es, hoy por hoy, el dispositivo más utilizado. 

En síntesis, las características físicas de los dispositivos móviles, los entornos en los que se utilizan y la poca duración de la batería que utilizan, requieren diseñar cápsulas pequeñas de contenidos, claros, sintéticos, de manera que resulten ventajosas y amenas para el alumno, ya sea en el aula o en la empresa. 

14

Referencias bibliográficas 

Blog de ARSYS. (7 de mayo de 2014). 10 recomendaciones para mejorar nuestra página web móvil más allá del diseño responsive). Recuperado el 20 de diciembre de 2015, de http://blog.arsys.es/10-recomendaciones-para-mejorar-nuestra-pagina-web-movil-mas-alla-del-diseno-responsive/ 

Ledezma, M. A. (2013). EDUTEC Costa Rica 2013. Recuperado el 8 de diciembre de 2015, de La UNED y la producción de materiales para dispositivos móviles: Una revisión del estado actual: http://www.uned.ac.cr/academica/edutec/memoria/ponencias/chaves_87.pdf 

Net-Learning. (14 de julio de 2015). Buenas prácticas para el diseño de materiales web para Mobile Learning. Recuperado el 28 de noviembre de 2015, de http://www.net-learning.com.ar/blog/novedades-en-e-learning/buenas-practicas-para-el-diseno-de-materiales-web-para-mobile-learning.html 

Regol, I. S. (s.f.). Ivoserrano . Recuperado el 30 de noviemnbre de 2015, de Consejos para el diseño de aplicaciones móviles : http://www.ivoserrano.com/diseno-web/consejos-para-el-diseno-de-aplicaciones-moviles/ 

Savoy, S. (29 de abril de 2015). Responsive web design. Recuperado el 13 de diciembre de 2015, de Recomendaciones para adaptar el diseño web a móviles: http://www.ida.cl/blog/diseno/recomendaciones-adaptar-diseno-web-moviles/ 

SMASHING MAGAZINE. (2011). Guidelines For Mobile Web Develpoment. Recuperado el 20 de junio de 2015, de http://www.smashingmagazine.com/guidelines-for-mobile-web-development/ 

SMASHING MAGAZINE. (2015). Mobile Diseño eBook Bundle (8 libros electrónicos). Recuperado el 20 de diciembre de 2015, de https://shop.smashingmagazine.com/products/smashing-mobile-bundle-8-ebooks 

UNESCO. (2013). Directrices de la UNESCO para las políticas de aprendizaje móvil. Recuperado el 30 de noviembre de 2015, de http://unesdoc.unesco.org/images/0021/002196/219662S.pdf 

15

Referencia bibliográfica   SIMBIOSIS del aprendizaje con las tecnologías : experiencias innovadoras en el ámbito hispano / Ana Isabel Allueva Pinilla, José Luis Alejandre Marco (coordinadores). – Zaragoza : Prensas de la Universidad de Zaragoza, 2016  365 p. : 22 cm  ISBN 978-84-16515-59-2 1.Enseñanza asistida por ordenador. 2. Enseñanza a distancia. 3. Internet en la enseñanza. ALLUEVA PINILLA, Ana Isabel ALEJANDRE MARCO, José Luis 371.315.7 37.018.43 004.738.5:37 

Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar, escanear algún fragmento de esta obra. 

 

16