PROGRAMACIÓ D'APLICACIONS EDUCATIVES AMB VISUAL BASICGuiaENRERA


Consideracions prèvies

El curs "Programació d'aplicacions educatives amb Visual Basic" que realitza la Subdirecció General de Tecnologies de la Informació per via telemàtica és la versió actualitzada i adaptada d'un curs que inicialment era presencial, "Programació d'aplicacions educatives amb Visual Basic" (P. Alcón, M.A. Almarza, J. Garcia. PIE 1997), que va ser desenvolupat com a formació en informàtica educativa. Així doncs, els conceptes teòrics i la majoria de les aplicacions són, en essència, les mateixes o, si més no, la idea pedagògica d'aquelles primeres versions. El que canvia en aquesta versió és l'exemplificació i concreció d'aplicacions, l'entorn telemàtic, que aquí és Internet, i l'actualització d'aquelles aplicacions susceptibles de ser actualitzades.

Cal destacar d'aquest curs, a l'igual que aquells que eren a distància, el fet que és totalment d'autoestudi i d'autoaprenentatge.

Es pressuposa que l'alumnat, en iniciar aquest curs, té uns coneixements i destreses en el domini de l'entorn Windows amb certa soltesa, uns coneixements introductoris sobre programació i coneixement a nivell d'usuari de l'entorn Internet.

Per realitzar aquest curs l'alumnat ha de disposar de correu electrònic. El Programa d'Informàtica Educativa ofereix als docents de Catalunya, d'àmbit no universitari, la possibilitat de disposar-ne.

Important: aquest curs està fet per a la versió 6.0 de Visual Basic que funciona en Windows.

Convenient: disposar de qualsevol llibre de Basic (encara que no sigui Visual Basic) per consultar les parts que expliqui: sentències, procediments, funcions, variables i estructures de control.

Tornar al principi

Elements dels mòduls

