Tecnologia ESO

Recursos per l'ensenyament de la tecnologia a l'ESO.

Informàtica 4t

Recursos per informàtica de 4t ESO.

Coordinació TAC

Material de suport per la coordinació TAC de l'institut d'Altafulla.

Recursos TIC per professors

Espai que ofereix una selecció de recursos pel professorat.

Disseny d'APP

Participem en el programa mschools que apropa el disseny d'APP als adolescents.

20 feb. 2015

Les extensions a Google Chrome

Google Chrome és un navegador web que té com a característiques principals la seva extrema senzillesa, la seva rapidesa o la seva estabilitat. Però sobretot és la seva alta capacitat de personalització i la funcionalitat de les seves extensions.

Les extensions de Chrome són petits programes que afegeixen noves funcions que el navegador no té per si mateix, i que personalitzen i milloren l’experiència de navegació.
Les podem trobar a la Chrome Web Store.

He recollit algunes de les que utilitzo:

1. Momentum


Momentum canvia la teva pàgina d'inici amb una fotografia, l'hora, el temps, llistat de tasques etc...






2. ShortenMe

A vegades volem reduir l'extensió d'una URL per poder fer tweets.  ShortenMe és una extensió que afegeix una icona a la barra d'eines de Chrome i amb la que es redueix la extensió d'una adreça web (URL), també ens permet mostrar-la en codi QR.



3. qSnap


qSnap és una extensió que permet capturar pantalles del nostre escriptori complet o una part, també agregar formes, text,etc. Una vegada acabada l'edició es pot descarregar la imatge a l'ordinador o compartir-la a les xarxes socials.


4.  OneTab


OneTab és una eina que ens permet gestionar totes les pestanyes obertes en Chrome transformant-les en una llista molt senzilla d'accedir. Si tanques el navegador per accident, OneTab guarda les pestanyes.



5. Google Traductor

Google Traductor ens ajuda a traduir textos, ja que normalment moltes web que cerquem estan en anglès, etc.



6. Pin it

Pin it permet afegir imatges de la web a Pinterest










12 feb. 2015

APP Inventor

App Inventor permet desemvolupar aplicacions per telèfons mòbils basats en el sistema operatiu Android mitjançant un  navegador web, o un telèfon connectat a l'ordinador, o amb un emulador.



En primer lloc, s'ha d'instalar APP Inventor amb Windows


Para construir les  aplicaciones es treballa amb tres eines:

La primers és el Disenyador de App Inventor (App Inventor Designer), on es poden seleccionar els components per l'aplicació. Per accedir has de clicar a beta inventor MIT



La segona es l'editor de Blocs d' App Inventor (App Inventor Blocks Editor) , on s'ensablen els blocs del programa  per especificar com es tenen que comportar els components.



i la tercera es l'emulador o telèfon

Més informació



11 feb. 2015

Instal·lació d'APP Inventor


El primer pas és instal·lar correctament l'App Inventor. Malgrat és un programa que s'utilitza on-line, i on tot el que generem queda emmagatzemat al núvol, cal que l'ordinador on es treballarà tingui l'emulador correctament instal·lat pels casos on hi ha possibilitat d'utilitzar un dispositiu mòbil real.

App Inventor funciona completament al núvol, sense cap necessitat d'instal·lar res. Ara bé, per anar provant les apps a mida que es van construint hi ha tres opcions:


  • Connectar el dispositiu Android i l'ordinador a una mateixa xarxa wifi. És l'opció recomanada i la que funciona de forma més senzilla sense necessitat d'instal·lar res a l'ordinador. 

  • Connectar el dispositiu Android a l'ordinador via USB. Funciona correctament, però cal tenir els drivers del dispositiu i instal·lar-los a l'ordinador. En un centre on cada alumne pot tenir un dispositiu diferent i on passen molts alumnes per cada ordinador és una opció complicada de mantenir. 

  • Utilitzar un emulador de dispositiu Android. Funciona correctament, encara que no transmet les mateixes sensacions als alumnes utilitzar un dispositiu físic que un emulador. D'altra banda permet veure el funcionament de l'app sense haver de tenir cap dispositiu. Aquesta opció implica haver d'instal·lar un emulador a l'ordinador; a més a més, només està documentada la instal·lació de l'emulador per Windows i Mac. 


PRIMERES PASSES
1. Has de registrar-te com a usuari en appinventorMIT amb el teu compte de google
2. Configuració de l'ordinador



