TFM Agus v7 Revisado

UNIVERSIDAD REY JUAN CARLOS
TRABAJO FIN DE MÁSTER
ESTUDIO SOBRE DIFERENTES LENGUAJES PARA LA WEB, Y SOBRE SU

APLICACIÓN EN CONTEXTOS EDUCATIVOS
MÁSTER UNIVERSITARIO EN FORMACIÓN DEL PROFESORADO DE EDUCACIÓN

SECUNDARIA OBLIGATORIA Y BACHILLERATO, FORMACIÓN PROFESIONAL Y
ENSEÑANZA DE IDIOMAS.
ESPECIALIDAD INFORMÁTICA Y TECNOLOGÍA
CURSO ACADÉMICO 2017-2018
Apellidos y Nombre del Alumno/a

Fernández Herrera, Agustín
Director/a TFM:
Carlos Alfredo Lázaro Carrascosa
Estudio sobre diferentes lenguajes para la web,
Agustín Fernández Herrera
y sobre su aplicación en contextos educativos
II
Índice de Contenidos
Resumen ............................................................................................................................... 1
Abstract ................................................................................................................................ 1
1. Introducción ............................................................................................................... 2
2. Parte I: Marco Teórico .............................................................................................. 6
2.1 Análisis de lenguajes web ......................................................................................... 6
2.1.1. HTLM5....................................................................................................... 6
2.1.2. PHP............................................................................................................. 8
2.1.3. JavaScript ................................................................................................. 10
2.1.4. Perl ........................................................................................................... 12
2.1.5. Python....................................................................................................... 13
2.1.6. JAVA ........................................................................................................ 15
2.2 Combinaciones de lenguajes más utilizadas ......................................................... 16
2.2.1. HTML +CSS + JS .................................................................................... 16
2.2.2. PHP + HTML + MySQL .......................................................................... 16
2.3 Otros lenguajes o tecnologías ................................................................................. 17
2.3.1. AJAX ........................................................................................................ 17
2.3.2. Microsoft .NET ........................................................................................ 19
2.3.3. Flash ......................................................................................................... 19
3. Parte II: Aplicación en Educación ......................................................................... 21

3.1 Educación virtual. Uso de las TIC en Educación. ................................................ 21
3.2 Moodle [31] .............................................................................................................. 22
3.3 Edmodo [32]............................................................................................................. 24
3.4 Canvas LMS [33] ..................................................................................................... 26
3.5 EducaMadrid [34] ................................................................................................... 27
3.6 Code Combat ........................................................................................................... 28
3.1 The Flipped Classroom ........................................................................................... 29
3.2 Gamifica tu aula ...................................................................................................... 30
3.3 AppInventor............................................................................................................. 31
4. Conclusiones ............................................................................................................. 34
5. Bibliografía ............................................................................................................... 36
III
IV
Resumen
Cada vez es más habitual en el entorno educativo la inclusión de las nuevas

tecnologías, en cualquiera de sus múltiples modalidades. Una de estas modalidades (y
posiblemente la más importante) es la utilización de servicios y/o plataformas web en el
ámbito educativo para diversos fines: plataforma educativa integral, compartir ficheros y
mensajes, flipped classroom, aplicar entornos gamificados, etc. En este Trabajo Fin de
Máster se realiza un análisis pormenorizado de los principales lenguajes de programación
web existentes en la actualidad, con el fin de servir como guía de consulta orientada a
alumnos y profesores, indicándose además los usos más recomendados para los mismos.
Por otro lado, se analizan una serie de herramientas web muy útiles para diversos
propósitos relacionados con Educación, y que cada vez son más comunes en entornos
educativos, para posteriormente hacer alusión a las tecnologías que se utilizan para su
desarrollado.
Palabras clave: plataforma educativa, educación web, nuevas tecnologías en educación,
lenguajes de programación web.
Abstract
In these days, the inclusion of new technologies, in any of its multiple modalities, is
becoming more common in the educational environment. One of these modalities (and
possibly the most important one) is the use of services and / or web platforms in the
educational field, for many purposes: integral educational platform, sharing files and
messages, flipped classroom, applying gamified environments, etc. In this Final Master's
Project, a detailed analysis of the main web programming languages currently existing is
carried out, in order to serve as a reference guide, and also indicates the most
recommended uses for them. On the other hand, a series of very useful and increasingly
common web tools are analyzed in educational environments, to subsequently relate to
the programming languages in which they have been developed or even allow new
developments, especially in those of open source.
Keywords: educational platform, web education, new technologies in education, web
programming languages.
1
1. Introducción
En los últimos años, la evolución de las Tecnologías de la Información (TIC) ha

cambiado el mundo tal y como se conocía. Sin ir más lejos, la forma de comunicarnos entre
nosotros es radicalmente distinta a la de hace apenas un par de décadas. Además, la manera
de trabajar también se ha visto afectada (incluso han desaparecido profesiones y han
aparecido otras muchas nuevas). También la manera de entretenerse de las personas ha
cambiado sustancialmente, etc. Sin embargo, ¿han afectado también estos cambios a la
forma de educar? ¿Cómo podrían ayudar las TIC a potenciar y fortalecer la Educación?
Sin duda, una de las principales revoluciones dentro del mundo TIC (si no la
principal) es la aparición del universo web. Hoy en día, gracias a “la red” se ha conseguido
acceder de manera inmediata a cualquier información que se desee obtener. Ha
revolucionado la forma de informarnos, de acceder a productos de consumo a nivel mundial,
comunicarnos, etc. Las posibilidades y herramientas que ofrece la web, y que son aplicables
al ámbito de la Educación son muy numerosas: plataformas educativas, vídeos, redes
sociales, juegos…e incluso la forma de educar. [1]
Uno de los objetivos de este Trabajo Fin de Máster es servir de guía a aquellos
estudiantes de programación de cualquier nivel (preferentemente, en el ámbito
preuniversitario), que deseen tener una perspectiva más amplia de los principales lenguajes
de programación existentes en el entorno web, y de su relación con diversas aplicaciones
web educativas. Además, se pretende aportar ideas y ampliar conocimientos a aquellos
estudiantes que deseen desarrollar aplicaciones web educativas.
Por otro lado, este trabajo también va especialmente dirigido a profesores que deseen
iniciarse o ampliar sus conocimientos en el ámbito de la programación, y quieran conocer
diferentes aplicaciones web educativas que puedan incluso utilizar en su día a día.
En esta línea, el trabajo se ha dividido en dos partes principales. En primer lugar, se
presentan los principales lenguajes de programación web, se categorizan según su función y
se explican las combinaciones más habituales de los mismos. Posteriormente, se describen
diversas aplicaciones y/o plataformas web educativas, haciendo alusión a las tecnologías
concretas que se utilizan en su desarrollo. De esta manera, se pretende establecer una base
de conocimiento que pueda ser aplicable en el Aula, sea cual sea la materia y el nivel.
2
Sin embargo, antes de entrar en materia, es importante conocer el funcionamiento de

la web, es decir, por qué cuando escribimos una dirección en un navegador accedemos
directamente al sitio web que queremos. El modo de funcionamiento se puede comparar a
un cliente cuando accede a un establecimiento a comprar algo, y realiza peticiones al
dependiente para adquirir el producto que desea. En el caso de la red, el cliente sería
comparable al navegador, y el dependiente actuaría como un servidor web al que le llegan
peticiones que debe atender.
Se puede realizar otra analogía con una fábrica de un producto determinado,
comparando las líneas de código que forman la página web con la materia prima, que es
procesada y presentada para elaborar un determinado producto. En nuestro ejemplo, ese
producto sería la página web.
De manera gráfica, el procedimiento habitual que se sigue en aplicaciones web es el
siguiente:
Petición HTTP
HTML + CSS
Servidor web
Bases de datos, ...
Servidor
Figura 1: Diagrama representativo de la conexión web
Fuente: elaboración propia
En el momento en que un usuario o cliente teclea un nombre de página web en el

navegador, se inicia una petición de contenido al servidor en el que está almacenado dicha
3
página (Petición HTTP). Si la conexión ha sido exitosa, el servidor web responderá al

navegador con el contenido de la página web. [2]
Así mismo, cuando un usuario interacciona con la página a través del navegador
(seleccionando un determinado valor, pulsando un botón determinado, rellenando un
formulario etc.) se realizan llamadas al servidor, que pueden ser de distintos tipos y perseguir
diferentes funcionalidades. En muchos casos, puede ser necesario el acceso desde el servidor
a una determinada base de datos (por ejemplo, para el registro y autenticación de usuarios).
Una vez se han procesado dichas llamadas, el servidor devuelve una nueva página HTML al
navegador, en función del tipo de funcionalidad. [2]
De esta forma, podemos clasificar los lenguajes de programación web en diferentes
tipos, según su utilización: [2]
 Lenguajes del lado del servidor: Se trata de lenguajes de programación

