Curso Silverlight en Universidad de Cantabria

Desde el próximo Lunes, 4 de octubre hasta el 8 de octubre, estaremos impartiendo un curso de Silverlight utilizando herramientas como Microsoft Expression Blend 4 en la Universidad de Cantabria,

El curso estará dividido en los siguientes temas:

 

1 Introducción  a experiencia de usuario, Silverlight

2 Layout, posicionamiento de elementos

3 Animaciones

4 Estilos

5 Controles

6  Programación en Silverlight (C#)

 

Todos estais invitados a asistir.

Paralelamente, haremos un pequeño taller de un par de horas en el Centro de Innovación de Cantabria, el Jueves a las 19.00.

Loren Ipsum Dolor sit amet

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Custom List Style con Sharepoint 2010

    Con la salida de la BETA de Sharepoint 2010 han cambiado bastantes cosas en lo que a interacción de usuario y branding se refiere que con la anterior versión eran un autentico dolor de cabeza.

    Una de las mejoras ha sido el manejo de estilos para listas y elementos de lista.

    Gracias a las nuevas opciones de customización de estilos que nos proporciona el sharepoint designer, podemos cambiar tanto el estilo de cada elemento generado y el layout que adoptará nuestra lista.

    Vamos a hacer un pequeño ejemplo para cambiar el layout y el estilo de nuestra lista sin tocar el XSLT (nos lo generará el designer)

    Para ello, vamos a una pagina e insertamos en algun contentPlaceholder una lista que hayamos creado anteriormente (no hace falta introducir la lista como item de un content query web part) simplemente insertamos la lista directamente.

    clip_image001

    Con el Placeholder en la vista diseño, o posicionándonos dentro del placeholder en la vista código, vamos a insertar -> vista de datos y seleccionamos nuestra lista o biblioteca de documentos (en nuestro caso estamos insertando una biblioteca de assets) que soporta video y audio.

    clip_image002

    La lista se insertará en la vista de lista predeterminada.

    Lo primero que haremos será cambiar el layout.

    Con nuestra lista seleccionada se desplegarán nuevas opciones en el ribbon

    clip_image003

    Nos vamos a diseño y seleccionamos el layout que más nos convenga. Por ejemplo seleccionamos el layout boxed, a dos columnas, y tendremos nuestros elementos agrupados en cajas de dos en dos, (algo bastante engorroso de hacer en 2007)

    clip_image004

    Vemos nuestros elementos de la lista de librería de assets colocados en cajas, a dos columnas,

    Vamos ahora a seleccionar los campos que nos interesan mostrar

    clip_image005

    Nos vamos a opciones -> agregar o quitar columnas, y nos aparecerá un menú para agregar o quitar campos (propios de la librería o que hayamos agregado nosotros) también podemos elegir el orden de aparición de dichos campos moviendolos arriba y abajo.

    Bien, una vez que tenemos nuestra lista con los campos necesarios y el layout que más nos convenga (sin dolor) pasamos a estilar los elementos. Para que se ajusten por ejemplo a una hoja de estilos que hemos creado previamente.

    Con el elemento al que queremos cambiar el estilo seleccionado, clickeamos en estilo -> elemento seleccionado

    clip_image006

    Se nos abre una ventana emergente con las opciones de estilo especificas para el elemento seleccionado

    clip_image007

    El propio designer nos genera el codigo para ese elemento concreto y nos lo añade con una etiqueta span, al que le aplica un estilo generado

    clip_image008

    Ahora solo tenemos que cambiar la clase “style1” para que ese elemento adquiera el estilo referenciado en nuestro css y listo, asi de facil e indoloro.

Ahorra tiempo con Photoshop Layer Comp

Una de las tareas más engorrosas a la hora de diseñar interfaces es exportar todas las pantallas, que hemos ido diseñando, con sus menús, submenús, acciones, animaciones etc.. Recordando siempre las capas o conjunto de capas que tenemos que habilitar/deshabilitar para formar todas las secciones.

Pues bien, nuestra querida aplicación Photoshop, incluye una funcionalidad llamada Layer Comps, que, lo que hace básicamente, es grabar los estados de visibilidad/invisibilidad de todas nuestras capas en un instante determinado. Dándoles un nombre y pudiendo añadir una descripción.

Vamos a ver un ejemplo:

Tenemos un avatar de messenger que al hacer click sobre él, nos desplegará un menú, y la ultima acción del menú (otras posibilidades) desplegará un submenú

clip_image001

En nuestro diseño, el avatar seria el grupo de capas llamada Avatar, el menú seria el grupo options y el submenú seria el grupo morePossibilities

clip_image001[6]

Vamos a ir grabando la navegación de este sencillo menú, con Layer Comps. Para ello abrimos el panel de layer comps (window > layer comps)

clip_image002

Ahora para el primer paso, deshabilitamos options, de esta manera solo se verá el avatar puesto que morPossibiilities esta dentro de options

Ahora nos vamos al panel de layer comps y creamos una nueva layer comp

Nos pedirá introducir un nombre , jugar con la visibilidad, o grabar su posición para realizar animaciones, también cambiar el estilo de la capa, a su vez, podremos introducir un comentario descriptivo sobre esta composición. En nuestro caso AvatarBase.

clip_image001[8]

A continuación deshabilitamos la capa morePossibiliities y habilitamos la capa optiones, y nos vamos a layer comp y guardamos una nueva comp.

clip_image001[10]

Importante: realizar primero el switch de visibilidad en las capas y por ultimo guardar el estado, a este segundo estado lo llamaremos AvatarPressedMenu.

Por ultimo quedaría habilitar el grupo morePossibilities y crear una nueva layer comp. Llamada AvatarPressedSubmenu.

clip_image001[12]

Usando los controles de layer comp (flechas) podemos ir avanzando o retrocediendo en nuestra navegación.

Y ya tenemos nuestra navegación simple creada. PERO AHORA VIENE LO MEJOR !!!

De la manera habitual, tendríamos que ir seleccionando el estado y guardando nuestra imagen, darle un nombre y así sucesivamente… pero teniendo nuestras composciones ya creadas podemos exportarlas automaticamente con un script, y nuestro querido photoshop nos generará una exportación de todas las capturas…

Por tanto, ahora nos vamos a File > Scripts > Layer Comps to Files

clip_image001[14]

clip_image001[16]

En la ventana emergente elegimos la carpeta destino, el prefijo de nuestro nombre, que se genera automáticamente (prefijo_numerodelayercomp_nombrelayercomp.filetype)

Seleccionamos también el tipo de archivo a generar, y clickeamos sobre “Run”

El Photoshop empezará a correr el script, mostrándonos un mensaje de finalización

 

clip_image001[18]

 

Y aquí tenemos nuestros archivos generados ON THE FLY…. recién salidos del horno.

clip_image001[20]

 

RAPIDO SENCILLO Y PARA TODA LA FAMILIA….. Y lo mejor de todo es… AHORRAMOS SUFRIMIENTO Y TIEMPO.

Destripando WPF en Santander

Me gustaría invitar a todo el que lo desee al evento que ofreceremos el próximo viernes 24 de julio mi querido amigo y compañero Anuar Khan Ali y yo.

El evento esta organizado por el CIIN de Santander y daremos una charla sobre Windows Presentation Foundation (WPF), intentaremos dar una visión lo mas completa posible tanto en la parte de diseño como de desarrollo. Os dejo el enlace de inscripción. Espero que os animéis, sobre todo la gente de Cantabria.

Desde aquí quería aprovechar también para agradecer al CIIN y especialmente a Juan Carlos por todo su apoyo y trabajo de organización del evento.

Os esperamos!

Primera fase de socialización de Telecinco

Gracias al acuerdo llevado por Telecinco, Microsoft y Plain Concepts hoy podemos ver los primeros frutos de la socialización de Telecinco en la que estamos trabajando.

De esta manera, hoy ha salido a producción en la web de telecinco la primera fase del proyecto de socialización (inserción de Windows Live Messenger y Live User eXperience) en su portal.

La primera fase consta de la integración con el sitio de telecinco “Salvame” en la que podemos mantener contacto via messenger dentro de la web.

Untitled-1

Se consigue así la primera integración en un portal de televisión de este producto Microsoft. 

Enlace a : Web de Telecinco "Sálvame"

Como añadir el banner de “Comparte el Conocimiento”

Voy a explicar los pasos para aquel que quiera añadir el banner de geeks en su blog de geeks:

Inicia sesión en Geeks.ms
Navega hasta tu blog
Entra en el ‘Panel de control’ del blog
Pincha en ‘Administrar contenidos’
Pincha en ‘Listas de enlaces’
Añade una nueva lista de enlaces, llamada por ejemplo Geeks·ms
Añade un nuevo elemento a la lista
En el campo Título pon: <img src=”url del banner que más te guste” border=”0″ alt=”” />
En el campo URL pon: http://geeks.ms
En el campo Descripción pon: Geeks·ms – Comparte el conocimiento

Ahora aparecerá el banner de Geeks·ms – Comparte el conocimiento que hayas elegido en tu blog.