Like Khan Academy but more more more simple and always with drag and drop things.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Història.md 5.5KB

Història

En aquest document descric la història general d’aquest projecte. Simplement ho faig per a què quedi constància. Ho faré a mode de llista d’esdeviments ordenats cronològicament:

  • Al principi de curs 2012-2013 necessitava una eina que facilitàs la memorització de noms i propietats d’estructures. Concretament tenia el problema d’aconseguir que els alumnes de 3r d’ESO aprenguessin sense esforç i de manera no volàtil els noms dels orgànuls cel·lulars de la cèl·lula eucariota animal.
  • A més, vaig pensar que si tenia aquest tipus d’eina, me seria útil per altres tipus d’aprenentatges: les capes de la Terra, identificació de tipus de teixits, identificació de roques i minerals a partir de fotografies, identificació d’agents geològics a partir de fotografies, etc.
  • Per tant, me feia falta una eina que relacionàs les parts d’una imatge i textos prèviament introduïts.
  • Vaig cercar per internet i fins i tot vaig demanar als meus companys professors i el màxim que vaig trobar va ser els mòduls del HotPotatoes o del JClick. Ara bé, aquests programes necessiten Java, i jo volia una eina que només usàs HTML i Javascript i, per tant, es pogués executar a qualsevol navegador, fins i tot mòbil (no se sap mai, potser algun alumne es tornàs loco i volgués practicar des del bus ;). Una alternativa molt artificial era emprar el mòdul del HotPotatoes i exportar-la al moodle (el moodle permet fer això). Però era emprar un canó per matar un moscard.
  • Per tant, vaig decidir d’intentar fer jo la meva pròpia eina
  • En principi, gràcies a un suggeriment d’un company meu, en Joan Miquel Payeras, vaig mirar el codi de Khan Academy per veure si podia aprofitar-lo. Però, què va. Només canviar el nom d’un subdirectori feia que no funcionàs l’exercici. Tampoc podia llevar el logo de la Khan Academy. I no hi havia cap tipus de documentació al repositori de Khan Academy a github de com se podien adaptar els exercicis. Per tant, vaig descartar aquesta possibilitat.
  • Després vaig cercar llibreries en Javascript i vaig arribar a trobar llibreries per a programar jocs, com aquesta (i l’exemple Sumon), que era la meva possible candidata per a programar el meu joc. Analitzant la documentació d’aquest projecte vaig veure que utilitzava l’element canvas de l’HTML. I vaig tornar a cercar llibreries que tenguessin que veure amb l’administració de canvas, perquè fer un joc és una cosa i una altra simplement és utilitzar el canvas per dibuixar una imatge i quatre textos que, essencialment, era el que volia.
  • Cercant, vaig trobar diverses llibreries de programació de canvas, algunes molt xules ([1], [2] i [3]; mereix una menció especial processing.js), però massa per jo. També vaig trobar dos bons tutorials: aquest de mozilla i aquest altre de marakana.
  • Ja tenia un pla, intentar fer a pèl el meu programet començant amb els tutorials i, en cas de no tenir èxit, provar alguna llibreria de programació de canvas. I com a alternativa, tenia usar jqueryui
  • Ara bé, quan havia fet algunes proves amb el canvas, vaig veure aquesta demostració amb javascript que només usava div i css. Ja no necessitava el canvas. Vaig començar a veure una llum al final del túnel. S’ha de dir que abans d’aquell moment no confiava tenir a punt l’eina abans de dilluns (el que vos cont era un divendres).
  • Gràcies a aquesta demostració, vaig començar a fer proves, vaig fer-me un repositori a github i fer versions i versions.
  • Dissabte, un dia després de posar-m’hi tenia l’estructura general d’un exercici, però els quadres no canviaven de color segons si el text li correspongués o no. Cercant, vaig trobar aquest tutorial de com canviar les propietats d’un div amb el javascript. Això era el que necessita. Amb aquesta altra pàgina, ja tenia tot el que necessitava.
  • Per últim, vaig disposar els quadres damunt la imatge gràcies a aquest magnífic tutorial sobre posicions relatives i absolutes, cosa que mai havia entès fins en aquell moment.
  • Vaig basar l’aspecte dels exercicis en la pàgina de w3c.org, que també me va servir per saber com centrar les coses (encara que no me funcionàs el centrat vertical).
  • Per últim, simplement vaig afegir estil a la pàgina amb els CSS de minimal. I me va quedar una molt bona primera fitxa.
  • Me vaig passar dos dies intensius programant, però al final va valer la pena. I va ser un dels pocs projectes que m’han sortit a la primera.