cuyas aplicaciones se ejecutan, típicamente, en el servidor web, para generar
páginas HTML en respuesta a una petición del navegador. Su utilización es
muy variada y puede tener diversos fines: accesos a bases de datos,
conexiones en red, etc. Dentro de este tipo de lenguajes se encuentran PHP,
Python, Perl o Java.
 Lenguajes del lado del cliente: Son lenguajes de programación cuyas
aplicaciones se ejecutan mayoritariamente en el navegador, es decir, en el
lado del cliente. De esta forma, los programas se incluyen dentro del
documento HTML mediante la etiqueta <script>, y se utilizan para indicar al
navegador que comportamiento debe tener ante diversas acciones del usuario:
seleccionar un botón determinado, envío de un formulario, etc.
A diferencia de lo que ocurre en los lenguajes del lado servidor, en este caso
el usuario puede ver el código fuente, ya que es interpretado directamente por
el navegador.
El ejemplo más habitual de lenguaje del lado cliente es JavaScript.
 Lenguajes de marcado o etiquetado: A grandes rasgos, se trata de lenguajes
basados en el uso de etiquetas, que indican al programa intérprete (navegador,
en el caso de la web) el tipo de información que contienen. El entorno web
está basado en el lenguaje de marcado HTML.
4
 Lenguajes de representación: Su función es la de implementar la apariencia

de la página web, en cuanto a diseño, tipo de letra, colores, justificación del
texto, etc. El más común y utilizado es CSS.
 Lenguajes de bases de datos: Estos lenguajes de programación permiten
comunicarse e intercambiar información con bases de datos. Un ejemplo de
un lenguaje de bases de datos es MySQL.
De esta forma, para construir diversas aplicaciones web con un grado de complejidad
determinado, es necesario realizar combinaciones de lenguajes de programación de diversos
tipos, tal y como se muestra en puntos sucesivos de este documento. Así, para representar
una página web, será muy habitual utilizar HTML junto con CSS. Si, además, se pretende
dotar a la página de funcionalidades e interacción con el usuario (formularios, envío de
información, registro, etc.), será muy probable que se deba utilizar JavaScript.
En caso de ser necesario realizar cualquier tipo de interacción con un servidor
remoto, entrarán en uso los lenguajes del lado servidor. Por ejemplo, si la página web incluye
la opción de enviar un formulario o de registrarse para acceder a un determinado contenido,
es muy probable que en el lado servidor se utilice PHP + MySQL para validar al usuario y
permitirle acceder a un contenido determinado según sus permisos. [3]
En los siguientes puntos de este Trabajo se exponen los principales lenguajes web,
tanto en el lado del servidor como en el lado del cliente, junto a las principales aplicaciones
que ofrecen cada uno de ellos, para finalmente poner el foco en las posibles aplicaciones en
el ámbito educativo. De esta forma, en la Parte I se introducen de manera general los
principales lenguajes de programación web, junto con sus combinaciones más utilizadas.
Posteriormente, en la Parte II, se realiza un análisis de algunas de las principales
herramientas web utilizadas en el ámbito de la Educación, y que están basadas en los
lenguajes presentados en la Parte I. Para finalizar, se exponen las principales conclusiones
extraídas de este análisis teórico y práctico.
5
2. Parte I: Marco Teórico
2.1 Análisis de lenguajes web
2.1.1. HTLM5
HTML (HyperText Markup Language) es un lenguaje de etiquetas (cuya primera

versión surgió en 1990) que se encarga de estructurar y presentar el contenido de una web,
permitiendo referenciar varios tipos de información: texto, vídeos, imágenes, etc., según la
etiqueta que se utilice en cada caso. Mediante la aplicación de este lenguaje, los navegadores
web existentes conocen cómo se debe mostrar una determinada página, ubicando los
distintos elementos de la manera adecuada en base a las etiquetas que se hayan utilizado, es
decir, los navegadores interpretan el código de manera adecuada gracias a la utilización de
etiquetas. Como curiosidad, en la mayoría de los navegadores existentes se puede mostrar el
código fuente de la página pulsando las teclas Ctrl + U. [4] [5]
El formato de las etiquetas que se suelen utilizar tiene una estructura muy sencilla y
es el que se muestra a continuación:
<etiqueta> Información </etiqueta>
Las etiquetas afectan al texto que se encuentra entre la apertura (<etiqueta>) y el
cierre (</etiqueta). Se debe tener en cuenta en cuenta que las etiquetas están definidas, es
decir, no es válido utilizar cualquier palabra como etiqueta, ya que cada una tiene una
función determinada. Por ejemplo, algunas de las etiquetas HTML más utilizadas son las
siguientes: [6]
 <head> … </head>: Representa el inicio y el final del encabezado de la

página web.
 <title> … </title>: Indica el inicio y el final del título de la página.
 <html> … </html>: Se incluye al principio y fin de todo documento HTML,
para indicarle al navegador que debe interpretar el texto como tal.
 <script> … </script>: Indica el comienzo y el final de una rutina programada
en un lenguaje determinado. En el lado cliente, un lenguaje habitual es
JavaScript.
 <br> … </br>: Representa un salto de línea.
6
 <form> … </form>: Se utiliza para marcar el comienzo y final de un

formulario.
HTML5 es la última evolución de este lenguaje, y durante los últimos años se ha

extendido notablemente en el entorno web. Su principal diferencia respecto a versiones
anteriores es que ofrece más posibilidades utilizando menos recursos. Permite utilizar un
mayor número de tecnologías para que las páginas web sean más diversas y soporten nuevas
funcionalidades (edición de documentos, drag and drop, etc.). En esta línea, se han creado
etiquetas especiales para facilitar y potenciar la inserción de contenido multimedia y facilitar
la sintaxis, así como nuevos elementos que permiten potenciar el contenido web. Podemos
destacar los siguientes [6]:
 Etiqueta <section>: Se utiliza principalmente para estructurar

semánticamente un documento, determinando qué contenido corresponde a
cada parte para proporcionar contenido dinámico. Es importante tener en
cuenta la diferencia con la etiqueta div, que al fin y al cabo se trata de un
separador genérico.
 Etiquetas <Video> / <audio>: Facilitan el acceso y manipulación de
contenido multimedia, indicando el tipo de contenido.
 Etiqueta <Canvas>: Puede ser usado para dibujar gráficos mediante la
utilización de scripts (JavaScript). Además, se puede usar para realizar
animaciones o composiciones de imágenes.
 Etiqueta <Embed>: Se utiliza para indicar la existencia de aplicaciones
externas o contenido interactivo.
 Nuevos atributos para determinar la forma de los elementos: número, fecha,
tiempo, calendario, etc.
Por otro lado, entre sus novedades también se encuentra la posibilidad de acceder a
webs sin tener conexión de internet (mediante el uso de un mecanismo que permite a
aplicaciones basadas en web especificar recursos para almacenar en caché), la posibilidad
de introducir header y footer para cada sección, la reducción de la necesidad de plug-ins para
acceder a todo el contenido de una web, la posibilidad de editar documentos de manera
online (por ejemplo, Google Docs), etc. Además de lo anterior, se han mejorado la utilización
7
de los formularios web, creándose nuevos atributos (type) y elementos (output). Así mismo,
el funcionamiento del DOCTYPE en HTML5 es más sencillo de utilizar, permitiendo un
código más liviano [5].
En referencia al acceso al dispositivo, HTML5 permite utilizar la cámara del equipo,
permitiendo el acceso al API de la misma. También se permite la localización de la posición
del usuario o detectar la orientación del dispositivo para cambiarla en caso de ser necesario.
En cuanto a las hojas de estilo CSS, en esta versión se permite la utilización de
elementos más complejos, permitiendo nuevas características de diseño del fondo, bordes de
formas más sofisticados, tipografía mejorada y nuevos diseños de presentación.
Un ejemplo sencillo de utilización de HTML5 puede ser el siguiente:
Figura 2 Ejemplo de código HTML
2.1.2. PHP
Hypertext Preprocessor (PHP) es un lenguaje de programación de código abierto, que

