Browse Source

Actualizar 'docs/Història.md'

master
Xavier B. 1 year ago
parent
commit
934ea985e7
2 changed files with 20 additions and 20 deletions
  1. 20
    0
      docs/Història.md
  2. 0
    20
      docs/Història.textile

+ 20
- 0
docs/Història.md View File

@@ -0,0 +1,20 @@
h1. 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](http://hotpot.uvic.ca/) o del [JClick](http://clic.xtec.cat/en/jclic/). Ara bé, aquests programes necessiten [Java](http://ca.wikipedia.org/wiki/Java_%28llenguatge_de_programaci%C3%B3%29), 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ò](http://docs.moodle.org/20/en/Hot_Potatoes)). 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](http://www.profejmpc.com), vaig mirar el codi de [Khan Academy](http://www.khanacademy.org) 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](https://github.com/Khan/khan-exercises) 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](https://github.com/hyperandroid/CAAT) (i l'exemple [Sumon](https://github.com/hyperandroid/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](http://www.kineticjs.com/)], [[2](http://paperjs.org/)] i [[3](http://http://ocanvas.org)]; mereix una menció especial [processing.js](http://processingjs.org)), però massa per jo. També vaig trobar dos bons tutorials: [aquest](https://developer.mozilla.org/en-US/docs/HTML/Canvas) de mozilla i [aquest altre](marakana.com/bookshelf/html5_tutorial/canvas.html) 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](http://jqueryui.com/)
* Ara bé, quan havia fet algunes proves amb el canvas, vaig veure [aquesta demostració](http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2) 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](http://answers.oreilly.com/topic/1819-how-to-change-an-elements-css-properties-with-javascript/) tutorial de com canviar les propietats d'un div amb el javascript. Això era el que necessita. Amb [aquesta altra](http://stackoverflow.com/questions/8647216/get-content-of-a-div-using-javascript) pàgina, ja tenia tot el que necessitava.
* Per últim, vaig disposar els quadres damunt la imatge gràcies a [aquest](http://www.barelyfitz.com/screencast/html-training/css/positioning/) 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](http://www.w3.org/Style/Examples/007/center.en.htm), 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](http://billyshall.com/templates/minimal). I me va quedar una molt bona [primera fitxa](https://git.somenxavier.xyz/somenxavier/my-drag-and-drop-khan-academy/blob/master/01-cell/cell-01-ca.html).
* 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.

+ 0
- 20
docs/Història.textile View File

@@ -1,20 +0,0 @@
h1. 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":http://hotpot.uvic.ca/ o del "JClick":http://clic.xtec.cat/en/jclic/. Ara bé, aquests programes necessiten "Java":http://ca.wikipedia.org/wiki/Java_%28llenguatge_de_programaci%C3%B3%29, 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ò":http://docs.moodle.org/20/en/Hot_Potatoes). 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":http://www.profejmpc.com, vaig mirar el codi de "Khan Academy":http://www.khanacademy.org 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":https://github.com/Khan/khan-exercises 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":https://github.com/hyperandroid/CAAT (i l'exemple "Sumon":https://github.com/hyperandroid/Sumon), que era la meva possible candidata per a programar el meu <em>joc</em>. 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":http://www.kineticjs.com/], ["2":http://paperjs.org/] i ["3":http://http://ocanvas.org]; mereix una menció especial "processing.js":http://processingjs.org), però massa per jo. També vaig trobar dos bons tutorials: "aquest":https://developer.mozilla.org/en-US/docs/HTML/Canvas de mozilla i "aquest altre":marakana.com/bookshelf/html5_tutorial/canvas.html 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":http://jqueryui.com/
# Ara bé, quan havia fet algunes proves amb el canvas, vaig veure "aquesta demostració":http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2 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":http://answers.oreilly.com/topic/1819-how-to-change-an-elements-css-properties-with-javascript/ tutorial de com canviar les propietats d'un div amb el javascript. Això era el que necessita. Amb "aquesta altra":http://stackoverflow.com/questions/8647216/get-content-of-a-div-using-javascript pàgina, ja tenia tot el que necessitava.
# Per últim, vaig disposar els quadres damunt la imatge gràcies a "aquest":http://www.barelyfitz.com/screencast/html-training/css/positioning/ 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":http://www.w3.org/Style/Examples/007/center.en.htm, 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 <em>estil</em> a la pàgina amb els CSS de "minimal":http://billyshall.com/templates/minimal. I me va quedar una molt bona "primera fitxa":https://github.com/somenxavier/my-drag-and-drop-kahn-academy/blob/master/01-cell/cell-01-ca.html.
# 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.

Loading…
Cancel
Save