Els mòduls consten de:
  1. Una pàgina on s'exposen els objectius del mòdul i potser una introducció del mòdul. A partir d'aquesta pàgina ens podrem adreçar a les diferents pràctiques del mòdul. 

    2.  
  2. Pràctiques amb base teòrica. Cada pràctica consisteix en el planteig d'un programa i el seu desenvolupament. És el text bàsic d'estudi del curs i té el format d'explicacions més o menys detallades de cada un dels aspectes d'estudi. 


    3. En el desenvolupament de la pràctica, a part de les indicacions directes per a realitzar-la, l'alumnat pot accedir, si en té necessitat, a un seguit de pautes més detallades de les indicacions directes, i les consultes que li permetin tenir una informació completa sobre el tema, l'aspecte, o la particularitat del programa consultat. El detall de desenvolupament de les pràctiques se simplifica a mesura que l'aspecte tractat ho ha estat en una pràctica anterior recordant a l'alumnat en quina pràctica i mòdul es tracta per primera vegada. Quan l'aspecte tractat es considera plenament assimilat, no es fa cap referència anterior. 

    Cada pràctica és una pàgina Web, document html, on es desenvolupen tots els passos necessaris per completar el programa. 

    Aquest document també permet accedir:
     

    1. Al programa executable per conèixer el comportament del programa.

      2.  
    2. Al codi del programa per poder visualitzar la seva estructura i tot el seu contingut.

      3.  
    3. A tots els fitxers del projecte de manera que clicant en el fitxer vbp accedim a l'entorn Visual Basic i podem treballar amb ell per fer-hi modificacions i veure com alteren el comportament del programa. Un projecte Visual Basic està compost com a mínim per dos fitxers, un vbp i un frm. El nom d'aquests fitxers està compost per la lletra m (Mòdul), el número de mòdul corresponent, la lletra p (Pràctica) i el número de pràctica, per exemple els fitxers de la primera pràctica del mòdul 1 són m1p1.vbp i m1p1.frm

      4.  
    4. Propostes de modificacions del programa. 

      5.  


    Pot haver-hi diferents formes d'enfocar com desenvolupar les pràctiques:
     

    1. Idealment seria llegir-se la pràctica, seguir els seus passos i completar el projecte. Al final executar el programa i veure si té un aspecte i un comportament a l'executable incorporat en la pràctica (1).

      2.  
    2. Executar l'exe incorporat per veure el seu comportament (1). Anar a Visual Basic amb el projecte (3) de la pràctica, veure la seva estructura. Finalment, fer les modificacions proposades en els exercicis (4).

      3.  
    3. Veure l'estructura del programa (2). Veure el seu comportament (1). Tractar de construir el programa amb les instruccions de la pràctica.

      4.  
    4. Barreges de les anteriors alternatives

      5. .


    No totes les pràctiques cal que es facin igual. Potser les primeres pràctiques cal fer-les seguint l'ordre proposat en ii o iii, i quan es tingui certa desimboltura ja es podran fer de la manera i.
     

  3. Sumari del mòdul 

    4.  
  4. Exercicis. Els participants en el curs es familiaritzaran amb els conceptes adquirits i els aprofundiran mitjançant exercicis proposats. Aquests exercicis són els elements que permeten fer un seguiment avaluatiu de l'alumnat per part dels tutors, respecte al curs. Els exercicis són replantejaments dels recursos, destreses i conceptes plantejats a les pràctiques del mòdul corresponent. 


    5. La resolució dels exercicis, perquè tingui el seu efecte avaluatiu, es recomana que sigui personal, és a dir, que cada alumne resolgui de manera individual l'exercici, proposant la solució més adient o alternativa. Les dinàmiques de treball en grup per part dels alumnes dificulten aquest seguiment avaluatiu, tot i així, seran permeses sempre i quan els grups de treball no siguin mai de més de dos alumnes. En qualsevol cas el projecte de final de curs sempre es farà de manera individual (vegeu Projecte fi de curs). 

    Els exercicis s'especifiquen amb un nom que està referenciat per un codi de sis caràcters, aquest codi està format per la lletra m, el número del mòdul, la lletra p, el número de pràctica, la lletra e i el número de l'exercici. Per exemple, l'exercici 1 del mòdul 2, pràctica 3, serà m2p3e1

    Un cop corregits els exercicis, el tutor o la tutora es dirigirà a l'interessat fent-li les observacions, rectificacions i anotacions que siguin d'interès. Els aspectes d'interès general que es puguin extreure de les diferents solucions presentades es comentaran en un missatge genèric a tot l'alumnat. Pràctiques optatives Hi ha alguna de les pràctiques que no són obligatòries. Són pràctiques que l'alumne pot fer si considera que són interessants. Les hi posem perquè considerem que amplien la matèria tractada d'una manera important, però fem que no siguin obligatòries perquè el temps necessari per a completar els mòduls amb aquestes pràctiques podria fer que es sobrepassés les hores destinades al curs. 

    Aquestes pràctiques es distingeixen perquè el seu enllaç és de color verd 4 (pràctica optativa) en lloc de vermell 4. 


Tornar al principi

Estructura d'una pràctica

Totes les pràctiques tenen una mateixa estructura: (Podeu veure com a exemple la pràctica 1 del mòdul 1 on es fa palesa aquesta estructura)
 

    A dalt de la pàgina hi ha uns botons que us permetran accedir a les altres pràctiques o anar a la introducció del mòdul.
Executar el programa m*p*.exe per conèixer el seu comportament.
    Clicant aquí podreu executar el programa i conèixer el seu comportament. Vegeu Nota * més avall.


Veure el llistat del codi del programa, m*p*.

    Clicant aquí podreu veure el codi íntegre del programa.


Executar Visual Basic per editar el projecte (acabat): m*p*.vbp.

    Clicant aquí podreu obrir el projecte en l'entorn Visual Basic 6.0 per editar-lo. Vegeu Nota ** més avall.

 

Títol

    Explicació del projecte.


El formulari se semblarà finalment al següent:

    Dibuix de la finestra principal del projecte.

Creeu un subdirectori nou: C:\VBCurs\VBActivi\m*\p* que servirà per guardar tots els fitxers del projecte.

    Se us indica el directori on cal guardar els fitxers del projecte.

 