puede ser incrustado en HTML mediante las etiquetas <?php> y ?>, entre las cuáles se
introduce el código PHP. Fue creado en 1995 por Rasmus Lerdorf y se utiliza habitualmente
como una manera potente y completa de generar contenido dinámico e interactivo en páginas
web, como se describe en este capítulo. Su versión actual es la 7.2, lanzada en noviembre de
2017 y con soporte hasta noviembre de 2020 [7] [8].
Es interesante la posibilidad que ofrece de utilizar programación orientada a objetos
o programación secuencial, o bien una mezcla de ambas. [9] Este hecho añade sencillez y
8
potencia aún más su utilización y expansión, dado que resulta igual de amigable a
programadores que estén acostumbrados a trabajar con lenguajes orientados a objetos o
estructurados [9].
Se trata de un lenguaje del lado del servidor. Una vez el cliente realiza una petición
al servidor web para recibir una página web, el servidor ejecuta el intérprete de PHP (sólo
procesa el código existente entre las etiquetas indicadas con anterioridad), que procesa el
script para generar dinámicamente el contenido. Por último, el servidor envía al cliente la
página web con el resultado. Por tanto, el software del servidor web se encuentra a la espera
de solicitudes de archivos listos para servir, que deben llegar a través de un navegador web
desde el lado cliente. Una vez se lleva a cabo esa petición, el archivo PHP es procesado por
el intérprete que se encuentra en el servidor web [8] [10].
Figura 3 Ejemplo de código PHP incrustado en HTML
Sus aplicaciones son muy diversas, pudiendo destacar entre ellas la recopilación de
datos de formularios, el contenido dinámico en páginas, tratamiento de cookies, etc. Además,
mediante ciertas extensiones permite la creación de ficheros PDF, de texto o imágenes y su
almacenamiento en el sistema de ficheros mediante la creación de una caché en el lado del
servidor. Los principales CMS existentes (WordPress, Joomla! O Drupal) así como otras
múltiples herramientas o plataformas web están desarrolladas en PHP [8].
Por otro lado, además de en el entorno web, PHP puede ser utilizado para realizar
scripts desde la línea de comandos o para desarrollar aplicaciones de escritorio, aunque para
ello no sea probablemente el lenguaje de programación más adecuado, al no haberse ideado
precisamente para ello.
9
Entre sus ventajas se puede destacar su simplicidad y sencillez, potenciando así su

utilización por principiantes, a la vez que ofrece robustez y características avanzadas para
desarrolladores con un mayor nivel. Además, puede emplearse en todos los SSOO (Linux,
Windows, Mac OS, Unix, etc.), y es plenamente compatible con la mayoría de servidores
existentes hoy en día.
Además de lo indicado anteriormente, una gran ventaja de este lenguaje es el soporte
para un gran número de bases de datos y la posibilidad de comunicarse con otros servicios
mediante protocolos como LDAP, IMAP, SNMP, HTTP o POP3, entre otros. Es por ello
que se mediante su utilización se puede acceder a bases de datos de una manera sencilla y
eficaz [9].
2.1.3. JavaScript
Según se indica en el w3school “JavaScript es uno de los 3 lenguajes que cualquier

desarrollador web debe aprender” [11]. Esta es una muestra de la importancia que tiene este
lenguaje en el entorno web.
JavaScript fue creado en 1995 por Brendan Eich, con el fin de ampliar las
posibilidades de HTML. Se trata de un lenguaje interpretado (no requiere compilación), que
puede ser implementado en un documento HTML e interpretado por un navegador, por lo
que es comúnmente utilizado. Su principal finalidad en la de a dotar a un sitio web de
interactividad, mediante la inclusión de galerías de imágenes, respuestas ante la pulsación
de determinados botones, etc. Ejemplos varios de su aplicación es la creación de juegos,
animaciones o gráficos 3D, entre otras múltiples posibles aplicaciones más. JavaScript es
por tanto de una herramienta con un potencial verdaderamente amplio, que posibilita la
realización de entornos web mucho más creativos, funcionales e interesantes para el usuario
[12].
En su origen, se concibió como un lenguaje de script del lado cliente (es decir, que
se ejecuta en el lado del cliente, concretamente en el navegador), aunque las nuevas
necesidades de las aplicaciones web y la aparición de HTML5 han ocasionado una evolución
sustancial, aumentando su complejidad y prestaciones hasta convertirse por sí mismo un
lenguaje de primer nivel, que puede ser utilizado también como lenguaje del lado servidor.
De hecho, su utilización ha trascendido el entorno web para incluirse en sistemas operativos
10
para ordenadores y otros dispositivos como móviles, tanto del lado servidor como del lado
cliente [5].
Cabe indicar que en HTML5 se han incluido multitud de APIs JavaScript (Un API
es un grupo de funciones utilizadas para realizar una o varias tareas), disponibles en todos
los navegadores actuales, y existiendo APIs incluso para trabajar con periféricos u otros
elementos de cada dispositivo. De esta forma, mediante su utilización se puede acceder a
otros recursos como la pantalla o la cámara del dispositivo, a memoria para almacenar datos,
flujos de datos con servidores, etc. lo que indica hasta qué punto han crecido las posibilidades
de utilización [5].
Centrándonos en el entorno web, HTML5 ha ocasionado la estandarización de
JavaScript, tanto para los fabricantes de quipos como para los navegadores. De hecho, hoy
en día JavaScript es el motor principal de la mayor parte de las aplicaciones que utilizamos
en nuestro día a día, como Google, Facebook, Twitter, etc.
Figura 4 Ejemplo de JavaScript en HTML y resultado en navegador
Fuente: www.w3schools.com
2.1.3.1. Aprender JavaScript [3]
Para hacer más sencillo el aprendizaje de JavaScript, es importante conocer y manejar

HTML y CSS. Se trata de un lenguaje de programación sencillo y potente, muy accesible
para cualquier persona que tenga conocimientos básicos de programación. Además,
actualmente JavaScript es un lenguaje estándar, por lo que todos los navegadores modernos
lo interpretar de una manera similar, pudiendo haber problemas con navegadores antiguos
11
como versiones anteriores a Explorer 10. Existen así mismo técnicas para aportar
compatibilidad con estos navegadores antiguos, mediante la utilización por ejemplo de
“degradaciones amigables” de las aplicaciones web.
Una vez que el lenguaje, síntesis y aplicación es familiar, es importante conocer
determinadas librerías, que son de gran utilidad para desarrollos rápidos y cómodos. Algunas
de las librerías más conocidas son:
 jQuery [13]: Sencilla de utilizar y muy potente. Permite programar

funcionalidades a través de plugins como validar formularios, interfaces de
usuario avanzadas, presentación de diapositivas, etc. Actualmente es una de
las librerías más comúnmente utilizadas.
 AngularJS [14]: Se utiliza habitualmente para crear y mantener en una sola
página una aplicación web. Se suele utilizar con Ajax, analizado en el punto
2.3.1. del Trabajo.
 Polymer [15]: Es muy utilizada para crear aplicaciones web mediante “Web
Components”, estándar que aún está en desarrollo y pendiente de aprobación,
y que permitirá crear elementos personalizados y encapsularlos en etiquetas
HTML5. Algunos sitios web de Google utilizan esta biblioteca, como
YouTube o Google Earth.
Así mismo, en el proceso de aprendizaje será fundamental conocer las nuevas características
de JavaScript, gracias a las APIs incluidas en HTML5, fundamental para extender las
inmensas posibilidades de este lenguaje.
2.1.4. Perl
Perl (“Practical Extraction and Report Language”) es un lenguaje de programación

del lado del servidor. Entre sus principales características cabe destacar que es interpretado
(sus programas pueden ser ejecutados en muchas plataformas sin necesidad de recompilar)
y de libre distribución, y fue creado por Larry Wall en 1987. Está basado en otros lenguajes
como C, Shell o AWK, y proporciona una manera más sencilla de manipular ficheros de
texto (incluye potentes herramientas para procesar textos, siendo ideal para trabajar con
HTML o XML), siendo ampliamente utilizado en el entorno web y en Administración de
12
sistemas y redes Unix. Se basa en programación estructurada en bloques (similar a C) aunque

soporta orientación a objetos, así como programación funcional y procedimental [16].
Además de lo anterior, algunas otras razones por las cuáles es tan extenso y conocido
son las siguientes [17]:
 Es confiable y robusto, pudiendo ser utilizado para proyectos críticos.

 Es fácilmente extensible, existiendo más de 197.000 módulos de extensión
disponibles en CPAN (“Comprehensive Perl Archive Network”
www.cpan.org). Se trata de un repositorio de programas y documentación
sobre Perl, que funciona gracias a la cooperación de diversos desarrolladores
e instituciones y voluntarios.
 Cuenta con un interfaz de integración con bases de datos (DBI), que soporta
Oracle, Sybase, MySQL, entre otros.
 Reduce el ciclo de programación al no ser necesario recompilar.
 Es completamente portable, al existir un interpretador por cada versión de
Unix y Windows.
 Permite manejar datos web cifrados, incluyendo transacciones de comercio
electrónico.
 Puede integrarse fácilmente en servidores web Apache.
 Su sintaxis es muy similar a la de C o Shell, lo que facilita su aprendizaje por
programadores acostumbrados a estos lenguajes.
La última versión de Perl puede conseguirse en su página web: www.perl.org.
2.1.5. Python
Python es un lenguaje de programación del lado servidor, multiplataforma

