Makingsensers

Training de HTML5 y CSS3 finalizado

2013-04-15T00:00:00-07:00

Juan Muguruza terminó su self-training CAP-56 de introducción a HTML y CSS. En el transcurso de su capacitación también exploró varias opciones interesantes de aprendizaje online, además se familiarizó con Sublime Text, Visual Studio 2012, Web Essentials, Git, GitHub, Git Extensions y GitHub Pages, donde creó su portfolio que invito a visitar.

¡Felicitaciones Juan!

Si trabajás en Making Sense, podés encontrar más información sobre el programa de capacitaciones en la Intranet: display/DTRU/Programa+de+Capacitaciones.

Antiforgery Token for AJAX

2013-04-08T00:00:00-07:00

Cómo sabrán, utilizando Forms Authentication, si no tenemos especial cuidado es muy fácil exponer nuestra aplicación a Cross-site Request Forgery Attacks o CSRF, Phil Haack lo explica muy claramente en su post Anatomy of a Cross-site Request Forgery Attack.

Básicamente esto significa que un sitio malicioso podría realizar una petición a nuestro sitio y utilizando nuestra cookie de autenticación y así utilizar los permisos del usuario para realizar una acción indeseada por este.

Por ejemplo, supongamos que nuestro sitio es un banco y mediante una API JSON exponemos un servicio http://www.mybanco.com/account/transfer. Nuestro usuario está logueado revisando sus cuentas y recibe por email un link de una página de chicas lindas. Él, sin dudarlo, ingresa a dicha página, desde donde se realiza un POST nuestro servicio transfer solicitando una transferencia desde la cuenta del usuario a una cuenta bancaria en las islas Caiman. La transferencia es realizada ya que nuestro servicio recibe el request con la autenticación del usuario.

La forma más común de prevenirlo en una aplicación ASP.NET MVC consiste en utilizar el atributo ValidateAntiForgeryToken en conjunto con el helper Html.AntiForgeryToken().

Internamente ASP.NET genera un token que es almacenado en una cookie HttpOnly y el helper renderiza un input hidden con el nombre __RequestVerificationToken y con el valor correspondiente a un hash del token; ese valor se envía en el POST de un formulario y al recibirlo una action marcada con el atributo ValidateAntiForgeryToken, verifica que se correspondan el valor almacenado en la cookie y el valor __RequestVerificationToken.

Pero esto no es tan simple en llamadas AJAX si se utiliza json como contentType ya que por defecto ASP.NET espera un parámetro __RequestVerificationToken codificado como www-form-urlencoded.

La solución

Server side

Siguiendo las recomendaciones de Phil Haack y actualizándolas para ASP.NET MVC 4 preparé la clase ValidateJsonAntiForgeryTokenAttribute que puede utilizarse para decorar controllers o actions de manera de que se obtenga el parámetro __RequestVerificationToken de los headers del request.

    [AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, AllowMultiple = false, Inherited = true)]
    public class ValidateJsonAntiForgeryTokenAttribute : FilterAttribute, IAuthorizationFilter
    {
        private const string key = "__RequestVerificationToken";
        public void OnAuthorization(AuthorizationContext filterContext)
        {
            if (filterContext == null)
                throw new ArgumentNullException("filterContext");

            var request = filterContext.HttpContext.Request;

            if (request.HttpMethod == "GET")
                return;

            HttpCookie cookie = request.Cookies[key];
            var cookieToken = cookie == null || String.IsNullOrEmpty(cookie.Value) ? string.Empty : cookie.Value;
            var formToken = request.Headers[key] ?? string.Empty;

            AntiForgery.Validate(cookieToken, formToken);
        }
    }

Además, no lo chequearemos para los GET, ya que se supone que estas acciones son de solo lectura y no presentan un peligro en este sentido, de esta manera podemos decorar un controller entero, sin preocuparnos por las actions GET.

Client side

Desde el lado del cliente, debemos incluir el hash del token en nuestro layout:

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="shortcut icon" href="@Url.Content("~/Content/Images/favicon.ico")" type="image/x-icon"/>
        <title>@ViewBag.Title</title>    
    </head>
    <body>
        @Html.AntiForgeryToken() <!-- Acá está lo importante! -->
        @RenderBody()
    </body>
    </html>

Y desde Javascript, al realizar las llamadas AJAX debemos asegurarnos de incluir el parámetro __RequestVerificationToken en el header.

    $.ajax({
        url: 'http://www.mybanco.com/account/transfer',
        data: { destinationAccount: '1241524545', amount: 500 },
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        headers: { __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val() }, // Acá está lo importante!
        type: 'POST'
    });

Eso es todo, de esta forma simple ya tenemos nuestros servicios para AJAX un poco más protegidos.

Disclamer

Recuerden que el código presentado aquí está realizado con fines didácticos y que no está listo para copypastear y poner en producción.

Programando Arkanoid - Parte 1

2013-03-18T00:00:00-07:00

Haciendo ya mucho que no trabajaba en JavaScript sin la utilización de ningún framework, me propuse crear algo simple que a la vez fuera divertido. Pensé en algunas opciones y la ganadora fue un juego de Arkanoid, (que, ahora me entero, es una de las tantas copias del Breakout, y para mí el nombre original siempre fue Arkanoid, en fin).

El resultado final lo pueden ver aquí y el código en mi repositorio de GitHub, pero no es tanto el resultado sino el viaje lo que fue interesante y quiero describir las cosas que aprendí en ese camino.

Vengan y acompáñenme en mi viaje.

Documentación:

Como todo principiante, o incluso como todo experto que cada tanto necesita verificar el estado de los estándares, la documentación de referencia es importante. Para hacer este pequeño proyecto me basé en algo de mi experiencia previa, y en la documentación disponible en los siguientes sitios:

Mozilla Development Network, impagable, la calidad de la documentación es increíble.
WebPlatform.org, acabo de enterarme de este sitio por la clase de juegos HTML5 en Udacity, pero está también muy completa.
W3Schools para refrescar cosas básicas (“¿cómo eran los parámetros de array.slice?” y similares)

El contenedor:

(Lo que escribiré ahora se puede ver en el commit 90e6…4f7abd9.)

Lo primero y principal, y lo más simple fue setear el HTML y los estilos necesarios. Todo estará hecho en HTML5 Canvas y siendo manejado a través de JavaScript, nuestra estructura en el DOM en sí no debería ser demasiado compleja. Sí necesitamos, sin embargo, un documento válido y limpio.

<!DOCTYPE html>
<html>
    <head>
      <title>Arkanoid with canvas</title>
		<link rel="stylesheet" type="text/css" href="arkanoid.css">
		<script type="text/javascript" src="arkanoid.js"></script>
	</head>
	<body onload="arkanoid.init();">
	</body>
</html>

Esto está claro: sólo tenemos un DOM HTML5, en donde asignamos un título, una referencia a un archivo CSS para que nos de los estilos a la página. Luego, por supuesto, la referencia a nuestro script, en donde se encontrará toda la lógica de la aplicación. Vamos a suponer por ahora que este archivo JavaScript expone un objeto llamado arkanoid, el cuál tiene un método llamado .init() al que podemos llamar. Eso lo hacemos, por supuesto, en el momento en que la página carga.

