Interfaces gráficas

39
Interfac es Gráficas Barbosa Castellanos Karla Alejandra. Cruz Arevalo Luz Aurora. Martínez Guillen Javier Antonio. Navarro Del Ángel Alejandra Paolet.

Transcript of Interfaces gráficas

Page 1: Interfaces gráficas

Interfaces

Gráficas• Barbosa Castellanos Karla Alejandra.

• Cruz Arevalo Luz Aurora.• Martínez Guillen Javier Antonio.

• Navarro Del Ángel Alejandra Paolet.

Page 2: Interfaces gráficas

Interfaces Gráficas:La interfaz gráfica de usuario, conocida también como GUI (del inglés graphical user interface), es un programa informático que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Consiste en proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de una maquina o computadora, las acciones mediante manipulación directa.

Page 3: Interfaces gráficas

En las interfaces de usuario se pueden distinguir 3 tipos :

Interfaz de Hardware:

• A nivel de los dispositivos utilizados para ingresar, procesar y entregar los datos: teclado, mouse y pantalla visualizador.

Interfaz de Software:

• Destinada a entregar información acerca de los procesos y herramientas de control, a través de lo que el usuario observa habitualmente en la pantalla.

Interfaz de Software-Hardware:

• Establece un puente entre la maquina y las personas, permite a la maquina entender la instrucción y al hombre entender el código binario traducido a información legible.

Page 4: Interfaces gráficas

Según la forma de interactuar con el usuario:

INTERFAZ DE LÍNEA DE COMANDOS (COMMAND-LINE INTERFACE, CLI):

INTERFACES GRÁFICAS DE USUARIO (GRAPHIC USER INTERFACE, GUI):

INTERFAZ NATURAL DE USUARIO (NATURAL USER INTERFACE, NUI):

• Interfaces alfanuméricas (interpretes de comandos) que solo presentan texto.

• Permiten comunicarse con la computadora de forma rápida e intuitiva representado gráficamente los elementos de control y medida.

• Pueden ser táctiles, representando gráficamente un “panel de control”, en una pantalla sensible al tacto que permite interactuar con el dedo de forma similar a si se accionara un control físico, pueden funcionar mediante reconocimiento del habla; como por ejemplo Siri; o mediante movimientos corporales , un ejemplo es Kinect.

Page 5: Interfaces gráficas

Se le llama escritorio al área en la que se ubican

los iconos de uso más frecuente y donde se

despliegan las aplicaciones en el momento en que se

ejecutan.

1. Elementos del escritorio de Windows.

Page 6: Interfaces gráficas

1. ELEMENTOS DEL ESCRITORIO DE WINDOWS:

Aquí se encuentran la barra de tareas y el botón inicio; estos 2 elementos cumplen una función muy importante en Windows.

12

3

4

Page 7: Interfaces gráficas

Descripción del escritorio de Windows:

1. BOTÓN DE INICIO: el botón de inicio da acceso al menú

principal de Windows, donde se encuentra entre otras, la opción

programas, esta permite ejecutar cualquiera de las

aplicaciones instaladas en la computadora.

2. BARRA DE TAREAS: es una franja, horizontal que se encuentra en el

escritorio, esta contiene al botón de inicio, algunos iconos de dispositivos, el reloj (la hora), además que también

contiene los nombres de las aplicaciones que tengas abiertas, y en

algunas ocaciones pueden estar los iconos de acceso directo a diversas

aplicaciones como Internet Explorer, Outlook, y al propio escritorio.

Page 8: Interfaces gráficas

3.ICONOS: son representaciones gráficas, de los objetos de Windows, estos contienen rótulos que los identifican, a su vez dan

acceso a ciertos programas y componentes de la computadora. Un icono se abre con doble clic, entonces se despliega una

ventana que contiene los elementos necesarios del elemento al que esta asociado el icono. Existen diferentes tipos de iconos, los

de programas y los de documentos.

• Los iconos de programas: representan un archivo que se ejecutará, es decir de una aplicación.

