presentacion curso dojo maqetta-paulo clavijo 2011
TRANSCRIPT
![Page 1: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/1.jpg)
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
![Page 2: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/2.jpg)
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
![Page 4: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/4.jpg)
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
![Page 5: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/5.jpg)
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
![Page 6: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/6.jpg)
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
![Page 7: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/7.jpg)
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>
![Page 8: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/8.jpg)
8
¿Qué es Maqetta?
Editor visual de interfaces de usuario HTML5 basadas en Dojo.
ISC - 2011Paulo Clavijo Esteban
![Page 9: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/9.jpg)
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
![Page 10: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/10.jpg)
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
![Page 11: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/11.jpg)
11
Diseñando una primera interfaz de usuario.
Ejemplo 1 – Pantalla Acceso Usuarios.
ISC - 2011Paulo Clavijo Esteban
![Page 12: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/12.jpg)
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
![Page 14: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/14.jpg)
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>
![Page 15: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/15.jpg)
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>
![Page 16: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/16.jpg)
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>
![Page 17: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/17.jpg)
17
Controles Básicos
TextBoxTextAreaDateTextBoxComboBoxButtonRadioButtonCheckBox
ISC - 2011Paulo Clavijo Esteban
![Page 18: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/18.jpg)
18
Controles Avanzados
MenuDataGridDialogColorPaletteComboButtonFilteringSelectMultiSelectTreeContextMenu...
ISC - 2011Paulo Clavijo Esteban
![Page 20: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/20.jpg)
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>
![Page 21: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/21.jpg)
21
DataGrid
Es un Widget controlador que representa los elementos de un datasource en una tabla.
ISC - 2011Paulo Clavijo Esteban
![Page 22: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/22.jpg)
22
Ejemplo Aplicación
![Page 23: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/23.jpg)
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
![Page 24: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/24.jpg)
24
Interactividad mediante "Estados de Aplicación (2/2)
Ejemplo – Administrador Tareas
ISC - 2011Paulo Clavijo Esteban
![Page 25: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/25.jpg)
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
![Page 26: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/26.jpg)
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
![Page 27: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/27.jpg)
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).
![Page 28: Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011](https://reader034.vdocumento.com/reader034/viewer/2022051322/5450599baf79590b098b4b4b/html5/thumbnails/28.jpg)
28
Documentación
ReferenciaMaqetta - DocumentacionDojo Toolkit – Documentación de referenciaDojo Toolkit – APIDojo Toolkit - Tutoriales
Libros
ISC - 2011Paulo Clavijo Esteban