Ahora, los estilos no deben ser complejos tampoco. Todo lo que necesitamos es que en el cuerpo de la página exista un canvas y que este se vea como ocupando todo el espacio disponible. Por supuesto que esto significa poner los márgenes y los paddings a cero, pero lo que yo no sabía es que para evitar tener scrollbars o espaciados innecesarios, debemos indicar específicamente que el objeto canvas va a comportase como bloque, y que todo en la página carezca de espaciados. Esto lo aprendí de una respuesta de StackOverflow.

Para esto podemos usar muy apropiadamente el selector de CSS , que matcheará absolutamente todo elemento. Este selector se llama Universal Selector y está disponble para los navegadores que soporten características de CSS3. Por supuesto, estamos trabajando en Canvas con lo que es muy factible que los navegadores que soportan el segundo también soporten el primero.

Nuestro CSS se ve, entonces, así:

/* from http://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport */
 
* {
    margin: 0;
	padding: 0;
}
 
html, body {
	width: 100%;
	height: 100%;
}
 
canvas {
	display: block;
}

El código

Para proceder a la parte de JavaScript, ya teníamos una limitación particular: debemos crear un objeto arkanoid que tenga la función init(). De una forma simplista entonces instanciaremos el objeto arkanoid asignándole un valor al objeto window, o podríamos haberla declarado de forma independiente. Para mayor seguridad, podemos devolver los resultados de una función auto-ejecutable, de forma que todas las variables que creemos sean locales y no estén manchando el namespace global.

Como también estaremos codificando lógica interna, seguramente querremos tener varias funciones y variables privadas. Nuestra función autoejecutable tiene solo que devolver entonces aquello que queramos hacer público, en nuestro caso, la función init().

window.arkanoid = (function(userOptions) {
 
  // private fields
  var canvas = null;
  var ctx = null;
  var options = null;
 
  var defaultOptions = {
    fullWidth: true,
    fullHeight: true,
    stageHeight: 600,
    stageWidth: 1024
  };
 
 
  // private methods
  function initOptions(userOptions) {
    options = mergeObjects(defaultOptions, userOptions);
    if (options.fullWidth) options.stageWidth = document.documentElement.clientWidth;
    if (options.fullHeight) options.stageHeight = document.documentElement.clientHeight;
  }
 
  function mergeObjects(toOverride, overridingWith) {
    for (var property in overridingWith) {
      toOverride[property] = overridingWith[property];
    }
    return toOverride;
  }
 
  function initCanvas() {
    var body = document.getElementsByTagName("body")[0];
    var height = options.stageWidth;
    var width = options.stageHeight;
    canvas = document.createElement("canvas");
    canvas.width = height;
    canvas.height = width;
    body.appendChild(canvas);
    ctx = canvas.getContext("2d");
  }
 
  function initAll() {
    initOptions();
    initCanvas();
 
    var stage = new ArkanoidStage(ctx, options.stageHeight, options.stageWidth);
  }
 
  // public methods
  return {
    init: initAll
  };
})()

Vayamos analizando ese código línea a línea:

La línea 1 define el objeto arkanoid que necesitábamos. Lo define como el resultado de una función que será llamada, y tiene la capacidad de recibir parámetros que serán las opciones del usuario. Esto es, en caso en que quisiéramos pasar información al momento de inicializarlo.
Las líneas 4 a 6 definen variables locales, solamente disponibles para este objeto arkanoid, que serán utilizadas por las demás funciones interiores. Estas no estarán disponibles a los objetos externos al momento de devolver el resultado, y más aún, tampoco se encontrarán disponible a elementos que hagan referencias a this o a self. Si eso los confunde, a mí también me ocurrió, checkeen esta pregunta en StackOverflow: JavaScript local scoping: var vs. this.
Las líneas 8 a 13 definen otra variable local, pero esta será un objeto literal, para agrupar las posibles opciones con valores por defecto que tomaremos en caso en que el usuario (quien llama a esta función) no las provea.
Las líneas 17 a 21 definen la función initOptions, que se encargará de identificar el conjunto de opciones válidas a utilizar, basado tanto en lo provisto por el usuario, los defaults, y la lógica interna. En este caso, obtendremos el override de lo que proveyó el usuario sobre lo default, y verificaremos que si estamos trabajando a pantalla completa (fullWidth y fullHeight), actualizaremos las variables de ancho y alto para que sean consistentes (stageWidth y stageHeight).
Las líneas 23 a 28 hacen la magia de obtener el conjunto de opciones desde los defaults y con lo que el usuario proveyó. La lógica es tan simple como copiar todo lo que el usuario nos dio sobre el objeto de las opciones por default. Cabe destacar que aquí estamos escribiendo sobre el objeto de destino, por lo que si quisiéramos volver al valor por defecto, ya lo habríamos perdido. Una forma simple de haber hecho esto es, en lugar de llamarlo así:
```
options = mergeObjects(defaultOptions, userOptions);
```

Deberíamos llamarlo así:

options = mergeObjects({}, defaultOptions); // creates a copy
options = mergeObjects(options, userOptions); // overrides defaults

Las líneas 30 a 39 inicializan el objeto canvas que se utilizará. Muy básicamente se obtiene el objeto body, se crea un objeto canvas y se le anexa, con el tamaño apropiado según las opciones. Para uso posterior, se almacenan las referencias al canvas y al contexto de dibujo 2D.
Las líneas 41 a 46 realizan ese trabajo en sucesión llamando a las funciones apropiadas, e inicializa el stage sobre el que la magia ocurrirá.
Por último, las líneas 49 a 51 devuelven el objeto exponiendo sólo la última función, y dándole el nombre de init.

Por ahora nos detendremos aquí y continuaremos en la parte dos. Mientras lo preparo, estoy dispuesto a responder preguntas, y seguramente las preguntas y los comentarios ayudarán a generar las partes posteriores.

Nos mudamos a GitHub

2013-02-19T00:00:00-08:00

Si bien el blog de Makingsensers en WordPress seguirá abierto para que pueda postear allí aquel a quien le resulte más cómodo, desde Dev&Tech promoveremos el uso del blog de Makingsensers en GitHub.

La idea es que cualquier Makingsenser pueda postear allí, e inclusive mejorar las características del blog o el diseño del mismo Ver más detalles acerca de como colaborar.

Como mencionaba en los posts ”A blogging framework for hackers” y ”A blogging framework for hackers (Continuación)”, creo que como desarrolladores de software, podemos encontrar opciones más adecuadas para nosotros que WordPress o Blogger.

Conociendo Markdown o HTML, tener que lidiar con un dudoso editor WYSIWYG es innecesario. Por otro lado, GitHub Pages nos permite utilizar nuestro editor de texto favorito y Git; para posts rápidos o para quienes no utilizan Git, GitHub provee convenientes utilidades online o hay heramientas como Prose.

