November 2009 - Artículos
El rol de los estados en las aplicaciones interactivas
Las aplicaciones interactivas se estan convirtiendo en algo muy requerido estos dias y deberia ser possible representar en un prototipo los diferentes estados posibles con sitios webs con ajax o aplicaciones silverilght. Esto es algo difícil de hacer con bocetos tradicionales como uno podría ilustrar una animación o una transición por ejemplo
SketchFlow resuelve este problema permitiendote grabar varios estados de la pantalla. Trabajaremos con un pequeño ejemplo de una ventana de chat ahora. El estado defecto es una pantalla en la cual la ventana de chat aparece invisible. El siguiente estado es en el cual la pantalla de chat aparece luego que el usuario a cilckeado un botón.
Creando una ventana de chat animado utilizando Estados
En este ejercicio, usted creará una simple animación que muestra una ventana de chat cuando el usuario clickee el boton de chat en vivo.
1 Para trabajar vamos a crear un botón en la pantalla bienvenido (del proyecto que venimos trabajando en los post anteriores), y un componente que se llame chat.
2 Clickee dos veces el component chat y dele el siguiente diseño..
3 En el Map Panel, clickee dos veces la pantalla de bienvenida para abrirla. Localice el componente de chat In the SketchFlow Map panel y arrastrelo encima de la pantalla de bienvenida.
4 Clickee y arrastre el component de chat a la parte superior del boton de chat que haya agregado.
5 Usted ve ahora el estado por defecto de la pantalla. Esto significa que necesita ocultar la pantalla inicialmente. Hará esto con Opacidad. Con el componente de chat aun seleccionado localice la opacidad y cambiela de 100 a 0%.
6 Elija Window>States panel si aún no está abierto. Luego clickee el botón New State Group y nombrelo AparicionChat.
Un State Group es una colección de estados que define la apareicion de su pantalla basandose en la interacción del usuario. Agregará ahora el primer estado.
7 Clickee el boton Add State y su estado de grabado se prenderá. ( Sean cuidadosos en este momento por que cualquier cambio que usted realice será grabado)
Tipee defecto, luego clickee el Add State nuevamente y nombre este estado AparecerChat_on
8 Regrese al panel de propiedades y cambie la opacidad a 100%..
9 En el States Panel, clickee el estado defecto y el AparecerChat_on unos minutos para cambiar la visibilidad unos segundos.
10 Presione F5 para abrir testear el proyecto y en la pantalla de bienvenida, seleccione el estado defecto,.
11 Clickee el estado AparecerChat_on y la ventana de chat aparecerá. Controlando los estados de navegacion permite que pueda tener diferentes vistas de una misma pantalla.
Trabajando con Estados de Transición
El States panel le permite controlar no simplemente las apariciones de estados sino tambien la transiciones entre ellos. Por ejemplo, si desea que la ventana de chat aparezca en forma gradual en vez de pop up, puede hacerlo fácilmente.
1 Regrese a SketchFlow y al States Panel. Localice la transicion por defecto y especificamente el valor 0 segundos.
2 Clickee adentro de este campo y tipee 1 y presione regresar. Esto habilita la transición de 1 segundo.
La transicion defecto es una propiedad global para todos los estados de transicion. Por ejemplo, cuando el chat aparezca tomara 1 segundo y cuando desaparezca tomara 1 segundo.
3 En el States panel, clickee Base en la parte superior para salir de la grabación del estado.
4 Precione F5 para testear el proyecto. Navegue a la pagina de bienvenida y clickee AparecerChat_on. La ventana de chat aparecerá en 1 segundo.
Activar estados con el Boton
A pesar de que pueda ser útil ver los diferentes estados de una pantalla utilizando el panel de navegación, habrá veces en las cuales querra replica en forma más cercana el comportamiento de usuario. Esto es ua tarea sencilla de hacer utilizando la característica de “Activate State” .
1 Regrese a SketchFlow y clickee con el boton derecho el component de chat en la pantalla de bienvenida.
2 Del menu de context que aparece seleccione Activate State y de ahi seleccione Pantalla de Bienvenida>AparecerChat_on
3 Presione F5 para testear la navegación
Un vistazo a los componentes
Los compornentes son una caracteristica de SketchFlow que permite crear objetos que pueden ser reutilizados en su proyecto SketchFlow. Son muy flexibles; por ejemplo puede incluir una barra de navegación, un formulario, una ventana de chat, etc. Cualquier objeto que es modular y que puede ser reutilizado en múltiples páginas es un candidato para ser un Componente.
Creando Conecciones
Usted puede crear una coneccion entre los components de pantalla y las pantallas de navegación. Esto te permite agregar contenidos de la pantalla de componentes a cualquier pantalla de navegación. Una clave diferencia entre un component y una pantalla de navegación es que los componentes no tienen conecciones entrantes.
1 Vamos a trabajar con el mismo proyecto que venimos hacienda hace un par de post, en la pantalla de Bienvenida abra el panel Object y el Timeline.
2 Dibuje una barra de navegación la misma debe ser un rectángulo y 4 botones con estilo Sketchflow, para dibujarlos dirijase al panel de Assets y alli busque Style>SketchStyle y alli encontratar todos los controles que puedes utilizar. Selecciona la barra de navegación que acabaste de crear con la herramienta de selección. Una vez seleccionado aprieta click derecho y Make Into Component Screen. 
3 En la pantalla resultante tipee navbar en el campo de nombre y presione OK
Ahora tiene un component independiente nombrado navbar que tiene su propia vida. En el mapa de Sketchflow note que se ha agregado un nodo de color verde y está unido a la pantalla correspondiente. 
4 Clickee y arrastre la nueva navbar a la derecha de la pantalla de productos 1 y a la pantalla de productos 2.
Modificando un componente
El verdadero poder de los components es la posibilidad de modificarlo luego de haberlo agregado en las pantallas.
1 En el Sketchflow map panel, clickee dos veces el component navbar.
2 Clickee en cualquier parte de la pantalla para asegurarse que nada está seleccionado, lego clickee el rectángulo de fondo
3 En el panel de propiedades localice el editor de color y elija el que a usted le guste.
4 En el SketchFlow Map panel, clickee dos veces la pantalla de product 2 y note que la navbar a sido acutalizada,.
Utilizando el Navigate To Command
En este post, tendran ventajas sobre el comportamiento de los components y agregar navegación común a los 4 botones que agregamos en el post anterior. El componente actualizará automáticamente todas las páginas conectadas para brindarle interacción a la aplicación,
1 Clickee dos veces el component navbar que habiamos creado, para verlo en el artboard.
2 Clickee una vez en el boton Producto 2 para seleccionarlo luego click derecho sobre el mismo y del menu resultante, elija Navigate To. Del submenú que aparece elija la opción Producto 2
3 Repita los pasos para todos los botones.
4 Para cada una de las pantallas que tenian el component navbar, ya tienen los botones habilitados.
5 Presionemos F5 para corer la aplicacion
Agregando imágenes
Lo que haremos ahora será agregar una imagen para ser utilizada como fondo de nuestra aplicación. Se puede importar imágenes en muchas formas y colocarlas en nuestra pantalla, incluyendo jpg, png, Adobe Illustrator y Photoshop.
1. Clickee dos veces la pantalla de bienvenida
2. Eilja proyect>add existing ítem
3. Seleccione una imagen que desee como fondo de la aplicación y presione Open , esto agregara la imagen al proyecto.
4. Para agregar una imagen a la pantalla, simplemente clickee y arrastre la imagen al artboard. Mantenga en mente que expression blend le permitirá agregar cualquier cosa a la lista de proyecto. Pero si el archivo es rechazado por el Artboard, no funcionara en el proyecto.
Agregar una nota
Ahora veremos como agregar una nota a nuestro proyecto, indicando que estamos en un prototipo.
1. Clickee la librería de assert y localice la sección de estilos, clickee la flecha de expansión luego elija SketchStyle. Del menú resultante, localice Note-sketch y selecciónelo.
2. Arrastelo hacia el artboard.
3. Tipee la nota que usted desee..
A pesar que la aplicación que estamos realizando es simple en estos momentos, la probaremos por primera vez . Antes de empaquetar la aplicación para un cliente usted deseara ver lo que se entregara, para ello realicemos los siguientes pasos.
1 Presione F5 o Project>Run Project. El player de Sketchflow aparece en su navegador en la pantalla de inicio.
2 Clickee la linea de bienvenida en el panel de navegacion, esta era la unica conección creada desde la pantalla de inicio. En la pantalla de bienvenida, sin embargo, tiene 3 opciones que puso como conecciones de salida.
3 Clickee el producto 1, note que solo hay opcion de regreso a la página anterior.
4 En la parte superior del panel de navegación hay controles que le permiten navegar tal como volver a la pagina anterior. Clickee la flecha blanca a la izquierda de el label del producto 1 para vovler a la pagina de bienvenida.
5 Otra forma de navegar a travez del proyecto es utilizar el panel mapa. Clickee el Map Panel, en la parte inferior izquierda del player. El Map Panel muestra la navegacion para el usuario y le permite navegar por el proyecto también.
6 Clickee la herramienta Toggle en la parte superior del map panel para agrandar la vista de la aplicación.
7 Clickee el nodo del Producto 3 y detrás vera que la página aparece. Clickee el nodo de bienvenida para volver atrás.
A pesar que los proyectos SketchFlow se originan en Expression Blend, y los dos comparten un mismo entorno de trabajo y herramientas, es necesario controlar que tipo de proyecto se esta creando.
1 Abrir el Expression Blend 3
2 Seleccione File > New Project, elegir Aplicación Silverlight 3 SketchFlow ponganlen un nombre
3 Para elegir donde guarder la aplicación selecciona el botón Browse y la carpeta correspondiente y presione OK
Creando nuevas pantallas de navegación
Las pantallas de navegación son la base para la creación de prototipos SketchFlow. Puede crear pantallas de navegación adicionales en la ventana Application Flow. Cada proyecto comienza con una pantalla de inicio. Pueden pensarlo como la pantalla de título de su proyecto. Vamos a ir creando la navegación.
- Ponga su cursor en el nodo Screen 1. Renombrelo y póngale Pantalla Inicio. Cuando el menú se expanda por debajo del nodo, clickee y arrastre el primer icono hacia la izquierda para crear una nueva pantalla de navegación.
- Clickee con el botón derecho elija renombrar y coloce Pantalla bienvenida. Esta será la pantalla de bienvenida de nuestra aplicación. Note que usted a creado automáticamente una nueva pantalla dentro del Project Panel.
- Cree una nueva pantalla conectada a la Pantalla de Bienvenida de la misma forma y nombrela Producto 1.
- Vuelva a la pantalla de Bienvenida y cree otra pantalla que se llame Producto 2.
- Vuelva a la pantalla de Bienvenida y cree otra pantalla que se llame Producto 3.
- Clickee en cualquier parte del SketchFlow Map sin seleccionar ningún screen y clickee botón derecho de su mouse seleccione Create New Screen, de esta forma podrá crear una pantalla que no esté conectada a ninguna de las que ya alla creado.
- Clickee dos veces el nombre y llámela Checkout
- Puede linkear una pantalla a otra clickeando un Screen Node, como el Producto 3, cuando el meun de abajo se expanda seleccione el segundo icono, llamado Connect an existing screen y arrástrelo a la screen Checkout.
Agregando Contenito a las Páginas de Navegación
Como lo mencionamos antes, SketchFlow está diseñado para realizar prototipos rápidos y fáciles. Como debe haber notado, agregar pantallas es fácil. Agregar el contenido a las mismas es igual de fácil. Comenzaremos por agregar algunos dibujos con la herramienta pincel, y luego agregar elementos de interfaz de usuario con el estilo SkectFlow.
1 Clickee dos veces el nodo de Start en el SketchFlow map para abrir la pantalla y del panel de herramientas, localice la herramienta pincel, luego clickee la tecla de abajo para expandirla y seleccione la herramienta lápiz.
2 Con la herramienta seleccionada, dibuje algún logo de su empresa, no se preocupe por la presicion es solo un prototipo después de todo.
3 Clickee la librería y localice la sección Styles, seleccione la flecha de expansión de la misma, y seleccione SketchStyles. Un menú aparece con la lista de elementos que puedes utilizar. Vamos a utilizar el SketchTitleCenter.
4 Clickee la herramienta de selección en el panel de herramientas, luego clickee y arrastre el titulo al lugar que desee.
5 Clickee dos veces el titulo para editar el texto y coloquen Bienvenido. De la misma forma coloque el titulo a cada una de las pantallas.
Creando conecciones adicionales
Ahora conectaremos las pantallas utilizando el mapa de sketchflow.
1 Del tercer producto seleccione el icono de Connect to an existing screen, arrástrela hacia la pantalla de producto 2. Esto creara una navegación de ida y vuelta.
2 Continue y cree este tipo de coneccion para todas las pantallas.
3 Guarde el proyect.
En el próximo post veremos como trabajar esto desde el SketchFlow Player…salu2
Inscripciones abiertas!!! INSCRIBITE AQUÍ
Gente!!! Que lindo día !
Les cuento que el día de ayer Scott Guthrie lanzó SILVERLIGHT 4 en lo que conocemos como Professional Developer Conference 2009 o muy conocido como PDC09.
A partir de hoy ya tenemos todo lo necesario para trabajar en Silverilght 4 disponible en la web silverlight.net recomiendo no tan solo el blog de Scott sino también el de Tim Heuer.
Recuersos entonces:
Probando todo, ire posteando… saludos!
Ahora investigaremos como trabajamos con el feedback de una pantalla. Aquellas pantallas que tengan Feedback son indicadas con un icono de un foquito en la parte superior derecha
1- Haciendo doble click en la pantalla aparece la pantalla correspondiente
2- De ahí se elige Windows>Feedback para mostrar el panel de Feedback
3- Haciendo click en el foco puede ver que se puede poner visible o invisible el feedback. Una vez que se tenga el feedback, puede hacer los cambios utilizando Expression Blend. En este ejemplo, la idea es agregarle un logo a la pantalla que se agrego el feedback.
Los proyectos SketchFlow son empaquetados en Expression Blend luego están disponibles para ser vistos desde el SketchFlow Player. El SketchFlow Player corre dentro de un navegador web y está disponible para que cualquiera lo utilice. Sin embargo deben tener instalada la versión Silverlight 3 del plug in.
En el SketchFlow Player el cliente puede navegar a través de las diferentes pantallas del proyecto utilizando el panel de navegación. El panel de navegación está diseñado para permitirle a los clientes navegar sin necesidad de interactuar con la interfaz de usuario. Hay dos posibles resultados cuando se envía un formulario: un envio exitoso y un envio no exitoso.
Utilizando el panel de navegación le permite al cliente ver las diferentes pantallas clickeando en ellas.
El SketchFlow Player permite a los clientes dibujar en la interfaz de la pantalla utilizando la herramienta pincel. Los clientes pueden utilizar la seción de feedback para notas explicatorias adicionales. Este feedback puede ser rápidamente incorporado en el proyecto original de SketchFlow por el autor.
continuara…
Que bonitoooooooo
si si si ya esta disponible Office 2010 Beta en aquellos que tienen subscripcion en MSDN, asi que pueden bajarlo!!! Esta buenisimo, no toque mucho todavia pero lo poco que les puedo adelantar antes de realizar un post especifico sobre el tema, es que Power Point trae nuevos efectos para animacion de paginas y ya no tenemos Groove, ahora tenemos Sharepoint Workspace que cumpliria la misma funcion pero cambian un par de cosas como por ejemplo tenemos ahora un centro de descargas para el manejo de las mismas sin tener nada abierto.
Sorpresita no? :p y encima es RAPIDISIMOOOOOOOOOOO
Por otro lado si se quieren entretener un poco les recomiendo las publicidades de office LA PELICULA.
Para más información visitar http://www.office2010themovie.com/.
buenisimo multitouchhhhhh
En este post, voy a investigar el panel de mapas un poquito más profundo. En una aplicación es posible tener muchas pantallas. Puede pensar en pantallas como una pizarra virtual en la cual se puede dibujar, escribir o utilizar formas ya creadas utilizando las tools de SketchFlow.
En el Panel de Mapas de SketchFlow se incluyen herramientas que pueden ser utilizadas para crear un mapa de SketchFlow.
A. Zoom
B. Deshacer
C. Rehacer
D. Crear una pantalla
E. Crear una pantalla componente
F. Remover selección
G. Encajar todo
H. Encajar selección
I. Mostrar navegación
J. Mostrar componentes
El entorno de trabajo de prototipo en SketchFlow
Todo el entorno de trabajo que trabaja con SketchFlow involucra un diseñador o un desarrollador al igual que un cliente que realice el feedback o un miembro del equipo. El fin de realizar un prototipo es proveer una estructura que permita multiples partes contribuyan a la evolución de un proyecto a través de un ciclo de feedback y desarrollo.
SketchFlow authoring
Authoring sketchflow toman lugar en Expression Blend, involucra la creación de una o más pantallas de navegación. Las conexiones de navegación entre estas pantallas son creadas por el autor. Un ejemplo de proyecto típico puede ser el entorno de trabajod e un formulario de admisión.
Noten que en SketchFlow hay dos tipos de pantallas. Las pantallas tienen conexiones de ida y de vuelta o no tienen conexión en absoluto. Luego están los componentes. Componentes reutilizables, un cambio que se realice dentro del mismo se reflejará en todas las pantallas.
continuara…
Bien recien salidito del horno, Miguel Saenz compartió con los MSP’s de argentina un video UNICO. por que? por que en el video surge una demostración en vivo de win 7 vs win xp, por dios, como me puse de nerviosa!!! veanlo que vale la pena!
saludos
Algunos de los beneficios que se lograron con Windows 7 incluyen:
- Computadoras portátiles más ligeras, gracias a su mayor duración de las baterías, activación inteligente del estado de suspensión y la reducción de brillo de la pantalla
- Mejor desempeño y soporte para DirectX 11 que significa una experiencia de juego sin precedentes
- La mejor confiabilidad y capacidad de respuesta, ahora las netbooks pueden realizar casi las mismas tareas que las PCs normales
- La interfaz de usuario optimizada y la incorporación de tecnología táctil significa que más gente puede encontrar una PC que le permita interactuar fácilmente en cualquier manera que lo desee
- El menor número de aplicaciones preinstaladas o que se ejecutan en el fondo de la PC significa que no obstante la PC que los clientes compren, obtendrán una mejor experiencia cuando accedan a su PC por primera vez.