www.enriquelamastrujillo.com » git http://www.enriquelamastrujillo.com/blog Otro sitio creado con WordPress Fri, 27 Feb 2026 20:20:53 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Mi gitgub http://www.enriquelamastrujillo.com/blog/2016/06/07/mi-gitgub/ http://www.enriquelamastrujillo.com/blog/2016/06/07/mi-gitgub/#comments Tue, 07 Jun 2016 14:06:45 +0000 Quique http://www.enriquelamastrujillo.com/blog/?p=1108 A partir de ahora si hago algún código para algún artículo de este blog lo subiré a mi cuenta de github.com.

Como podéis ver he puesto el código del qqquizzes y el qqcount.

]]> http://www.enriquelamastrujillo.com/blog/2016/06/07/mi-gitgub/feed/ 0 GitHub for Noobs http://www.enriquelamastrujillo.com/blog/2016/06/07/github-for-noobs/ http://www.enriquelamastrujillo.com/blog/2016/06/07/github-for-noobs/#comments Tue, 07 Jun 2016 14:00:21 +0000 Quique http://www.enriquelamastrujillo.com/blog/?p=1105 GitHub for Noobs (1/4) – A Short History

GitHub for Noobs (2/4) – Common Workflows

GitHub for Noobs (3/4) Using the GitHub Desktop App

GitHub for Noobs (4/4) Using the Command Line

]]> http://www.enriquelamastrujillo.com/blog/2016/06/07/github-for-noobs/feed/ 0 Qqcount, para contar del uno al cien http://www.enriquelamastrujillo.com/blog/2014/07/24/qqcount-para-contar-del-uno-al-cien/ http://www.enriquelamastrujillo.com/blog/2014/07/24/qqcount-para-contar-del-uno-al-cien/#comments Thu, 24 Jul 2014 21:27:08 +0000 Quique http://www.enriquelamastrujillo.com/blog/?p=749 En la línea del qqquizzes he creado qqcount para aprender a contar del uno al 100.

Podeís descargar el zip para ejecutarlo en local sin conexion a internet.

Recordad que sólo funciona en las últimas versiones de Chrome y alguno más. Funciona en ordenadores, tabletas y móviles, estos últimos por lo menos en Android.

Edición:

He publicado el código en github.com

]]> http://www.enriquelamastrujillo.com/blog/2014/07/24/qqcount-para-contar-del-uno-al-cien/feed/ 0 Qqquizzes, un sencillo juego de preguntas y respuestas en html5 y javascript http://www.enriquelamastrujillo.com/blog/2014/06/26/qqquizzes-un-sencillo-juego-de-preguntas-y-respuestas-en-html5-y-javascript/ http://www.enriquelamastrujillo.com/blog/2014/06/26/qqquizzes-un-sencillo-juego-de-preguntas-y-respuestas-en-html5-y-javascript/#comments Thu, 26 Jun 2014 21:42:02 +0000 Quique http://www.enriquelamastrujillo.com/blog/?p=730 He programado Qqquizes, un sencillo juego de preguntas y respuestas en html5 y javascript. Lo podeis probar aquí.
Ojo, sólo funciona en las últimas versiones de Chrome (y alguno más, pero sólo lo he probado en Chrome) porque el api que uso para que me lea los textos (Speech Synthesis API no está muy soportado. Funciona en ordenadores, tabletas y móviles, estos últimos por lo menos en Android.

Lo he hecho por dos motivos:

  • Hacer un juego para mis hijos con mis propias preguntas
  • Ponerme un poco con el tema de html5, objetos javascript, bootstrap y jquery, porque me estaba quedando bastante desfasado

Programación:

Cuento un poco la programación, para quien le interese.
Es muy sencilla. He intentado hacerlo lo mas MVC posible, sin usar ningún framework para ello aparte de jquery.
Por un lado tengo el model, que consta de los objetos QQQuizzAppModel, QQQuizz, QQQuestion y QQAnswer.
En este caso es muy sencillo, casi todo es inicializar los objetos y algun método de consulta, ya que la aplicación no hace modificaciones, no guarda datos, no se conecta a un servidor…
Por otro lado tengo un único objeto controller, el QQQuizzAppController, el cual inicializa el model y tiene todos los listeners.
La idea es que el html lanza eventos que coge el controller y es el controller el que modifica el model si es necesario. Ni el html (view) sabe nada del model ni el model sabe nada ni accede al view. De esta manera la programación es más limpia, robusta, elegante, comprensible, seguible, actualizable, mantenible…
El view esta formado por los html.
El juego consta de una única pagina, el index.html (qqquizzes.html en el zip descargable), el cual de entrada solo hace esto:
controller = new QQQuizzAppController(json);
controller.home(false);
es decir, inicializa los objetos a partir del json de preguntas, pone los listeners y muestra la home.

Sistema de plantillas:

Normalmente cuando tienes que pintar html con javascript se construye la cadena más o menos así:
var s = ”;
s += ‘

‘
…
Pero aquí he usado Handlebars, que es un poco más elegante, menos coñazo y menos propenso a errores.
Me traigo las diferentes plantillas por ajax (ver nota del final del post) y las tengo cacheadas en memoria para no hacer llamadas innecesarias.
Tengo una plantilla para cada sección del juego.
Cuando clicko en un elemento básicamente lo que se hace es:

  • presenta un “loading” en la parte donde se está cargando (si carga muy rápido no llega a verse)
  • obtiene el html a partir de la plantilla y el objeto correspondiente
  • muestra el html y oculta el loading

Y así más o menos todo.
No cuento más, al que le interese se puede bajar el zip, que es muy seguible.

Teneis el juego en un zip aquí por si quereís echar un ojo a la programación o para ejecutarlo en vuestros propios equipos sin conexión a internet e incluso con vuestras propias preguntas.
Para poner vuestras propias preguntas solo tenéis que hacer las imágenes y tocar el archivo json.js. Con un simple vistazo veis cómo va.
Para ejecutarlo solo tenéis que abrir el qqquizzes.html con Google Chrome.

En tabletas tenéis que poner una ruta de este tipo en la barra de direcciones del Chrome:
file:///mnt/sdcard/ninos/qqquizzes/html/qqquizzes.html

Para poner un acceso directo en el escritorio de las tabletas y que se abra en el Chrome sólo he encontrado esta manera viable (para Android, en el resto no sé):

Nota:

Como quiero que el juego funcione en local (ejecutando el html sin tener un servidor web ni conexión a internet), no he podido usar ajax para lo de las templates por restricciones de seguridad, así que lo he hecho sin ajax, pero en el código está comentado cuando lo hacía por ajax.

Edición:

He subido el código a github.com

]]> http://www.enriquelamastrujillo.com/blog/2014/06/26/qqquizzes-un-sencillo-juego-de-preguntas-y-respuestas-en-html5-y-javascript/feed/ 2