Comencem amb APP Inventor


  • El primer que hem de fer és entrar en el web d'APP Inventor
  • A la part superior trobareu un menu, cliqueu a CREATE APPS




  • Registreu-vos amb el vostre compte de gmail.
  • La primera vegada que entre us sortira aquest diàleg. Cliqueu a PERMET


  • S'obrirà una pantalla que no hi ha res perque encara no heu fet cap projecte (APP)

  • Recomano deixar l'anglès com a idioma, us serà més fàcil per familiaritzar-vos amb el noms.
  • Començem clicant a START NEW PROJECT

Recordeu que els noms dels projectes no contenen espais!!!

El dissenyador


El dissenyador consta de 4 parts.
1. La paleta on trobem
2. El visor
3. Els components
4. Les propietats

Interacció amb l'usuari en APP Inventor

Les aplicacions per mòbil o els programes informàtics requereixen de la introducció de dades per part dels usuaris.
Aquestes dades poden ser númeriques o de text. Per poder-les introduïr anirem a la paleta en la zona del dissenyador.

ENTRADA DE DADES:
Introduirem les dades mitjançant els TextBox (Quadres de text) .

SORTIDA DE DADES:
Obtindrem informació textual mitjançant els TextBox (Quadre de text) i els Label (Etiqueta).
Iniciarem l'execució clicant sobre un Button (Botó)


Les variables

Les variables són elements contenidors d'informació.Es defineixen mitjançant un nom i es poden assignar (SET) o llegir (GET) valors.
Les variables poden ser globals o locals. Si són globals, seran accesibles des de qualsevol lloc del programa, i si son locals, solament seran accesibles des de la rutina on s'estiguin utilitzant.



El notificador

El notificador (Notifier) és un component no visible que pot mostrar diferents tipus d'alertes i pot registrar les respostes de l'usuari a les mateixes.

El podeu utilitzar per mostrar avisos i alertes als usuaris de la nostra aplicació i també pot registrar les respostes per poder depurar la nostra aplicació.

Farem una aplicació amb el nom exemplesnotificador on podem veure les diferents opcions que hi ha
Dissenyador



En programació:




Guardar les aplicacions al drive

Les aplicacions que heu anat fent s'han de guardar al vostre drive compartit amb mi. Recordeu que la carpeta ha de tenir el nom: cursX_cognom_Nom   Exemple: 4C_Rovira_Jaume  Dins d'aquesta carpeta tindreu subcarpetes amb els noms del temes del curs

Per baixar l'APP







Una vegada descarregada a l'ordinador, l'heu de pujar a la carpeta amb el nom Pràctiques APP Inventor que hi haurà dins de la carpeta creada anteriorment.




10 feb. 2015

Hello Purr

La primera pràctica amb APPInventor 2 és Hello Purr, on cal saber crear i utilitzar un botó, posar un text, emetre un so i fer vibrar el mòbil.
1. Entrar al programa amb el vostre compte de google: MIT App Iinventor
2. Tutorial Hello Purr, d'aqui podeu descarregar l'arxiu de so meow.mp3 i la imatge kitty.png
3. Heu de guardar  el codi font (.aia) i el  codi executable (.apk) en la vostra carpeta de drive compartida amb la profe.Per guardar-los:





Podeu veure també aquest video





El resultat final és:


Compara edat

Farem una app en que donada una edat, podem determinar si és més gran o menor que 16 anys. 

Per fer-lo utilitzarem l'estructura condicional IF-THEN-ELSE per comparar l'edat introduïda amb el 16 i decidir el text a mostrar en el quadre de text.

1. Obrirem APP Inventor
2. En en disenyador afegirem una etiqueta, un textbox (per introduir la edat) , un button, i una altra etiqueta. Poder ordenar l'aplicació afegint horizontan arrengement i colors








3. En bock afegirem






Talk to me

Aquesta pràctica es dira Talktome.
Es tracta d'introduir un text i al premer un botó, el programa ens parlarà.
Per això:
1. Obrir l'app inventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo Talktome Recordeu que no accepta espais
4. En el dissenyador hem d'afegir:
- textBox
- Button
- TextToSpeech
- AccelerometerSensor

Ho podeu veure en la següent imatge


Quan hem dissenyat anem a blocks. El resultat és el següent

Per comprobar l'aplicació, heu de tenir baixada al mòbil l'aplicació MIT AI2Companion. Es pot trobar a la play Store.

Calculadora suma

Aquesta pràctica es dira Calculadorasuma
Es tracta d'introduir dos numeros i al premer un botó, el programa ens sumara i donarà el resltat
Per això:
1. Obrir l'app inventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo CalculadoraSuma Recordeu que no accepta espais
4. En el dissenyador hem d'afegir:
- textBox. Li canvieu el nom per primerotextBox1
- textBox. Li canvieu el nom per segundotextBox2
- Label. Li canvieu el nom per resutadoLabel
- Button. Li canvieu el nom per sumarButton


