Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011

Curso Diseo de Interfaces de Usuario Web para aplicaciones RIA mediante Dojo y Maqetta.
Maqetta
ISC Diciembre 2011 Paulo Clavijo Esteban

clavijo_pau@ingenieriadesoftware.com 1
Agenda
Introduccin a Dojo y Maqetta. Diseando una primera interfaz de usuario. Widgets: Contenedores y Controladores. Diseo de formularios. Interactividad mediante "Estados de Aplicacin". Edicin de temas y estilos. Exportando a los desarrolladores. Principios de diseo y usabilidad. Herramientas depuracin Web: Firebug. Comunicacin con el servidor via Json-RESTful.
Paulo Clavijo Esteban

clavijo_pau@ingenieriadesoftware.com
ISC - 2011
Objetivo Principal
ISC - 2011
Qu es Dojo?
Dojo es un framework que contiene APIs y widgets (controles) para facilitar el desarrollo de aplicaciones Web modernas.
ISC - 2011
Caractersticas 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 rpido de interfaces de usuario complejas. Mltiples implementaciones para Acceso a Datos, incluido Json-Rest.
ISC - 2011
Arquitectura Dojo
Como caja de herramientas, la arquitectura de Dojo Toolkit consta de una serie de componentes principales. Dojo Base Dojo Core Dijit (Dojo Widget) DojoX Util
ISC - 2011
Cargando Dojo
Importar tema y estilos CSS. Cargar la librera JavaScript dojo.js (Dojo Core). Incluir otros mdulos a utilizar.
<!DOCTYPEhtml> <html> <head> <style> @import"themes/claro/claro.css"; @import"lib/dojo/dojo/resources/dojo.css"; </style> <scripttype="text/javascript"src="lib/dojo/dojo/dojo.js"></script> <scripttype="text/javascript"> dojo.require('dijit.layout.ContentPane'); </script> </head> <bodyclass="claro"> </body> </html>
ISC - 2011
Qu es Maqetta?
Editor visual de interfaces de usuario HTML5 basadas en Dojo.
ISC - 2011
Caractersticas principales de Maqetta (1/2)

Editor WYSIWYG para la elaboracin de interfaces de usuario. Permite el diseo para dispositivos de escritorio o mviles Edicin simultnea desde el punto de vista del diseo o del cdigo. Integracin completa de CSS, incluye un analizador/modelador de CSS muy completo. Interactividad en los prototipos mediante estados de aplicacin. Editor de temas para personalizar el estilo visual con una coleccin de widgets. Opciones de exportacin a herramientas de desarrollo como Eclipse.
ISC - 2011
Caractersticas principales de Maqetta (2/2)

Permite revisar y comentar el proyecto va Web. El autor pueda presentar una maqueta del interfaz de usuario en vivo para su revisin por parte de los miembros de su equipo. Wireframing caracterstica que permite a los diseadores de interfaces de usuario crear propuestas de diseo con el aspecto de dibujo a mano. El cdigo de Maqetta tiene una arquitectura independiente del conjunto de herramientas, lo que permite conectar bibliotecas, cualquier tipo de widget y temas CSS.
ISC - 2011
10
Diseando una primera interfaz de usuario.

Ejemplo 1 Pantalla Acceso Usuarios.
ISC - 2011
11
Widgets (1/2)
Los widgets de Dojo son componentes preempaquetados de cdigo JavaScript, HTML y CSS que pueden ser usados para enriquecer aplicaciones web.
Contenedores y layouts. Mens, pestaas y tooltips. Tablas ordenables, grficos dinmicos y dibujado de vectores 2D. Efectos de animacin y la posibilidad de crear animaciones personalizables. Soporte para arrastrar y soltar. Formularios y rutinas de validacin para los parmetros. Calendario, selector de tiempo y reloj. Editor online de texto enriquecido.
ISC - 2011
12
Widgets (2/2)
Dojo Containers Dojo Controls
ISC - 2011
13
BorderContainer
Es un Widget contenedor que permite una divisin en regiones.
<divdojoType=dijit.layout.BorderContainer> <divdojoType="dijit.layout.ContentPane"region="top"></div> <divdojoType="dijit.layout.ContentPane"region="bottom"></div> <divdojoType="dijit.layout.ContentPane"region="left"></div> <divdojoType="dijit.layout.ContentPane"region="right"></div> <divdojoType="dijit.layout.ContentPane"region="center"></div> </div>
ISC - 2011
14
AccordionContainer
Es un Widget contenedor que permite una distribucin en acorden, permitiendo ver un solo panel al mismo tiempo.
<spandojoType="dijit.layout.AccordionContainer"> <divdojoType="dijit.layout.ContentPane"title="Panel1"> <divdojoType="dijit.layout.ContentPane"title="Panel2"> <divdojoType="dijit.layout.ContentPane"title="Panel3"> </span>
ISC - 2011
15
TabContainer
Es un Widget contenedor que permite una distribucin en pestaas, permitiendo ver un solo panel al mismo tiempo.
<spandojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController"> <divdojoType="dijit.layout.ContentPane"title="Resultados"></div> <divdojoType="dijit.layout.ContentPane"title="Clasificacion"></div> </span>
ISC - 2011
16
Controles Bsicos
TextBox TextArea DateTextBox ComboBox Button RadioButton CheckBox

