Desarrollo de WebApps en HTML5, CSS y Javascript para Firefox OS

CertificadoFirefoxOS-MiriadaXTras dos o tres años de consultar regularmente las páginas más conocidas de MOOCs, como EdX, Coursera, MiriadaX, Udemy, etc… y haberme apuntado a unos cuantos de ellos que me parecieron super interesantes, hace poco menos de un mes por fin pude empezar, y hace unos días acabar :-), uno de ellos, ” Desarrollo en HTML5, CSS y Javascript de WebApps, incluyendo móviles FirefoxOS* (2a edición)“, en MiriadaX, y es que en algún sitio leí que son muchos los usuarios que se apuntan a un MOOC porque la temática les parece interesante, muchos menos los que lo empiezan y menos todavía los que lo acaban, y eso mismo me pasaba a mí.

No obstante, en esta ocasión se han juntado varias cosas que me han permitido comenzar y acabar el curso. Antes que nada el tiempo, como suele ser habitual el único tiempo libre del que dispongo es un par de horas algunas noches así que aprovechando que tenía un par de meses sin impartir ninguna asignatura en IEBS y la preparación de TEDxAlcarriaSt la llevo bastante bien, aunque no haya comunicado muchas cosas todavía :-), decidí que podía embarcarme en algo nuevo. Por otro lado la temática, definitivamente quería conocer con más detalle HTML5, CSS y Javascript, ya que muchas cosas en las que me interesa profundizar un poco más, como WebRTC, Web Services, Google Apps, etc…, pasan por conocerlos con más profundidad, aunque siempre quedándome a un nivel muy de principiante. Finalmente, la tercera razón para elegir este MOOC fue su orientación a FirefoxOS, proyecto de la fundación Mozilla que sigo con gran interés. Así que con estos antecedentes me puse manos a la obra con el objetivo de, como siempre, Aprender, Compartir y Crecer.

Como dicen que poner por escrito las cosas ayuda al aprendizaje y a estructurar las ideas, quería en este post compartir las que cosas que he aprendido en este MOCC, trataré de resumirlas a continuación:

  • En primer lugar, y aunque no tiene nada que ver con la programación, he aprendido que Google Drive, aparte de ser un “disco duro en la nube”, se puede convertir en una herramienta muy interesante para “publicar” tus trabajos.
  • La importancia de CSS y una buena hoja de estilos, y es que aunque la información sea la misma, el presentarla de una forma una otra hace mucho, sé que no descubro nada nuevo con esto pero experimentarlo en primera persona es muy distinto de sólo saberlo. Dentro de CSS ha sido todo un descubrimiento la división del código HTML en bloques div y los atributos id y class, tanto para poder utilizar los selectores CSS correspondientes como para poder mostrar lo que queramos en la página utilizando código Javascript accediendo al DOM a través de getElementbyID. Por otro lado, la hoja de estilos tiene una importancia capital cuando queremos hacer páginas web que se visualicen correctamente en cualquier tipo de dispositivo, característica más conocida como diseño adaptable o responsive, y que se hace utilizando distintos ficheros CSS seleccionables a través del atributo media de la etiqueta <link>.
  • La gran sorpresa me la he llevado con Javascript, cuando yo estudiaba programación en la Universidad recuerdo que la forma de definir los tipos de datos, la definición de objetos, funciones, etc… era mucho más estricto, parece que Javascript se lo traga todo, las variables se definen sin tipo, los objetos se definen como colecciones de variables nombre:valor llamados propiedades y además pueden crearse o destruirse dinámicamente, las funciones se pueden invocar con un número variable de parámetros, etc… esto de Javascript es un totum revolutum!! :-).
  • Interactividad gracias a manejadores y eventos: eventos periódicos (setinterval), eventos DOM que se asocian a elementos HTML como atributos (‘onclick’, ‘ondblclick’, etc…) y cuyo manejador es el propio valor asignado al atributo o eventos definidos directamente a través de código en Javascript. Otra forma de conseguir interactividad con el usuario es gracias a los botones y formularios, cuyos valores podemos recoger por ejemplo a través de la sentencia getElementbyID para poder ejecutar alguna acción sobre ellos.
  • La famosa librería jQuery, junto con zepto, un subconjunto de jQuery que añade el soporte para eventos táctiles en móviles y tabletas. Me ha sorprendido saber que jQuery no añade ninguna funcionalidad extra a Javascript (al menos por lo que he podido ver) sino que ofrece una sintaxis más sencilla a la hora de acceder al DOM y por lo tanto más comodidad y claridad a la hora de introducir código (quien iba a decir que gran parte de los $ que se ven por ahí se refieren a esto!. Junto a jQuery y zepto he aprendido que utilizar una librería en Javascript es tan sencillo como cargar un script externo con la etiqueta <script>.
  • Aunque no he tenido suficiente tiempo como para experimentar mucho con ellos, también he visto otros conceptos como JSON (Javascript Object Notation), una forma de representar los objetos de Javascript en formato texto, SVC (Scalable Vector Graphics), formato de representación de gráficos vectoriales que pueden cambiar de tamaño sin perder calidad, CANVAS, que define un mapa de bits en una zona de la página delimitada a través de la etiqueta <canvas> y sobre la que poder “pintar”, las etiquetas de audio y video, y por último los iframes, que establecen un marco de navegación independiente en nuestro navegador donde poder importar objetos externos de forma segura y que es el que facilita la tarea de realizar mash-ups seguros.
  • Por último, hemos visto los tipos de WebApps en Firefox OS (hosted y packaged), como publicarlas en las tiendas de Firefox OS y cómo instalarlas, así como las herramientas específicas de desarrollo que aparecen integradas en el navegador Firefox, como son la consola de Javascript, el inspector de HTML, visor 3D, visor de diseño adaptativo, consola Web, etc..

Creo que no me dejo nada, sólo me queda felicitar a los organizadores del curso ya que por lo menos a nivel personal tengo que decir ha cumplido con mis expectativas y tanto el contenido como el tiempo dejado a las actividades ha sido el adecuado.

Para finalizar, os dejo con un par de ejercicios que tuve que entregar para aprobar el curso. El primero de ellos consiste en un cronómetro táctil, si pinchamos sobre él se inicia o para la cuenta mientras que si desplazamos el dedo la reiniciamos. Los valores de parada se muestran en la parte baja y se almacenan en local en el navegador para que cuando reiniciemos la página recuerde el último valor. El segundo ejemplo muestra un mash-up de geolocalización que primero te geoposiciona en un mapa y luego calcula la ruta desde ese punto hasta el lugar donde pinchas, finalmente mediante un botón de compactar calcula la ruta desde la primera posición hasta la última. Podéis ejecutar ambas WebApps pinchando sobre la imagen de más abajo, que son una captura de las apps corriendo en mi móvil, espero que os gusten.

foto_cronometrofoto_WebappGeoposicionamiento

 

 

 

 

 

 

 

 

 

 

En definitiva, un curso muy interesante que me ha servido para iniciarme en algunas de las tecnologías Web más utilizadas.

Anuncios

2 pensamientos en “Desarrollo de WebApps en HTML5, CSS y Javascript para Firefox OS

    • Hola Thais, no, yo no pedí el certificado de superación porque no lo necesitaba para nada concreto, creo que lo que hice (fue hace tiempo 🙂 fue subir una captura de pantalla de un certificado de participación que supongo se lo daban a todos los participantes y que simplemente me ayudaba a encabezar el post.
      Un saludo,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s