(Windows, Unix o Mac OS) y de libre distribución. Se caracteriza por ser potente y muy
sencillo de aprender, considerándose un lenguaje ideal para hacer scripts y desarrollar de
manera ágil aplicaciones. Esto se debe a que se trata de un lenguaje interpretado, por lo que
permite ahorrar mucho tiempo durante el desarrollo, al no ser necesario compilar ni enlazar.
Así mismo, ofrece una mayor estructura y soporte para scripts que lo que pueden ofrecer
otros lenguajes.
13
Se trata de un lenguaje de alto nivel, que tiene una característica muy peculiar, y es
que no es necesario declarar variables ni argumentos, por lo que típicamente la extensión de
los programas Python es más reducida en comparación con otros. En el caso de las variables,
se definen de manera dinámica y pueden tomar distintos valores de distinto tipo (por
ejemplo, un número o una cadena de texto) [18].
Fue creado a principios de los noventa por Guido van Rossum, como un lenguaje de
programación multiparadigma, es decir, permite programación orientada a objetos,
programación funcional o programación imperativa. Una de sus principales características
es su facilidad de extensión, lo que hace sencillo agregar nuevos módulos al intérprete, o
bien enlazar programas en Python con otras bibliotecas en otros lenguajes [19].
Por otro lado, Python cuenta con un interesante modo interactivo, cuya característica
principal es que permite visualizar de manera inmediata el resultado de una expresión
determinada, por lo que es muy sencillo comprobar si el código es o no correcto.
Figura 5 Ejemplo de serie de Fibonacci en Python
Fuente: www.python.org
En relación con el entorno web, existe un framework gratis y de código abierto escrito
en Python, llamado Django [20], que fue creado con el fin de fomentar desarrollos web
potentes y complejos, de una manera más rápida y sencilla. Incluye gran variedad de
contenido extra para facilitar la gestión de contenidos web, como la gestión de usuarios,
administración de contenidos, mapas del sitio, canales RSS, etc., garantizando al mismo
tiempo la seguridad. Para ello, cuenta con un sistema de autenticación de usuarios robusto,
proporciona ayuda para evitar errores relacionados con SQL, falsificación de solicitudes
entre sitios o clickjacking (técnica maliciosa que consiste en engañar al usuario para que
pulse en un enlace determinado sin darse cuenta). Además, Django es una herramienta
14
fácilmente escalable, flexible y versátil, que ha contribuido de una manera determinante a la

expansión de Python como lenguaje de programación en entorno web.
2.1.5.1. Jython [21]
Se trata de un lenguaje de programación orientado a objetos que está basado en

Python, pero que se implementa en Java. Básicamente, se trata una implementación de
Python para la plataforma de Java, lo que posibilita el uso de un lenguaje de script robusto
que se puede ejecutar en cualquier entorno, y que puede disponer de las bibliotecas Java.
Se caracteriza por ser de alto nivel, orientado a objetos y completamente libre.
Además, es un lenguaje dinámico, es decir, puede modificarse el código del programa al
mismo tiempo que se está ejecutando.
2.1.6. JAVA
JAVA es un lenguaje de programación compilado, multiplataforma y orientado a

objetos, que fue creado en 1995 por Sun Microystems. Cuenta con un API muy amplio [22]
, gracias al que se pueden implementar funcionalidades de BBDD, creación de páginas web
dinámicas, etc. Actualmente es uno de los lenguajes de programación más extendidos y
conocidos, utilizado habitualmente para aplicaciones cliente – servidor. Debido a su robustez
y portabilidad, es ampliamente utilizado en aplicaciones web, servidores, aplicaciones de
escritorio, aplicaciones móviles, etc. [23].
La sintaxis de este lenguaje es similar a C, ya que deriva del mismo, aunque
estructuralmente se organiza en paquetes, que se forman a su vez por clases, y estas
contienen métodos, variables, constantes, etc.
Implementa así mismo la filosofía “escrito una vez, ejecutado en cualquier sitio”
gracias a la Java Virtual Machine (JVM). Esta plataforma interpreta los archivos que genera
el compilador y ejecuta las instrucciones del programa, y permite su ejecución en cualquier
chipset o plataforma. Otra característica importante del JVM es que realiza la gestión de la
memoria que debe utilizar el programa [24].
Los programas en JAVA que se pueden incrustar en una página web HTML se
denominan “applet”, utilizando la etiqueta adecuada (<applet>). Su funcionamiento consiste
en que cuando un navegador web carga una página, el applet se descarga en el navegador
15
web para poder ejecutarse, lo que a su vez posibilita la creación de programas ligeros que
puedan ejecutarse con sólo cargar una página web en concreto.
En el entorno de servidor, se utilizan ampliamente los servlets, que son programas
JAVA utilizados para responder las peticiones de los clientes. Es una aplicación muy similar
a los applets, pero en este caso en el entorno del servidor, en lugar de en un navegador web.
Así mismo, la tecnología JSP (Java Server Pages) permite implementar y desarrollar
páginas web incluyendo contenido dinámico, por lo que se puede afirmar que se trata
de una forma alternativa de crear servlets. Básicamente, una página web con JSP es
una página con HTML a la que se añade código JAVA, y cuyo archivo tendría la
extensión .jsp en lugar de .html, para que el servidor detecte que esa página en
concreto requiere un tratamiento especial.
En esta línea, en el lado del cliente, Java Web Start es un software que posibilita la
ejecución de aplicaciones JAVA que se encuentran en un servidor web, directamente desde
un navegador. De esta manera, se consigue distribuir fácilmente el software en cuestión.
2.2 Combinaciones de lenguajes más utilizadas
2.2.1. HTML +CSS + JS
Se trata de una de las combinaciones de lenguajes de programación más extendidas,

ya que es una estructura muy habitual en construcción de páginas web dinámicas, cuya
utilización es muy común en la actualidad.
Tal y como se indicó en puntos anteriores de este documento en los que se describen
estos lenguajes, a grandes rasgos HTML se trata de un lenguaje de marcas, CSS es un
lenguaje de estilo (que habitualmente se utiliza de manera conjunta con HTML) y JavaScript
es un lenguaje de programación web. Por tanto, HTML se encarga de definir el contenido
(texto, imágenes, etc.) de la página web, CSS define la presentación de ese contenido y
JavaScript proporciona una mejor visualización, estructura y, sobre todo, dinamismo, en
cuanto a que permite interactuar con documentos dentro del navegador.
2.2.2. PHP + HTML + MySQL
Como se indicó anteriormente, PHP es un lenguaje de programación del lado servidor

que permite comunicarse con diferentes tipos de bases de datos, entre las que obviamente se
encuentra MySQL. Por su parte, MySQL es un gestor de base de datos (similar a Oracle,
16
DB2, etc.) que se manipula habitualmente utilizando el lenguaje de base de datos SQL,
aunque también puede ser manipulado por otros lenguajes, como PHP. Se puede utilizar bajo
cualquiera de los principales Sistemas Operativos existentes (Linux, Mac OS X, Solaris,
Windows, etc.) y se utiliza habitualmente para desarrollar aplicaciones web.
A su vez, es posible insertar código PHP en HTML y viceversa, es decir, dentro del
propio código PHP podemos insertar a su vez código HTML. Por tanto, es posible introducir
y utilizar un lenguaje embebido en el otro, lo que es muy útil para diversas aplicaciones. Por
ejemplo, esta combinación se suele utilizar para guardar datos de un formulario web en una
base de datos.
De esta forma, la combinación de estos lenguajes de programación permite crear
páginas web dinámicas y aplicaciones web, almacenando los datos en la base de datos
MySQL y manejando los procesos de consultas y modificación a través de PHP. Una
aplicación muy habitual de esta combinación es la implementación de un acceso a una web
determinada, en la que hay que validarse vía navegador mediante usuario y contraseña.
2.3 Otros lenguajes o tecnologías
2.3.1. AJAX
AJAX [25] (“Asynchronous JavaScript And XML”) no es un lenguaje de

programación como tal, sino una tecnología del lado cliente que permite leer datos de un
servidor web después de la carga de una determinada página, actualizar la web sin recargarla
y enviar datos a un servidor web en segundo plano. Un claro ejemplo de su uso es en las
redes sociales, cuando se desea acceder a determinados comentarios o fotos distintos de los
que se están mostrando, o bien para validar datos de un formulario en tiempo real, mostrar
sugerencia en una página web, cargar imágenes según nos desplazamos por una página web,
etc.. Es por ello que se dice que la conexión al servidor es “asíncrona”, ya que se solicitan al
servidor nuevos datos en segundo plano sin afectar a la visualización ni interacción de la
página web.
17
• Ocurre un evento
Navegador • Se crea un HttpRequest y se envía
• Encamina la petición hacia el

Internet servidor
• Procesa la petición
Servidor HttpRequest
• Crea y envía una respuesta
Internet • Encamina la respuesta al cliente
• Procesa la respuesta utilizando

Navegador JavaScript
• Actualiza el contenido de la página
Figura 6¿Cómo funciona AJAX?

El funcionamiento de AJAX se basa en la creación de un elemento intermedio entre
el cliente y el servidor, con el fin de mejorar la experiencia de usuario, ya que se encarga de
gestionar las peticiones al servidor y al mismo tiempo de mostrar al usuario la información.
En la siguiente figura se muestran las diferentes tecnologías que forman AJAX y que
permiten completar su funcionalidad:
JavaScript
DOM XMLHttpRequest
XHTML CSS XML JSON
Figura 7 Tecnologías AJAX
18
JavaScript une todas las tecnologías. Por su parte, DOM se utiliza para modificar
dinámicamente la presentación de la página, mediante el uso de XHTML y/o CSS. Por su
parte, XMLHttpRequest se utiliza para intercambiar información de manera asíncrona,
mediante el uso de XML y JSON. Por tanto, uno de los inconvenientes es que, para
desarrollar aplicaciones mediante AJAX, es necesario conocer estas tecnologías [26].
A día de hoy, es una tecnología muy extendida, compatible con todos los navegadores
del mercado. De hecho, existen muchas aplicaciones de uso habitual que están basadas en
AJAX, como Gmail, Google Maps, Windows Live Mail, Google Docs, Flickr, etc.
2.3.2. Microsoft .NET
En sí, .NET es una plataforma o framework (componente software) gratuito que

