Como elegir colores a la hora del diseño de una aplicación SilverLight o WPF

Los programadores, rara veces tenemos el don de saber diseñar, creo que conozco a dos que son capaces de hacerlo y los dos (en mi opinión) son muy buenos en los dos campos. Pero si sois como yo unos programadores puros y duros sin ningún don en el diseño debéis utilizar el add-in de Expression Blend que utilizo yo para mis proyectos personales (para los profesionales mejor un diseñador de verdad).

Este add-in es Colorful Expression y nos presenta unas paletas de colores que “pegan” entre si, para que no tengamos que elegir nosotros. Existen muchísimas paletas que además pueden ser categorizadas y valoradas por la comunidad podéis descargarlo aquí

 

ColorfulExpressionDesign.jpg

El juego de Simon en WPF MultiTouch, Surface y SilverLight

Hola, David J Kelley ha puesto en Codeplex (como no) el proyecto del juego de Simon (os acordáis?, los jóvenes seguro que ni habéis oído hablar de el)

 Simon

No solo lo ha desarrollado en Silverlight como podemos probar en su página sino en Surface y WPF usando Windows 7 Multitouch .NET Interop Sample Library en Windows 7 para que veamos las diferencias de desarrollo entre las tecnologías.

Merece la pena echarle un vistazo

 

Saludos

Animaciones en WPF

Windows Presentation Foundation provee una serie de características gráficas
y  de  layout  que  permitirán  generar  interfaces  de  usuario  ricos,  usables  y
realmente espectaculares mediante la inserción de eventos dinámicos.
Al ser características muy atractivas y sencillas de  incluir,  las animaciones en
WPF  se  convierte  en  blanco  perfecto  para  el  abuso,  por  lo  que  el  resultado
podría  ser un  interfaz de usuario  inmanejable. Por  ello,  la  aplicación de  este
tipo de características ha de estar medida y estudiada para provocar al usuario
emociones positivas y no todo lo contrario.
En este capítulo nos centraremos en cómo crear estas animaciones utilizando
las  dos  técnicas  existentes  en  nuestros  interfaces  de  usuario,  a  saber,  las
animaciones basadas  en  tiempo  y  las  animaciones basadas  en  frames, ya  sea
utilizando  la herramienta Microsoft Expression Blend o directamente a mano
mediante XAML.

Time-based animation vs Frame-based animation

Centremonos  en  como  son  las  animaciones  en WPF.  Cuando  hablamos  de
animaciones  lo  normal  es  pensar  en  diferentes  imágenes  estáticas  que  se
cambian rápidamente para generar el efecto de animación. En WPF esto no es
así,  realmente  lo  que  hacemos  es  modificar  el  valor  de  una  dependency
property  específica  durante  un  tiempo  determinado  o  unos  frames
determinados.

Clase Animation

En el namespace System.Windows.Media.Animation existen varias clases que
nos  permitirán  realizar  animaciones  sin  mayor  complejidad.  Es  importante
recalcar  que  estas  clases  solo  soportan  la  modificación  de  un  tipo  de
propiedad:  Dependency  Properties,  y  que  son  independientes  del  hardware

donde  se  ejecuten. Si ejecutamos una  animación WPF  en una máquina muy
potente esta solo irá más suave.
Otro punto  a destacar  es que debido  a  los diferentes  tipos de datos posibles
para una dependency property, existen diferentes  tipos de Animaciones para
cada  tipo,  es  decir,  para  los  tipos  de  datos  Double  existe  la  clase
DoubleAnimation.  Por  defecto WPF  contiene  diferentes  clases  para  soportar
los veintidos tipos de datos diferentes.

 

Clase Timeline

La  clase  abstracta  Timeline  es  de  las  clases más  importantes  ya  que  de  ella
derivan todas las animaciones disponibles. 

Esta clase expone diferentes miembros, a saber:

BeginTime

Asigna  un  retardo  antes  de  que  la  animación  comience.  Es  importa
sincronizar diferentes animaciones que comiencen a la vez.

Duration

Asigna  la  cantidad  de  tiempo  en  la  que  la  animación  se  estará  ejecutando,
desde el inicio al final. 

 

SpeedRatio