Para simplificar el mantenimiento, preferimos no hostear nosotros el blog, sino utilizarlo como un servicio. En ese case WordPress nos limita mucho: no podemos decidir que archivos JavaScript o CSS incluir en nuestro propio sitio. Con GitHub Pages y Jekyll, nosotros definimos los templates, la lógica del blog, y hasta la generación de los RSS. Además, es posible incluir cualquier archivo y páginas. Entre ellas, las instrucciones para colaborar aquí.

¡Espero ver sus contribuciones pronto!

Training finalizado – Doppler Monitor para iOS

2013-02-18T00:00:00-08:00

Según la recomendación de JF, Facundo Schwindt construyo un cliente del monitor de envíos de emails de Doppler para dispositivos iOS.

Para ello desarrollo una aplicación en Objective-C que consume el webservice existente, aplicó directivas de diseño y usabilidad recomendadas por el área de UI de la empresa, y además, creó su propio control para animar las transiciones entre los números.

Aquí podemos ver el demo realizado por Facundo:

Esperamos que en estos días pueda instalar la aplicación en los dispositivos iOS de los interesados.

Links

Ver Demo en Dropbox
CAP-41 en Jira (con capturas de pantalla y comentarios)
Código Fuente en GitHub

Felicitaciones Facundo!

La Prueba de la Pizza

2013-01-27T00:00:00-08:00

Hace tiempo atrás, en MakingSense tuvimos la oportunidad de trabajar en el desarrollo de una aplicación móvil. No sólo era para una empresa grande, sino que la aplicación iba a ser mostrada en vivo por Microsoft en la presentación //BUILD 2012 junto a Rackspace. Mi historia tratará sobre otra cosa, pero si les interesa, pueden leer más sobre eso en el blog de MakingSense, o asimismo en el blog de Rackspace.

Participé de este proyecto a pesar de muchos factores internos que lo dificultaban, pero me alegra haberlo hecho porque tenía características muy interesantes. Al comienzo de dicho proyecto, obtuvimos los requerimientos y analizamos sistemas de Rackspace para tener más contexto sobre lo que teníamos que hacer. En una de esas oportunidades, realizamos una reunión sobre alcance, diseño y experiencia de usuario.

César D’Onofrio fue parte de esa reunión, y nos compartió su opinión sobre la usabilidad deseada de una forma muy clara.

Deben imaginar que el usuario es un tipo que está en su casa mirando televisión, tiene una pizza en una mano y una tableta en la otra, usando la aplicación. Si para él no es fácil usar una mano y rápidamente ver lo que tiene que hacer, fallamos.

La prueba de la pizza quedó grabada en mi mente. Ustedes deben también recordar la sensación de mezclar pizza y dispositivos táctiles: En el mejor caso son difíciles de manejar, o una suciedad. Intentando evitar la suciedad, terminamos utilizando una mano para comer (y parte de nuestra atención) mientras con la otra mano sostenemos el dispositivo y manejarlo, o sólo usarlo si tenemos la suerte de una mesa. Alternativas incluyen las rodillas, pies, sillas, bancos, mascotas y objetos inanimados de variada forma.

Si estoy comiendo, viendo televisión o hablando con alguien, no quiero que una aplicación me haga pensar. Quiero grandes carteles rojos con calaveras si algo grave ocurrió, y si no es el caso, quiero un gráfico grande y fácil de leer para saber cómo anda todo, con botones grandes que sean claros en lo que ocurriría si los oprimo.

La posibilidad de tomar decisiones rápidas y no afectar nuestra comodidad son también características importantes, no sólo beneficios extra. La primera porque, obviamente, pensar y decidir requiere esfuerzo. Suena tonto, pero imaginen que son las 3 de la mañana, les llega un aviso importante y tienen que tomar una decisión. La decisión puede significar salvar a tu empresa o perder tu trabajo (sí, así es la administración de servidores). ¿Preferirían tener que concentrarse y evaluar las opciones, o preferirían que las opciones fueran claras y directas?

La característica de no afectar nuestra comodidad negativamente es también importante. Dejando de lado que una aplicación mal diseñada o incómoda puede resultar en que nos equivoquemos, para el usuario puede significa la diferencia entre la próxima vez utilizar esa aplicación u otra. Y para nosotros, como vendedores de aplicaciones, esto nos importa y mucho.

Hay quienes han logrado que sus aplicaciones sean hasta divertidas y adictivas. Ejemplos hay miles, y si ustedes analizan sus elecciones, encontrarán seguramente muchas de esas. ¿Por qué eligieron esas y no otras alternativas? Las respuestas pueden ser muy variadas, pero todo cuenta. Recordarán el juicio anti-monopolio contra Microsoft por entregar Internet Explorer preinstalado en Windows. ¿Por qué valió la pena un juicio para esto, si también era verdad que cualquiera podía instalar el navegador que más le gustara? La respuesta es que la mayoría de la gente no quería pasar por la incomodidad de elegir un navegador, bajarlo e instalarlo. Microsoft alegaba que le hacía la vida más fácil a los usuarios, los demandantes aseguraban que Microsoft se aseguraba tener más mercado con esas movidas desleales. ¿Qué piensan ustedes?

Al fin y al cabo, la prueba de la pizza es contundente. ¿Pueden comer pizza y jugar Angry Birds? Yo pude. ¿Pueden comer pizza y manejar Excel? Yo pude. ¿Pueden comer pizza y escribir un artículo de un blog? Yo no.

¿Pueden comer pizza y administrar servidores en Rackspace? Sí, y fue muy divertido lograrlo.

(via Alpha’s Manifesto)

My Menu - Instructivo

2013-01-24T00:00:00-08:00

Al entrar a la página principal 1, se muestra el plato y lugar seleccionado para el día actual 2.

Configuración

En la solapa de Configuración definir el lugar por defecto 3 donde se espera el almuerzo.

En las solapas de las semanas (Semana 1, Semana 2, Semana 3, Semana 4, Semana 5) seleccionar el plato deseado para cada día 4. También puede modificarse el lugar 5.

La fecha 6 está a modo de referencia e indica la fecha más cercana en que corresponde ese menú. Por ejemplo, en la imagen vemos que yo seleccioné “Milanesa de Zapallitos…”: esa será mi comida el día 11 de febrero y, a menos que algo cambie, también lo será el día 18 de marzo (cinco semanas después).

En la solapa Días específicos puede agregarse días en que se modifica la selección semanal. Se debe ingresar la fecha 7 y un comentario 8. Se puede cancelar totalmente la comida 9, cambiar el plato 10 o indicar que se espera la comida en otra oficina 11.

ATENCION: Recordar guardar los cambios 12.

Hora límite

A las 9:30 AM de cada día se genera el pedido correspondiente, por lo que cualquier cambio realizado luego de esa hora no se verá reflejado.

Es fácil saber si el pedido ya se ha realizado observando la barra indicativa verde o naranja 13.

Como se ve en la captura anterior, luego de realizado el pedido los cambios para el día no se aplican.

Disclaimer

Recordar que CommonJobs y MyMenu son desarrollos OpenSource realizados en ratos libres. Cualquier mejora es bienvenida, descargá el código fuente de GitHub y hacé tu Pull Request.

Hello World!

2013-01-22T00:00:00-08:00

