Bien, hace un par de dias me preguntaron que charla daria el proximo 8 de abril en el Cell on camp que estamos organizando para la ciudad de Salta, y me dije a mi misma que debia dar algo de lo nuevo de multitouch, el problema es que… mi portatil es ONE TOUCH, asi que como podria trabajar en algo con multitouch si no tengo el equipo necesario?
Bien, gracias a un amigo Szymon Kobalczyk he descubierto que se puede emultar el multitouch con diferentes dispositivos, o sea explico mejor, existe un driver que emula diferentes mouse en la pantalla, acorde a los dispositivos de entrada que tengas conectados por usb, en mi caso, tengo el mouse incorporado de la portatil, el mouse independiente por usb y el pen de mi touchscreen, instalando este emulador, tengo 3 mouse a disposicion en mi pantalla… ahora, quise ir mas alla por que la idea del multitouch la tengo desde el surface verdad? y que si creamos un surface, tambien gracias a Szymon encontre la forma de crear un surface simplemente con una webcam, una caja, un papel blanco y un poco de vidrio, e aqui el material y lo necesario.
Paso uno, conseguir una caja.
Paso dos, conseguir una web cam y pegarla al fondo de la caja.
Paso tres colocar el papel pegado al vidrio.
Paso cuatro conectar la camara via USB a la portatil.
vuala!
Una vez con esto, es necesario instalar el programa que me tomará las señales de mi webcam. Este soft se llama T-BETA y pueden descargarlo aqui. El soft debe tomar las señales de la siguiente forma, si ven el video que hizo miguel saez sobre como funciona surface pueden notar que de la misma forma aqui esta tomando los datos de los ingresos de los dedos. VER vIDEO
Una vez esto ahora hay que instalar el emulador de multitouch, para ello descarguen el mismo desde codeplex en este link.
Para instalarlo simplemente ejecuten cmd y dirijanse a la carpeta de instalacion de driver, si tenes procesador x64 anda a esa carpeta, de ahi ejecuta en cmd lo siguienet “install driver.cmd”
y listo, se termino la instalación, para verificar la misma segui este video.
Una vez instalado disfruta de multitouch!!! Ahora, estoy averiguando como funciona el sdk de surface y su emulador, para la proxima les comento sobre esto!
| Hola IVANA El equipo de Microsoft Argentina & Uruguay renueva el reconocimiento a tu esfuerzo constante por participar activamente de nuestros programas de entrenamiento y estar siempre en contacto con los avances de tecnologías Microsoft durante el último año. Por ello al pie del correo encontrarás el Diploma con tu membresía para los próximos 12 meses como Microsoft Active Professional 2010 (MAP), porque valoramos tu compromiso por mantenerte actualizado y formar parte del top 5% de una de las comunidades técnicas más importantes a nivel mundial. Queremos seguir acompañándote y que seas parte del exclusivo Grupo en LinkedIn para los MAP, donde los mejores profesionales interactúan con sus colegas, acceden a descuentos en capacitación, reciben anticipos de noticias y eventos, además de estar en contacto directo con nosotros, y donde dentro de pocas semanas te daremos tu lugar especial para la conferencia exclusiva que Steve Ballmer dará durante su visita a la Argentina. ¡FELICITACIONES!
ES UN ORGULLO TENERTE ENTRE NOSOTROS |
| 
|
Bueno tuve un pequeñisimo problema con versiones ingles español en visual studio, el caso es que de repente no me deja ni desinstalarlo ni instalarlo de vuelta me salia un cartelito que decia:
Visual Studio setup problem - ‘A problem has been encountered while loading the setup components. Canceling setup.’
Asi que casi ME MUERO pensar en formatear? a esta hora? con todo el trabajo que tengo acumulado! Ni loca! asi que busque y busque y encontre un pequeño programita desinstalador de visual studio, si les sale este cartel prueben esto le desinstala TODO y sin problemas en forma RAPIDA!
MS auto-uninstall tool
Saludos!
Hola chicos, a todos los que lean mi blog o por ahi se encuentren con mi post, les pido un favor, necesito que sumen un voto a mi hermano esta compitiendo y realmente necesito ayuda de todo aquel que pueda sumarle un punto :) gracias de antemano!!!
VOTEN AQUI
Una muy buena charla que se dio hace tiempo en las oficinas de Microsoft recomendada.
Management 2.0 - El arte de liderar en la era global from Dinamika on Vimeo.
Algo que presento Steve Ballmer en su keynote recientemente fue la creación del mapa de bing en tres dimensiones, literalmente no puede caminar en calles de todo el mundo incluso entrar en museos y ver pinturas , aun no estan todas las ciudades ya que este buscador esta realizado sobre photos no se si recuerdan Photosynth? Saludos
Aqui tienen la ultima nota que la Revista Fortune le realizo a Steve Ballmer Microsoft CEO’s muestra interesantes equipos, recomendado.
Como saben todos los años Bill Gates solía hacer un Keynote mostrando los avances de Microsoft al público, desde que Steve Ballmer tomo la presidencia es el encargado de dar estos Keynote, les dejo el ultimo que se realizo lo recomiendo.
Qué pueden ver en el keynote? Desde las últimas pc lanzadas al mercado con touchscreen y corriendo windows 7, hasta bing maps beta por supuesto la xbox y los avances que quedaran asombrados y no pueden faltar los videos comicos de como ver a la tecnología hoy. Espero lo disfruten.
saludos!
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.
Más artículos
Página siguiente >