Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011

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

clavijo_pau@ingenieriadesoftware.com

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

Objetivo Principal

¿Qué es Dojo?

Dojo es un framework que contiene APIs y widgets (controles) para facilitar el desarrollo de aplicaciones Web modernas.

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.

Arquitectura Dojo

Como caja de herramientas, la arquitectura de Dojo Toolkit consta de una serie de componentes principales.

Dojo BaseDojo CoreDijit (Dojo Widget)DojoXUtil

Cargando Dojo

Importar tema y estilos CSS.Cargar la librería JavaScript dojo.js (Dojo Core).Incluir otros módulos a utilizar.

<!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>

¿Qué es Maqetta?

Editor visual de interfaces de usuario HTML5 basadas en Dojo.

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.

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.

Diseñando una primera interfaz de usuario.

Ejemplo 1 – Pantalla Acceso Usuarios.

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.

Widgets (2/2)

Dojo Containers Dojo Controls

BorderContainer

Es un Widget contenedor que permite una división en regiones.

AccordionContainer

Es un Widget contenedor que permite una distribución en acordeón, permitiendo ver un solo panel al mismo tiempo.

TabContainer

Es un Widget contenedor que permite una distribución en pestañas, permitiendo ver un solo panel al mismo tiempo.

Controles Básicos

TextBoxTextAreaDateTextBoxComboBoxButtonRadioButtonCheckBox

Controles Avanzados

MenuDataGridDialogColorPaletteComboButtonFilteringSelectMultiSelectTreeContextMenu...

Diseño de formularios

Ejemplo – Formulario 1.

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.)

DataGrid

Es un Widget controlador que representa los elementos de un datasource en una tabla.

Ejemplo Aplicación

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.

Interactividad mediante "Estados de Aplicación (2/2)

Ejemplo – Administrador Tareas

Edición de temas y estilos

Maqetta permite crear temas personalizados de forma muy sencilla, a partir de los temas existentes de Dojo.

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.

Herramientas depuración Web: Firebug

Extensión de Firefox para desarrolladores Web.Permite analizar todos los elementos (HTML, CSS, Scripts, Dom, Red, Consola).

Documentación

ReferenciaMaqetta - DocumentacionDojo Toolkit – Documentación de referenciaDojo Toolkit – APIDojo Toolkit - Tutoriales

Libros

Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011

Documents

Transcript of Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011

EloquentJavaScript - The Dojo

CLASS DOJO - Educacyl Portal de Educación€¦ · Jesús Pizarro Sánchez @pizarros jesus.pizsan@educa.jcyl.es Elementos positivos CLASS-DOJO Permite administrar aula con base en

Diapositivas camilo clavijo

DOJO Conversación Telefónica entre BRUCE LEE

ESE Moreno y Clavijo

Presentacion Curso Dojo Maqetta-Paulo Clavijo 2011

Mariana clavijo

VCampus verano Basket77-Clavijo

Ruy Gonzalez de Clavijo

Construye Tu Propio Dojo

Boletin Informativo Bujinkan Taka Dojo 003

MARTHA LUCIA TORO CLAVIJO

ANÍS Verónica Contreras Eitner Luisa María Clavijo Betancur María Clara Ramírez Acosta Ximena Clavijo Cafiero.

Nombres mesas Class Dojo

Class dojo unapizcadeeducacion

Topografía Bogotá Clavijo

HACCP COMO GARANTIA DE BUENA CALIDAD MICROBIOLOGICA EN LA INDUSTRIA LACTEA. CLAVIJO - ARISPE - CLAVIJO

Kleer yoseki coding dojo

Manuel clavijo ppt(2)

Tutorial Dojo