This is our first post.

Hello world!

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace HelloWorld
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
            Console.ReadLine();
        }
    }
}

A blogging framework for hackers (Continuación)

2013-01-22T00:00:00-08:00

Luego de desahogarme en un post anterior, continué investigando y probando opciones de blogs basados en jekyll y GitHub.

La idea es interesante: preparamos los fuentes jekyll del sitio y los post, luego GitHub se encarga de generar el sitio HTML. Los fuentes de posts son archivos HTML con Liquid o Markdown y tenemos total libertad en cuanto a la estructura del sitio y el contenido. Además, no tenemos que lidiar con esos editores de texto online pseudo WYSIWYG ya que trabajamos con archivos de texto y la publicación la realizamos con nuestro sistema de control de versiones preferido: Git.

Intento 1 - Preparar un sitio desde cero

En principio intenté preparar un sitio desde cero, o copiando otros como el de Eric Jones. Dado mi escaso conocimiento de Ruby, Jekyll y Liquid, creo que no fue una buena elección ya que la estructura no resultó la mejor y algunos literales como la URL base del sitio quedaron repartidos por todo el código. De cualquier manera, rescaté la experiencia y unos snippets de código que utilicé luego.

Intento 2 - Octopress

Octopress está muy bien, es muy completo y tiene buena terminación.

Pero, el sitio no es generado por GitHub sino que cuenta con unos scripts para generarlo localmente. Para un blog personal no me parece una mala opción, pero si son muchos los editores, creo que se vuelve un poco más incomodo. Además, perdemos la posibilidad de postear directamente desde GitHub con la feature de crear archivos.

Como en el caso anterior, Octopress será una buena cantera para extraer ejemplos, snippets e ideas para utilizar.

Intento 3 - Jekyll-Bootstrap

Jekyll-Bootstrap resultó ser la opción elegida. Tiene un diseño modular, con templates y helpers. No está tan pulido como Octopress, pero es un buen punto de partida para comenzar a personalizar el sitio.

Mi prueba de concepto

El objetivo era que las mejoras en estilos, templates y layout no se mezclen con la instancia del sitio, de manera de que se puedan utilizar en otros blogs.

Preparé un repositorio Jekyll-Bootstrap-MS, basado en Jekyll-Bootstrap, con algunas modificaciones y adaptaciones. Es aquí donde se deberían realizar las mejoras y personalizaciones de estilos, templates y layout que puedan reutilizarse.

Por otro lado, creé otro repositorio para mi blog personal basado en el anterior. Aquí publicaré mis posts, realizaré cambios puntuales en el layout e ire mergeando las mejoras realizadas en Jekyll-Bootstrap-MS.

Para probar Jekyll-Bootstrap-MS desde GitHub

El branch gh-pages de Jekyll-Bootstrap-MS está publicado en http://makingsense.github.com/jekyll-bootstrap-ms. Es posible realizar un Fork de este repositorio y probarlo con la propia cuenta de GitHub, sin necesidad de descargar nada, utilizando las herramientas provistas por GitHub.

Para probar Jekyll-Bootstrap-MS localmente en Windows

Requistos

Cliente Git

Yo utilizó Git Extensions que ya incluye MINGW y Git Bash.

Instalar de Ruby

Desde Ruby Installer descargar e instalar la última versión de Ruby.
Verificar que Ruby esté en el Path o agregarlo.
También desde Ruby Installer descargar el Development Kit, descomprimirlo.
Desde Git bash ejecutar:

$ cd C:/RubyDevKit
$ ruby dk.rb init
$ ruby dk.rb install

Instalar Python (requerido si hay páginas con resaltado de sintaxis)

Descargar Python 2.7 e instalar
Verificar que Python esté en el Path o agregarlo.

Instalar Jekyll

Desde Git bash instalar Jekyll:

$ gem install jekyll

Descargar Jekyll-Bootstrap-MS

Desde Git bash:

$ git clone https://github.com/MakingSense/jekyll-bootstrap-ms.git

Ejecutar Jekyll

$ cd jekyll-bootstrap-ms
$ jekyll --server

Abrir http://localhost:4000 en el navegador

Pendiente

Algunas posibles mejoras (ver board en trello):

Estaría bien agregar los números de línea en los snippets de código
Definir mejor la estructura por defecto del sitio. Por ejemplo, en lugar de un listado de posts en la página de indice, se podrían mostrar los últimos posts completos y la posibilidad de ver los anteriores.
Link a la página de GitHub de la cuenta asociada al blog.
Link al source en GitHub del post o página actual.
Mejorar la utilización de Twitter Bootstrap, por ejemplo utilizando fluid rows
Personalizar Twitter Bootstrap y los estilos.

Invitación

Creo que este es el motor ideal para un blog de desarrolladores de software. Espero su feedback, críticas, refutaciones, consultas o pull requests en Jekyll-Bootstrap-MS.

My Menu - Invitación

2013-01-21T00:00:00-08:00

Trabajamos en una empresa de soft, desarrollamos software y somos buenos haciendoló. Por eso, creo que es bueno que participemos en el desarrollo y mejoras de las aplicaciones que utilizamos día a día. Ese es el caso del sistema de selección de las comidas diarias: nosotros deberíamos arreglarlo, mejorarlo, optimizarlo y, llegado el caso, reemplazarlo completamente.

My Menu (sistema que presenté en un post anterior) fue creado con el objetivo principal de probar y conocer algunas tecnologías, sé que el código y diseño no es el mejor. Tampoco está en producción actualmente.

Igualmente, creo que tiene algunas características interesantes y que puede ser una buena base para continuar juntos el desarrollo de una herramienta que utilizamos todos los días. Por eso me decidí a invitar a que visiten el código fuente y a que propongan cambios y mejoras.

My Menu forma parte de CommonJobs, un sistema de uso interno del área de recursos humanos de la empresa, y utiliza su base de datos y servidores.

En el assembly CommonJobs.Domain.MyMenu se describe el dominio; en CommonJobs.Application.MyMenu se utiliza la infraestructura de CommonJobs para persistencia, y tareas recurrentes; y el grueso del código está en el proyecto CommonJobs.Mvc.UI donde están los ViewModels y los templates de las páginas:

Espero en futuros posts ir más en detalle sobre los puntos o tecnologías interesantes. Mientras tanto, ¡espero pull requests en GitHub!

Bonus Track

Dado que no encontré ningún datepicker con las características deseadas y que se integrara correctamente con TypeScript, Bootstrap, Knockout y Moment.js, preparé moment-datepicker basado en bootstrap-datepicker de Stefan Petre. Es simple, fácil de usar y tiene su paquete de nuget listo para utilizar en Visual Studio.

AMD & RequireJS

2013-01-10T00:00:00-08:00

Hi everyone, this is my first post here! So I encourage you to be comprehensive with my bad writing skills :)

That being said, let’s start!

In this post, I’ll give you a first glance about modules in javascript, and a library to load them, RequireJS, so you can keep your code modularized and loading faster than ever!

So, AMD, is not what you are thinking (Advanced Micro Devices), it actually stands for Asynchronous Module Definition. AMD definitions makes your modules faster to load, organizes your app, and let’s you load modules only when you need them.