Fase de disseny de la interfície d'usuari

    Aquí creareu els objectes de la/les finestres del vostre projecte.

 

Fase de programació de respostes a events

    Aquí hi ha l'explicació de les diferents parts del programa i amb el codi complert.

 

Exercicis

    Aquí se us proposarà un o més exercicis perquè practiqueu allò que s'ha explicat. Caldrà que envieu el resultat al professor tutor.
Observeu:
    Si veieu la paraula observeu cal que feu el que se us indica, però no heu d'enviar-ho al tutor.


Per enviar al professor tutor. (Directori C:\VBCurs\VBExerci\m*\p*) Directori on cal guardar l'exercici

    Aquí trobareu l'enunciat de l'exercici.


La finestra principal del programa ha de quedar més o menys així:

    Aquí trobareu la imatge de la finestra del programa que heu de realitzar.


Cal enviar els següents fitxers: (m*p*e*, mòdul *, pràctica *, exercici *).

    Aquí teniu indicats els fitxers que heu d'enviar al professor tutor. El * indica números.
    Pot ser que hi hagi més d'un exercici.



Per obtenir informació adicional

Tema: String Subtema: String, String$ Functions
 
    Sempre que vegeu aquesta icona vol dir que podeu obtenir més informació fent servir l'ajuda que incorpora el Visual Basic.  Es bo fer notar que l'ajuda de la versió profesional de Visual Basic, es francament dolenta, ja que està barrejada amb la de Microsoft Visual Studio la qual cosa fa difícil trovar el que es cerca. A sobre demana uns CDs en cas de que no s'hagi instal.lat l'ajuda en el disc dur. Per la qual cosa recomanem, si disposeu d'ella, que feu servir l'ajuda de Visual basic 3.0 que està composada per un únic fitxer, vb.hlp, on hi ha tota l'ajuda i per a la majoria d'ocasions ens servirà i fàcilment trobarem el que cerquem. Les coses pròpies de Visual Basic 6, sobretot les que tenen que veure en l'entorn ja són explicades en el present curs, per ampliar-ho podeu fer servir l'ajuda d'aquesta versió.

Nota * Pot ser que no funcioni correctament. Cal saber que per qüestions de seguretat els navegadors no deixen, a vegades, executar programes exe. Normalment no es pot fer si estem connectats a Internet. Si estem actuant en local i segons com tinguem el navegador configurat pot funcionar. En aquest cas, l'Explorer 4 funciona correctament després de sortir els dos missatges següents:
 
 




Clicant en els botons Aceptar i Si finalment s'executa el programa.
 

Si el vostre navegador no us permet fer-ho, sapigueu que el programa es troba en el directori que indica el següent dibuix i podreu executar-lo doble-clicant damunt d'ell.
 


Si el programa és m2p4.exe el fitxer es trobarà en el directori VBCurs\VBHtml\vibam2\m2p4.

Nota ** Per la mateixa raó pot ser que si cliqueu aquí tampoc s'executi Visual Basic i carregui el fitxer projecte vbp. Perquè passi hi ha d'haver Visual Basic 6.0 correctament instal·lat en el vostre ordinador i estar l'extensió vbp correctament associada al Visual Basic. Per saber-ho cliqueu, si funciona, segurament sortirà un quadre com el següent:
 


Si tot està correcte s'obrirà el Visual Basic carregant el vostre projecte a punt per inspeccionar-lo i/o editar-lo.

Si no fos així probablement sortiria en el vostre navegador el llistat del fitxer projecte. Una imatge semblant a la següent.
 


En qualsevol cas si no funciona correctament, podeu fer la mateixa opció doble-clicant en el fitxer vbp del projecte que teniu en el directori:
 

Si el projecte és m2p4.vbp el fitxer es trobarà en el directori VBCurs\VBHtml\vibam2\m2p4.

Tornar al principi

Lliurament dels exercicis