Acelera o decelera la velocidad de la animación. Por defecto el valor es 1. Si lo
incrementamos la animación finalizará más rápidamente, y si por el contrario
disminuimos  ese  número  la  animación  se  verá  más  lenta.  Modificando  la
propiedad Duration podríamos obtener el mismo resultado.
AccelerationRatio and DecelerationRatio
Gracias a estas propiedades podemos crear animaciones no  lineales, es decir,
podemos comenzar acelerando la animación al principio de esta y decelerando
al final. Ambos valores son de 0 a 1 y no pueden exceder en 1 el total de ambos
valores.

 

AutoReverse

Propiedad de tipo verdadero o falso donde indicamos que animación se vuelva
a reproducir al  reves una vez haya  terminado hasta  llegar al valor original de
partida. Esto por tanto, duplica el tiempo de la animación.

 

FillBehavior

Determina que ocurre cuando la animación finaliza.

 

RepeatBehavior

Permite  repetir  una  animación  un  número  determinado  de  veces  o  por  un
intervalo de tiempo en concreto.

Key Frame Animation

Este  tipo de animación es usada para cuando  tenemos varios  segmentos que
queremos mover  regularmente.  Es  decir,  permite  controlar  animaciones  que
tienen  varios  valores  cambiantes,  además  de  ser  soportar  métodos  para
controlar la interpolación en las animaciones.
Como definición de una animación basada en KeyFrames debemos realizar lo
siguientes pasos, varios de ellos parecidos a los necesarios a la hora de definir
una animación basada en tiempo:

  • Declarar la animación y definir la duración de la misma mediante la
    propiedad Duration.
  • Crear  un  key  frame  del  tipo  apropiado  al  valor  de  la  propiedad  a
    modificar. Esto es elegir el tipo de interpolación, más el tipo de dato
    y  buscar  el  tipo  de  key  frame  valido  (LinearDoubleKeyFrame,
    LinearPointKeyFrame, DiscretePointKeyFrame, etc). 
  • Asignar el valor y el KeyTime deseado.
  • Asociar la animación con una propiedad.
Interpolación

Se  ha  hablado  de  interpolación  varias  veces  hasta  ahora.  ¿Qué  es  eso  de  la
interpolación? La interpolación en la animación es cómo una animación pasa a
través  los  diferentes  valores  en  una  duración  determinada, marcada  por  la
propia animación. Podemos distinguir  tres métodos de  interpolación: Linear,
Discrete y Splined.

  • Linear :La  animación  progresará  en  una  frecuencia  constante  en  un  intervalo  de
    tiempo concreto.
  • Discrete :Con este método  la animación  saltará de un valor a otro  sin  interpolar entre
    ellos.
  • Splined :Con  este método  se  consiguen  animaciones más  realista  ya  que  tenemos  el
    control  en  cuanto  a  aceleración  y  deceleración  provocando  resultados  más
    semejantes al mundo real.

En el siguiente post veremos como crear una animación con Expression Blend

Obteniendo el Código de cualquier Aplicación Silverlight

Como todos sabréis SilverLight vive en la caja de arena del navegador (sandbox) y los desarrolladores no pueden extender esta caja de arena y con esto la gente se queda contenta y no presta atención a la seguridad de su aplicación en Silverlight. El motivo de escribir este post fue por la contestación de un colega que me dijo que estaba desarrollando una aplicación en SilverLight y que era guay porque con la caja de arena tenia la seguridad cubierta y no se la podían crakear y tenia protegido su código.

 

Infeliz!!!!!!!!!!!!!!!!!!!!!!!

Una de las cosas que menos me gustan de Silverlight es lo que voy a comentar en el post, como sacar el código fuente de cualquier aplicación SilverLight  no penséis que hay que saber un montón de hacking, sino que es muy sencillo.

He elegido para hacer las pruebas la aplicación primetable una aplicación que crea horarios para las escuelas

image

La primera opción es manual y hay que seguir los paso siguientes

  • Sacamos el código fuente de la pagina

 

image

  • En el codigo fuente buscamos la palabra XAP, en este caso lo tenemos en la linea