I suggest you read this presentation about AMD as it helps you understand what is it, and how you can use it.

But no worries, I’ll explain that too!

How we define a javascript module using AMD? is super easy, this is a simple module:

define(
    [
        'depA',
        'depB',
        'depC'
    ],
    function (depA, depB, depC) {
        var myModule = {};
        // build your module here
        myModule.foo = depA.getFoo();
        return myModule;
    }
);

To define a module, you need:

To define a dependency list (or not), that needs to be load in order to use this module.
And to define your javascript module. Just create a function, with the dependencies as parameters, and then return your module so it can be use from outside

That’s it!

Now that we have our module working, let’s learn how to load it, and that’s where require comes in.

In order to load a module, with its dependencies, asynchronously and only when you really need it, you need to use require as this:

require(
    ["modA", "modB"],
    function (modA, modB) {
        // do something with modA and modB
        // when they are fully loaded
    }
);

To load a module, you need:

To ask for what modules you need using require
Once they are loaded, use them!!

Yup, that’s it.

Notice that the function using the modules, is a callback function, that means, it won’t execute until all modules finished loading.

Now let’s see some actual code.

First, you need to download RequireJS.

Once you downloaded it, create an index.html with a head that looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Using RequireJS</title>
    <!-- we reference requirejs and tell it that what we want to load is specified in data-main -->
    <script data-main="scripts/main" src="scripts/require.js"></script>
  </head>
  <body>
  </body>
</html>

In this simple expample, our Structure is very very super! basic.

Project
Project/index.html
Project/scripts
Project/scripts/require.js
Project/scripts/main.js
Project/scripts/movie.js

Let’s take a look at main.js

// Here we are loading a "movie" module to use in our callback function
require(["movie"], function(Movie) {
    var a = new Movie();
	  a.setAttribute('name','terminator');
	  console.log(a.getAttribute('name'));
});

As we said before, we ask require for the modules we want to use (movie) and create a callback function (function(movie)) to use it. Here we are just seting its name to “terminator”, since is an awesome movie.

Now let’s take a look at movie.js

define("movie", function () {
  //Constructor
	var Movie = function () {
	};
 
	//Private vars and functions
	var attributes = {};			
	Movie.prototype = {
		constructor : Movie
		,getAttribute : function (key){
			return attributes[key];
			}
 
		,setAttribute : function (key,value){
				attributes[key] = value;
			}				
	};
	return Movie;
});

Let’s see the code:

First, we declare our dependencies (in this case, since we don’t have any, we just ommit them), then, we have the option to declare a module with a name. In this case I called it movie. And after that, the declaration of the module itself.

There are a few ways to do this, but to make the post shorter, I’ll explain one, using constructor, prototype, private vars, etc.

//Constructor
    var Movie = function () {
};

This code just creates a variable, called Movie, of type function, so it takes its prototype.

After that, we create a simple private variable that we’ll use as a hash table.

//Private vars and functions
var attributes = {};

And then, we extend the prototype of the Movie variable.

We specify its constructor function (Wich is called Movie if you remember). After that we add two methos to set and get the values from our private variables.

Movie.prototype = {
  constructor : Movie
	,getAttribute : function (key){
		return attributes[key];
	}
	,setAttribute : function (key,value){
			attributes[key] = value;
	}			
};

And once we are done, we return our module:

return Movie;

There are several discussion topics in the last code, I encourage you to read about prototypes if you are interested on how they work. And Here is my github code that shows something very similar to what is shown on this post

Ok that’s it for today, I hope I didn’t bored you to death and see you next time!

Training finalizado – HTML5 and jQuery

2013-01-02T00:00:00-08:00

Leo Lopez terminó su self-training relacionado con MVC, EF, HTML5 y jQuery (CAP-34). Experimentó consumiendo webservices RESTlike desde .NET, también con varias librerías de JavaScript interesantes: jquery-tmpl, Flot, Raphael y con Boilerplate, un template para crear sitios HTML5 siguiendo buenas prácticas.

Demo
Post Relacionados (van a ir agregándose más)
Código

¡Felicitaciones Leo!

Encontrá más información sobre el programa de capacitaciones en la Intranet: display/DTRU/Programa+de+Capacitaciones.

jquery-tmpl (templates)

2012-12-28T00:00:00-08:00

jQuery plug-in: jquery-tmpl

Aclaración: Es conveniente aclarar que el equipo de jQuery ha decidido no hacer uso de este plugin ya que no está siendo activamente desarrollado o mantenido desde hace un tiempo ya. Cuando se comenzó a utilizar en el self training no se tenía conocimiento de esto pero de todos modos, para el uso que se le dió, fue útil y funcionó correctamente.

Uso en News At A Glance

() News at a Glance en GitHub

Situación planteada

Se necesitaba poder contar con templates para los diferentes tamaños de ’tiles’ que debía mostrar, y manejar, la aplicación (small, medium y large) para los diferentes tipos de información mostrada (noticias, equipos y videos publicitarios)

Resolución usando jquery-tmpl plugin

Descargar e incluir en el proyecto el plugin:

<script src="@Url.Content("~/Scripts/Libs/jQuery.tmpl.min.js")" type="text/javascript"></script>

Agregar un archivo html para cada tipo de información a mostrar (noticias, equipos, videos). En nuestro caso, para las noticias, se agregó News.html.
Dentro de cada archivo incluir los 3 templates, 1 para cada tamaño de tile considerado: small, medium y large. El tag principal del template debe tener la siguiente forma:

<!-- template para noticia tamaño small -->
<script id="NewsTemplate_Small" type="text/x-jquery-tmpl">

Ahora, usando $("#myTemplate").tmpl([data]) se indica que el template correspondiente se bindeará con determinada data (puede ser algún JavaScript type, incluyendo Array u Object). En la app:

var template = $('#' + tileName + 'Template_' + size); //se obtiene el template
template.tmpl(data); //se bindea la data correspondiente

Para identificar los valores a tener en cuenta al momento de renderizar la data sobre el template se debe considerar la siguiente sintaxis en la definición del template: <span id="spNewsSource">${Source}</span>. Con el template tag: ${Source} se indica que la data pasada por parametro tendrá una property llamada Source con un value que será renderizado sobre el <span> en cuestión. Se puede bindear de esta forma ya sea el value de un span como la property ref en un anchor <a id="lnkNews" href="${Url}", el source de una imagen, los ids de elementos html, etc. Ver documentación para los varios template tags: ${}, {{each}}, {{if}}, {{else}}, {{html}}, {{tmpl}} {{wrap}}.
El método $.tmpl() retorna una jQuery collection y es diseñado para encadenar con .appendTo, .prependTo, .insertAfter or .insertBefore, como en este ejemplo: $.tmpl("<li>${Name}</li>",{"Name" : "John Doe"}).appendTo("#target"). En la app, el valor retornado por este método, se utilizó de la siguiente manera: tileDiv.html(template) (Para el div del tile en cuestión se define la property html usando el template).

Conclusión

El plugin permitió una gran comodidad y facilidad para mostrar, bindear y manejar templates previamente definidos sobre los cuales debía mostrarse diferente información, dependiendo del tamaño del template, de manera dinámica (en el momento de la obtención de la noticias).

Flot

2012-12-28T00:00:00-08:00

Flot (librería javascript para JQuery)

(*) En GitHub: https://github.com/flot/flot/blob/master/README.md

Instalación

Descargar e incluir el archivo javascript después de la inclusión del archivo de JQuery. (Generalmente todos los browsers que soportan el tag de HTML5 canvas soportan el uso del plugin)

Uso básico

Crear un div contenedor para poner el gráfico: <div id="placeholder"></div>.
Se necesita definir el ancho y el alto del div porque sino la librería de ploteado no sabe manejar la escala del gráfico: <div id="placeholder" style="width:600px;height:300px"></div>
Cuando el div esté listo en el DOM invocamos a la función plot: $.plot($("#placeholder"), data, options);
La data es un arreglo con las series a bindear y options es un objeto con diversos settings para customizar la gráfica resultante del ploteado. Este es un ejemplo rápido que dibuja una línea desde el punto (0,0) a (1,1): $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });

(*) La función plot inmediatamente dibuja la gráfica y returna un objeto plot con algunos métodos.

Uso en News At A Glance

Situación planteada

Graficar el progreso en la posición en el campeonato para un determinado equipo.

Solución usando el plugin

En el archivo de Team.html, donde se encuentran los templates definidos para los distintos tamaños de información a mostrar para un equipo, se definió el div contenedor del gráfico de la siguiente manera: <div id="progressPositionCanvas${GraphName}" class="canvas"></div> (esto para el template de tamaño large)
En la funcion formatTeams del scene.tile.formatter.js se obtiene el div contenedor: var canvasDiv = $('#progressPositionCanvas' + tileDiv.data().tileData.GraphName);
Luego se invoca a la función renderCanvas pasandole este div previamente obtenido (más otros valores como la data a bindear, ancho, alto, etc): renderCanvas(canvasDiv, width, height, json.AltColor, json, json.PositionProgress);
Dentro de renderCanvas lo que hacemos es armar el arreglo de puntos a bindear (points), definimos un objeto chartOptions que son los settings para customizar la gráfica:

var chartOptions = {
	series: {
		lines: { show: true, fill: true },
		points: { show: true, radius: 10 }
	},

	grid: { hoverable: true, autoHighlight: true },
	legend: { position: 'se' },

    // Explaination for tickFormatter definition: Max value on axis Y is replaced by custom string: 'Pos.'. The same to the axis X.
    yaxis: { max: maxY, min: 1, tickFormatter: function (val, axis) { return val < axis.max ? val.toFixed(0) : "Pos."; } },
    xaxis: { max: maxX, min: 1, tickFormatter: function (val, axis) { return val < axis.max ? val.toFixed(0) : "Fecha"; } }
};

Se puede notar como se define el máximo y mínimo para el eje X e Y. Se defina la ubicación de la leyenda sobre la gráfica. Se indica que se haga highlight automático cuando se pasa el mouse sobre la gráfica. Se define, también, para las series el tamaño de los puntos y el formato de las líneas. Y se pueden definir varias opciones más.

Por ultimo invocamos a plot para dibujar la gráfica con los datos y las opciones que definimos: $.plot(canvasDiv, chartOptions);

Conclusión

Muy sencilla manera de aprovechar la característica canvas de HTML5 para construir gráficas agradables y con muchas opciones más de las aquí explicadas.

A blogging framework for hackers

2012-12-27T00:00:00-08:00

Estaba escribiendo mi segundo post de la serie sobre mi self-training, pero me siento raro con WordPress. No me siento cómodo escribiendo en su editor wysiwyg; el resaltado de código es feo; hasta ahora ninguno de los templates que pusimos me resultó agradable; quise pegar texto que escribí en markdown o html y me lo rompió. Si no tenemos hosting propio no tenemos control sobre el javascript, css ni podemos instalar plugins.

Este es un blog de desarrolladores de software, deberíamos utilizar un blog engine hecho para nosotros.

GitHub Pages parece ideal: tenemos hosting gratis, git, markdown, resaltado de código, etc. En su momento yo lo había descartado porque no permitía comentarios, pero eso se resuelve con Disqus.

Otra opción es Octopress, pero necesitaríamos hosting (Update: funciona con GitHub, pero el build del sitio se realiza manualmente).

Algunos ejemplos de blogs sobre GitHub Pages:

Más lindo está Pixel-in-Gene, construido sobre Octopress, pero no parece tener nada interesante que no se pueda hacer con Jekill y GitHub Pages.

¿Ustedes que opinan? ¿Conocen otras opciones?

My Menu - Introducción

2012-12-26T00:00:00-08:00

En el marco del self-training CAP-42 estuve experimentando con varias tecnologías en las que quería profundizar. Próximamente espero realizar una serie de posts con mis impresiones sobre cada una y de la interacción entre ellas.

Las tecnologías

KnockoutJS - Librería de JavaScript para facilitar la creación de interfaces web ricas y dinámicas mediante el patrón de MVVM, bindings y observables.
TypeScript - Súper conjunto de JavaScript que le añade tipado opcional, clases y módulos. Al compilarse genera código JavaScript limpio y basado en estándares.
Twitter Bootstrap - Framework CSS para desarrollar aplicaciones web rápidamente, con un estilo consistente, simple y agradable. También incluye algunas utilidades extensiones JavaScript.
NuGet - Extensión de Visual Studio para instalar y actualizar librerías de terceros (en realidad lo que me interesaba a mi era la publicación de paquetes).
Moment.js - Librería JavaScript para parseo, validación, manipulación, y formateo de fechas.

El sistema

El objetivo, a la vez de aprender, era desarrollar un sistema para simplificar la gestión de los pedidos diarios de comida realizados en la empresa.

El sistema se empezó a construir sin apuro, con la idea de investigar, experimentar y probar lo aprendido en un entorno real. Entre tanto, dado que ocurrieron algunos inconvenientes con los pedidos, en tiempo récord JF implementó e implantó un sistema con similar objetivo, el cual está cumpliendo muy bien su cometido. Por lo tanto, es probable que mi sistema nunca salga a producción.

De cualquier manera, está disponible para ser probado en AppHarbor y, para los empleados de la empresa, como parte del sistema de uso interno CommonJobs.

El problema

Cada día, antes de las 10 de la mañana, los empleados pueden elegir la comida del día entre 3 opciones (_Normal_, Light, Vegetariano). Los platos correspondientes a cada opción son diferentes cada día durante 5 semanas (pasados los cuales los platos se repiten).

Originalmente, estábamos utilizando una planilla de Google Docs para marcar las preferencias de cada empleado en cada día de las 5 semanas. Pero dado que esa planilla era compartida, no se permitía acceso de edición a todos y era complicado realizar modificaciones. Por otro lado, solía ocurrir que por una situación particular un empleado cancelara el menú de un día, y pasadas las 5 semanas no recibiera su comida ya que alguien olvidó quitar la “cancelación”.