El lliurament dels exercicis per part de l'alumnat al tutor o a la tutora es farà de la manera següent: 
  1. Envieu tots el fitxers dels exercicis adjuntats en un missatge on s'indiqui el que envieu i les observacions, preguntes o comentaris que considereu convenients. Recordeu que com a mínim cada exercici (un programa) està compost de 3 fitxers: *.vbp, *.frm, *.exe.

    2.  
  2. El lliurament dels exercicis d'un mateix mòdul es faran tots junts.


Tornar al principi

Projecte fi de curs

Una vegada acabat l'estudi dels diferents mòduls, el participant que vulgui tenir dret al certificat del curs haurà de finalitzar-lo en el mateix curs acadèmic que ha realitzat els exercicis, desenvolupant un projecte que globalitzi la utilització dels diferents recursos apresos en base a un programa desenvolupat amb Visual Basic i que sigui una aplicació didàctica directa a classe. 

El participant presentarà al seu tutor o tutora una o més propostes de projectes, de les quals es concretarà una d'elles entre ell i la Subdirecció General de Tecnologies de la Informació, que li donarà el vist-i-plau. Caldrà que el projecte sigui avaluat positivament, juntament amb els exercicis de tots i cada un dels mòduls per poder tenir dret al certificat del curs. 
 
 

    Directrius per desenvolupar el projecte de final de curs

    El projecte de final de curs és una aplicació educativa directa d'un programa. Aquí l'alumnat ha de demostrar les destreses adquirides al llarg del curs en les eines, els recursos i les estratègies presentades en el material didàctic. Això fa que el projecte sigui l'element avaluador definitiu per obtenir la certificació del curs, amb la prèvia de tenir superats tots els exercicis dels diferents mòduls. 

    El projecte constarà d'un programa més o menys complex on l'alumnat utilitzarà els coneixements, recursos, estratègies, etc. que s'han exposat en els diferents mòduls. Amb el projecte es pretén la creació d'una aplicació per fer a l'aula. L'autor/a no hauria de dedicar més de 18 hores de treball efectiu per a la seva realització. 

    El programa ha d'anar acompanyat d'un document (Manual d'usuari) on s'expliciti l'objectiu de l'aplicació, funcionament, breu explicació del procés seguit i recursos utilitzats. Aquest document haurà de ser un document Word i tindrá les següents parts: 

    • Títol
    • Autor
    • Dades professionals de l'autor (centre de treball, assignatures que imparteix...)
    • Justificació didàctica (el per què del projecte)
    • Nivell educatiu a qui va adreçat
    • Temàtica
    • Consideracions prèvies (a la part descriptiva del projecte)
    • Com està construït el programa (part descriptiva del projecte)
    • Plantejament didàctic (exemplificació de com s'utilitza el programa a l'aula) 


    Tot projecte serà prèviament formulat en proposta i adreçat al tutor o tutora del curs. El tutor estudiarà la proposta per si pot ser presentada a la reunió de coordinació de tutors. En aquesta reunió s'aprovarà el projecte, si procedeix. 

    Si a la proposta hi ha qüestions a fer o reformulació del projecte, serà el tutor qui farà saber a l'alumnat les observacions, puntualitzacions necessàries o modificacions que s'han d'introduir en la proposta per assegurar-se que la proposta de projecte sigui aprovada en el seu moment. 

    Requeriments del projecte

    1. Ha de ser una aplicació educativa directa creada amb Visual Basic. 
    2. Ha de ser inèdit i individual. 
    3. Les hores invertides en el desenvolupament del projecte han d'haver estat aproximadament les hores de treball per a 3 mòduls (és a dir, un mes i mig de treball de curs o l'equivalent a 18 hores). 
    4. El material a lliurar del projecte serà: un fitxer .exe on hi haurà el programa executable, tots els fitxers del projecte i el manual de l'usuari en format Word. 
    5. Ha d'haver estat presentat en els terminis establerts. 

     

    Elements a avaluar en el projecte

    1. Que compleixi els requeriments del projecte. 
    2. El grau de dificultat de desenvolupament de l'aplicació. 
    3. L'aplicació educativa del projecte i la seva metodologia. 
    4. Els recursos i les estratègies usats. Millora i/o depuració dels recursos i les estratègies usats en el curs. 
    5. L'escriptura del codi amb especial incidència en el sagnat del mateix. 
    6. La simplicitat del codi. La no redundància del codi. Executable petit. 
    7. L'eficiència del codi. Codi ràpid. 
    8. La presentació global del projecte (disseny) i en particular la de cada part que compon el projecte. 


