Seminario Gestores de Ventanas (Windows Manager) 2013

Preview:

DESCRIPTION

Dentro de la asignatura Diseño de Interfaces de Usuario, se presenta este seminario de Windows Manager, y su evolución

Citation preview

Gestores de Ventanaso Definiciones y Característicaso Tiposo Modelo de escritorio (Desktop)o Ventanas y Componentes o Guías de estilo

Diseño de Interfaces de Usuario

Seminarios

Miguel Gea (mgea@ugr.es)Dpt. Lenguajes y Sistemas InformáticossGrado en Ingeniería InformáticaUniversidad de Granadahttp://utopolis.ugr.es/diu

30 Septiembre, 2013http://www.slideshare.net/mgea/seminario-window-manager-

2013

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-2-

CASO DE ESTUDIO: Window Manager

Un sistemas de ventanas (window System) es un Interfaz de Usuario Gráfico (GUI) que usa las ventanas como metáfora de trabajo. Cada aplicación se ejecuta en una ventana.

Un gestor de ventanas (window manager), es un una aplicación (cliente) que es responsable de la apariencia general del sistema de ventanas (encargado de la decoración y disposición de las ventanas en pantalla), además de establecer el mecanismo para introducir información en las mismas.

1.1 Definiciones

Sistema de Ventanas

Sistema Operativo

Hardware

AplicaciónAplicación

Window Manager

Paquete Gráfico

Dispositivos

Cliente 1

Cliente

Window Manager

Eventos

Petición

Primitivas

Respuestas

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-3-

CASO DE ESTUDIO: Window Manager

1.2. Características

El gestor de ventanas es resposable de:o Apariencia y comportamiento de las ventanas (look & feel)o Disposición de elementos de interacción (barras, menús)o Temas (fondo, iconos, cursores, salvapantallas, etc.)o Pantallas virtuales (desktop extendido)

En algunos S.O. permiten cambiar el wm.

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-4-

CASO DE ESTUDIO: Window Manager

2. Tipos