posibilita el desarrollo de aplicaciones en diversos entornos hardware, mediante el uso de un
amplio número de soluciones de programación integradas en la plataforma. Es decir,
mediante la plataforma .NET se pueden utilizar varios lenguajes (concretamente C, F o
Visual Basic) o editores para construir diversas aplicaciones como webs, juegos,
aplicaciones móviles, de escritorio, etc. [27]
En el caso de aplicaciones web y de servidor, se utiliza ASP.NET, que es un conjunto
de herramientas y librerías utilizadas para tal fin, que permite crear aplicaciones web
utilizando HTML, CSS, JavaScript o C, en diferentes plataformas, ya sean Windows, Linux
o incluso MacOS.
2.3.3. Flash
Flash [28] es una tecnología creada por Adobe para crear animaciones que pueden
ser utilizadas en páginas web. Históricamente ha tenido una gran importancia en el desarrollo
de páginas web con contenido animado, llegándose a convertir en una tecnología básica en
el entorno web. Sin embargo, en los últimos años su utilización está perdiendo peso
considerablemente, en comparación con otras tecnologías, debido entre otras cosas a
vulnerabilidades de seguridad y a la aparición de HTML5 y CSS3. Además, muchos
smartphones no soportan la reproducción de contenidos Flash en sus navegadores, lo que es
otro impedimento para su progresiva decadencia.
Está previsto que en 2020 se elimine Flash de los principales navegadores, aunque
algunos lo harán antes. [28]
19
20
3. Parte II: Aplicación en Educación
3.1 Educación virtual. Uso de las TIC en Educación.
Se conoce como enseñanza o educación virtual (también "educación en línea")

aquella que se lleva a cabo a través de un entorno o plataforma digital, que a su vez están
desarrolladas mediante lenguajes web. Este tipo de educación proporciona una mayor
flexibilidad para el aprendizaje, al ofrecer la posibilidad de contar con materiales disponibles
en cualquier momento. Sin embargo, evidentemente, requiere disponer de la tecnología
adecuada para acceder a la información, aunque en nuestros días este hecho es cada vez más
habitual y cotidiano [29].
Este tipo de enseñanza es una consecuencia más de la transformación que las TIC
han provocado en nuestra sociedad. De esta forma, mediante el uso de nuevas tecnologías se
puede adaptar el paradigma educativo en casos en los que así se considere, teniendo en
cuenta obviamente que el método de enseñanza puede ser distinto. Así, surgen nuevos
métodos de impartir conocimientos, como pueden ser el Flipped Classroom o aula invertida,
la propia educación virtual propiamente dicha o nuevas plataformas educativas, como
pueden ser Moodle o campus virtual.
Existen estudios [30] que afirman que los resultados obtenidos por diversos
programas de educación virtual han sido significativamente mejores que los obtenidos por
los presenciales, aunque esta afirmación depende sustancialmente del método,
evidentemente. De esta forma, la educación virtual no debe contemplarse como sustitución
de la educación tradicional, sino como complemento y como elemento potenciador, ya que
permite aprovechar las múltiples posibilidades educativas que ofrecen las nuevas tecnologías
en gran variedad de ámbitos. De igual manera ocurre con los nuevos métodos de aprendizaje
que proporcionan las nuevas tecnologías.
En este apartado del trabajo, se realiza un estudio pormenorizado de diversas
aplicaciones y plataformas web que son comúnmente utilizadas en el ámbito educativo, con
diferentes fines y ámbitos. Para cada una de ellas, se analiza su uso potencial, haciendo
alusión a la tecnología utilizada para su desarrollo.
21
3.2 Moodle [31]
Moodle consiste en una plataforma educativa que cuenta con un conjunto de

herramientas enfocadas al aprendizaje, cuyo fin es posibilitar a profesores y estudiantes un
medio educativo más adaptado a cada alumno, de manera sencilla, robusta, gratuita y segura.
Una de sus características más importantes es que puede ser utilizado bien para cursos
totalmente virtuales o bien para aprendizaje mixto.
Figura 8 Apariencia de la plantilla básica "Mount Orange School"
Fuente: Moodle.org
Estas herramientas con las que cuenta la plataforma se denominan “módulos”, y

existe una gran variedad de ellos, entre los que cabe destacar los siguientes:
 Módulo de consulta: Se suele utilizar para recibir respuestas sobre cualquier

tema o asunto por parte de los alumnos del curso.
 Módulo de tareas: Se trata de una plataforma de intercambio. Permite que los
alumnos carguen sus tareas, así como especificar una fecha máxima,
calificación, observaciones, etc.
 Módulo diario: Se usa para intercambiar información entre alumno y profesor
de manera individual. Además, permite enviar notificaciones cada vez que
haya algún nuevo contenido.
 Módulo foro: Permite crear foros de discusión de distintos tipos: entre
alumnos, entre profesores, entre ambos, etc.
22
 Módulo encuesta: Como su nombre indica, proporciona la posibilidad de

generar encuestas, sobre las que posteriormente se pueden generar informes
gráficos.
 Módulo cuestionario: Posibilitan su calificación automática, y permiten
definir un tiempo máximo para su contestación, si pueden ser resueltos una o
varias veces, etc.
Se trata de un proyecto utilizado a nivel mundial por más de setenta millones de

usuarios, que está cofinanciado por múltiples compañías, denominadas “Moodle Partners”.
Las principales características de esta herramienta son las siguientes:
 Flexibilidad y personalización: Se trata de una plataforma de código abierto,

por lo que es totalmente adaptable a las necesidades específicas de cada
usuario. Permite así mismo crear plugins y/o integrar aplicaciones externas.
 Seguridad y robustez: Moodle garantiza la privacidad y seguridad de los datos
y de los usuarios, a través de controles de seguridad que se van actualizando
periódicamente.
 Movilidad y disponibilidad: Al tratarse de una aplicación basada en web, es
posible acceder a la plataforma desde cualquier sitio. Además, es totalmente
compatible con diversos navegadores web y con dispositivos móviles.
 Interoperabilidad: Al tratarse de una plataforma con licencia gratuita, puede
utilizarse en diferentes plataformas, sistemas operativos y navegadores.
 Escalabilidad: Soporta tanto entornos muy reducidos como grandes
corporaciones.
 Sencillez y facilidad de utilización: Uno de los criterios de diseño de esta
plataforma es que es sencillo de utilizar y muy intuitivo, no siendo necesario
tener unos amplios conocimientos de programación para su utilización, ya
que existen diversas plantillas que se pueden utilizar.
Además de lo indicado anteriormente, en su plataforma online cuenta con números

cursos relacionados con su utilización, así como con múltiples plantillas y demos que
facilitan su uso. También se aporta un apartado de soporte para resolver posibles problemas
23
o dudas acerca de su utilización. Existe una gran variedad de instituciones académicas que
utilizan Moodle como principal plataforma educativa.
Tal y como se indicó anteriormente, la plataforma Moodle se caracteriza entre otras

cosas por su interoperabilidad, pudiendo ser implementada en diversos sistemas operativos.
En parte, esta interoperabilidad se basa en que Moodle en el lado servidor utiliza la
combinación de PHP + MySQL. Además de MySQL, también puede ser utilizado con otras
bases de datos como PostgreeSQL y Oracle, entre otras.
De esta forma, se trata de una plataforma pensada para su implementación en el lado
del servidor. Como cliente, permite su utilización por tanto por los principales navegadores
existentes, tanto en dispositivos móviles como sobremesa.
Además, Moodle también permite la utilización de AJAX y JavaScript, para
desarrollar determinados módulos y funcionalidades, mediante la utilización de la API de
Definición de Módulo Asíncrono (AMD).
3.3 Edmodo [32]
Edmodo es una plataforma educativa cuyo objetivo es crear un entorno de clase

virtual, con el fin de que los alumnos colaboren entre sí vía web, permitiendo así la gestión
del aula y de los grupos de trabajo. Es decir, en otras palabras, podría considerarse como una
red social con fines educativos, en la que pueden participar alumnos, profesores e incluso
padres, de manera totalmente gratuita. Su apariencia habitual se muestra en la Figura 4, y
cuenta con versiones para navegador web y para aplicaciones móviles.
24
Figura 9 Apariencia habitual Edmodo
Fuente: www.edmodo.com
Basada en el microblogging, Edmodo permite la comunicación fluida entre profesor