Tornar al principi

Tutoria

A cada participant se li assigna un tutor o tutora qui l'assessorarà i l'orientarà en l'estudi dels diferents mòduls i a qui podrà formular, per via missatgeria, les consultes i les preguntes que calguin i també podrà demanar orientacions per al desenvolupament del Projecte de final de curs. El tutor farà una assistència personalitzada a cada participant. 

Per a consultes i comentaris sobre aspectes de qualsevol mòdul, que faci necessari aclarir conceptes o dubtes generalitzats, arrodonir exemples, fer puntualitzacions o qualsevol particularitat que demani una intervenció per part del tutor a tots els alumnes, es farà mitjançant missatges genèrics a tot el grup d'alumnes assignats al mateix tutor. 

Tornar al principi


Calendari del curs

Vegeu calendari de l'activitat.


Tornar al principi

Índex del curs. Programació

1. ENTORN VISUAL BASIC. OBJECTES DEL VISUAL BASIC
    1.1 El primer contacte en Visual Basic
    1.2 Imatges. Un paisatge i tres cares
    1.3 Petita aplicació de sumar
    1.4 Cronòmetre


2. ENTORN VISUAL BASIC. ELEMENTS DEL LLENGUATGE BASIC

    2.1 Estructures de Control. Taules d'operacions aritmètiques: suma i multiplicació
    2.2 Do..Loop. Gestió d'una llista
    2.3 Sentències Basic. Rellotge
    2.4 Moviment


3. ARRAYS

    3.1 Arrays (matrius)
    3.2 Els vectors
    3.3 Escollir un color. Vectors d'objectes
    3.4 Un dau
    3.5 Quadrats màgics


4. APLICACIÓ COMPLETA. GESTIÓ DE MENÚS. LA CARPETA...

    4.1 Editor de textos


5. BASES DE DADES

    5.1 Preguntes i respostes utilitzant una matriu
    5.2 Preguntes i respostes utilitzant un fitxer
    5.3 Treball amb bases de dades Acces
    5.4 Creació d'una base de dades d'alumnes amb un fitxer d'accés aleatori


6. DIBUIXAR DIRECTAMENT

    6.1 Elements de dibuix
    6.2 Eixos de coordenades
    6.3 Dibuix fractal
    6.4 Dibuix de línies
    6.5.a Dibuix d'una paràbola a punts
    6.5.b Dibuix d'una paràbola a línies
    6.6 Una petita animació, una funció i una pilota
    6.7 Imprimir un dibuix de la pantalla
    6.8 Imprimir un gràfic de barres


7. DESENVOLUPAMENT D'UNA APLICACIÓ DIDÀCTICA:

Pràctiques d'òptica geomètrica
    7.1 Simulació d'una lent convergent. Com dibuixar? Fotografia.
    7.2 Com respondre al ratolí? Fem que la simulació sigui interactiva
    7.3 Com creem i gestionem un menú. Afegim-hi una trama i...
    7.4 Com creem i gestionem un menú. Afegim-hi una simulació d'una lent divergent
    7.5 Quadres de diàleg. Gestió d'un quadre de diàleg modal. Ajuda. Introducció a les DLL.


Tornar al principi

Bibliografia

P. Alcon, M.A. Almarza, J. Garcia. Informàtica educativa Programació d'aplicacions educatives amb Visual Basic (Materials de formació) PIE 2a edició: 1997

Microsoft (1993) Language Reference. Microsoft Visual BASIC. Programing System for WindowsTM Versión 3.0.
 

MICHAEL HALVORSON (1997) Aprenda MicrosoftR Visual Basic R 5 Ya. McGraw-Hill.
 
 

Software

