PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual

7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual

1/28

Programacin VisualInterfaces grficas de usuario(GUI)


2/28

Las interfaces se encargan de la RELACIN FSICA y

PSICOLGICA/COGNITIVA entre la ers!na y el siste"a#

Interacci$n f%sica &teclad!' rat$n' antalla((() Interacci$n c!gniti*a &l! +,e se resenta al

,s,ari! de-e ser c!"rensi-le ara .l)

DEF Interfaz de usuario. A+,ella arte del siste"a +,e er"ite elinterca"-i! de inf!r"aci$n entre ,n ,s,ari! ,"an! y l!sc!"!nentes ard0are ! s!ft0are(

DEF Interfaz grca de usuario &Graical 1ser Interface' G1I)(2.t!d! de interacci$n ers!na3!rdenad!r a tra*.s de "et4f!ras ! de,na manipulacin directade ele"ent!s gr45c!s y/! 0idgets(

Interfaces


3/28

Ante t!d! ,sa-les(

2,lti"!dales# el ,s,ari! es caa6 de relaci!narse c!n el siste"a dedi*ersas f!r"as ara e7resar el "is"! c!ncet!(

N! intr,si*as# el ,s,ari! siente +,e c!ntr!la el siste"a(

Adatati*as# se adatan al c!nte7t! f%sic!

y sic!l$gic! del ,s,ari!(

Nat,rales(

Cmo deben ser las interfaces?


4/28

Caractersticas de las Interfaces grficas deusuario (GUIs)

Ventanas: Ventanas mltiples permiten que se despliegue

simultneamente informacin diversa en la pantalladel usuario

Iconos: !epresentan diferentes tipos de informacin" por

e#emplo arc$ivos" procesos "etc

%ens: &os comandos se seleccionan de un men en lugar de

teclearse en un lengua#e de ordenes


5/28

'puntador: ara seleccionar opciones de un men o para

indicar elementos de inters en una ventana " seutili*a un dispositivo apuntador " como el ratn

Grficos: &os elementos grficos se pueden me*clar con

te+to en el mismo despliegue


6/28

Ventajas de las GUIs

,ciles de aprender - utili*ar

ara interactuar con el sistema " los usuarioscuentan con pantallas mltiples .e puede pasarde una tarea a otra sin perder de vista lainformacin de la anterior

Interaccin rpida - acceso inmediato acualquier punto de la pantalla


7/28

Proceso de ise!o de la GUI

'nali*ar -comprender lasactividades del

usuario

roducir unprototipo de

dise/o enpapel

0valuar el dise/o conlos usuarios finales

1ise/ar elprototipo

roducir elprototipo del

dise/odinmico

0valuar el dise/o con losusuarios finales

rototipoe#ecuta2le

Implementar la interfa*del usuario final


8/28

Princi"ios de dise!o de Interfaces deusuario

,amiliaridad del usuario: Utili*ar trminos - conceptos que se toman de la

e+periencia de las personas que ms utili*an elsistema

3onsistencia:

.iempre que sea posi2le " la interfa* de2e serconsistente en el sentido de que las operacionescompara2les se activan de la misma forma


9/28

%4nima sorpresa: 0l comportamiento del sistema no de2e provocar

sorpresa a los usuarios

!ecupera2ilidad: &a interfa* de2e incluir mecanismos para permitir

a los usuarios recuperarse de los errores 0stopuede ser de dos formas: 3onfirmacin de acciones destructivas

roveer de un recurso para des$acer


10/28

Gu4a al usuario: 3uando los errores ocurren " la interfa* de2e

proveer retroalimentacin significativa -caracter4sticas de a-uda sensi2le al conte+to

1iversidad de usuarios:

&a interfa* de2e proveer caracter4sticas deinteraccin apropiada para los diferentes tipos deusuarios


11/28

!ecuperacin: 56u tan 2ien se recupera el sistema a los errores

del usuario7

'daptacin: 56u tan atado est el sistema a un solo modelo de

tra2a#o7


12/28

#u$ es Visual %tudio &'?

Visual Studio .NET

Diseo Desarrollo ImplantacinDepuracin

Herramientas de

Formularios Web

Herramientas de

Formularios WebHerramientas de

Formularios Windows

Herramientas de

Formularios Windows

Gestor de erroresGestor de errores

Mltiples

Lenguajes

Mltiples

Lenguajes

Herramientas de

Servicios Web XML

Herramientas de

Servicios Web XML Acceso a datosAcceso a datos


13/28

Cmo utili*ar la "gina de inicio

Open Project New Project

Get Started

Whats New

Online Community

Headlines

Search Online

Downloads

XM We! Ser"ices

We! Hostin#

My Pro$ile


14/28

#u$ es una "lantilla de a"licacin?

Proporciona archivos de

inicio, estructura de

proyecto y confiuracin

del entorno

Proporciona archivos de

inicio, estructura de

proyecto y confiuracin

del entorno


15/28

Cmo utili*ar el +"lorador de soluciones


16/28

+"lorar el entorno de desarrollo

Men principalMen principal

Nuevo proectoNuevo proecto

!uadro de "erramientas!uadro de "erramientas#ise$ador de Windows Forms#ise$ador de Windows Forms

%entana

&ropiedades

%entana

&ropiedades


17/28

,en-s . barras de /erramientas

Men principalMen principal

'arra de "erramientas est(ndar'arra de "erramientas est(ndar

Nuevo proectoNuevo proecto Guardar

Form)*vb

Guardar

Form)*vb

#es"acer#es"acer


18/28

Cuadro de /erramientas

!ontroles para

crear el interfa"

de usuario

!ontroles para

crear el interfa"

de usuario


19/28

ise!ador de 0indo1s 2orms


20/28

ditor de cdigo

Lista de nombresde clases

Lista de nombresde clases

Lista de nombresde m+todos

Lista de nombresde m+todos


21/28

Ventana Pro"iedades

Esta#lecer

propiedades como

tamao, t$tulo y color

Esta#lecer

propiedades como

tamao, t$tulo y color


22/28

Ventana de

proramacin

Ventana de

proramacin %#&etivo%#&etivo

'ista de tareas'ista de tareasAuda a organi,ar gestionar el trabajo de

generar la aplicaci-n

Auda a organi,ar gestionar el trabajo de

generar la aplicaci-n

(esultados(esultados Muestra mensajes de estado para variascaracter.sticas en el entorno de desarrollo

Muestra mensajes de estado para variascaracter.sticas en el entorno de desarrollo

Vista de clasesVista de clases&ermite e/aminar el c-digo tras las clases navegar por los s.mbolos de la soluci-n

&ermite e/aminar el c-digo tras las clases navegar por los s.mbolos de la soluci-n

!omandos!omandos&ermite emitir comandos o evaluar e/presionesen el entorno de desarrollo

&ermite emitir comandos o evaluar e/presionesen el entorno de desarrollo

3tras 4entanas de "rogramacin

E)aminador

de o#&etos

E)aminador

de o#&etos &ermite visuali,ar objetos sus miembros&ermite visuali,ar objetos sus miembros


23/28

%istema de a.uda en lnea*en+ de la yuda*en+ de la yuda yuda din-micayuda din-mica


24/28

l "roceso de desarrollo

!rear una especificacin de diseo!rear el interfa" de usuario

Esta#lecer las propiedades de los o#&etos delinterfa" de usuario

Escri#ir cdio para aadir funcionalidad

Pro#ar y depurar la aplicacin

enerar un archivo e&ecuta#le

!rear una aplicacin de instalacin

%

&

'

(

)

*

+


25/28

Cmo crear el interfa* de usuario

/#icar controlesen el formulario

desde el !uadro

de herramientas

/#icar controlesen el formulario

desde el !uadro

de herramientas


26/28

Cmo establecer las "ro"iedades de los controles

PropiedadesPropiedades !onfiuracin!onfiuracin0Name10Name1 Te)t#o)2Te)t#o)2

3ac4!olor3ac4!olor 3lue3lue

utosi"eutosi"e TrueTrue

Visi#leVisi#le TrueTrue

3order3order 5i)ed 6D5i)ed 6D

5ont5ont *icrosoft SanSerif, 7.8 pt*icrosoft SanSerif, 7.8 pt

Te)tTe)t Te)t#o)2Te)t#o)2


27/28

Cmo a!adir cdigo a los controles

Private Sub Button1_Click(. . .)Handles Button1.Click

'Your code goes here

End Sub

Private SubButton1_Click(. . .)HandlesButton1.Click

'Your code goes here

End Sub

En la lista Nom#re de clase, hacer clic en el control

En la lista Nom#re de m9todo, hacer clic en el evento

adir cdio entre Private Su# y End Su#


28/28

Como guardar5 ejecutar . generar la a"licacin

uardar la aplicacinuardar la aplicacin

E&ecutar la solucin en el

entorno de desarrollo

E&ecutar la solucin en el

entorno de desarrollo

enerar un archivo e&ecuta#leenerar un archivo e&ecuta#le

PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual

Documents

Transcript of PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual