Seminario Gestores de Ventanas (Windows Manager) 2013
1. Gestores de Ventanas
o Definiciones y Características
o Tipos
o 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áticoss
Grado en Ingeniería Informática
Universidad de Granada
http://utopolis.ugr.es/diu
30 Septiembre, 2013
http://www.slideshare.net/mgea/seminario-window-manager-2013
2. Miguel Gea
Dpt. 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ón
Aplicación
Window
Manager
Paquete
Gráfico
Dispositivos
Cliente 1
Cliente
Window
Manager Eventos
Petición
Primitivas
Respuestas
3. Miguel Gea
Dpt. 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.
4. Miguel Gea
Dpt. 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/
5. Miguel Gea
Dpt. 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/
6. Miguel Gea
Dpt. 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 Star
1981
Windows 1.0
1985
Windows 2.0
1986
Macintosh
1984
Lisa
1983
XWindows
1986, comercial
XWindows
1984, Athena
Xerox PARC
California
Alan Kay
Steve Jobs,
Steve
Wozniak
Apple
Microsoft
B. Gates
7. Miguel Gea
Dpt. 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 1979
http://www.pegasus3d.com/apple_screens.html
8. Miguel Gea
Dpt. 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 1980
http://www.pegasus3d.com/apple_screens.html
9. Miguel Gea
Dpt. 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 1980
http://www.pegasus3d.com/apple_screens.html
10. Miguel Gea
Dpt. 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ón
http://www.guidebookgallery.org/
Windows 1.0 (1985)
11. Miguel Gea
Dpt. 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
12. Miguel Gea
Dpt. 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)
13. Miguel Gea
Dpt. 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)
14. Miguel Gea
Dpt. 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)
15. Miguel Gea
Dpt. 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)
16. Miguel Gea
Dpt. 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
17. Miguel Gea
Dpt. 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
Ventanas
o Tipos
o Modelo de gestión
o Operaciones básicas
Menús
Controles
Barras de Herramientas (toolbar)
18. Miguel Gea
Dpt. 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)
19. Miguel Gea
Dpt. 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
20. Miguel Gea
Dpt. 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) iconificadas
o Estado (reloj, idioma, etc.)
Ubicación
o Ocultar automáticamente
o N/S/E/W
21. Miguel Gea
Dpt. 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
22. Miguel Gea
Dpt. 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álogo
o Ventana auxiliar para solicitar información entre usuario y aplicación
Mensajes/Alertas
o Ventana de Información al usuario
Paletas
o Gestión de propiedades
Emergente (Pop-Up)
o Menú asociado a un objeto
23. Miguel Gea
Dpt. 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
24. Miguel Gea
Dpt. 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)
25. Miguel Gea
Dpt. 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?
26. Miguel Gea
Dpt. 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 Guidelines
http://java.sun.com/products/jlf/
Microsoft Official Guidelines for User Interface Developers and Designers
http://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 Guidelines
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/