• Un icono de documento: representa a un archivo de datos creado por una determinada aplicación.

Page 9: Interfaces gráficas

A través del menú principal puedes acceder a todas las opciones de Windows. Para desplegarlo selecciona el botón Inicio que se encuentra en el extremo izquierdo de la barra de tareas.El Menú Principal se compone de un conjunto de submenús (Programas, Favoritos, Documentos, Configuración y Buscar, por ejemplo) y otras opciones (Ayuda, Ejecutar, Cerrar sesión, Apagar, como las más comunes).

5.MENU PRINCIPAL:

Page 10: Interfaces gráficas

2. ELEMENTOS DE LA BARRA DE TAREAS:

1. VENTANAS: Las ventanas son estructuras gráficas cuadrangulares previstas de eventos y propiedades, en las cuales se llevan a cabo las operaciones y funciones de las aplicaciones. La mayoría de los programas o aplicaciones de Windows tienen la misma estructura de ventana.

2. BANDEJA: Zona situada en la Barra de tareas de Windows (habitualmente en la parte inferior derecha de la pantalla y junto al reloj del sistema), que muestra diversos iconos para configurar opciones del sistema, visualizar el estado de la protección antivirus, etc. En inglés se conoce como System Tray

3. BOTÓN DE INICIO: Su función es dar acceso tanto a las utilidades propias de Windows (ayuda, búsqueda de ficheros, configuración...) como a los programas y aplicaciones que tengamos instalados en nuestra estación.

23 1

Page 11: Interfaces gráficas

3. ELEMENTOS DEL MENÚ INICIO:

1

234

5

Page 12: Interfaces gráficas

1.TODOS LOS

PROGRAMAS:Este botón muestra

las demás aplicaciones con las que cuenta nuestro

dispositivo y muestra lo siguiente:

Page 13: Interfaces gráficas

.

DOCUMENTOSEs el que nos manda a todos las carpetas y

componentes guardados en la pc como se muestra  a

continuación

Page 14: Interfaces gráficas

.PANEL DE CONTROL:

Este botón nos ayuda a abrir las

configuraciones del equipo, donde se

muestran las siguientes

configuraciones:

Page 15: Interfaces gráficas

INICIO/APAGADO

:

Suspender: La suspensión o modo sueño es un estado a medio camino entre el apagado y el

encendido, una suerte de sonambulismo informático. Cuando ordenas la suspensión, el PC se queda listo para seguir trabajando en cualquier

momento.Apagar: El apagado no solo cierra todos los

programas y ventanas, sino que también envía la señal de apagado al equipo: el PC ya no consume

energía y deja de responder. Apagar es útil cuando no vas a usar el PC durante un largo periodo de

tiempo.Reiniciar: El reinicio envía una señal de apagado

seguida por otra de inicio, así que los componentes no se apagan del todo. Es como el retorno de carro de una máquina de escribir: no quitas la hoja, sino

que haces sitio para seguir trabajando.

ALGUNAS DE LAS DESCRIPCIONES MÁS IMPORTANTES SON:

Page 16: Interfaces gráficas

CARPETA EN EL MENÚ DE INICIO:

Son las carpetas que se encuentran en la

Pc, están acomodadas por

orden alfabético, en ellas se guardan

archivos.

Page 17: Interfaces gráficas

4.ELEMENTOS DEL EXPLORADOR DE ARCHIVOS:

• El Explorador es una herramienta indispensable en un Sistema Operativo ya que con ella podemos organizar y controlar los archivos y carpetas de los distintos sistemas de almacenamiento que dispongamos, como puede ser el disco duro, la unidad de CD, la unidad de DVD, la memoria USB, etc.

Page 18: Interfaces gráficas

BARRA DE MENÚS:

• La barra de menús contiene todas las opciones disponibles, agrupadas en menús desplegables. Al hacer clic en Archivo, por

ejemplo, veremos las operaciones que podemos realizar con los archivos.