ISC - 2011
17
Controles Avanzados
Menu DataGrid Dialog ColorPalette ComboButton FilteringSelect MultiSelect Tree ContextMenu ...
ISC - 2011
18
Diseo de formularios
Ejemplo Formulario 1.
ISC - 2011
19
Menu
El Widget dijit.Menu se utiliza en tres tipos de mens:
Mens desplegables. Mens contextuales. Mens estticos. (Ej: Menu de navegacin en un lateral.)
<spandojoType="dijit.MenuBar"> <spandojoType="dijit.PopupMenuBarItem"label="Archivo"> <spandojoType="dijit.Menu"> <spandojoType="dijit.MenuItem"label="Nuevo"></span> <spandojoType="dijit.MenuItem"label="Abrir"></span> </span> </span> </span>
ISC - 2011
20
DataGrid
Es un Widget controlador que representa los elementos de un datasource en una tabla.
ISC - 2011
21
Ejemplo Aplicacin
22
Interactividad mediante "Estados de Aplicacin" (1/2)

Maquetta incorpora un mecanismo para la organizacin de un prototipo de interfaz de usuario en una serie de estados de aplicacin (pantallas o tambin conocido como grupos especiales) que permite un diseo de interfaz de usuario, para definir la interactividad, sin necesidad de programacin.
ISC - 2011
23
Interactividad mediante "Estados de Aplicacin (2/2)
Ejemplo Administrador Tareas
ISC - 2011
24
Edicin de temas y estilos

Maqetta permite crear temas personalizados de forma muy sencilla, a partir de los temas existentes de Dojo.
ISC - 2011
25
Exportando a los desarrolladores

Los proyectos realizados en Maquetta pueden ser exportados en formato .zip con la utilidad Download Entire Workspace. Tambin podemos acceder directamente al proyecto con el explorador de archivos, accediendo a la ruta: maquetta_home/users/nombre_proyecto Los proyectos pueden configurase para que utilicen otras versiones de Dojo, o para cambiar la ubicacin de estas.
ISC - 2011
26
Herramientas depuracin Web: Firebug

Extensin de Firefox para desarrolladores Web. Permite analizar todos los elementos (HTML, CSS, Scripts, Dom, Red, Consola).
ISC - 2011
27
Documentacin
Referencia
Maqetta - Documentacion Dojo Toolkit Documentacin de referencia Dojo Toolkit API Dojo Toolkit - Tutoriales
Libros
ISC - 2011
28

Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011

Transféré par

Droits d'auteur :

Formats disponibles

Curso Diseo de Interfaces de Usuario Web para aplicaciones RIA mediante Dojo y Maqetta.

ISC Diciembre 2011 Paulo Clavijo Esteban

Paulo Clavijo Esteban

Caractersticas principales de Dojo

Caractersticas principales de Maqetta (1/2)

Caractersticas principales de Maqetta (2/2)

Diseando una primera interfaz de usuario.

<spandojoType="dijit.layout.AccordionContainer"> <divdojoType="dijit.layout.ContentPane"title="Panel1"> <divdojoType="dijit.layout.ContentPane"title="Panel2"> <divdojoType="dijit.layout.ContentPane"title="Panel3"> </span>

<spandojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController"> <divdojoType="dijit.layout.ContentPane"title="Resultados"></div> <divdojoType="dijit.layout.ContentPane"title="Clasificacion"></div> </span>

TextBox TextArea DateTextBox ComboBox Button RadioButton CheckBox

Paulo Clavijo Esteban

<spandojoType="dijit.MenuBar"> <spandojoType="dijit.PopupMenuBarItem"label="Archivo"> <spandojoType="dijit.Menu"> <spandojoType="dijit.MenuItem"label="Nuevo"></span> <spandojoType="dijit.MenuItem"label="Abrir"></span> </span> </span> </span>

Interactividad mediante "Estados de Aplicacin" (1/2)

Interactividad mediante "Estados de Aplicacin (2/2)

Ejemplo Administrador Tareas

Edicin de temas y estilos

Exportando a los desarrolladores

Herramientas depuracin Web: Firebug

Vous aimerez peut-être aussi