Visual Basic 3.0 (C) Microsoft.

Visual Basic 5.0 Edición de aprendizaje(C) Microsoft.

Visual Basic 6.0 (C) Microsoft.

Per a l'edició del material en html:

    Word 97 (C) Microsoft.
    Matrakes (C) Jordi Lagares Roset.


Tornar al principi

Introducció a la fase de disseny de la interfície d'usuari

Anem a fer una petita explicació de com es crea l'aspecte que tindrà el nostre programa, el que anomenem fase de disseny de la interfície d'usuari. Ho il·lustrarem amb molts dibuixos. Aquesta fase no té massa a veure amb la programació tradicional i és com de manualitats i és important que la gent la sàpiga fer per continuar amb la resta. La forma de treballar és molt semblant al programa de dibuix Paint que ve incorporat en el Windows.

El que farem és el programa clàssic d'introducció a la programació Hello World, que en Basic tradicional seria:

    PRINT "Hello World"
Si executem Visual Basic veurem el següent.
 


La Finestra de formulari és la finestra del nostre programa, tal com la creem ara serà com la veurem quan el nostre programa s'executi sol. Això no és del tot cert perquè es pot modificar l'aspecte de la finestra en temps d'execució.

En primer lloc donarem a la finestra form1 la grandària. Ho farem de la forma normal que es fa en Windows per canviar la grandària d'una finestra, clicant i arrossegant l'extrem dret inferior. El podem fer més petit:
 


Posarem el missatge en una etiqueta (label). Per fer-ho caldrà que cliquem en la finestra Caixa d'eines en la icona assenyalada per la rodona vermella.
 


A continuació cliquem, sense aixecar el botó, damunt del formulari en el lloc on vulguem que aparegui el missatge i arrosseguem la rata fins a donar-li la grandària que calgui.
 


Ara farem que surti el missatge, per això clicarem a la finestra Finestra de propietats (properties) en el lloc que posa Caption i hi escriurem el missatge, Hola món.
 


I la finestra del nostre programa tindrà el següent aspecte:
 


Com que no es veu gaire farem que el missatge sigui més gran i d'un altre color. Per fer-ho haurem de canviar altres propietats en la finestra Finestra de propietats (Font).
 


Canviarem la Font, per exemple, Arial i la grandària donant-li el valor 36.
 


I també canviarem la propietat ForeColor que determina el color del text. Per fer-ho cliquem damunt la propietat i després damunt del botó encerclat.
 


Si ho feu apareixerà el següent quadre:
 


Un cop fet això el nostre formulari tindrà el següent aspecte:
 


I si volem veure com funciona el nostre programa només cal prèmer la tecla F5, o prèmer a , o bé,
 


i apareixerà el nostre primer programa Windows amb aquest aspecte:
 


Per parar-lo i tornar a l'entorn de Visual Basic cliquem en el botó  o bé les tecles Alt+F4.

Finalment si volem desar el projecte anem a l'opció del menú:
 


I ens sortirà el següent quadre, que veiem podrem escriure el nom del fitxer on es guarda el nostre formulari i la programació en cas que n'haguéssim fet.
 


Per defecte l'extensió és frm. Recomanació: no la canvieu mai.

Un cop s'ha desat el fitxer formulari tornarà a sortir un quadre molt semblant per desar el fitxer projecte.
 


Per defecte l'extensió és vbp (Visual Basic Project). Recomanació: no la canvieu mai.

O sigui que un projecte quan es desa com a mínim està compost de dos fitxers: el projecte amb extensió vbp i el formulari amb extensió frm. Es podria pensar que perquè dos fitxers, un projecte pot estar compost de més d'un formulari i també d'altres fitxers on hi pot haver codi de programa.

El fitxer projecte bàsicament conté el nom dels fitxers que componen tot el projecte que com a mínim ha de tenir un fitxer formulari.

Finalment per abandonar el programa podem anar a l'opció del menú que ho fa: Exit.

Nota: En la primera pràctica del mòdul 1 tornarem a veure aquest procés, encara que no tan detallat.

Tornar al principi