y alumno y entre los propios alumnos (o incluso padres). Desde el punto de vista del docente,
permite compartir mensajes, archivos, gestionar calificaciones, lanzar encuestas,
calendarios, proponer actividades o tareas, involucrar a los padres en el seguimiento
académico, etc. Incluso, existe la posibilidad de otorgar insignias (algo muy útil para
entornos gamificados) o de ampliar su funcionalidad mediante la instalación de aplicaciones
de terceros.
Así mismo, el funcionamiento de la plataforma es muy simple e intuitivo.
Únicamente es necesario que el profesor se registre para acceder a su funcionalidad.
Posteriormente, podrá crear grupos o aulas virtuales, decidiendo qué alumnos, profesores o
padres pertenecen a cada uno de los grupos y con qué nivel de permisos. De esta forma, cada
profesor puede gestionar todas sus aulas virtuales y, al mismo tiempo, cada alumno puede
visualizar todas las que tiene asignadas desde su perfil. Desde su punto de vista, cada una de
estas aulas funciona de manera totalmente independiente.
En base a lo anterior, las posibilidades educativas que ofrece son muchas y muy
variadas: flexibilidad, aprendizaje colaborativo o en grupo, desarrollo de habilidades
interpersonales, etc. Al fin y al cabo, se fomenta el trabajo en equipo, la creatividad y que
cada alumno tenga el control de su propio aprendizaje.
25
Edmodo (en concreto, su versión web) es una plataforma basada en la utilización de

HTML, CSS y JavaScript. Así mismo, cuenta con una base de datos de un tamaño muy
importante, alojada en Amazon Web Services, que está basada en MySQL.
Así mismo, para realizar el microblogging (paso de mensajes cortos entre los
integrantes de los grupos), se utiliza típicamente Java, de manera similar a la utilizada en
otras herramientas de microblogging, como Twitter.
3.4 Canvas LMS [33]
Canvas es un sistema de gestión de aprendizaje de código abierto, lo que lo hace

totalmente flexible y personalizable. Fue creado en 2011 por la empresa Instructure, con el
objetivo principal de facilitar el aprendizaje, mediante el uso de diversas herramientas
digitales para intercambio de contenidos, pero de una forma sencilla, fácil de utilizar y
rápida. Debido a esta casuística principalmente, su extensión e implantación en diversas
instituciones educativas a nivel mundial ha sido muy rápida, y se encuentra en continuo
crecimiento. Además, se distingue de otras plataformas similares porque no es necesario
instalar servidor, está todo en la nube.
Según los creadores de Canvas, la plataforma se caracteriza principalmente por su
facilidad de utilización, la personalización, la seguridad y confiabilidad, y la posibilidad de
acceder desde múltiples dispositivos web o móviles. En esta línea, tiene compatibilidad total
con los principales navegadores existentes en el mercado.
Entre sus funcionalidades destacan las siguientes: posibilidad de realizar módulos
para agrupar contenidos, tareas, archivos, etc., publicar calendario de actividades, realizar
conferencias, fomentar conversaciones y discusiones entre participantes, realizar
seguimiento de las calificaciones obtenidas por los alumnos, etc.
Esta plataforma permite, además, utilizar aplicaciones externas mediante el uso de
LTI. Se trata de un entorno de trabajo a través del cual es seguro compartir información entre
el usuario y un tercero, previa verificación de la identidad de ambos.
El portal web de CanvasLMS está desarrollado, en el lado cliente, mayoritariamente
utilizando HTML+CSS+JavaScript, además de jQuery. Así mismo, cuenta con una potente
API para fomentar su desarrollo e implementación. Esta API está desarrollada utilizando
HTML+CSS+JSON.
26
3.5 EducaMadrid [34]
EducaMadrid es un portal creado por la Consejería de Educación de la Comunidad

de Madrid, con el objetivo de ofrecer a centros educativos, profesores, alumnos e incluso
familias un gran número de servicios de toda índole, todos ellos con carácter gratuito. Entre
los principales servicios y posibilidades que ofrece se encuentran los siguientes:
 Biblioteca multimedia compuesta por un gran número de recursos educativos

en formato video, audio, imagen, etc.
 Programas de formación online.
 Servicios de mensajería y correo electrónico.
 Soporte para la creación de páginas web y comunidades virtuales.
 Soporte para la creación de aulas virtuales para los centros educativos.
 Servicio de almacenamiento y compartición de archivos en la nube.
 Espacios web con carácter educativo y/o de gestión.
 Distribución Linux (MAX) con muchos programas y recursos educativos ya
instalados.
Figura 10 Portal EducaMadrid
Fuente: www.educa2.madrid.org
Se trata no sólo de una plataforma educativa como tal, sino que vas más allá. Es un
portal que ofrece el acceso y/o la implementación de múltiples plataformas posibles, con lo
que ofrece un gran número de materiales y posibilidades para toda la comunidad educativa.
27
Además, se caracteriza por ser un portal que utiliza software libre de código abierto, que
fomenta la colaboración entre usuarios, independiente y seguro.
Es importante tener en cuenta que existen portales similares en otras Comunidades
Autónomas, que cuentan con similares funcionalidades y posibilidades, como por ejemplo
EducaEx.
La gran mayoría de estos portales se han desarrollado mediante la combinación de
los lenguajes HTML, CSS y JavaScript, a los que hay que añadir JQuery. En el lado del
servidor, se utiliza PHP junto a MySQL, fundamentalmente para el registro de los usuarios
frente a los directorios activos.
3.6 Code Combat
Code Combat es un juego educativo completamente online, de código abierto, que

fue creado con el fin de fomentar el aprendizaje de la programación por parte de alumnos de
una forma divertida, especialmente orientado a estudiantes que apenas cuentan con nociones
en este ámbito o que quieren desarrollar sus conocimientos. Por tanto, por lo que es muy
recomendable para su uso escolar, en secundaria o para grupos de estudiantes que han tenido
un contacto nulo o reducido con programación. Desde el inicio del juego el alumno comienza
a escribir código y a utilizar los conceptos principales de programación, por lo que el método
de aprendizaje que sigue es eminentemente práctico [35]. Así mismo, existe la posibilidad
de aprender varios lenguajes de programación: Python, JavaScript o CoffeeScript.
28
Figura 11 Code combat ejemplo de uso
Fuente: codecombat.com
Tal y como se afirma en su portal web oficial [35], está “Diseñado pensando en los
profesores”. Esta afirmación está fundamentada sobre la base del apoyo que se preseta a los
profesores para de ser necesario ayudarles, también a ellos, a incrementar su nivel de
conocimientos. Además, el juego se encuentra disponible en varios idiomas, lo que hace más
sencilla su utilización.
Se trata de un proyecto que parte de la idea de enseñar mediante juegos, para hacer
atractivo algo que puede resultar muy tedioso y complicado, como es aprender a programar.
El juego, además, combina el aprendizaje de la programación con la adquisición de logros e
insignias, resolución de problemas lógicos, etc., lo que sin duda lo hace más llamativo e
interesante para los alumnos.
En cuanto a su implementación, el juego está desarrollado en HTML5 y un lenguaje
denominado CoffeScript, cuya regla es “Es solo JavaScript” [36]. Es un lenguaje que
programación que, evidentemente, está basado en JavaScript, e incluso se compila sobre el
mismo, aunque tiene algunos cambios puntuales en cuanto a sintaxis. Así mismo, en
CodeCombat se utiliza también CSS y jQuery. [35]
3.1 The Flipped Classroom
29
The Flipped Classroom es una plataforma similar a Gamifica tu aula, en cuanto al

objetivo se refiere, pero centrándose en este caso en la metodología Flipped Classroom. Es
decir, se trata de un proyecto totalmente abierto y en continuo crecimiento, adaptado a todos
los niveles educativos, que ofrece experiencias, herramientas y recursos para fomentar y
facilitar la adopción e implantación de este método educativo por parte de los profesores
[37].
Además, en el caso de The Flipped Classroom se ofrece determinado contenido de
pago, como pueden ser las certificaciones en “Flipped Learning”, que se pueden obtener
mediante la realización de un curso y el pago de unas tasas de examen. Sin embargo, en esta
plataforma se ofrecen una serie de experiencias reales de profesores que han implantado este
sistema en clase, así como determinados recursos que se pueden utilizar para su aplicación,
como plantillas, vídeos, etc., de carácter totalmente gratuito. Cuenta así mismo con un Blog,
en el que se van detallando noticias, artículos, eventos y prácticas relacionadas con flipped
classroom.
La página web principal de esta plataforma está desarrollada en HTML5 + CSS +
JavaScript, y como resultado se obtiene una página moderna, flexible y con amplio contenido
para interactuar, como formularios, vídeos, infografías, o incluso avisos de Twitter. Sin
embargo, en el caso del servidor, no se ha podido determinar qué lenguaje utiliza para
gestionar las peticiones que recibe en cuanto a, por ejemplo, peticiones de información o de
inscripción al newsletter de la plataforma. Es presumible sin embargo que se haya
implementado con PHP + MySQL, o bien en alguna otra combinación de lenguaje del
servidor con acceso a bases de datos.
3.2 Gamifica tu aula
Se trata de un portal web creado por un grupo de profesores, de manera totalmente

