En Mejorando.la lanzamos el Curso de diseño y desarrollo web online junto a Cristalab y Maestros del Web. Enseñaremos HTML5, CSS3, Javascript, jQuery, Node.js y Django con Python. El curso tendrá sesiones en vivo, videos en archivo, material interactivo, un sistema de discusión compartido entre maestros y estudiantes y mucho mucho más.
Quiero hablar del "mucho más" y contarles cómo logramos crear la mejor plataforma de educación online, qué tecnologías usamos y qué planeamos hacer con ella a futuro.
Llevamos cuatro años en Mejorando.la pensando en dar clases online. Los problemas técnicos aun eran muchos por solucionar ¿Cómo transmitir video? ¿Cómo compartir archivos, código, keynotes? ¿Examenes? ¿Cómo nos comunicamos? Estos fueron nuestros prototipos iniciales:
Con nombre clave "Hanarah" la idea era simplemente clases en vivo. Teniamos video en vivo, un chat y un sistema de preguntas en tiempo real con votos por cada pregunta, votos por respuesta, discusiones anidadas y preguntas organizadas por relevancia.
¿Cómo hariamos la parte del video en vivo para los profesores? Para éstas epocas el streaming era joven y sólo conociamos ustream a fondo.
Pensamos en múltiples sistemas. Tricaster para nuestro centro principal. Sistemas P2P de distribución de video, etc. En el camino encontramos a Mediastream, la mejor empresa de streaming con la que hemos trabajado y con ellos, mientras haciamos Mejorando.la Web (el programa semanal de los jueves) empezamos a implementar experimentos de cursos online.
Con ellos logramos streaming Flash y HTML5 para iPhone, iPad y Androids usando Wowza Server y el Mediastream StreamManager, un desarrollo de ellos.
Empezamos a contratar un equipo completo y detallar más capacidades. Multiples discusiones, más charlas en aviones y más prototipos de cómo sería el futuro. Este por ejemplo es el "mockup" del sistema de examenes y certificación:
Decidimos caracteristicas y con un equipo genial en México, Perú, Washington y Colombia. Era hora de ejecutar.
Al entrar a un curso, lo primero que ves, es el timeline del curso con los items de estudio y el sistema de discusión.
Pueden ser videos, lecturas (código, texto, imagenes), sesiones en vivo, archivos compartidos que se pueden ver dentro del navegador, lecturas externas y examenes de certificación.
Los estudiantes pueden ver qué items son los más populares y el sistema organiza los items en orden de importancia de cada estudiante. Cuando ves un item, este se pone gris y se va abajo. Los profesores configuran prioridades y los estudiantes siguen el curso al ritmo que quieran.
Al enviar preguntas, estudiantes y maestros pueden votar por la mejor (o la peor en negativo). Las respuestas también tienen votación y los puntos te dan ranking dentro del curso. Construimos un editor de respuestas que permite insertar código, enlaces e imagenes sin necesidad de usar ningún lenguaje. Ni Markdown, ni HTML, ni BBCode, ni nada. Sólo visual y hermoso.
Dentro de las clases en vivo el sistema de discusión sigue activo, hay un chat para comunicarse en directo con toda la clase que está viendo el curso y tenemos un sistema para compartir archivos. Si un profesor sube un archivo de código, el código puede verse dentro del sistema, sin salir de la interfaz, coloreado y lindo
Si se sube un PSD, un .AI, un JPG o cualquier imagen, también mostrará un preview. Un texto se ve dentro de la plataforma tal cual. O si quieres descargar todos los archivos, lo puede hacer con un click.
En el instante que el profesor sube el archivo, todos los estudiantes reciben la notificación y pueden abrirlo, en tiempo real.
Al final del curso hay un examen de certificación creado por los maestros. El examen puede retomarse cada 24 horas en caso de fallar y al final te muestra en qué preguntas fallaste para que sepas qué estudiar. Si el estudiante logra completar el examen, le llega a su casa, esté donde esté, un diploma de certificación impreso profesional.
Cómo construimos Mejorando.la Plataforma:
En backend elegimos Python y Django por su rapidez de desarrollo y en especial por la espectacular capacidad de Django de crear automáticamente el sistema de administración. Tenemos un admin propio también, pero cuando pasan cosas raras, el admin de Django es amor puro.
El chat, el sistema de discusión y el sistema de archivos requieren reacción en tiempo real. Node.js con Socket.io fue la respuesta.
Las bases de datos como MySQL o PostgreSQL siguen siendo muy efectivas y robustas, pero en cosas que se mueven a máxima velocidad de escritura como el chat o la discusión, estos sistemas empiezan a degradarse y no dan la velocidad que esperabamos. Para sistemas de alta escritura en tiempo real, usamos MongoDB, una base de datos no relacional basada en objetos JSON.
En frontend usamos HTML5 y CSS3 con Responsive Design para adaptar el diseño a cualquier dispositivo. Pero no hacemos simplemente CSS3, usamos Stylus para crear el código CSS final. Muchos efectos interactivos usan jQuery.
Github es nuestro sistema de control de versiones, discusión de errores y track de problemas. Tenemos Mejorando.la como un proyecto open source en Github y un repositorio privado para la plataforma. (Clabie también es open source en Github)
Basecamp es nuestro centro de control del proyecto. Ahí guardamos TODOs, avances, discusiones a futuro e imágenes a maquetar. Dropbox es la forma en la que todos compartimos archivos.
Para transmitir las clases en vivo, usamos CamTwist en Mac y XSplit en Windows, ambos canalizados por Flash Media Live Encoder al Wowza Server de Mediastream que lo convierte a rtmp y a streaming HTML5.
Así construimos la plataforma donde daremos el Curso de diseño y desarrollo web online de Mejorando.la .
¿Tienes más preguntas? Las responderé en los comentarios todas. Comparte esto y trae a todos tus amigos, compañeros y conocidos a nuestro mejor curso online.
via Cristalab http://www.cristalab.com/blog/la-tecnologia-detras-de-los-cursos-online-de-mejorando.la-c108667l/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clab+%28Cristalab%29
Quiero hablar del "mucho más" y contarles cómo logramos crear la mejor plataforma de educación online, qué tecnologías usamos y qué planeamos hacer con ella a futuro.
El humilde inicio: Clases online en vivo
Llevamos cuatro años en Mejorando.la pensando en dar clases online. Los problemas técnicos aun eran muchos por solucionar ¿Cómo transmitir video? ¿Cómo compartir archivos, código, keynotes? ¿Examenes? ¿Cómo nos comunicamos? Estos fueron nuestros prototipos iniciales:
Con nombre clave "Hanarah" la idea era simplemente clases en vivo. Teniamos video en vivo, un chat y un sistema de preguntas en tiempo real con votos por cada pregunta, votos por respuesta, discusiones anidadas y preguntas organizadas por relevancia.
¿Cómo hariamos la parte del video en vivo para los profesores? Para éstas epocas el streaming era joven y sólo conociamos ustream a fondo.
Pensamos en múltiples sistemas. Tricaster para nuestro centro principal. Sistemas P2P de distribución de video, etc. En el camino encontramos a Mediastream, la mejor empresa de streaming con la que hemos trabajado y con ellos, mientras haciamos Mejorando.la Web (el programa semanal de los jueves) empezamos a implementar experimentos de cursos online.
Con ellos logramos streaming Flash y HTML5 para iPhone, iPad y Androids usando Wowza Server y el Mediastream StreamManager, un desarrollo de ellos.
Empezamos a contratar un equipo completo y detallar más capacidades. Multiples discusiones, más charlas en aviones y más prototipos de cómo sería el futuro. Este por ejemplo es el "mockup" del sistema de examenes y certificación:
Decidimos caracteristicas y con un equipo genial en México, Perú, Washington y Colombia. Era hora de ejecutar.
Los super poderes de Mejorando.la Plataforma
Al entrar a un curso, lo primero que ves, es el timeline del curso con los items de estudio y el sistema de discusión.
Pueden ser videos, lecturas (código, texto, imagenes), sesiones en vivo, archivos compartidos que se pueden ver dentro del navegador, lecturas externas y examenes de certificación.
Los estudiantes pueden ver qué items son los más populares y el sistema organiza los items en orden de importancia de cada estudiante. Cuando ves un item, este se pone gris y se va abajo. Los profesores configuran prioridades y los estudiantes siguen el curso al ritmo que quieran.
Al enviar preguntas, estudiantes y maestros pueden votar por la mejor (o la peor en negativo). Las respuestas también tienen votación y los puntos te dan ranking dentro del curso. Construimos un editor de respuestas que permite insertar código, enlaces e imagenes sin necesidad de usar ningún lenguaje. Ni Markdown, ni HTML, ni BBCode, ni nada. Sólo visual y hermoso.
Dentro de las clases en vivo el sistema de discusión sigue activo, hay un chat para comunicarse en directo con toda la clase que está viendo el curso y tenemos un sistema para compartir archivos. Si un profesor sube un archivo de código, el código puede verse dentro del sistema, sin salir de la interfaz, coloreado y lindo
Si se sube un PSD, un .AI, un JPG o cualquier imagen, también mostrará un preview. Un texto se ve dentro de la plataforma tal cual. O si quieres descargar todos los archivos, lo puede hacer con un click.
En el instante que el profesor sube el archivo, todos los estudiantes reciben la notificación y pueden abrirlo, en tiempo real.
Al final del curso hay un examen de certificación creado por los maestros. El examen puede retomarse cada 24 horas en caso de fallar y al final te muestra en qué preguntas fallaste para que sepas qué estudiar. Si el estudiante logra completar el examen, le llega a su casa, esté donde esté, un diploma de certificación impreso profesional.
Lenguajes, servidores y tecnologías
Cómo construimos Mejorando.la Plataforma:
En backend elegimos Python y Django por su rapidez de desarrollo y en especial por la espectacular capacidad de Django de crear automáticamente el sistema de administración. Tenemos un admin propio también, pero cuando pasan cosas raras, el admin de Django es amor puro.
El chat, el sistema de discusión y el sistema de archivos requieren reacción en tiempo real. Node.js con Socket.io fue la respuesta.
Las bases de datos como MySQL o PostgreSQL siguen siendo muy efectivas y robustas, pero en cosas que se mueven a máxima velocidad de escritura como el chat o la discusión, estos sistemas empiezan a degradarse y no dan la velocidad que esperabamos. Para sistemas de alta escritura en tiempo real, usamos MongoDB, una base de datos no relacional basada en objetos JSON.
En frontend usamos HTML5 y CSS3 con Responsive Design para adaptar el diseño a cualquier dispositivo. Pero no hacemos simplemente CSS3, usamos Stylus para crear el código CSS final. Muchos efectos interactivos usan jQuery.
Github es nuestro sistema de control de versiones, discusión de errores y track de problemas. Tenemos Mejorando.la como un proyecto open source en Github y un repositorio privado para la plataforma. (Clabie también es open source en Github)
Basecamp es nuestro centro de control del proyecto. Ahí guardamos TODOs, avances, discusiones a futuro e imágenes a maquetar. Dropbox es la forma en la que todos compartimos archivos.
Para transmitir las clases en vivo, usamos CamTwist en Mac y XSplit en Windows, ambos canalizados por Flash Media Live Encoder al Wowza Server de Mediastream que lo convierte a rtmp y a streaming HTML5.
Así construimos la plataforma donde daremos el Curso de diseño y desarrollo web online de Mejorando.la .
¿Tienes más preguntas? Las responderé en los comentarios todas. Comparte esto y trae a todos tus amigos, compañeros y conocidos a nuestro mejor curso online.
via Cristalab http://www.cristalab.com/blog/la-tecnologia-detras-de-los-cursos-online-de-mejorando.la-c108667l/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clab+%28Cristalab%29
Comentaris
Publica un comentari a l'entrada