PROGRAMACION AVANZADA

INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

INSTITUTO TECNOLGICO
DE PABELLN DE ARTEAGA

Departamento de Ingenieras - Academia de Mecatrnica

MANUAL DEL ALUMNO

Materia: Programacin Avanzada

Nombre del Alumno:_______________________________

Docente: Victor M. Herrera Ambriz

Pabelln de Arteaga, Ags., de , 20__

Pgina 1
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Competencias genricas a desarrollar:

Aprender tcnicas propias de la ingeniera en sistemas computacionales,

aplicndolas al desarrollo de sistemas mecatrnicos automticos, controlados
por computadora, a travs de sus interfaces electrnicas, incluyendo el
desarrollo de interfaces grficas para interaccin hombre-mquina

UNIDAD 1: Programacin Visual

Competencia especfica a desarrollar:

Dominar y aplicar las tecnologas actuales y emergentes de programacin visual

para la solucin de problemas en el mbito de la automatizacin y el control.

Temario:
1.1 Paradigma de la programacin visual

1.2 Lenguajes de programacin visual y orientada a eventos

1.3 Diseo de Interfaces visuales

1.4 Aplicaciones

Pgina 2
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Desarrollo del temario

1.1 Paradigma de la programacin visual

El concepto de programacin visual es un poco confuso ya que actualmente se le

considera programacin visual a los lenguajes de programacin textual que tienen una
interfaz grfica para poder visualizar lo que uno est desarrollando. Este concepto en
programacin visual es errneo ya que este es aquel que por medio de iconos puedes ir
creando programas sin tener un lenguaje textual atrs de l.

La programacin visual (visual programming) se refiere al desarrollo de software donde las

notaciones grficas y los componentes de software manipulables interactivamente son usados
principalmente para definir y componer programas. La programacin visual se define
comnmente como el uso de expresiones visuales (tales como grficos, animacin o iconos) en
el proceso de la programacin, pueden ser utilizadas para formar la sintaxis de los nuevos
lenguajes de programacin visuales que conducen a los nuevos paradigmas tales como
programacin por la demostracin; o pueden ser utilizadas en las presentaciones grficas del
comportamiento o de la estructura de un programa.

Lenguajes de programacin visual

La programacin visual se basa en el uso de lenguajes visuales (LVP). Un lenguaje

de programacin visual puede definirse como:

Un lenguaje de programacin que usa una representacin visual (tal como grficos, dibujos,
animaciones o iconos, parcial o completamente).

Un lenguaje visual manipula informacin visual o soporta interaccin visual, o permite

programar con expresiones visuales.

Un lenguaje visual es un conjunto de arreglos espaciales de smbolos de texto y grficos

con una interpretacin semntica que es usada para comunicar acciones en un ambiente

Los LVPs son lenguajes de programacin donde se usan tcnicas visuales para expresar
relaciones o transformaciones en la informacin. Por ejemplo, un objeto visual que representa
un proceso de adicin (suma) toma dos entradas y produce una salida. En un LVP tpico de
flujo de datos, el usuario simplemente selecciona un valor de entrada y selecciona un puerto de
entrada al objeto para establecer una relacin entre los datos y el proceso.

Pgina 3
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Clasificacin de los lenguajes visuales

Los lenguajes visuales se dividen en las siguientes categoras:

-Lenguajes puramente visuales

-Sistemas hbridos de texto y elementos visuales

-Sistema de programacin por ejemplo (Programming-by-example)

-Sistemas orientados a restricciones (Constraint-oriented systems)

-Sistemas basados en formas (entradas tipo hoja de clculo animada)

Aunque los LPVs comunican la informacin de una manera ms visual que los lenguajes
textuales tradicionales, el texto an tiene su lugar en la programacin visual.

Hay 3 reas que ilustran la superioridad del texto en algunas situaciones:

-documentacin

-asignar nombres para distinguir entre elementos de un mismo tipo

-expresar conceptos bien conocidos y compactos que son inherentemente textuales

Pgina 4
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

1.2 Lenguajes de programacin visual y orientada a eventos

Visual Basic es un lenguaje de programacin visual, tambin llamado lenguaje de 4ta.