Page 19: Interfaces gráficas

BOTON ATRAS Y ADELANTE:• Permiten navegar hacia atrás

(a la carpeta de la que venimos) y hacia adelante (si hemos usado el botón atrás). También podemos utilizar la tecla de borrar situada arriba de ENTRAR para ir atrás.

Page 20: Interfaces gráficas

BARRA DE DIRECCIONES:

Esta barra nos indica dónde estamos situados y qué otras carpetas están en el mismo nivel jerárquico.

Page 21: Interfaces gráficas

PANEL DE NAVEGACIÓN:En este panel sólo aparecen unidades y carpetas, no archivos. Las vemos ordenadas jerárquicamente y distinguimos qué carpeta pertenece a qué otra gracias a una leve tabulación a la derecha. Es decir, tiene estructura de árbol, con sus ramificaciones. Por ejemplo, en esta imagen aparecen cuatro carpetas principales que contienen a su vez otras carpetas:Bibliotecas: Contiene Documentos, Imágenes, Música y Vídeos. Además, estamos situados en imágenes, que contiene Mis Imágenes e Imágenes públicas. Pero no aparece Logo aula Clic dentro de Imágenes, porque es un archivo.Equipo.EscritorioTambién observamos unas pequeñas flechas junto al nombre de cada carpeta. Estas flechas permiten, mediante un clic sobre ellas, desplegar o contraer una carpeta, es decir, mostrar u ocultar sus subcarpetas sin tener que ir abriéndolasetc...

Page 22: Interfaces gráficas

5.ELEMENTOS QUE CONFORMAN LAS

VENTANAS DE WINDOWSBarra de títulos Barra de menu

Muestra el nombre del documento y del

programa (o el nombre de la carpeta si se esta trabajando en una)

Contiene elementos en los que puede hacer clic para realizar selecciones

en un programa

(title bar) Menú bar

Page 23: Interfaces gráficas

Barra de herramientas

(tools bar)Nos sirve para tener acceso rápido

a las opciones en un programa.

Barra de estado:Proporciona información

adicional sobre el documento que está

creando.

Page 24: Interfaces gráficas

Barras de desplazamiento horizontal y vertical (slide

bar).

Le permite desplazar el

contenido de la ventana para visualizar la

información que en un momento no se encuentra visible.

Page 25: Interfaces gráficas

BOTON MINIMIZAR

Es utilizado para reducir la pantalla a su mínima expresión,

sin cerrar la aplicación.

BOTON RESTAURAR

Utilizado para retornar a la visualización de la pantalla tal como la teníamos al inicio. Este se utilizará en caso hemos disminuido en algún momento la pantalla y deseamos tener la pantalla completa como estaba al inicio

Page 26: Interfaces gráficas

BOTON CERRAR

REGLAUtilizado para cerrar un documento o

bien toda la aplicación

Se utilizan para alinear los textos, gráficos,

tablas y otros elementos en un documento

Page 27: Interfaces gráficas

CURSOR

Símbolo que indica la posición en que nos encontramos en un texto editable. Generalmente el

cursor se simboliza como una barra vertical I que parpadea.

Page 28: Interfaces gráficas

6.ELEMENTOS QUE

CONFORMAN UN ICONO

• Debe ser los más sencillo posible, con los suficientes detalles como para expresar lo

que debe, pero no más. Los iconos enrevesados, complejos y con muchos

trazos tan solo crean confusión.• Debe seguir los modelos ya aceptados por

el público tipo que los va a visualizar. Existen iconos característicos dentro de una comunidad o país, así como otros asumidos a nivel mundial. Salirse de este modelo ya aceptado hace perder la claridad al icono,

condenándolo al fracaso.• Debe estar perfectamente concebido para

la información concreta que va a representar. Pequeñas diferencias en el

diseño de un icono pueden crear grandes diferencias de cara al espectador.

Los iconos son elementos gráficos pequeños que se asocian con una aplicación que se ejecutará si

se hace doble clic en ellos.