Otra característica que me interesaba incluir, era la posibilidad de seleccionar el lugar donde comer. No es tan común, pero a veces ocurre que, un empleado, un día en particular, por ejemplo por una reunión, no coma en la oficina de siempre sino en otra, por lo que sería bueno que la comida se le envíe allí.

UI del empleado

Cuando el empleado entra al sistema, ve una pantalla con su selección para el día actual.

Si ya ha pasado la hora límite para cambiar el pedido, se le indica con una barra amarilla que el pedido ya se realizó. Si aún hay tiempo para modificarlo, se le indica con una barra verde.

El empleado puede marcar sus preferencias (menú y lugar) para cada día de las 5 semanas. Las fechas que se observan a la derecha son solo referencias: La configuración del Lunes de la semana 2 será válida tanto para el 28 de Enero 2013 como para el 4 de Marzo.

Se puede modificar la elección para días particulares, sobrescribiendo la elección semanal. Por ejemplo, si el empleado sabe que el día 9 de Enero de 2013 (dentro de dos meses o mañana) no estará presente, puede cancelarlo indicando la fecha. De la misma manera puede modificarse el menú o lugar para una fecha puntual.

Por último, todos los empleados pueden ver el resumen y detalle completo del pedido, lo cual es muy útil si alguno de ellos no puede acceder al sistema o hay que resolver una discusión acerca de un plato faltante.

UI de administración

El administrador del menú, además de ver el pedido del día, antes de las 10 de la mañana, puede generarlo por anticipado; O bien, luego de las 10, puede volver a generar un pedido en base a la selección actual de cada empleado.

También puede editar las selecciones de cualquier empleado.

Definir los platos correspondientes a cada día del menú.

Y redefinir completamente el menú: modificar o agregar opciones y lugares, cambiar las fechas y la cantidad de semanas.

Clean Code Tips (Week 3)

2012-12-07T00:00:00-08:00

Hi there! A new weekend is coming. The weekly Clean Code Tips are here:

Clear and expressive code with few comments is far superior to cluttered and complex code with lots of comments. Rather than spend your time writing the comments that explain what you’ve made, spend it cleaning your code

Choosing descriptive names will clarify the design of the module in your mind and help you to improve it. It is not at all uncommon that hunting for a good name results in a favorable restructuring of the code.

Short functions don’t need much description. A well-chosen name for a small function that does one thing is usually better than a comment header.

It is sometimes reasonable to leave “To do” notes in the form of //TODO comments. In that case, the TODO comment explains why the function has a degenerate or unfinished implementation and what that function should do in the future. Another good choice is to use FIXME comments.

Use searchable names: Single-letter names and numeric constants have a particular problem in that they are not easy to locate across a body of text

Special thanks to Ale Fantini, who added some new Clean Code ideas. Everybody is invited to share more tips. All tips have been taken from Robert Martin’s Clean Code book

You will find a new post on December 21, since I’m on vacation the next week

UX 2012, Jornada de Experiencia de Usuario

2012-12-06T00:00:00-08:00

El 28 de noviembre de 2012, Día Mundial de la Usabilidad, asistimos junto a Nacho Caldentey a la Jornada de Experiencia de Usuario UX2012 en el Centro Cultural San Martín.

Este es el principal evento profesional en Argentina sobre Experiencia de Usuario, Usabilidad, Diseño de Interacción, Accesibilidad y temáticas relacionadas.

Si bien no era un evento multitudinario hubo mas de 400 asistentes y una variedad de oradores nacionales e internacionales dando hasta cuatro charlas en simultaneo, así que con Nacho nos repartimos un poco entre las charlas que nos resultaron mas interesantes.

Algunas de las charlas fueron introductorias en las que te alentaban a incorporar la usabilidad y la accesibilidad en los procesos de diseño y desarrollo de interfaces. Otras eran mas avanzadas, con el objetivo de perfeccionarse en las técnicas y metodologías de UX. También se dictaron algunos talleres para poner en práctica las técnicas básicas del Diseño Centrado en el Usuario como lo fue el Taller prototipado rápido y testo de usabilidad de usuarios que dicto Guillermo Ermel (Lider de Usabilidad en MercadoLibre).

Tambien fue bueno encontrar diversidad en los asistentes, ya que había profesionales de diferentes areas como Sociologos, Psicologos y no solo estudiantes y profesionales de Diseño, esto hizo mas rico el feedback en las charlas y ver mas perspectivas de un mismo topico.

En conclusion fue un evento motivador de muchas maneras, no solo por aprender cosas nuevas y volver con muchas ganas para aplicarlas en nuestro productos, sino tambien porque hay una comunidad en crecimiento en nuestro país interesada en hacer crecer la disciplina y compartir conocimientos.

Clean Code Tips (Week 2)

2012-11-30T00:00:00-08:00

Hello again! The Clean Code tips for the current week are…

The first rule of functions is that they should be small. This implies that the blocks within if statements,else statements,while statements, and so on should be one line long.

The smaller and more focused a function is, the easier it is to choose a descriptive name.

If a function is divided into sections this is an obvious symptom of doing more than one thing. Functions that do one thing cannot be reasonably divided into sections.

Don’t be afraid to make a name long. A long descriptive name is better than a short enigmatic name. A long descriptive name is better than a long descriptive comment.

I hope it helps in your daily work!

All tips have been taken from Robert Martin’s Clean Code book

Stay tuned for the next week.

Html5 Boilerplate

2012-11-23T00:00:00-08:00

HTML5 Boilerplate nos ofrece simplificar el proceso de construcción de sitios web en HTML5 y para ello nos permite descargar una especie de template o plantilla que puede ayudar no solo a los desarrolladores web novatos, sino también a los más experimentados.

Con H5BP podemos obtener código del mejor (está desarrollado por gurues como Paul Irish) para: normalización para todos los navegadores (cross-browsing), optimización de performance, optmizaciones para navegadores en dispositivos móviles, clases específicas para IE, clases “no-js” y “js” para estilos basados en capacidades del navegador, un archivo .htaccess que permite el uso correcto de características HTML5 y carga de página más rápida, y mucho más; todo hecho teniendo en cuenta las mejores prácticas de hoy en día en el desarrollo web.

Incluso aunque no lo vayas a usar, puede ser algo muy instructivo el solo hecho de ver cómo está desarrollado.

Al visitar el sitio tienes 3 opciones: descargar la versión comentada y explicada, descargar la versión sin comentarios o la opción de personalizar lo que descargues.

Para News At A Glance tome en cuenta las siguientes consideraciones: (Para mayor detalle referirse a HTML5 Boilerplate documentation)

El orden de los meta tags y <title>: Como se recomienda en las especificaciones de HTML5, se debe agregar la declaración de “charset” tempranamente (antes de cualquier ASCII) para evitar un potencial problema de seguridad relacionado al encoding en IE.El charset debería, además, aparecer antes del <title> para evitar un potencial XSS vectors. El meta tag que define la comptibilidad necesita estar antes que todos los elementos (<!DOCTYPE html>).
X-UA-Compatible: Esto asegura que la última version de IE es usada en versiones de IE que contienen multiples motores de renderizado. Aun, si se estuviese usando IE8 o IE9, es posible que ellos no esten usando el último motor de renderizado que el browser contiene. Entonces, para solucionar esto, se usa: <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″> El meta tag le dice al motor de renderizado de IE 2 cosas: 1) Debería usar la última version (edge) del motor de renderizado. 2) Si está instalado debería usar el motor de renderizado Google Chrome Frame. Este meta tag asegura que cualquiera que “browsee” tu sitio será “recibido” con la mejor expriencia de usuario posible que su browser pueda ofrecer.
Modernizr: HTML5 Boilerplate usa un build customizado de Modernizr.Modernizr es una librería de Javascript la cual nos ofrece la posibilidad de detectar el soporte que tiene el actual navegador para la especificación de HTML5 y además nos permite crear un estilo css en caso de que la especificación de css3 no funcione. Y para IE permite dar estilo a las nuevas etiquetas de HTML5. En general, con el fin de minimizar el tiempo de carga de la pagina, es mejor llamar a cualquier js al final de la pagina. Pero, dicho esto, el script de Modernizr necesita correr antes que el browser comienze a renderizar la página, por lo que los browsers que carecen de apoyo para algunos de los nuevos elementos de HTML5 sean capaces de manejarlos adecuadamente. Por lo tanto, el script Modernizr es el único js sincrono cargado al comienzo del documento.
Google CDN for jQuery: La version de Google CDN de la librería de JQuery es referenciada hacia el final de la pagina usando un protocolo independiente.Una refencia a una librería local de JQuery es incluida para los raros casos en que la version de CDN no se encuentre disponible, y para facilitar el desarrollo off-line.

Training de WPF finalizado

2012-11-22T00:00:00-08:00

Gastón Claret terminó sus self-trainings relacionados con WPF (CAP-45 y CAP-48). Obtuvo conocimientos y conclusiones interesantes, que nos pueden servir a quienes queremos conocer un poco más de esta tecnología. Además, profundizó en algunas características avanzadas de C# y .NET en general.

Código: st-wpf-tvShows y WPF-Unleashed
Documentación: st-wpf-tvShows, WPF-Unleashed e intro-to-mvvm

Algunos temas incluidos:

XAML & Binding
ICommand Interface
MVVM Desing Pattern
Validaciones en WPF
Parametrized queries con ADO.NET
Delegates, Anonymous Methods and Lambda Expressions
WPF Styles and Control Templates
Dependency Injection with Unity

Felicitaciones Gastón!

Encontrá más información sobre el programa de capacitaciones en la Intranet: display/DTRU/Programa+de+Capacitaciones.

Intro to MVVM

2012-11-22T00:00:00-08:00

In this post, I want to share a very interesting presentation explaining the Model View ViewModel (MVVM) pattern, and how it can be implemented in WPF. After reading several blogs and web pages about this design pattern, I still couldn’t get my head around how it worked and it’s uses/advantages.

Then, I stumbled upon a post in which over 30 comments recommended a video on this topic by Jason Dollinger. I immediately decided to look it up, and give it a go. I must say, that hour and a half of presentation was far more productive than all the days I had spent on this topic!

What’s really good about this video, is that Jason starts out with a simple, yet powerful project example. He explains how to solve the problem in a more “traditional” way, with button clicks handled by event-handlers in the code behind, which then updated other parts of the UI. This is probably the approach that anyone without knowledge of WPF’s binding potential would take.

Here is where this gets interesting. After a lot of explanation about why this isn´t the way to do this, if you want to take full advantage of WPF, he starts to introduce the MVVM design concept. Using WPF, data binding and Commands, he transformed the application in a more manageable, readable and testable one.

A lot of other topics are covered in this video, such as Dependency Injection via Unity, Inversion of Control, Unit Testing, Blendability and much more. All of these concepts are really important to learn how to build a decoupled and testable application.

What’s really important about using this design patter, is that if you are building a robust application, with this separation of concerns, you can be working on all the logic of the code, while a designer is doing the View, totally oblivious of one another. Also, using mock ViewModels (also shown in the video), the designers can create test data to use in Blend, and see how it would look in dynamic data containers, such as GridViews.

After watching this presentation, I decided to watch it yet again, following the steps in his code, and recreate the application gradually. In this GitHub repository, you can see this implementation. Keep in mind, that this was done in the same step-by-step fashion as the video, so in each commit, a new concept was introduced.

Also, if you are interested in downloading this video, it can be found here.

Check it out. It is, by far, the best introduction to MVVM and WPF I have found on the web!

CSS Tip

2012-11-22T00:00:00-08:00

If you find elements that use the same properties and values, group them together by using a comma (,) to separate each selector. This will save you from repetition.

For example, if you have the following:

h1 {
    color:#000;
}
h2 {
    color:#000;
}

Combine them as such:

h1, h2 {
    color:#000;
}

Clean Code Tips (Week 1)

2012-11-22T00:00:00-08:00

Hello MakingSensers! Today I want to share the latest Clean Code Tips from the last week with you.

The name of a variable, function, or class should answer all the big questions. It should tell you why it exists, what it does, and how it is used. If a name requires a comment, then the name does not reveal its intent.

Programmers must avoid leaving false clues that obscure the meaning of code. We should avoid words whose entrenched meanings vary from our intended meaning. For example, hp, aix, and sco would be poor variable names. Abbreviations can be disinformative.

Avoid the “Do”, “Data”, “Work”, “Process”. These spawn strange creatures like “DoWork” “CheckData”, “ProcessEmployee” and other nameless horrors.

Noise words are redundant. The word variable should never appear in a variable name. The word table should never appear in a table name. How is NameString better than Name? Would a Name ever be a floating point number?

Classes and objects should have noun or noun phrase names like Customer, WikiPage,Account, and AddressParser. Methods should have verb or verb phrase names like postPayment, deletePage, or save.

Pick one word for one abstract concept and stick with it. For instance, it’s confusing to have “fetch”, “retrieve”,and “get” as equivalent methods of different classes.

People who read your code will be programmers. So, its a good idea to use computer science terms, algorithm names, pattern names, math terms, and so forth.

Special thanks to JD Raimondi, who added some new Clean Code ideas. Everybody is invited to share more tips. All tips have been taken from Robert Martin’s Clean Code book

Stay tuned for the next week.

Agregar epígrafes de manera semántica con HTML5

2012-11-22T00:00:00-08:00

Actualmente cuando queremos ponerle el epigrafe al pie una imagen (caption) haríamos algo así

<img src="path/a-la/imagen" alt="Acerca de la imagen" /> 
<p>Breve descripción de lo que hay en la imagen</p>
Esta forma de hacerlo no dejaba asociado de manera semántica la imagen a su epígrafe.
Pero hoy con HTML5 y los elementos figure y figcaption se puede hacer de la siguiente manera.

<figure> 
   <img src="path/to/image" alt="About image" /> 
   <figcaption> 
      <p>This is an image of something interesting. </p> 
   </figcaption> 
</figure>

Para ver el soporte que tiene en los navegadores podés checkearlo http://caniuse.com/#search=figurea