generacin. Esto quiere decir que un gran nmero de tareas se realizan sin escribir cdigo,
simplemente con operaciones grficas realizadas con el ratn sobre la pantalla. Visual Basic es
tambin un programa basado en objetos, aunque no orientado a objetos como Visual C++. La
diferencia est en que Visual Basic utiliza objetos con propiedades y mtodos, pero carece de
los mecanismos de herencia y polimorfismo propios de los verdaderos lenguajes orientados a
objetos como Java

Pgina 5
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Sanscript es un lenguaje de flujo de datos. Fue desarrollado por Northwoods Software

como un simple lenguaje de programacin visual. Su objetivo principal es la manipulacin
de datos, adquisicin de datos y base de datos, la interaccin con otras aplicaciones y la
realizacin de intercambio dinmico de datos (DDE) funciones, por lo que proporciona un
amplio conjunto de funciones de la biblioteca para estos fines. Sanscript slo trabaja en
Windows.

Pgina 6
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Khoros es un entorno de desarrollo de software integrado para el procesamiento de la

informacin y la visualizacin. Es particularmente para crear procesado de datos,
diagramas de flujo y relaciones matemticas de rboles binarios similares a Sanscript Este
artculo presenta una visin general de Khoros con nfasis en sus herramientas de
procesamiento de imgenes.

Pgina 7
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

LabVIEW es un entorno de programacin grfica (G) que utiliza conos, terminales y cables en
lugar de texto para ayudarle a programar de la misma manera en que usted piensa. Millones
de ingenieros y cientficos utilizan LabVIEW para desarrollar aplicaciones sofisticadas de
medida y control.
Adems, la plataforma LabVIEW es escalable a travs de diferentes objetivos y sistemas
operativos. De hecho, LabVIEW ofrece una integracin incomparable por ser un lenguaje de
programacin grfico de propsito general (conocido como G), con su compilador asociado, su
enlazador, y herramientas de depuracin.

Pgina 8
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Proteus Design Suite es la nica plataforma en ofrecer la posibilidad de co-simular cdigo

para microcontroladores en bajo y alto nivel, en el contexto de simulacin mixta basada en
Spice. Con este Sistema de Modelizacin Virtual, usted puede transformar su ciclo de
diseo del producto, logrando grandes beneficios en trminos de reduccin de tiempo de
salida al mercado y costes de desarrollo.

Pgina 9
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

1.3 Diseo de Interfaces visuales

El diseo de interfaces es el proceso de disear la representacin fsica de la interfaz tal y

como los usuarios la vern en sus pantallas. El objetivo del diseo de interfaces visuales es
comunicar una funcionalidad, y sto se consigue diseando u ordenando los elementos
visuales que mejor reflejen lo que hace nuestra aplicacin y como se puede operar con ella.

Crear el look and feel de un producto no es el primer objetivo del diseo de interfaces, es un
componente ms de se trabajo. El principal objetivo es la comunicacin: comunicar para
ayudar a los usuarios a entender cmo funciona el producto.

Hay determinados elementos clave para el diseo visual. El diseo en ste caso consiste en
seleccionar las tipos apropiadas, calibrar cada elemento y despus combinarlos todos de una
manera que tenga sentido, y podamos dar una facilidad de uso para las diferentes
funcionalidades de nuestra aplicacin.

Maquetacin y posicionamiento:
La maquetacin proporciona estructura a todos los elementos de la interfaz. Tambin define
la jerarqua y por tanto las relaciones entre los diferentes elementos.

Pgina 10
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Agrupar una serie de elementos y posicionarlos ms juntos indica una relacin entre ellos
(por ejemplo etiquetas debajo de iconos ).

El posicionamiento puede mejorar tambin el flujo visual. Por ejemplo, posicionar las
etiquetas encima de los campos de texto en lugar de a la izquierda, permite al usuario una
lectura ms fcil y cmoda puesto que el recorrido de los ojos ser en vertical en lugar de
zig-zag

Pgina 11
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Forma y tamao:
La forma se puede usar para diferenciar elementos. Por ejemplo, modificando las siluetas de los
iconos para hacerlos ms fciles y rpidos de reconocer.