autónoma, cuyo objetivo principal es el de impulsar la gamificación en el aula, para lo que
aportan en su portal diversas experiencias reales, así como herramientas y recursos para
facilitar esta labor a los profesores que quieran comenzar a gamificar sus aulas. Cuentan con
dos portales web distintos (uno implementado en la plataforma Wix [38] y otro
implementado en Google Sites [39]), así como canales en Twitter y Youtube. Se caracteriza
por tratarse de una comunidad abierta y participativa, por lo que se encuentra en crecimiento
constante.
30
Entre los principales recursos que ofrece se incluyen artículos, plantillas para juegos,
estudios o libros sobre cómo aplicar la gamificación en el aula, junto a diversas experiencias
reales. Es importante tener en cuenta que existe material aplicable a todos los niveles
educativos: primaria, secundaria y Universidad. Así mismo, incluye enlaces a otros
videojuegos online, también desarrollados en Wix.
Figura 12Portal web Gamifica tu aula
Fuente: http://gamificatuaula.wixsite.com/ahora
Como cabría esperar, hay muchas experiencias de gamificación relacionadas con el

uso de las nuevas tecnologías en clase, combinado con la utilización de técnicas educativas
como flipped classroom, aprendizaje basado en proyectos, trabajo cooperativo, emociones
al servicio del aprendizaje, etc.
En cuanto a la arquitectura web, la plataforma Wix [40] se basa en la sencillez y
facilidad para la construcción de sitios web, mediante la utilización de plantillas y
herramientas intuitivas de arrastrar y soltar, para añadir formularios, botones, etc. Como es
evidente, está especialmente pensada para construir sitios web de una manera rápida y
sencilla. Actualmente, la plataforma trabaja mayoritariamente en HTML5 + CSS, aunque
existen sitios web construidos en Flash, que era la tecnología utilizada mayoritariamente.
En el caso del portal de Gamifica tu aula, para su construcción evidentemente se
utiliza HTML5 + CSS , combinación a la que se ha añadido JavaScript para aportar
funcionalidad a los botones y formularios.
3.3 AppInventor
31
AppInventor es un entorno de programación web totalmente gratuito creado por el

MIT (Massachusets Institute of Technology) que se utiliza con el fin de crear aplicaciones
para dispositivos móviles Android de una manera sencilla y muy visual, mediante
programación por bloques. Debido a ello, es muy recomendable para comenzar a programar,
por lo que es muy utilizada en el entorno educativo [41].
La aplicación se divide en dos partes perfectamente diferenciadas. La primera parte
o de diseño permite representar la estructura y apariencia que tendrá la aplicación. En la
parte izquierda se muestran todos los elementos que se pueden añadir: botones, listas, etc. y
en la parte derecha de la pantalla se muestra la apariencia que tendrán estos elementos, tal y
como se muestra en la siguiente figura:
Figura 13 Detalle de la pantalla de diseño de AppInventor
Por otro lado, la aplicación presenta una segunda parte, denominada bloques. En la
misma es en la que se programa la funcionalidad que tendrán los elementos añadidos en la
parte de diseño. Como se comentó anteriormente, esta programación se hace de una manera
muy visual a través de programación por bloques. La manera de realizar la programación es
muy intuitiva: seleccionamos en el listado de la izquierda el elemento para el que queremos
programar la funcionalidad, y en la parte de la derecha añadimos los bloques necesarios
según dicha funcionalidad: condicionales, bucles, cadenas de texto, números, etc. En la
siguiente imagen se muestra un detalle de esta pantalla:
32
Figura 14 Detalle del entorno de bloques
Una vez finalizado el programa, la plataforma web permite compilarlo y cargarlo en

un dispositivo móvil. La carga se puede realizar a través de WiFi o bien mediante la lectura
de un código QR.
A la plataforma web para crear aplicaciones se accede a través de un portal web [41],
en el que se ofrecen diversos recursos de apoyo a profesores, tutoriales para alumnos, foros
de discusión, etc. Este portal está creado utilizando HTML + CSS + JavaScript.
En cuanto a la plataforma web en la que se crean los programas ha sido desarrollada
en Java, utilizando Google Web Toolkit (GWT) [42] en combinación con el Google App
Engine (GAE). GAE es una plataforma computacional que se utiliza para desarrollar
programar escritos en Java (como es el caso) o Python, que se alojan en servidores Google.
Por su parte, GWT permite desarrollar aplicaciones en Java cliente-servidor de una manera
más sencilla, encargándose posteriormente de convertir el código a JavaScript para su
representación en el navegador web.
33
4. Conclusiones
Sin duda, el mundo de la Educación está cambiando sustancialmente, debido en gran

medida a la aparición y desarrollo de nuevas tecnologías, lo que a su vez conlleva nuevos
métodos y nuevas formas de enseñar. Dentro del amplio mundo de las herramientas
educativas, las aplicaciones web representan una parte pequeña, pero que con el paso del
tiempo está cobrando una mayor relevancia.
Como se indicó en el primer capítulo, uno de los objetivos de este Trabajo Fin de
Máster es servir de guía a estudiantes y profesores que deseen tener una perspectiva más
amplia de los lenguajes de programación más utilizados en el entorno web. Este objetivo se
aborda en la Parte I: Marco Teórico, en el que se describen y analizan los más utilizados
actualmente, profundizando en las principales características de cada uno, e indicando sus
principales escenarios de aplicación. El fin de esta parte es aportar una valiosa información
inicial sobre estos lenguajes, que pueda emplearse, tanto por estudiantes como por
profesores, para tener una base de conocimientos amplia sobre el tema. Además, en esta
misma línea también se incluye una perspectiva sustancial acerca de las combinaciones de
lenguajes de programación web más típicas, que son utilizadas habitualmente para crear
entornos educativos con contenido dinámico.
Así mismo, otro de los objetivos planteados al inicio de este trabajo era el de analizar
diversas aplicaciones web educativas, con el fin de que puedan ser utilizadas por profesores
en el aula. Además, se buscaba aportar ideas y ampliar conocimientos a aquellos estudiantes
que deseen dedicarse al desarrollo de aplicaciones web educativas. Estos objetivos se
alcanzan en la Parte II: Aplicación en Educación, en la que se analizan varias aplicaciones y
plataformas web especialmente diseñadas para ser aplicadas en el entorno educativo. Se debe
considerar que la selección de estas aplicaciones se ha realizado teniendo en cuenta los
diferentes propósitos para las que se crearon: plataformas de intercambio de información,
videojuegos educativos, plataformas para aprender de manera divertida, etc. Por tanto, es
importante considerar que la cantidad de plataformas y aplicaciones educativas existentes
actualmente en el entorno web es muy amplia, aunque las aplicaciones presentadas en este
trabajo pueden considerarse representativas, en relación a los diferentes usos que se pueden
prestar.
34
Por otro lado, durante la realización de este Trabajo Fin de Máster, me ha sido posible
comprobar y entender diversos puntos relacionados con lo indicado anteriormente. En
primer lugar, es muy destacable la gran variedad y diversidad de lenguajes de programación
web que existe, además de los múltiples propósitos para los que pueden ser utilizados cada
uno de ellos. Sin embargo, es bien cierto que cada uno de ellos suele tener una utilización
específica, siendo la más habitual la combinación de HTML + CSS + JavaScript en el lado
del cliente. Sin ir más lejos, se trata (según el w3) de los tres lenguajes de programación
básicos que todo desarrollador web debería conocer.
Personalmente, opino que las posibilidades en cuanto a las aplicaciones educativas
del entorno web son cuantiosas y muy a considerar. Al fin y al cabo, el límite en este campo
está en la propia imaginación del educador, ya que mediante el uso de cualquiera de los
lenguajes web estudiados (e incluso de otros que no se han podido considerar) se puede
implementar cualquier proyecto educativo que se nos ocurra. Sin embargo, según se ha
podido mostrar en este Trabajo Fin de Máster, no hace falta tener grandes conocimientos
informáticos para poder acceder a todo un mundo de posibilidades, en cuanto a herramientas
educativas se refiere.
Líneas futuras de trabajo
Como líneas futuras de trabajo, se propone estudiar diversas aplicaciones web

educativas según su fin y funcionalidad. Debido al gran número de posibilidades existentes,
se propone distinguir entre plataformas de comunicación e integración en la comunidad
educativa, plataformas para aprender a programar, aplicaciones web para enseñar
Matemáticas u otras materias, etc. Dada la cantidad de recursos existentes, se podría plantear
incluso la realización de trabajos únicos por cada área, que podrían servir a cada profesor
para ampliar conocimientos sobre su área específica.
35
5. Bibliografía
M. Á. (Coordinador), Educar en la sociedad de la información, Bilbao: DESCLEE

[1]
DE BROUWER, 2001.
W. Stallings, Comunicaciones y redes de computadores, Madrid: Pearson, 2015.

[2]
E. C. Tinoco y I. S. Solís, Programación Web con CSS, JavaScript, PHP y AJAX,
[3]
Universidad Nacional José María Arguedas, 2014.
W3, «w3schools.com - HTML,» 2018. [En línea]. Available:

[4]
https://www.w3schools.com/html/default.asp.
M. R. Gómez, HTML, CSS y JavaScript, Madrid: Anaya, 2017.

[5]
M. David, HTML 5: designing rich internet applications, Focal, 2013.
[6]
V. autores, «Manual PHP,» MyPHP.net, 2018. [En línea]. Available:
[7]
http://us3.php.net/manual/en/index.php.
S. Holzner, PHP: Manual de Referencia, McGraw Hill, 2009.

[8]
PHP.NET, «Página oficial PHP,» 2018. [En línea]. Available: www.php.net.
[9]
Varios, «PHP. The Right Way.,» 2017. [En línea]. Available:
[10]
http://www.phptherightway.com/.
W3, «W3 Schools - JavaScript,» 2018. [En línea]. Available:

[11]
https://www.w3schools.com/js/.
T. Powell, JavaScript: manual de referencia, McGraw-Hill, 2022.

[12]
T. j. Foundation, «jquery.com,» 2018. [En línea]. Available: https://jquery.com/.
[13]
MIT, «Angular JS,» 2010-2018. [En línea]. Available: https://angularjs.org/.
[14]
36
Polymer Authors, «Polymer Project,» 2018. [En línea]. Available:

[15]
https://www.polymer-project.org/.
B. D. F. T. P. Randal L. Schwartz, Learning Perl, McGraw-Hill, 2016.

[16]
T. P. Foundation, «Perl.org,» 2018. [En línea]. Available: https://www.perl.org/.
[17]
PythonSoftwareFoundation, «Python,» 2018. [En línea]. Available:
[18]
https://www.python.org/.
PythonSoftwareFoundation, «General Python FAQ,» 2018. [En línea]. Available:

[19]
https://docs.python.org/3/faq/general.html#why-was-python-created-in-the-first-place.
DjangoSoftwareFoundation, «Django Project,» 2018. [En línea]. Available:

[20]
https://www.djangoproject.com/.
PythonSoftwareFoundation, «Jython: Python for the Java Platform,» 2018. [En

[21]
línea]. Available: http://www.jython.org/index.html.
Oracle, «JAVA Platform API Specification,» 2018. [En línea]. Available:

[22]
https://docs.oracle.com/javase/7/docs/api/.
H. Schildt, Java - Manual de referencia, Madrid: McGraw-Hill, 2009.

[23]
Oracle, «JAVA,» 2018. [En línea]. Available:
[24]
https://www.java.com/es/download/faq/whatis_java.xml.
W3, «AJAX Introduction,» 2018. [En línea]. Available:

[25]
https://www.w3schools.com/js/js_ajax_intro.asp.
Universidad de Deusto, «¿Qué es y para qué sirve Ajax?,» 2017. [En línea].
[26]
Available: https://www.deustoformacion.com/blog/programacion-diseno-web/que-es-
para-que-sirve-ajax.
Microsoft, «Microsoft .NET,» 2018. [En línea]. Available:

[27]
https://www.microsoft.com/net/.
37
Adobe, «Flash Player,» 2018. [En línea]. Available:

[28]
https://www.adobe.com/es/products/flashplayer.html?origref=https%3A%2F%2Fww
w.google.es%2F.
M. Fernández, «Educación virtual, nuevo modelo de aprendizaje,» Revista

[29]
Educación Virtual, vol. https://revistaeducacionvirtual.com/archives/3055.
U.S. Department of Education, «Evaluation of Evidence-Based Practices in Online

[30]
Learning,» U.S. Department of Education, 2010.
M. Project, «Moodle,» 2018. [En línea]. Available: https://moodle.org/?lang=es.

[31]
E. Project, «Edmodo,» 2018. [En línea]. Available:
[32]
https://www.edmodo.com/?language=es.
Canvas Corporation, «Canvas LMS,» 2018. [En línea]. Available:

[33]
https://www.canvaslms.com/.
Consejería de Educación, «Educa Madrid,» 2018. [En línea]. Available:

[34]
https://www.educa2.madrid.org/educamadrid/.
C. Inc., «CodeCombat,» 2018. [En línea]. Available: https://codecombat.com/.

[35]
C. Script, «CoffeScript,» 2018. [En línea]. Available: https://coffeescript.org/.
[36]
Varios, «The flipped classroom,» 2018. [En línea]. Available:
[37]
https://www.theflippedclassroom.es.
Varios, «Gamifica tu aula,» 2018. [En línea]. Available:

[38]
http://gamificatuaula.wixsite.com/ahora.
Varios, «Gamifica tu aula,» [En línea]. Available:

[39]
https://sites.google.com/site/gamificatuaula/.
Wix, «Wix.com,» 2018. [En línea]. Available: https://es.wix.com/.

[40]
38
MIT, «AppInventor,» 2012-2017. [En línea]. Available:

[41]
http://appinventor.mit.edu/explore/index-2.html.
MIT, «App Inventor Developer Overview,» 2018. [En línea]. Available:

[42]
http://appinventor.mit.edu/appinventor-sources/#documentation.
39

TFM Agus v7 Revisado

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

TFM Agus v7 Revisado

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD REY JUAN CARLOS

TRABAJO FIN DE MÁSTER

ESTUDIO SOBRE DIFERENTES LENGUAJES PARA LA WEB, Y SOBRE SU

MÁSTER UNIVERSITARIO EN FORMACIÓN DEL PROFESORADO DE EDUCACIÓN

Apellidos y Nombre del Alumno/a

3. Parte II: Aplicación en Educación ......................................................................... 21

Cada vez es más habitual en el entorno educativo la inclusión de las nuevas

En los últimos años, la evolución de las Tecnologías de la Información (TIC) ha

Sin embargo, antes de entrar en materia, es importante conocer el funcionamiento de

Bases de datos, ...

Figura 1: Diagrama representativo de la conexión web

Fuente: elaboración propia

En el momento en que un usuario o cliente teclea un nombre de página web en el

página (Petición HTTP). Si la conexión ha sido exitosa, el servidor web responderá al

 Lenguajes del lado del servidor: Se trata de lenguajes de programación

 Lenguajes de representación: Su función es la de implementar la apariencia

2. Parte I: Marco Teórico

2.1 Análisis de lenguajes web

HTML (HyperText Markup Language) es un lenguaje de etiquetas (cuya primera

 <head> … </head>: Representa el inicio y el final del encabezado de la

 <form> … </form>: Se utiliza para marcar el comienzo y final de un

HTML5 es la última evolución de este lenguaje, y durante los últimos años se ha

 Etiqueta <section>: Se utiliza principalmente para estructurar

Figura 2 Ejemplo de código HTML

Fuente: elaboración propia

Hypertext Preprocessor (PHP) es un lenguaje de programación de código abierto, que

Figura 3 Ejemplo de código PHP incrustado en HTML

Fuente: elaboración propia

Entre sus ventajas se puede destacar su simplicidad y sencillez, potenciando así su

Según se indica en el w3school “JavaScript es uno de los 3 lenguajes que cualquier

Figura 4 Ejemplo de JavaScript en HTML y resultado en navegador

2.1.3.1. Aprender JavaScript [3]

Para hacer más sencillo el aprendizaje de JavaScript, es importante conocer y manejar

 jQuery [13]: Sencilla de utilizar y muy potente. Permite programar

Perl (“Practical Extraction and Report Language”) es un lenguaje de programación

sistemas y redes Unix. Se basa en programación estructurada en bloques (similar a C) aunque

 Es confiable y robusto, pudiendo ser utilizado para proyectos críticos.

La última versión de Perl puede conseguirse en su página web: www.perl.org.

Python es un lenguaje de programación del lado servidor, multiplataforma

Figura 5 Ejemplo de serie de Fibonacci en Python

fácilmente escalable, flexible y versátil, que ha contribuido de una manera determinante a la

2.1.5.1. Jython [21]

Se trata de un lenguaje de programación orientado a objetos que está basado en

JAVA es un lenguaje de programación compilado, multiplataforma y orientado a

2.2 Combinaciones de lenguajes más utilizadas

2.2.1. HTML +CSS + JS

Se trata de una de las combinaciones de lenguajes de programación más extendidas,

2.2.2. PHP + HTML + MySQL

Como se indicó anteriormente, PHP es un lenguaje de programación del lado servidor

2.3 Otros lenguajes o tecnologías

AJAX [25] (“Asynchronous JavaScript And XML”) no es un lenguaje de

• Encamina la petición hacia el

Internet • Encamina la respuesta al cliente

• Procesa la respuesta utilizando

Figura 6¿Cómo funciona AJAX?

Fuente: elaboración propia

XHTML CSS XML JSON

Figura 7 Tecnologías AJAX

Fuente: elaboración propia

2.3.2. Microsoft .NET

En sí, .NET es una plataforma o framework (componente software) gratuito que

3. Parte II: Aplicación en Educación

3.1 Educación virtual. Uso de las TIC en Educación.