Blog

PerPere Cornellà Canals

Gamification, gamificació, ludificació o… juguificació?

Qui té Twitter, té una mina…

I és que poca estona després d’haver escrit la meva darrera entrada al blog “Gamification, gamificació o… juguificació?” i de fer-ne difusió a Twitter, vaig rebre una resposta de Meius Ferrés (@mferres) proposant-me el nom ludificació per referir-nos, en llengua catalana, a gamification.

Certament, era un terme que ja havia sentit alguna vegada però que no vaig saber mencionar a l’entrada anterior (oblit meu…). Però no només va passar això, sinó que, poc després, vaig rebre la resposta que M. A. Julià (@mjulliabe) feia a Meius Ferrés:

definition2Realment, la referència al Centre de Terminologia Termcat és inqüestionable. Diu, textualment, “Un terme relacionat amb aquest és ludificació (en anglès, gamification), el qual, de manera més genèrica en l’àmbit de la psicologia, es refereix a l’ús de la mecànica del joc en contextos aliens per a incitar un comportament determinat en les persones implicades.”. I ho fonamenta amb el fet que el mot llatí ludus vol dir ‘joc’ en català.

Com ja he dit, arguments inqüestionables.

Però, com que sóc una mica perepunyetes, vaig estar buscant alguna cosa més sobre el tema. Vaig buscar el terme lúdic -a al mateix Termcat: “Relatiu o pertanyent al joc”. I també al Diccionari de la Llengua Catalana de l’Institut d’Estudis Catalans. Mateixa definició, però amb algun afegitó interessant: el mot lúdic ve del francès ludique, del llatí ludus i va ser creat pel psicòleg i pedagog suís Édouarde Claparède (1873-1940).

Aquest ‘relatiu o pertanyent al joc’, personalment, no m’acaba de fer el pes per a utilitzar-lo per catalanitzar el terme gamification. Des del meu modest punt de vista, el terme ‘lúdic’ el considero més ampli que el terme ‘joc’. També ho deu veure així el Diccionari Escolar del Grup Enciclopèdia Catalana (DIDAC), quan, amb el seu llenguatge senzill i planer, defineix el terme ‘lúdic’ de la següent forma: “Que està relacionat amb el joc, amb la diversió. Jugar a cartes i fer excursions són activitats lúdiques”.

I encara un darrer apunt. El propi Termcat fa una relació de com s’utilitza el terme gamification en altres llengües. És aquesta:

  • es gamificación
  • es jueguización
  • es juguetización
  • es ludificación
  • fr gamification
  • fr ludification
  • it gamification
  • it ludicizzazione
  • en gamification

Si en llengua castellana utilitzen jueguización o juguetización, bé devem poder proposar d’utilitzar juguificació en llengua catalana, no?

Ja us he dit que era una mica perepunyetes…

PerPere Cornellà Canals

Gamification, gamificació o… juguificació?

El terme gamification s’ha posat de moda recentment. Per fer-ne una definició curta podríem dir que la gamificació (així es troba en alguns textos en llengua catalana) consisteix en la utilització de mecàniques i de tècniques pròpies del joc a àmbits no lúdics, amb la finalitat principal de crear motivació i implicació de l’usuari final. Podeu trobar-ne mes informació a la xarxa, com per exemple, al Gamification Corp. o al Gamification Wiki.

gamificationAquest concepte ha estat aplicat en diversos àmbits, sobretot l’empresarial, per intentar aconseguir millors vendes, més motivació dels treballadors d’una determinada empresa o augmentar el seu rendiment.

A mi m’interessa, particularment, el que la gamificació representa al món de l’ensenyament i l’aprenentatge, perquè pot afavorir la motivació de l’alumnat i pot donar pistes per a tractar l’atenció a la diversitat. Implica, això sí, un canvi metodològic important. Per exemple: en l’àmbit de joc, una de les estratègies que donen millors resultats és la de l’assaig-error. Pensem que, en els sistemes docents més tradicionals (que no antics), l’error està especialment penalitzat…

I com que no hi ha res millor que la pròpia experimentació, aplicaré el concepte de gamificació a l’assignatura Videojocs i educació que el proper curs 2013-2014 impartiré als esudis de Gran en Mestre de la Facultat d’Educació i Psicologia de la UdG. Tot un repte, però aniré passet a passet… Intentaré escriure nous posts explicant l’evolució de l’experiència.

Amb aquesta acció m’agradaria facilitar l’aprenentatge als meus estudiants. Una mica allò que diu Jane McGonigal (experta en gaming i gamification): “Fem que salvar el món en la vida real sigui tan fàcil com salvar-lo en els jocs on-ine”. És molt demanar?

I, posats a demanar, demano la catalanització del terme gamification. Si ja hi ha autors que fan una adaptació utilitzant el terme gamificació, per què no podem parlar de juguificació? Reclamo doncs, des d’aquestes línies, utilitzar juguificació en lloc de gamification o gamificació.

PerPere Cornellà Canals

Portafolis

He preparat una prezintació sobre els Portafolis: concepte general i explicació del portafolis digital. Dins l’oferta que podem trobar al mercat, faig una ràpida menció a Mahara, el portafolis digital que ha escollit la UdG per poder-lo integrar amb el Moodle. He estrenat aquesta prezintació en el marc de la Jornada sobre Docència Basada en Competències i Acció Tutorial de la UdG.

PerPere Cornellà Canals

Hoppala i Layar: una bonica relació

 

Layar és, sense cap mena de dubtes, una de les aplicacions més potents per crear i visualitzar Realitat Augmentada. A més del conegut navegador per a dispositius mòbils, disposa de Layar Creator, un visualitzador de Realitat Augmentada a partir d’imatges.

En aquest article ens centrarem en la creació de contingut per a ser visualitzat com a capes de realitat augmentada en el navegador Layar per a dispositius mòbils.

Per això, utilitzarem el propi Layar, combinat amb Hoppala Augmentation, una aplicació que ens facilitarà crear els punts d’interès (POIs – Point Of Interest) que vulguem.

En aquest procés seguirem els passos següents:

  1. creació del conjunt de POIs a Hoppala,
  2. creació de la capa de Layar,
  3. enllaç del conjunt de POIs amb la capa
  4. donar format a la capa
  5. publicar, si escau, la capa; o utilitzar-la en mode Test

Tant en el Hoppala com en el Layar haurem de tenir un registre d’usuari per poder fer totes aquestes accions. Per això, si encara no en tenim, caldrà crear-los.

1.- Creació del conjunt de POIs a Hoppala