El tamao tambin se puede usar para indicar importancia, siendo los elementos ms grandes, los
ms significativos.

Pgina 12
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Tambin puede mejorar la usabilidad de los controles clickables ( ley de Fitts, que dice que cuanto
ms grande es un control, ms rpido se puede manejar el mouse). Hacer los controles ms
habituales de nuestra interfaz ms grandes, facilitar la tarea de los usuarios y mejorar la
eficiencia de la interfaz

Color:
El color es til para varios propsitos. Puede atraer la atencin, por ejemplo, mediante el
contraste con el color de fondo.

Pgina 13
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Puede expresar significado, por ejemplo, el rojo y el verde. Uno significa peligro o parada
mientras que otro significa xito o invitacin a proceder. De sta manera el rojo se reserva
para los mensajes de error y vice-versa.

El color tambin puede destacar relaciones, por ejemplo, estableciendo un cdigo con
botones y barras de herramientas para ayudar al usuario

Habr que tener en cuenta tambin las connotaciones culturales del color, y los tipos de
discapacidades relacionados con el color. Es decir no dejar que todo el significado de la
interfaz se transmita por los colores, porque algunas personas no lo distinguirn.

Pgina 14
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Contraste:
La tonalidad que tiene algo en relacin a los elementos que le rodean afectar a la usabilidad
de la interfaz. La clave es el contraste. Bajar el contraste de algunos elementos permitir
fundirlos con el fondo permitiendo a los usuarios diferenciar entre los ms importantes.

Contraste y diseo para enfatizar y dirigir la mirada del usuario

Se reduce el contraste para destacar el texto y facilitar la lectura

Pgina 15
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Textura:
Mediante la textura podemos comunicar funcionalidades. La utilizacin correcta de las texturas la
cualidad que comunica al usuario como algo est concebido para ser usado. Por ejemplo, utilizar
efecto de relieve para los scrolls, o esquinas cuarteadas para las ventanas que se pueden cambiar
de tamao.

El portfolio se diferencia de los premios mediante un sutil efecto de relieve

Para que los iconos no se coman visualmente a los links, stos tienen
textura de botn y relieve

Pgina 16
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

1.4 Aplicaciones

Conocimiento previo de LabVIEW

1 Panel Frontal: es donde el operador o el usuario operara el software,

toda la instrumentacin visual para el operador aparece aqu.

Descripcin de los elementos:

Indicadores
Graficas
Botones
manipuladores

Pgina 17
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

2 Diagrama de bloques: Programacion

Descripcin de los elementos:

Tabla de control. indicadores

Pgina 18
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

3 Tabla de Funciones: control e indicador

Descripcin de los elementos:

Pgina 19
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

4 Tabla de control: Funciones caracteristicas

Descripcin de los elementos:

Pgina 20
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

5 Herramientas de Mouse: __________________________________

Descripcin de los elementos:

Pgina 21
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

6 Nodos: comandos especficos de LabVIEW para programar son las funciones

Descripcin de los elementos:

- De lado izquierdo controladores

- De lado derecho indicadores.

7 Color de las seales bsicas de LabVIEW

Floating-point Integer String Boolean

Scalar 1-
D Array
2-D Array

Pgina 22
 PROGRAMACION AVANZADA
INGENIERA MECATRNICA
PROGRAMACIN M.C. Victor Manuel Herrera Ambriz
AVANZADA MANUAL DEL MAESTRO

Ejercicios de conocimiento bsico programador visual LabVIEW:

1 Funciones lgicas.

2 Suma, resta, multiplicacin y divisin.

a. Ejercicio: Funciones caractersticas.

3 Alfanumrico con condiciones lgicas

4 Vectores y matrices, Clusters.

a. Ejercicio: Seleccin de operador bsico entre vectores.

5 Estructura While

6 Estructura For
a. Ejercicio: Numero de Fibonacci
b. Ejercicio: General una lista de aprobados y reprobados, y ordenarla.

7 Estructura de casos y eventos

8 Seales y Graficas
a. Ejercicio: Ruido en seal y filtrado.

9 Procesado de imagines

Pgina 23