Page 29: Interfaces gráficas

En el diseño de interfaces informáticas, los iconos se emplean para dos cometidos principales: • En la interfaz de los programas,

identifican las carpetas, aplicaciones, archivos, menús o herramientas. Son los habituales iconos del escritorio o de los programas en Windows o en Mac.

La creación de iconos es un proceso complicado, no porque precisen un gran trabajo de desarrollo, sino porque es muy difícil diseñar una figura sencilla que exprese un mensaje dado de forma clara. 

Page 30: Interfaces gráficas

En un sistema operativo, marco de gestión de contenidos u

otro programa, la papelera de reciclaje es un área de

almacenamiento donde se guardan archivos y carpetas previas a su

eliminación definitiva de un medio de almacenamiento.

7. ELEMENTOS DE LA PAPELERA DE RECICLAJE

Page 31: Interfaces gráficas

Si tratamos de recuperar un elemento eliminado que se encuentre en la papelera de reciclaje por defecto volverá a su ubicación original. Es decir si eliminamos un archivo situado en la carpeta Documentos cuando lo restauremos lo volverá a guardar en esa carpeta.

El icono de la papelera es descriptivo. Si no contiene elementos eliminados, el dibujo es una papelera vacía, si en cambio contiene algún elemento, se mostrará con papeles en su interior.

Page 32: Interfaces gráficas

Para borrar los elementos de la papelera de reciclaje, podemos dar clic donde dice vaciar la papelera de reciclaje y aparecerá un mensaje, damos clic en si, y se eliminaran todos los elementos que están en la papelera de reciclaje.

Page 33: Interfaces gráficas

Si quieres restaurar los elementos que tienes en la papelera de reciclaje, das clic en donde dice “Restaurar este elemento”, y se guardara en la carpeta que estaba antes de ser borrado, y se restaurara en su forma original.

Page 34: Interfaces gráficas

8. ELEMENTOS DEL EXPLORADOR, EXPLORER, O FIREFOX O CHROME.

Page 35: Interfaces gráficas

CÓMO VOLVER A VISITAR PÁGINAS WEB DE LA SESIÓN DE NAVEGACIÓNUtiliza las flechas para acceder a las páginas web que acabas de visitar en la pestaña. Haz clic en una flecha y mantenla pulsada para ver el historial de tu sesión de navegación.

Page 36: Interfaces gráficas

CÓMO VOLVER A CARGAR LA PÁGINA

Por lo general, se vuelve a cargar la pagina cuando se aparece un error.• En la parte superior izquierda

sale un icono, de cargar, a ese se le da clic y la pagina se vuelve a cargar.

Page 37: Interfaces gráficas

NUEVAS Y ÚTILES PESTAÑAS:Haz clic en este botón para abrir una pestaña nueva. La página Nueva pestaña está diseñada para ayudarte a acceder al sitio que desees visitar tan rápido como sea posible.

Page 38: Interfaces gráficas

PÁGINAS FVORITAS GUARDADAS:

• En la barra de Chrome sale lo que es el dibujo de una estrella, en esa estrella están guardadas las páginas que tu has guardado como tus favoritas.

• También aparece lo que es como una lupa con el signo menos (-), en ese elemento es para ponerle zoom o quitarle zoom.

Page 39: Interfaces gráficas

PERSONALIZA Y CONTROLA CHROME:

• Aquí muestra varias opciones, por ejemplo:1. HISTORIAL: dando clic en esa parte, te muestra todo el

historial de lo que has hecho en Chrome.2. DESCARGAS: te muestra las descargas que has hecho por

medio de Chrome.3. IMPRIMIR: por ejemplo si estas en una pagina y le das imprimir, te mandara a lo que es el acceso de la impresora, y

te mostrara lo que es la pagina que tu querrás imprimir.4. SALIR: al momento de dar clic en salir, se sale

automáticamente de Chrome, es como si le dieras clic en la X que te sale en la parte superior derecha de Chrome.