programacion visual - tema 2 - introduccion a la programacion visual
TRANSCRIPT
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
1/28
Programacin VisualInterfaces grficas de usuario(GUI)
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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?
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
15/28
Cmo utili*ar el +"lorador de soluciones
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
18/28
Cuadro de /erramientas
!ontroles para
crear el interfa"
de usuario
!ontroles para
crear el interfa"
de usuario
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
19/28
ise!ador de 0indo1s 2orms
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
20/28
ditor de cdigo
Lista de nombresde clases
Lista de nombresde clases
Lista de nombresde m+todos
Lista de nombresde m+todos
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
21/28
Ventana Pro"iedades
Esta#lecer
propiedades como
tamao, t$tulo y color
Esta#lecer
propiedades como
tamao, t$tulo y color
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
23/28
%istema de a.uda en lnea*en+ de la yuda*en+ de la yuda yuda din-micayuda din-mica
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
%
&
'
(
)
*
+
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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#
-
7/25/2019 PROGRAMACION VISUAL - TEMA 2 - Introduccion a La Programacion Visual
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