Ho podeu veure en la següent imatge





El resultat és:



Teorema de Pitagores. APP

Anem a fer una aplicació anomenada TeoremaDePitagores.
1. Obrir el APP inventor
2. Start new project. TeoremaDePitagores
3. Introduirem 3 etiquetes (label), dos capses de text i un boto per calcular, tal com indica el dibuix



El resultat és:



Bola màgica 8

Aquesta pràctica es dira Bola8magica.
Es tracta de fer preguntes a una bola i ens contestara al'hora que movem el mobil.
1. Obrir l'app inventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo Bola8magica Recordeu que no accepta espais
4. En el dissenyador hem d'afegir:
- Button, aqui introduirem la imatge de la bola (imageball.jpg)
- un VerticalArrengement on aniran 2 etiquetes (labels)
- un so (tada.mp3)
- AccelerometerSensor

Per descarregar les imatges i el so

Ho podeu veure en la següent imatge.




En els blocks introudirem les llistes. El resultat és:


Bruixola

En aquesta pràctica anem a contruir una bruixola.
Introduirem el sensor d'orientació i imagesprite

1. Obrir l'app inventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo Bruixola Recordeu que no accepta espais
4. Baixeu les imatges bruixola i compas
5. En el dissenyador has d'afegir:
- un canvas. Aqui poseu la imatge de la bruixola
- un imagesprite. Aquesta imatge serà el compas
- Table arrengement i dins 2 etiquetes (labels)
- OrientatorSensor (es el que fara que funcioni la bruixula)


azimut : aquest valor esta relacionat amb la funció del sensor. Tindrà el valor 0 quan apunt al Nord, 90 quant apunti a l'Est, 180 al Sud i 270 a l'Oest.


La programació consisteix:
Teniu un Tutorial Bruixula per si voleu saber-ne més

HomerSimpson

Descarregar les imatges Has de descarregar-te 2 imatges (homersimpson.jpg, Homer2.jpg) i el so doh.wav
Aquesta pràctica es dira HomerSimpson.
Consisteix en canviar una imatge quan toquem la pantalla i alhora fara un so.

Per això:
1. Obrir l'app inventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo HomerSimpson  Recordeu que no accepta espais
4. En el dissenyador hem d'afegir:
- canvas  (anomeneu-lo Homercanvas. A propietats poseu fill parent a Heigh i width
- sound

També heu de pujar les imatges Homer2.jpg, HomerSimpson.jpg i el so Doh.wav
Us ha de quedar igual que la següent imatge


El resultat és:



Formules matemàtiques

En aquesta pràctica aprendrem a fer servir diverses pantalles (screens) i utilitzar els menús.
L'aplicació consisteix en un menu on podem escollir entre calcular l'area d'un triangle o el teorema de Pitàgores.
Podeu utilitzar l'app creada anteriorment del teorema de Pitagores i la guardeu amb el nom de formules matèmatiques.

Tindrem 3 pantalles, una per el teorema de Pitagores (screen1), un altra per l'area del triangle (screen2) i l'última per el menú (screen3).
Per afegir pantalles unicament heu d'anar a la part superior de l'APP Inventor


En aquesta segona pantalla farem l'àrea del triangle:


Afegirem una tercera pantalla:



únicament ens faltara anar a la screen1 i posar un boto per tornar al menú principal.



Xilofon de colors

En aquesta pràctica contruirem un xilòfon de colors per poder tocar les teves cançons favorites.
Introduirem els components:
sound: per reproduir arxius d'audio (per aquesta pràctica les notes musicals)
procediments

Descarregar les notes musicals Has de descarregarte 8 arxius de so en format wav(del 1 al 8)
En el dissenyador tindrem:

-8 botons (buttons): un pera cada nota musica (DO,RE,MI,FA,SOL,LA,SI,DO 2a octava).
- sound (per reproduir les notes). Posem l'interval mínim a 0, així no tindrem que esperar entre nota i nota.
Ho pots veure a la imatge següent:



Renombra els botons per cada una de les notes musicals i canvia les propietats (el color segons la imatge anterior, i l'amplada  -width: fill parent)

Puja els arxius wav per les notes. Descarrega arxius.

Si anem a blocs, introduirem els procediments.






Selector de Color

Introduirem un horizontalArrangement  (heigh 176 pixels i width: fill parent) i dins hi colocarem un canvas (heigh fill parent i width: fill parent)