Accedim a la pàgina de Hoppala (http://augmentation.hoppala.eu/). Si tenim un compte d’usuari, el podem escriure per accedir al nostre espai. Si encara no el tenim, l’haurem de crear. El procés demana confirmació via email.

Accedirem a un espai amb diverses opcions. A l’extrem inferior dred, trobarem un enllaç que diu Add overlay. Hi farem clic per crear un nou conjunt de punts.

En fer clic, obtindrem un resultat similar al que mostra la imatge:

2013-04-12_1133

Fent clic sobre el llapis, podrem editar el títol i el nom del conjunt de POIs per adaptar-los a les nostres necessitats. La Overlay URL és l’adreça que necessitarem per connectar els punts a la capa de Layar que crearem posteriorment. Fent clic sobre el títol o el nom, accedirem a un mapa on situar els nostres POIs. Podem utilitzar el camp de cercador d’adreces per situar els nostres punts, o bé naveguem a través del mapa fins a localitzar-los. Fixeu-vos que podeu navegar pel mapa en format mapa, satèl·lit o híbrid.

Un cop localitzat el lloc on volem crear el primer punt, fem clic sobre l’enllaç de la part inferior dreta de la pantalla que diu Add augment. Això fa aparèixer sobre el mapa la icona clàssica de localització. Amb el ratolí el arrosseguem la icona al lloc exacte on volem situar el POI.

hoppala3

Podem observar que a la part dreta de la pantalla ha aparegut una casella amb el títol Untitled. Fent-hi clic a sobre, accedirem a entrar els detalls del punt que estem creant. Ens apareix una bafarada emergent amb quatre pestanyes:

hoppala4

  • General: on escriurem el títol del punt, la descripció (3 línies) i la miniatura que es mostrarà quan el navegador de RA apunti cap al punt (sol ser una imatge del lloc; es recomana que sigui de 100 x 100 píxels); podem pujar i utilitzar les imatges que vulguem (jpg o png).
  • Assets: a l’apartat Layar podem triar el tipus d’icona que es mostrarà al navegador per assenyalar els POIs: podem triar entre els que vénen per defecte o escollir-ne un altre joc (que gestionarem a Layar); també podem triar un asset: un objecte 3D o una imatge (jpg o png) que es mostrarà en el lloc on haguem definit el POI.
  • Actions: podem triar diverses accions per a cada punt que s’activaran en seleccionar-lo des del navegador de RA: incloure àudio o vídeo, enllaçar un lloc web, escriure un tuit, fer una trucada, enviar un email o un SMS. Per a cadascuna de les accions, podem decidir si s’executen quan l’usuari estigui en un radi concret de distància al punt o no.
  • Location: latitud, longitud (aquests camps ja estan omplerts, però els podem acabar d’ajustar) i altura del POI.

Un cop entrades totes les dades que vulguem, fem clic al botó Save. Veurem els canvis a la casella de la dreta.

Seguint el mateix procés, crearem tants punts com vulguem. Veurem que van quedant al costat dret de la pantalla. Tots els punts són editables posteriorment. Quan els tinguem tots, ja estarem a punt per al següent pas.

2.- Creació de la capa de Layar

Accedim a la pàgina de Layar (http://www.layar.com). Si tenim un compte d’usuari, el podem escriure per accedir al nostre espai. Si encara no el tenim, l’haurem de crear. El procés demana confirmació via email. Atenció! Al web de Layar ens podem donar d’alta de dos serveis:

  • servei de creació i gestió de capes de RA,
  • servei de Layar Creator (per generar RA que utilitza imatges per activar les accions).

Tot i que podem gaudir dels dos serveis, cal fer un registre independent per a cadascun d’ells. En el nostre cas, el que ens interessa és el primer, el de creació i gestió de capes de RA. Per donar-nos d’alta en aquest servei hem de buscar l’apartat Developers. En el moment d’escriure aquest article, el trobem a la part inferior de la pàgina, en una zona amb fons gris fosc. Si també ens donem d’altra del servei Layar Creator, podrem utilitzar aquesta tecnologia en les nostres capes de RA.

layar1

El procés de creació del compte implica rebre i respondre algun correu.

3.- Enllaç del conjunt de POIs amb la capa

Un cop tinguem el compte creat, podrem accedir al nostre espai on, a la part superior dreta, trobarem un botó per accedir a les nostres capes (layers).layar2

Farem clic sobre el botó Create a new layer! per crear la nostra nova capa. Això fa aparèixer una finestra emergent on hem d’omplir les dades bàsiques de la nostra capa (si posem el cursor sobre el camp d’entrada de cada apartat, veurem els requisits que hem de seguir):

  • el nom de la capa: és un identificador,
  • el títol de la capa: és el que apareixerà com a nom de la capa,
  • una descripció curta,
  • el nom de la persona que publica la capa,
  • l’API endpoint URL: és el camp més important, perquè és el que ens lliga Hoppala i Layar. En aquest camp hem d’escriure l’adreça que apareixia a la columna Overlay URL del nostre conjunt de punts creats a Hoppala,
  • tipus de Layar: escollir entre 2D o 3D en funció dels elements que hi vulguem utilitzar,
  • Layar Vision: si el volem habilitar o no (en principi no ens cal per crear una capa de RA).

Fem clic sobre Create layer i ja tindrem la nostra capa creada. Si ho hem fet tot correctament, prémer el botó ens portarà a una nova pantalla on podrem acabar de perfilar (si ho creiem necessari) algunes de les característiques de la nostra capa.

layar4

4.- Donar format a la capa

De fet, a hores d’ara, ja ho tenim tot llest per a poder visualitzar la capa a través del nostre navegador Layar. Però li podem donar una mica de format. No faré aquí un repàs exhaustiu de totes les opcions (ho deixo perquè investigueu una miqueta vosaltres), però sí que en destaco alguns apartats. Recordeu de desar cada canvi que feu.

  • Apartat Listing & indexing: molt important a nivell d’informació i d’estètica. Podem afegir una icona que identificarà la nostra capa, una captura de pantalla, ampliar la informació i afegir etiquetes. A la part superior dreta hi trobareu l’enllaç Click here for an example que ens orientarà sobre quina és la funció de cada element.
  • Apartat Look & feel: ens ofereix la possibilitat d’afegir un bàner personalitzat, triar els colors de l’espai on apareix la informació dels nostres POIs i canviar els indicadors de POIs (en podem crear tants com vulguem, si volem un per POI; aquest element va relacionat amb el conjunt d’icones que podem triar, per a cada punt, a Hoppala -apartat Assets-).
  • Apartat Filters: són filtres que es mostraran abans de carregar la capa. Generalment no caldrà utilitzar-los, però va bé saber que existeixen perquè, en alguna ocasió, ens poden ser útils.
  • Apartat Permissions: des d’aquí podem canviar la persona que publica la capa i, sobretot, afegir noves persones que poden visualitzar (Add viewer) la capa mentre no sigui pública (mentre sigui en mode Test); aquestes persones que poden visualitzar la capa mentre no és pública cal que tinguin un compte de Layar.

Desem els canvis que haguem fet tot fent clic sobre Save.

5.- Publicar, si escau, la capa; o utilitzar-la en mode Test

Tal i com ho tenim ara, la capa que acabem de crear no és pública. Això vol dir que només la poden veure la persona que l’ha creada i les persones que apareixen a la llista de Viewers de l’apartat Permissions. D’aquesta manera, per poder veure la nostra capa caldrà:

  • instal·lar Layar al nostre dispositiu mòbil,
  • executar l’aplicació,
  • accedir a l’espai de configuració,
  • anar a l’apartat d’usuari (o de compte… depèn del sistema operatiu) i donar-se d’alta amb el mateix usuari de Layar,

Un cop fet això, veurem que als grups de capes, apareix un nou grup anomenat Test (o desenvolupador, o… un cop més en funció del sistema operatiu del dispositiu mòbil). Allà ha d’aparèixer la nostra capa.

Ja només ens queda carregar-la i gaudir de l’experiència de la Realitat Augmentada!

Un cop comprovem que tot funciona correctament (a vegades cal ajustar algun punt, refer alguna descripció, corregir algun enllaç…) podem decidir si volem fer pública la capa o no. Si la volem publicar, cal anar a la llista de les nostres capes de Layar.

Podem retornar a la llista de les nostres capes fent clic sobre el botó de la part superior dreta que diu My Layers. Veurem que a l’apartat Status de la capa en qüestió es mostra la paraula Testing. Això vol dir que no és pública. Per publicar-la caldrà fer clic sobre el botó Request approval. Perquè una capa sigui aprovada i publicada ha de superar uns determinats requeriments. Una sèrie de pantalles d’informació ens aniran guiant i informant de si tot ho tenim correcte. Un cop tot llest, la capa es farà pública en un termini de cinc dies.

Molt bona feina!

PerPere Cornellà Canals

Planificació i ús de tècniques per a una comunicació efectiva amb els estudiants

Planificació i ús de tècniques per a una comunicació efectiva amb els estudiants. Aquest és el títol de la sessió que he fet avui dins el marc del Postgrau Interuniversitari en Docència Universitària.

A primera vista és un títol molt pretensiós. Si algú en tingués la clau, tindria l’èxit assegurat en la seva experiència docent…

Tot i així, és cert que podem trobar eines i recursos que ens ajudin a tenir una comunicació més efectiva amb els nostres estudiants. Tot plegat ha de partir del coneixement de la situació del nostre entorn i de com són els nostres estudiants.

Com que m’agrada tot allò que fa referència a la tecnologia educativa, per dur a terme aquesta sessió he posat el “mode tecnologia: ON”. És des d’aquesta perspectiva que he enfocat el meu discurs.

Us deixo la presentació que he utilitzat en la sessió:

PerPere Cornellà Canals

Creativitat, joc i noves tecnologies

El passat divendres 9 de novembre de 2012 vaig participar, al Centre Cultural La Mercè, a les Jornades de reflexió Mirades actuals sobre la creativitat.

Em van proposar de parlar de creativitat, joc i noves tecnologies. Realment la proposta era molt interessant perquè aquests són tres termes que lliguen bé. El plantejament que vaig fer tenia, inevitablement, un rerefons educatiu, com no podia ser d’altra manera.

Aquesta és la presentació que vaig utilitzar en la meva participació:

PerPere Cornellà Canals

Realitat Augmentada al teu web (versió ràpida)

En una entrada anterior he explicat com posar realitat augmentada al teu web a través d’un procediment laboriós, però que ens permetia controlar determinades variables i personalitzar noms.

La intenció d’aquesta nova entrada és la de simplificar tot el procediment i obtenir, de forma ràpida, una aplicació de realitat augmentada que podem posar al nostre lloc web.

Es necessita:

  • un conjunt d’arxius que he modificat a partir de la proposta de Saqoosha FLARToolKit i que he preparat en aquest arxiu comprimit,
  • un marcador (arxiu .pat) al que heu de posar el nom marcador.pat (en aquest espai es mostren dues maneres de crear-los: online i amb BuildAR),
  • un arxiu .dae i, si escau, la carpeta amb les textures; aquest arxiu es pot generar amb el Trimble Sketchup, tal i com s’explica en aquesta entrada. L’arxiu .dae l’heu de batejar amb el nom model.dae (no cal que canvieu el nom a la carpeta.

I ja ho tenim tot! Ara hem de seguir el següent procediment:

  1. descarreguem i descomprimim l’arxiu RA.rar,
  2. posem l’arxiu marcador.pat a la carpeta marcador,
  3. posem l’arxiu model.dae i, si escau, la capeta de textures, a la carpeta model.

I això és tot! Podem comprovar que funciona fent doble clic sobre l’arxiu index.html. I, si volem, pengem tota la carpeta al nostre lloc web.

Bona feina!

 

PerPere Cornellà Canals

Realitat Augmentada al teu web amb Saqoosha FLARToolKit

El propòsit d’aquesta entrada és la de mostrar el procés que hem de seguir per tenir una aplicació de RA en el nostre lloc web. Em basaré en la idea de crear una aplicació on, en acostar el marcador, aparegui la imatge de l’Esquivamosques, un dels capgrossos més populars de la ciutat de Girona. En entrades anteriors he explicat com crear marcadors (markers, arxius en format PAT o PATT) on line o bé amb l’aplicació BuildAR.

En aquesta nova entrada s’explica com utilitzar aquests marcadors per crear realitat augmentada i posar-la al nostre espai web amb l’ajuda dels arxius que ens proporciona Saqoosha FLARToolKit. L’enllaç anterior ens porta fins a la pàgina de la guia d’inici, on podrem trobar un arxiu zip amb el FLARToolKit-starter-kit. Aquest és l’arxiu que necessitem descarregar i descomprimir. El següent esquema explica la funció i contingut de les carpetes i arxius que hi trobem (les icones poden variar en funció de les aplicacions que tingueu instal·lades al vostre ordinador).

Si volem fer una prova de com funciona, podem seguir els següents passos:

  • imprimir el marcador que utilitza FLARToolKit per defecte que trobarem a la carpeta Data: flarlogo-marker.pdf,
  • fer doble clic a un dels dos arxius .swf (pel·lícula Flash): Earth.swf o SimpleCube.swf,
  • s’obrirà una finestra del navegador i ens demanarà que permetem l’accés al Flash. Quan li donem el permís, en encarar el marcador a la webcam, ens ha d’aparèixer el model relacionat.

En la  imatge següent es pot observar el resultat d’haver executat l’arxiu Earth.swf:

Anem a veure com podem personalitzar tant el marcador com l’objecte que es mostra quan acostem el marcador a la webcam. Seguirem aquests passos:

  • crear el nostre propi marcador,
  • crear la nostra pròpia imatge a mostrar (2D, 3D…),
  • esborrar els arxius que no ens són necessaris de la carpeta FLARToolKit,
  • canviar el nom d’un arxiu i d’una carpeta,
  • posar els nostres arxius al lloc adequat,
  • modificar l’arxiu d’ActionScript (llenguatge que utilitza el Flash) amb l’ajuda d’Adoble Flash Builder.

Creant el nostre propi marcador

En altres entrades s’han explicat un parell de maneres de crear arxius .PAT que ens serveixin de marcador per a aplicacions de Realitat Augmentada:

Tot i que hi ha altres maneres de crear-los. El cas és que, d’alguna manera o altra, hem de tenir el nostre marcador personalitzat.

Creant la nostra pròpia imatge a mostrar (2D, 3D…)

Per als nostres propòsits necessitem un arxiu d’imatge en format DAE. Aquest és un tipus d’arxiu generat per Collada, una extensió que es pot treballar a partir de Blender, 3DS Max i altres editors 3D. D’entrada, dir això fa respecte, perquè l’ús d’aplicacions com aquestes, no és pas trivial (més aviat és complex… molt complex). Està clar que si dominem alguna d’aquestes aplicacions, els resultats poden ser molt espectaculars.

Tenim, però, una alternativa més senzilla: utilitzar l’aplicació Trimble SketchUp, una aplicació de Google. Per tant, descarreguem i instal·lem aquesta aplicació (hi ha una versió gratuïta i una versió Pro de pagament). D’una forma senzilla podem construir models 3D (és qüestió de practicar una mica). Però també podem convertir imatges personals al format DAE. El que explicaré aquí és precisament aixó. Seguint l’exemple, vull que la imatge mostrada en l’aplicació de RA sigui una foto del capgròs Esquivamosques. Per això, seguiré aquests passos:

  • retallo la figura del capgròs en un editor d’imatges i deso l’arxiu en format PNG,
  • obro l’aplicació SketchUp i hi importo l’arxiu PNG que acabo de preparar (File > Import…). El puc posar on més em convingui però, en el meu cas, el posaré sobre el terra; això ho aconseguiré desplaçant la imatge que estic important cap a la part inferior. Intento que quedi centrat amb els eixos de coordenades de l’aplicació. Sempre puc moure els objectes utilitzant les eines de SketchUp. També hauré d’esborrar la figura que apareix per defecte en els nous arxius de SketchUp (amb l’eina Select, selecciono la figura i l’esborro),
  • exporto l’arxiu (File > Export > 3D Model…). Puc escollir entre exportar un arxiu DAE (és el que ens interessa) i KMZ (el podríem utlitzar en el Google Earth, per exemple). Això ens crea un arxiu DAE amb el nom que haguem escollit i una carpeta amb el mateix nom que conté la textura. Ho necessitarem tot plegat per als nostres interessos.
Un parell de consideracions:
  • amb SketchUp puc crear objectes 3D que funcionaran de la mateixa manera que l’exemple explicat. Una mica de pràctica ens portarà a obtenir figures interessants,
  • si no volem crear nosaltres l’objecte DAE, poder recórrer a repositoris existens, per exemple la mateixa Galeria 3D de Google, des d’on es poden descarregar els arxius DAE.

Esborrant els arxius que no ens són necessaris

Hem vist que a l’arrel de la carpeta FLARToolKit Starter Kit hi ha dos exemples: Earth i SimpleCube. Ens quedarem només amb un dels dos exemples: l’Earth, pequè és el que ens permetrà, posteriorment, afegir un model personalitzat a mostrar. Això vol dir que podem esborrar:

  • els tres arxius de l’exemple SimpleCube,
  • dos dels arxius Earth: Earth.swf i Earth.fla, i deixem sense esborrar l’arxiu Earth.as,
  • no hem de tocar els arxius ARAppBase ni PV3DARApp,
  • de la subcarpeta Data, hem d’esborrar els arxius flarlogo.pat i flarlogo-marker.pdf; i deixar, per tant l’arxiu camera_para.dat,
  • de la subcarpeta model hem d’esborrar tots els arxius i deixar-la buida.

Canviant de nom d’un arxiu i d’una carpeta

Per començar a personalitzar el nostre projecte, canviarem el nom de l’arxiu Earth.as pel que nosaltres vulguem. En el meu cas, el rebatejaré com a esquivamosques.as (penseu que pot ser que no es vegi l’extensió).

També canviarem el nom de la carpeta on hem preparat tots els arxius anomenada FLARToolKit Starter Kit i la personalitzarem amb un nom referent al nostre projecte. per exemple, esquivamosques.

Posant els nostres arxius al lloc adequat

A la subcarpeta Data hi posarem el nostre arxiu de marcador. En el meu cas, esquivamosques.pat. A la subcarpeta model hi posarem els arxius del nostre model a mostrar. En el meu cas, l’arxiu esquivamosques.dae i la carpeta esquivamosquesque conté la textura de la imatge.

Modificant l’arxiu d’ActionScript (llenguatge que utilitza el Flash) amb l’ajuda d’Adoble Flash Builder

Per acabar el procés, cal crear els arxius necessaris a partir dels nostres arxius personalitzats. Per això seguirem el següent procés:

  • descarreguem i instal·lem la versió de prova de l’Adobe Flash Builder (60 dies) que trobarem al web d’Adobe (ens faran crear un compte d’Adobe, de forma gratuïta). Si som del ram eductiu o som a l’atur, podem optar a una versió no comercial. la podeu trobar en aquest enllaç d’Adobe (triguen un parell de setmanes en validar les dades i proporcionar-te un serial),
  • executem l’aplicació,
  • creem un nou projecte ActionScript: File > New > ActionScript Project,

  • completem la finestra que se’ns obre amb les dades del nom del nostre projecte. Canvieu, si us convé, el destí on desarà el projecte. Les altres opcions les deixem tal i com estan,
  • fem clic sobre Next i ens porta a una nova finestra. Fem clic sobre la pestanya Source path i afegirem una nova carpeta, a través del botó Add Folder… Escollirem la carpeta que hem preparat amb tots els arxius. En el meu cas, la carpeta esquivamosques. Fem clic sobre Finish i veurem que es crea tot el projecte perquè apareixen carpetes i arxius a la zona de l’esquerra,
  • després d’un breu procés, veurem que la part esquerra de pantalla de Flash Builder ha canviat i hi apareixen elements relacionats amb el nostre projecte,
  • des de la finestra de l’esquerra anomenada Package Explorer, despleguem la carpeta anomenada [source path] seguit del nom de la carpeta del nostre projecte. Veurem que hi ha les carpetes Data, model i org que ja hem vist anteriorment. Seleccionem les carpetes Data i model, les copiem, i les enganxem a la carpeta (default package) que trobarem dins la carpeta src, dins la mateixa zona de la pantalla. El resultat final ha de ser com el que mostra la imatge:
  • encara hem de copiar i enganxar un altre arxiu de la finestra Package Explorer: hem de desplegar la carpeta [source path] esquivamosques > (default package), seleccionar i copiar l’arxiu esquivamosques.as i copiar-lo a a la carpeta src que hi ha una mica més avall. Ens dirà si volem sobreescriure l’arxiu i li diem que sí. Quan ho fem, veurem que el codi de l’arxiu d’ActionScript (as) que hi ha a la dreta canvia,
  • podem observar que, a la part inferior de la pantalla apareix un error. És normal perquè hem d’actualitzar algunes parts del codi per ajustar-lo als noms d’arxiu del nostre projecte,
  • ara ens cal fer uns quants canvis en aquest codi:
    1. canviem el nom del marcador pel nostre (flarlogo.pat per esquivamosques.pat),
    2. canviem el nom del model pel nostre (earth.dae per esquivamosques.dae),
    3. canviem els 2 noms de la classe Earth per un nom personalitzat. En el meu cas, esquivamosques,
    4. canviem els 7 noms _earth per un nom personalitzat. En el meu cas, _esquivamosques (és aconsellable deixar la barra baixa inicial; podeu canviar d’un sol cop tots aquests noms amb una cerca i reemplaçament),
  • el resultat final per al meu projecte és aquest:
  • i ja podem provar el projecte tot fent clic sobre el botó verd (Run) de la barra d’icones de l’aplicació.A vegades ens podem trobar que no es visualitza res; sol ser degut a problemes amb el navegador (en el meu cas, he tingut problemes amb el Google Chrome, també cal tenir el Flash Player degudament actualitzat). Es pot copiar l’adreça i enganxar-la en un altre navegador. Probablement el resultat que veiem no ens acaba d’agradar: mida, està girant, posició… En la següent imatge indico quines línies de codi cal modificar per variar els resultats. Tingueu en compte que, tant en el cas de la posició inicial com en el de la rotació de l’objecte, es poden variar els exios i es poden afegir noves línies de cosi per a nous eixos. Us deixo de la vostra mà l’experimentació fins a obtenir el resultat desitjat,
  • en el meu cas, he canviat el valor de l’escala a 4; he afegit una rotació inicial de l’eix Z a 90 (afegint una línia sota la de l’eix X) i he tret la rotació de l’objecte (deixant el valor a 0),
  • ara només ens exportar el projecte: File > Export… i triant l’opció Release Build de la carpeta Flash Builder. Triem la carpeta destí (o en creem una de nova) i ja ho tindrem tot llest.  Aquesta és la carpeta que hem de pujar al nostre lloc web. A l’interior veureu que hi ha un arxiu html amb el mateix nom del projecte, que és el que engega el projecte (de fet, abans de penjar la carpeta podem executar aquest arxiu per veure el resultat final). Podeu rebatejar aquest arxiu amb el nom index i així no caldrà escriure’l a l’adreça web perquè ja s’obrirà per defecte. També podeu editar i canviar alguns dels paràmetres d’aquest arxiu html. Per exemple, el color de forns, la mida de la finestra de vídeo… En la darrera imatge podeu veure una imatge del resultat del meu projecte, que podeu trobar i provar en aquest enllaç web  fent sevir el aquest marcador.

 

PerPere Cornellà Canals

Acció i reacció

accioreaccioTota acció provoca una reacció. No recordo els anys que fa que vaig sentir aquesta llei de la física per primera vegada…

I avui ho he pogut comprovar en primera persona. De la mà de Twitter. A quarts de dues del migdia d’avui he escrit aquest tuit:

Permeteu-me que us situï. Avui som 12 d’octubre, dia festiu (de moment). La Falange, Ciutadans, PxC i el PP han convocat una manifestació unionista, en favor d’una España única. Evidentment, aquesta convocatòria responia a la manifestació en favor de la independència de Catalunya, de l’11 de setembre passat (acció – reacció).

El ball de xifres torna a deixar en evidència la manca de rigor de qui fa els recomptes. En aquest cas, la forquilla va entre els 6.000 i els 100.000 manifestants. Des del meu punt de vista, trobo que la darrera xifra és molt exagerada atenent les imatges que he vist de la concentració.

En qualsevol cas, les xifres de la manifestació de l’11 de setembre anaven entre 600.000 i 1.500.000 de persones. La diferènca és brutal i explica força coses. Moltes de mal pair per a segons qui…

Però tornem al tuit. No sé què ha passat exactament, però s’ha retuitejat 120 vegades i 9 persones l’han marcat com a favorit (acciò – reacció). No m’havia passat mai (i, la veritat, fot il·lusió). Deu voler dir que a força gent li ha agradat. Però està clar, no a tothom li agrada el mateix. Així doncs, hi ha hagut un altre tipus de reaacció. Primer m’ha intranquil·litzat força, però després m’ho he agafat amb humor. Jutgeu vosaltres mateixos. Fixeu-vos amb el detall que, totes aquestes expressions de desacord (lícit, només faltaria…) van acompanyats d’un insult. I això diu molt de les persones. O no? Cada cop em sento més orgullós de ser català! Us deixo amb les “perles”.

PerPere Cornellà Canals

Crear markers de RA amb BuildAR

BuildAR, de HITLabNZ, és una aplicació que ens permet experimentar amb la realitat augmentada. Ens permet crear escenes en pocs segons, sense necessitat de saber programació. Proporciona una vista de vídeo en viu amb models 3D virtuals sobre imatges i marcadors.

Tot i que hi ha una versió de pagament, el BuilsAR Pro (molt completa i amb possibilitat de fer servir un trial), per aquest tutorial he utilitzat la versió gratuita de l’any 2008 que podreu trobar a la seva pàgina de descàrregues o directament en aquest enllaç.

Un cop instal·lada l’aplicació, l’executeu i, si teniu webcam, ja veureu la imatge capturada en pantalla. A la zona de l’esquerra hi ha l’arbre de l’escena on ens permetria triar marcadors i imatges a mostrar sobre aquests marcadors.

En aquest cas, el que ens interessa és la capacitat d’aquesta aplicació per crear marcadors. Per això, hem de tenir preparat un arxiu BMP (és el format que he comprovat que dóna menys problemes) amb una imatge quadrada del dibuix que volem que serveixi de marcador. En aquest cas, vaig preparar una imatge que representa la lletra E amb el FireWorks (però serveix qualsevol editor gràfic).

Ara, des del BuildAR, ens cal triar l’opció de menú Tools > Generate Patterns… Això ens obrirà una nova finestra amb la imatge d’un quadrat blanc amb un marc negre.

En aquesta nova finestra ens trobem tre botons:

  • el primer ens permet incorporar al marcador el dibuix BMP que tenim desat,
  • el segon ens permet desar aquest marcador en format .patt, que és el que necessitem per poder-lo utilitzar en aplicacions de realitat augmentada. Generalment els marcadors tenen l’extensió .pat; si ens convé, podem canviar l’extensió per aquesta darrera opció,
  • el tercer ens permet imprimir el marcador. Podem desar-ho en format PDF per, posteriorment, copiar la imatge i posar-la on ens convingui. És una bona idea fer-ne una impressió ara. Així ja el tindrem imprès per fer les nostres proves.
La imatge següent mostra com queda el marcador un cop s’ha incorporat la imatge:

No tots els marcadors funcionen de la mateixa manera. Qüestions com les simetries i la definició del dibuix són importants perquè les aplicacions de realitat augmentada els reconeguin fàcilment. Cal experimentar una mica sobre quines imatges ofereixen més facilitats a l’hora de ser reconegudes per l’aplicació.

Si volem comprovar si el marcador que hem creat funciona correctament, des de BuildAR fem clic a la icona d’afegir un marcador, naveguem i seleccionem el que acabem de desar en el procés anterior en format PATT. Veurem que ens apareix a l’esquema de la part dreta.

Si acostem a la webcam el marcador que hem pogut imprimir en el pas anterior, veurem que ens apareix un cub de color blau. Això vol dir que hem fet el procés correctament. ja tenim, doncs, un marcador imprès i el seu arxiu patt corresponent. Ja podem començar a treballar amb aplicacions de realitat augmentada.

Aquesta mateixa aplicació ens permet variar alguns paràmetres de l’objecte. Ho podem provar fent clic sobre la imatge del cub. Això farà que apareguin uns eixos i la possibilitat de realitzar canvis de mida i orientació. Us deixo a les vostres mans que acabeu d’experimentar amb aquesta aplicació.