$create(Sys.UI.Silverlight.Control, {"source":"../ClientBin/Ras.Client.xap"}, null, null, $get
  • Como podemos ver en esta línea tenemos la ruta relativa al fichero de Silverlight, la copiamos y la ponemos en nuestro navegador, en nuestro caso http://www.primetimetable.com/ClientBin/Ras.Client.xap, podemos ver que nos pedirá bajar el fichero XAP, lo bajamos y lo guardamos en nuestro PC
  • Como sabéis los ficheros XAP realmente son ficheros ZIP, lo descomprimimos

image

  • Ahora podemos ver todas las dll y ficheros de configuración donde podremos ver la configuración de los servicios WCF, y a través de Reflector podremos ver el código de la aplicación SilverLight y decompilarla.

 

 

 

 

Como habéis podido comprobar es bien sencillo, pero todavía es mas sencillo con la herramienta Silverlight Spy 2

image

Donde podéis ver toda la información y código de la aplicación.

 

Para evitar esto podéis obfuscar como en cualquier aplicación de .Net, algo importante si queréis proteger vuestro código

Funciones Principales de un Arquitecto de Software

Me han preguntado recientemente cuales son las funciones de un Arquitecto de Software, termino que me suele hacer reír y que siempre digo que en menor y mayor medida casi todos somos un poco Arquitectos de Software, yo he recopilado estas funciones:

 

  • Arquitectura: Definición de arquitectura de los sistemas, vista física, vista lógica, principios de arquitectura, seguridad, etc.
  • Selección de Software: Pilas de aplicaciones, bases de datos, librerías, frameworks, estándares tecnológicos, etc.
  • Selección de Infraestructura: Sistemas Operativos, hardware, redes, sistemas de recuperación, etc.
  • Requisitos no Funcionales: Rendimiento, escalabilidad, seguridad, etc.
  • Liderazgo: Liderazgo Técnico, responsabilidad y autoridad, dirección de equipos, etc.
  • Coaching y Mentoring: Ayuda sobre problemas técnicos, ayuda en la evolución profesional, etc.
  • Metodología de Proyectos: Estructura de Proyectos, Metodologías (Waterfall, Scrum, RUP, XP…).
  • Procesos de Desarrollo: Control de versiones de código fuente, procesos de construcción, integración continua, automatización de pruebas y otros procesos y herramientas de desarrollo.
  • Prácticas y Estándares: Estándares de codificación y libros blancos, selección de herramientas, etc.
  • Diseño, Desarrollo y Pruebas: Diagramas UML, codificación, pruebas unitarias, etc.
  • Experiencia: Conocimiento sobre tecnologías y arquitecturas.
  • Estar al día en cuanto a tendencias tecnológicas: Agile, Web 2.0, SOA, Lightweight Java EE, etc.

 

Yo añadiría tener pasión por nuestra profesión, seguramente me he olvidado de muchas funciones, os animáis a completarlo?

Transformaciones en WPF

Windows Presentation Foundation provee una serie de clases que derivan de
System.Windows.Media.Transform  y que nos permitirán mover  o  transladar,
rotar, escalar e inclinar elementos en un mundo 2D.
¿Cómo podríamos definir  lo que es una  transformación? Una  transformación
sería el proceso mediante el cual se mapean o transforman unas coordenadas
en el espacio con otras coordenadas en el espacio.
En  WPF  disponemos  de  las  siguientes  transformaciones  básicas:
TranslateTransform,  RotateTransform,  ScaleTransform,  SkewTransform  y  las
transformaciones más complejas: MatrixTransform y TransformGroup.

 

TranslateTransform

Desplaza un elemento de un punto a otro, es decir,  lo mueve con  respecto a
dos valores:  X e Y.

  •   X – Cantidad a mover horizontalmente. 
  •   Y – Cantidad a mover verticalmente.

En el  siguiente ejemplo podremos ver como  se aplica una  transformación de
tipo translación a un botón desde las coordenadas (0,0) a (+10, +10):

 

<Button RenderTransformOrigin="0.5,0.5" Background="White" Width="100" Height="100"> 
   X = 0, Y = 0 
</Button> 
<Button RenderTransformOrigin="0.5,0.5" Background="Yellow" Width="100" Height="100"> 
   <Button.RenderTransform> 
      <TranslateTransform X="10" Y="10"></TranslateTransform> 
   </Button.RenderTransform> 
   X = 10, Y = 10 
</Button> 

 

image

 

RotateTransform

Rota  un  elemento  de  acuerdo  a  los  valores  de  las  siguientes  propiedades
Angle, CenterX, CenterY. El elemento es  rotado normalmente con respecto a
un punto de libre elección.

  •   Angle – Angulo de rotación expresado en grados
  •   CenterX – Coordenada horizontal del punto de rotación
  •   CenterY – Coordenada vertical del punto de rotación
    En el  siguiente ejemplo podremos ver como  se aplica una  transformación de
    rotación aun botón:

 

<Button RenderTransformOrigin="0.5,0.5" Background="Yellow" Width="100" 
Height="100"> 
   <Button.RenderTransform> 
      <RotateTransform Angle="45"></RotateTransform> 
   </Button.RenderTransform> 
   Rotado 45° 
</Button> 

 

image

 

ScaleTransform

Escala un elemento creciendo o decreción en horizontal, vertical o en ambas
direcciones  de  acuerdo  a  los  valores  de  las  siguientes  propiedades:  ScaleX,
ScaleY, CenterX, CenterY.

  •   ScaleX – Multiplicador aplicado al ancho del elemento
  •   ScaleY – Multiplicador aplicado al alto del elemento
  •   CenterX – Origen horizontal del escalado
  •   CenterY – Origen vertical del escalado

En el siguiente ejemplo se transforma un elemento aplicano un multiplicador
de 5 al ancho del botón:

<Button RenderTransformOrigin="0.5,0.5" Background="Yellow" Width="75" Height="50"> 
   <Button.RenderTransform> 
      <ScaleTransform ScaleX="5"></ScaleTransform> 
   </Button.RenderTransform> 
   ScaleX = 5 
</Button> 

 

image

SkewTransform

Deforma  un  elemento  inclinándolo  una  serie  de  grados,  de  acuerdo  a  los
valores de la siguientes propiedades: AngleX, AngleY, CenterX, CenterY

  •   AngleX – Grados de inclinación horizontal
  •   AngleY –  Grados de inclinación vertical
  •   CenterX – Origen horizontal de la inclinación
  •   CenterY –  Origen vertical de la inclinación

En el siguiente ejemplo se aplica una transformación de tipo SkewTransform a
un botón:

 

 

<Button RenderTransformOrigin="0.5,0.5" Background="Yellow" Width="75" Height="50"> 
   <Button.RenderTransform> 
      <SkewTransform AngleX="10" AngleY="5"></SkewTransform> 
   </Button.RenderTransform> 
   10, 5 
</Button> 

image

MatrixTransform

MatrixTransform  es  un  mecanismo  de  bajo  nivel  usado  para  crear
transformaciones 2D personalizadas. La matriz de 3×3 usada en su sistema de
coordenadas  es multiplicada  por  la matriz  aportada mediante  la  propiedad
Matrix.

  •    Matrix – Matriz que deriva de System.Windows.Media.Matrix

En  el  siguiente  fragmento de  código XAML  se  aplica una  transformación de
tipo MatrixTransform:

 

<Button Height="70" Width="120"> 
   <Button.RenderTransform> 
      <MatrixTransform Matrix="1, 0.5, 0, -1, 0, 1"/> 
   </Button.RenderTransform> 
   OK 
</Button> 

 

image

TransformGroup

Es  otra  de  las  transformaciones  complejas  ya  que  permite  combinar  varias
transformaciones  simples  como  si  fuera  un  todo,  de  una  vez.  Siendo
importante  en  todo  momento  el  orden  real  el  que  se  van  a  aplicar  las
transformacions ya que afectará al resultado final.

<Button Height="70" Width="120"> 
   <Button.RenderTransform> 
      <TransformGroup> 
         <RotateTransform Angle="45"/> 
         <ScaleTransform ScaleX="5" ScaleY="1"/> 
         <SkewTransform AngleX="30"/> 
      </TransformGroup> 
  </Button.RenderTransform> 
  OK 
</Button> 

image

WPF Localization Guidance

En Codeplex siguen saliendo herramientas imprescindibles en nuestro desarrollo de WPF, si estas desarrollando aplicaciones multiidioma debes de leer esta guía, que te ayudara a diseñar e implementarla con las diferentes técnicas que hay en WPF, yo mas adelante sacare unos posts acerca de este tema pero no tan completo como esta guía.

Saludos