Apple Lisa II (1983) Workbench (Amiga 1985) OS/2 (IBM, 1988) Motif (1980 X-Windows OpenLook (Sun 1990). KDE (1996, X-Windows) GNOME Mac OS (System 7-8-9, X) Windows (95, Xp, Vista) … WM para móviles..

http://www.guidebookgallery.org/

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-5-

CASO DE ESTUDIO: Window Manager

2. Tipos http://www.guidebookgallery.org/

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-6-

CASO DE ESTUDIO: Window Manager

2.1 Historia

Xerox Star1981

Windows 1.01985

Windows 2.01986

Macintosh1984

Lisa1983

XWindows1986, comercial

XWindows1984, Athena

Xerox PARCCaliforniaAlan Kay

Steve Jobs, Steve WozniakApple

MicrosoftB. Gates

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-7-

CASO DE ESTUDIO: Window Manager

2.1 Prototipos (Apple) Prototipo Julio 1979http://www.pegasus3d.com/apple_screens.html

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-8-

CASO DE ESTUDIO: Window Manager

2.1 Prototipos (Apple) Prototipo Febrero 1980http://www.pegasus3d.com/apple_screens.html

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-9-

CASO DE ESTUDIO: Window Manager

2.1 Prototipos (Apple) Prototipo Marzo 1980http://www.pegasus3d.com/apple_screens.html

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-10-

CASO DE ESTUDIO: Window Manager

2.2 MS Windows: Evoluciónhttp://www.guidebookgallery.org/

Windows 1.0 (1985)

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-11-

CASO DE ESTUDIO: Window Manager

Windows 2.0 (1987)

2.2 MS Windows: Evolución

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-12-

CASO DE ESTUDIO: Window Manager

2.2. MS Windows: Evolución

Windows 3.0 (1990)

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-13-

CASO DE ESTUDIO: Window Manager

2.2 MS Windows: Evolución

Windows 3.1 (1992) Windows 95 (1995)

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-14-

CASO DE ESTUDIO: Window Manager

2.2 MS Windows: Evolución

Windows XP (2001)

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-15-

CASO DE ESTUDIO: Window Manager

2.2 MS Windows: Evolución

Windows XP (2001)

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-16-

CASO DE ESTUDIO: Window Manager

3. Modelo escritorio http://www.guidebookgallery.org/

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch07b.asp Area de trabajo (desktop) Barras de tareas (taskbar)

Botón inicio (start button) Barra inicio rápido Tareas/ventanas activas Area notificación (hora/programas…)

Objetos papelera, reloj, iconos, acceso rápido

Acciones Mostrar desktop Minimizar/maximizar Reordenar ventanas Escritorios virtuales

KDE

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-17-

CASO DE ESTUDIO: Window Manager

4. Componentes

Ventanaso Tipos o Modelo de gestióno Operaciones básicas

Menús Controles Barras de Herramientas (toolbar)

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-18-

CASO DE ESTUDIO: Window Manager

4.1 Ventanas Proveen acceso a distinto tipo de información Tipos:

Primarias: Ofrecen acceso a los objetos de la aplicación (edición, vista, etc.) Secundarias. Diálogos auxiliares (parámetros, alertas, selección, etc.)

Estructura. Se compone de Marco (Border) que delimita su extensión, Barra de título (Title bar) del contenido:

• Icono aplicación, Nombre aplicación, Titulo documento, Botones de operaciones sobre ventana

Barras de desplazamiento (scroll bar) (si es de menor tamaño que su contenido)

Puede incluir otros componentes (menu bar, tools bar, status bar)

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-19-

CASO DE ESTUDIO: Window Manager

4.1 Ventanas

Panel Tareas más frecuentes y Detalles Ordenación

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-20-

CASO DE ESTUDIO: Window Manager

4.2 Barra de tareas (task bar)

Contenedor de elementos o Menu de inicio (start menu)o Barra de inicio rápido (quick launch)o Botones de Ventanas (agrupadas) iconificadaso Estado (reloj, idioma, etc.)

Ubicación o Ocultar automáticamenteo N/S/E/W

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-21-

CASO DE ESTUDIO: Window Manager

4.3 Ventanas - Tipología

Interfaz de documento simple (SDI Single-Document Window Interface)o Proveen acceso a distinto tipo de información

Interfas de Libro de trabajo (Workbooks)o Se ofrece una vista de libro con pestañas para seleccionar el documento

Interfaz Web (Web-Application Interface)o Ofrece mecanismos para moverse entre documentos mediante sistema de navegación al

estilo de hiperenlaces y botones Adelante y Atrás. Interfaz de Proyecto (Projects)

o similar al MDI, pero con ventana de proyecto Interfaz de documento múltiple (MDI-Multiple-Document Interface)

o Una ventana primaria actua como contenedor padre de varias ventanas hijas (cada una es un documento de trabajo).

workbook Proyecto MDI

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-22-

CASO DE ESTUDIO: Window Manager

4.3 Ventanas - Tipología

Diálogoo Ventana auxiliar para solicitar información entre usuario y aplicación

Mensajes/Alertaso Ventana de Información al usuario

Paletaso Gestión de propiedades

Emergente (Pop-Up)o Menú asociado a un objeto

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-23-

CASO DE ESTUDIO: Window Manager

4.4 Ventanas - Modelo de gestión

Mosaico (Tiling)o Ordena las ventanas abiertas en moraico regular

Cascada (Apiladas)o Se presentan todas las ventanas apiladas y ordenadas en profundidad

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-24-

CASO DE ESTUDIO: Window Manager

4.5 Ventanas - Operaciones básicas Activar / desactivar

o La ventana activa es la que está encima de todas (se representa con los bordes en color mas vivo).

o Se selecciona: Pulsando con el click del ratón en la ventana Combinación de ALT-TAB para conmutar la ventana activa

Abrir / Cerrar Iconificar / deiconificar

o Botón de minimizar de la barra de tareas

Mover o Se desplaza seleccionandola (click sobre la barra de título y arrastrando)o Cambiar el tamaño pinchando y arrastrando en los bordes. Se puede evitar

Desplazar (scrolling)o Moviendo el deslizador (scroll) que aparece en la izda.

Partir (splitting)

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-25-

CASO DE ESTUDIO: Window Manager

4.6 Sistema de Ventanas …

¿Modelo de escritorio?

Cómo organizar GB de información? De diferente naturaleza (mail, links, pdf…) Modo de presentación (alfabética/cronologica) visual/textual?

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada

-26-

CASO DE ESTUDIO: Window Manager

5. Guías de estilo

Java Look and Feel Design Guidelineshttp://java.sun.com/products/jlf/

Microsoft Official Guidelines for User Interface Developers and Designershttp://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/welcome.asp

GNOME Human Interface Guidelines http://developer.gnome.org/projects/gup/hig/

KDE User Interface Guidelines http://developer.kde.org/documentation/design/ui/

Apple Human Interface Guidelineshttp://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/