Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011
28
1 Curso “Diseño de Interfaces de Usuario Web para “Diseño de Interfaces de Usuario Web para aplicaciones RIA mediante Dojo y Maqetta” aplicaciones RIA mediante Dojo y Maqetta”. ISC – Diciembre 2011 Paulo Clavijo Esteban [email protected]
Transcript of Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011
1
Curso “Diseño de Interfaces de Usuario Web para “Diseño de Interfaces de Usuario Web para aplicaciones RIA mediante Dojo y Maqetta”aplicaciones RIA mediante Dojo y Maqetta”.
ISC – Diciembre 2011Paulo Clavijo Esteban
2
Introducción a Dojo y Maqetta.Diseñando una primera interfaz de usuario.Widgets: Contenedores y Controladores.Diseño de formularios.Interactividad mediante "Estados de Aplicación".Edición de temas y estilos.Exportando a los desarrolladores.Principios de diseño y usabilidad.Herramientas depuración Web: Firebug.Comunicación con el servidor via Json-RESTful.
ISC - 2011Paulo Clavijo Esteban
Agenda
4
¿Qué es Dojo?
Dojo es un framework que contiene APIs y widgets (controles) para facilitar el desarrollo de aplicaciones Web modernas.
ISC - 2011Paulo Clavijo Esteban
5
Características principales de Dojo
Proyecto Open Source desarrollado por una comunidad de expertos.Dojo provee de un sistema de paquetes para facilitar el desarrollo modular.Multitud de componentes visuales que permiten el desarrollo rápido de interfaces de usuario complejas.Múltiples implementaciones para Acceso a Datos, incluido Json-Rest.
ISC - 2011Paulo Clavijo Esteban
6
Arquitectura Dojo
Como caja de herramientas, la arquitectura de Dojo Toolkit consta de una serie de componentes principales.
Dojo BaseDojo CoreDijit (Dojo Widget)DojoXUtil
ISC - 2011Paulo Clavijo Esteban
7
Cargando Dojo
Importar tema y estilos CSS.Cargar la librería JavaScript dojo.js (Dojo Core).Incluir otros módulos a utilizar.
ISC - 2011Paulo Clavijo Esteban
<!DOCTYPE html><html> <head> <style> @import "themes/claro/claro.css"; @import "lib/dojo/dojo/resources/dojo.css"; </style> <script type="text/javascript" src="lib/dojo/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require('dijit.layout.ContentPane'); </script> </head> <body class="claro"> </body></html>
8
¿Qué es Maqetta?
Editor visual de interfaces de usuario HTML5 basadas en Dojo.
ISC - 2011Paulo Clavijo Esteban
9
Características principales de Maqetta (1/2)
Editor WYSIWYG para la elaboración de interfaces de usuario.Permite el diseño para dispositivos de escritorio o móvilesEdición simultánea desde el punto de vista del diseño o del código.Integración completa de CSS, incluye un analizador/modelador de CSS muy completo.Interactividad en los prototipos mediante “estados de aplicación”.Editor de temas para personalizar el estilo visual con una colección de widgets.Opciones de exportación a herramientas de desarrollo como Eclipse.
ISC - 2011Paulo Clavijo Esteban
10
Características principales de Maqetta (2/2)
Permite revisar y comentar el proyecto vía Web. El autor pueda presentar una maqueta del interfaz de usuario “en vivo” para su revisión por parte de los miembros de su equipo.“Wireframing” característica que permite a los diseñadores de interfaces de usuario crear propuestas de diseño con el aspecto de dibujo a mano.El código de Maqetta tiene una arquitectura independiente del conjunto de herramientas, lo que permite conectar bibliotecas, cualquier tipo de widget y temas CSS.
ISC - 2011Paulo Clavijo Esteban
11
Diseñando una primera interfaz de usuario.
Ejemplo 1 – Pantalla Acceso Usuarios.
ISC - 2011Paulo Clavijo Esteban
12
Widgets (1/2)
Los widgets de Dojo son componentes preempaquetados de código JavaScript, HTML y CSS que pueden ser usados para enriquecer aplicaciones web.
Contenedores y layouts.Menús, pestañas y tooltips.Tablas ordenables, gráficos dinámicos y dibujado de vectores 2D.Efectos de animación y la posibilidad de crear animaciones personalizables.Soporte para arrastrar y soltar.Formularios y rutinas de validación para los parámetros.Calendario, selector de tiempo y reloj.Editor online de texto enriquecido.
ISC - 2011Paulo Clavijo Esteban
14
BorderContainer
Es un Widget contenedor que permite una división en regiones.
ISC - 2011Paulo Clavijo Esteban
<div dojoType=”dijit.layout.BorderContainer”> <div dojoType="dijit.layout.ContentPane" region="top"></div> <div dojoType="dijit.layout.ContentPane" region="bottom"></div> <div dojoType="dijit.layout.ContentPane" region="left"></div> <div dojoType="dijit.layout.ContentPane" region="right"></div> <div dojoType="dijit.layout.ContentPane" region="center"></div></div>
15
AccordionContainer
Es un Widget contenedor que permite una distribución en acordeón, permitiendo ver un solo panel al mismo tiempo.
ISC - 2011Paulo Clavijo Esteban
<span dojoType="dijit.layout.AccordionContainer"> <div dojoType="dijit.layout.ContentPane" title="Panel 1"> <div dojoType="dijit.layout.ContentPane" title="Panel 2"> <div dojoType="dijit.layout.ContentPane" title="Panel 3"></span>
16
TabContainer
Es un Widget contenedor que permite una distribución en pestañas, permitiendo ver un solo panel al mismo tiempo.
ISC - 2011Paulo Clavijo Esteban
<span dojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController"> <div dojoType="dijit.layout.ContentPane" title="Resultados"></div> <div dojoType="dijit.layout.ContentPane" title="Clasificacion"></div></span>
17
Controles Básicos
TextBoxTextAreaDateTextBoxComboBoxButtonRadioButtonCheckBox
ISC - 2011Paulo Clavijo Esteban
18
Controles Avanzados
MenuDataGridDialogColorPaletteComboButtonFilteringSelectMultiSelectTreeContextMenu...
ISC - 2011Paulo Clavijo Esteban
20
Menu
El Widget dijit.Menu se utiliza en tres tipos de menús:Menús desplegables.Menús contextuales.Menús estáticos. (Ej: Menu de navegación en un lateral.)
ISC - 2011Paulo Clavijo Esteban
<span dojoType="dijit.MenuBar"> <span dojoType="dijit.PopupMenuBarItem" label="Archivo"> <span dojoType="dijit.Menu"> <span dojoType="dijit.MenuItem" label="Nuevo"></span> <span dojoType="dijit.MenuItem" label="Abrir"></span> </span> </span></span>
21
DataGrid
Es un Widget controlador que representa los elementos de un datasource en una tabla.
ISC - 2011Paulo Clavijo Esteban
22
Ejemplo Aplicación
23
Interactividad mediante "Estados de Aplicación" (1/2)
Maquetta incorpora un mecanismo para la organización de un prototipo de interfaz de usuario en una serie de “estados de aplicación” (“pantallas” o también conocido como “grupos especiales”) que permite un diseño de interfaz de usuario, para definir la interactividad, sin necesidad de programación.
ISC - 2011Paulo Clavijo Esteban
24
Interactividad mediante "Estados de Aplicación (2/2)
Ejemplo – Administrador Tareas
ISC - 2011Paulo Clavijo Esteban
25
Edición de temas y estilos
Maqetta permite crear temas personalizados de forma muy sencilla, a partir de los temas existentes de Dojo.
ISC - 2011Paulo Clavijo Esteban
26
Exportando a los desarrolladores
Los proyectos realizados en Maquetta pueden ser exportados en formato .zip con la utilidad “Download Entire Workspace”.También podemos acceder directamente al proyecto con el explorador de archivos, accediendo a la ruta: maquetta_home/users/nombre_proyectoLos proyectos pueden configurase para que utilicen otras versiones de Dojo, o para cambiar la ubicación de estas.
ISC - 2011Paulo Clavijo Esteban
27
Herramientas depuración Web: Firebug
ISC - 2011Paulo Clavijo Esteban
Extensión de Firefox para desarrolladores Web.Permite analizar todos los elementos (HTML, CSS, Scripts, Dom, Red, Consola).
28
Documentación
ReferenciaMaqetta - DocumentacionDojo Toolkit – Documentación de referenciaDojo Toolkit – APIDojo Toolkit - Tutoriales
Libros
ISC - 2011Paulo Clavijo Esteban
