1. Diseño de materiales
didácticos web para
dispositivos móviles:
Buenas prácticas
Susana Trabaldo
Mercedes Kamijo
Patricio E. Rey*
*Net-Learning

2. DISEÑO DE MATERIALES DIDÁCTICOS WEB PARA
DISPOSITIVOS MÓVILES: BUENAS PRÁCTICAS
1
Susana Trabaldo
Mercedes 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

3. 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

4. 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

5.
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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12.
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

13. 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

14. 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

15. 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

16. 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

17. 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