C# Rules

Usando el RenderSection en MVC, aprendiendo a colocar el código en su lugar

2014-11-24T14:50:00.000+01:00

Una buena práctica al diseñar una página web para obtener un buen rendimiento en la carga de esta, es cargar los archivos .css al inicio de la página y los scripts al final de esta. Lamentablemente hoy en día sigue habiendo muchas páginas que al renderizarse terminan mostrando los estilos o scripts en muchas partes de la página generando un pobre rendimiento o muchas veces rompiendo código. Normalmente esto sucede al usar vistas parciales que contienen sus propios scripts y al renderizarse en la página que las contiene, estos scripts son renderizados en la posición de su vista parcial.

Está claro que hay casos en el que es necesario cargar ciertos scripts al inicio de la página cuando queremos tener cierta funcionalidad. Un ejemplo claro sería cuando quieres implementar AMD usando Require.js y en este caso es necesario declarar Jquery al inicio de la página para que funcione.

Veamos un ejemplo:

Master Page:
Partial Page:

 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


Index

En este código mostramos una página maestra y una pagina parcial. En la página maestra en la línea 12 se referencia al bundle que contiene la librería de jquery, y en la página parcial en la línea 9 se utiliza jquery para lanzar un alert cuando la página este lista. Si ejecutamos debería "en teoría" mostrarse el alert de hola cuando se halla cargado la página, pero sucede esto:

Y se le damos a continue vemos el código total de la página renderizada

Si nos fijamos en la imagen, el código de la vista parcial es añadido antes del final del código de la página maestra y como en la página parcial se hace uso de jquery, cosa que recién se declara al final de la página maestra, es por eso que obtenemos este error.

Felizmente ASP .NET MVC nos permite poder ordenar nuestros scripts de nuestra páginas de una manera ordenada. Si vemos nuevamente el código de la página maestra, en la línea 13 encontramos esta línea:

  @RenderSection("scripts", required: false)

Esta linea de código hacemos uso de la función RenderSection. Esta función nos permite mapear nuestros scripts de nuestra páginas parciales en este parte de la página maestra. Esta función tiene dos sobrecargas en las cuales tiene los siguientes parámetros:

- name: Este será el nombre de la sección con el cual vamos a identificar esta parte de la página que contendrá los scripts que le pasemos.
- required: Es un booleano que sirve para indicar si la sección es requerida o no.

De vuelta al problema inicial, necesitamos que el código js de nuestra vista parcial se pinte al final de todo de la página principal. Para eso hacemos lo siguiente:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


Index
@section scripts{
    
}

Como podemos ver en el código en la linea 7, se ha añadido @section scripts donde scripts es el nombre de la sección que antes había declarado en la página principal. Luego he abierto y cerrado llaves y dentro de esas llaves puse el código js de la página parcial. El resultado es el siguiente:

Y el html renderizado sería el siguiente:

De esta manera MVC coge todos los section que tengan scripts al costado y este los pinta en la página principal donde halla declarado @RenderSection con el nombre scripts. Está claro que la página principal u otra página pueda tener varios @RenderSection y @section con diferentes nombres y en la ubicación que quieran. Espero les sea útil. Hasta la próxima :D

Windows Azure - Instalación y primeros pasos

2014-11-23T14:20:00.000+01:00

Hola, hoy vamos a hablar de un tema que tenía pendiente y seguro muchos de ustedes ya habrán escuchado pero nunca se hallan puesto a trastear con esto, hablo de Windows Azure. Como sabrán Windows Azure es la plataforma en la nube que nos proporciona Microsoft para crear y consumir servicios en la nube y tener nuestro negocio en la nube de una manera fácil y escalable. Click aquí para más información.

Pero bueno iremos a lo que nos interesa, ¿cómo empezar con esto? ¿cuánto me costará? ¿por que es necesario registrar mi tarjeta de crédito?, muchas preguntas que me hice antes de empezar, felizmente Microsoft nos regala 150$ para probar Windows Azure, los pasos son los siguientes:

- Nos creamos una cuenta de prueba http://azure.microsoft.com/es-es/

Regresando a una de las preguntas que hacia, ¿por qué Microsoft quiere mi tarjeta de crédito?. Pff yo también tengo cierto recelo en esto pero por lo que leí es una forma de Microsoft de asegurarse e identificarte ya que te abre acceso a sus centro de datos y no cometas diabluras ~~(cosa que a lo mejor puede ser cierta o no), a ver si los entendidos en estos comentan por acá :)~~

Pero bueno seguimos con el tema, nos inscribimos dejamos nuestra tarjeta de crédito.

Y al final después de haber hecho todo correctamente debemos tener la siguiente ventana:

Ya que tenemos el panel de windows azure vamos a la parte de maquinas virtuales.

Le damos a crear una maquina virtual y tenemos dos opciones

Creación rápida: Esta opción nos permite crear una maquina virtual sin SO, es decir una VM de 0 donde podemos indicar el SO que queremos instalar.

De la galería: Esta opción nos permite escoger una VM ya preconfiguradas como vemos en la imagen, para este post crearemos una VM desde la galería:

Para este ejemplo seleccionaremos una VM con Windows Server 2012 R2 Datacenter y le damos siguiente mostrándose la siguiente ventana:

Esta ventana nos sirve para configurar los datos de esta VM además en la parte de arriba sale un dropdrownlist que nos permite seleccionar la fecha de lanzamiento de la versión de la imagen disponible. Aunque es recomendable utilizar siempre la ultima versión, esto puede ser útil cuando no hemos hecho pruebas de nuestra aplicación en determinadas versiones y no estamos seguros de que pueda funcionar correctamente

Luego damos siguiente y tenemos la siguiente ventana:

Esta ventana nos indica que se va a crear un servicio en la nube. Este servicio en la nube nos permitirá administrar nuestra maquina virtual en la nube. Luego toca ponerle el nombre a la dos, a través de este nombre junto a .cloudapp.net vamos a poder acceder a nuestra máquina virtual

Luego escogemos la reunión, este tema es muy importante ya que debemos escoger una región que esté cerca a donde tu o tu aplicación se va a usar con mucha más frecuencia, de esta manera evitamos que nuestro servidor se demore mucho en devolver información dando saltos hasta que llegue a donde estemos. La cuenta de almacenamiento es el disco duro y por lo pronto lo dejaremos así. Le damos siguiente

Y por último click al visto bueno de la parte de abajo en la derecha y ya está, nuestra VM se está creando

Esto puede tardar varios minutos ya que se esta inicializando nuestra máquina virtual con el SO y todos sus servicios. Una vez finalizada se muestra la siguiente ventana:

Y si se fijan en la parte de abajo ya podemos conectarnos a ella y si damos doble click en el nombre de la máquina en el listado de maquinas virtuales vemos la siguiente ventana

Acá tenemos varias opciones para administrar nuestra VM, cosa que veremos en el siguiente post para no alargar más este. Espero les sirva para iniciar en el mundo de Windows Azure. Hasta el siguiente post :)

Quitar lineas punteadas del editor de Visual Studio

2014-10-28T17:02:00.000+01:00

Hola, un post rapidito :)

Hace unos minutos andaba codeando y sin querer apreté no sé que combinación de teclas y mi código en Visual Studio se volvió de la siguiente manera:

Como se puede ver, aparecen lineas punteadas en los espacios en blanco, como personalmente no me gusta, es más hasta me resulta algo cansado y fastidioso para la vista quise quitarlo. Así que después de intentar un poco en el menú de Options/Text Editor de Visual Studio me puse a googlear y di con la solución.

Esta funcionalidad de mostrar puntitos en el editor de Texto de Visual Studio se activa y desactiva pulsando la siguiente combinación de teclas:

CTRL + E + S (en ese orden y sin mantener pulsadas las teclas, sólo el CTRL)

Así que volví a pulsar esa combinación de teclas y listo :D!!

Ps ya saben por si les pasa :D, hasta la próxima :D!

HTML5: Introducción

2014-09-23T15:30:00.000+02:00

Hola, ya sé, ya sé, como que este post llega muy tarde, pero como dicen, mejor tarde que nunca. Mi idea es ir creando unos cuantos tutoriales para que la gente que aún no ha migrado a HTML5 y aún no tenga claro de que va, empiece a tener una idea. Empezamos!!

HTML5 es el nuevo standard de HTML el cual trae consigo nuevas funcionalidades y también elimina unas cuantas que pasamos a enumerar.

LO NUEVO

- Nuevos elementos, como el <header>, <section>, <article>, <footer>,<nav>, <aside>, <figure> entre otros.
- Nuevos controles de formulario como number, date, time, calendar, and range.
- Nuevos elementos gráficos: <svg>, <canvas>.
- Nuevos elementos multimedia: <video>, <audio>.
- Nuevas apis: HTML Geolocation, HTML Drag and Drop, HTML Local Storage, HTML Application Cache, HTML Web Workers y HTML SSE.

LO QUE SE HA QUITADO

Ya no existen los siguientes tags:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

(Así que ir eliminando estos tags de sus aplicaciones si quieren migrar a la nueva versión.)

NAVEGADORES QUE SOPORTA

En principio HTML5 debería ser soportado por todos los navegadores modernos, aunque no tiene soporte para versiones de IExplorer anteriores a la IE9.

Si un día quieres saber si tu navegador soporta html5 o algunas de sus nuevas características entra a http://html5test.com/

Felizmente existen herramientas para poder usar(simular) las nuevas características en navegadores que no soportan HTML5 como Modernizr. También puedes hacer uso de los Polyfills, los cuales son scripts que nos permiten realizar tareas de HTML5 en navegadores que no lo soportan.

Creo que para ser una introducción vamos bien, la idea es hacer un post por cada nueva característica o funcionalidad que he comentado acá, a ver que tal se no da :D.. hasta la próxima :)

Reordenando, estructurando los estilos, usando SuitCSS

2014-09-19T12:00:00.000+02:00

Hola a todos,

Uno de los temas que más me fastidia de la parte front de las aplicaciones, es la falta de orden y standard para la nomenclatura y acoplamiento que hay en los archivos css de una aplicación. He visto aplicaciones con archivos .css inmensos, otros en los cuales se machacaba un estilo con otro por encontrarse duplicado, o simplemente que se mezclaban.

Reconozco que es un calvario mantener los .css pero felizmente existen los preprocesadores que nos ayudan mucho en esta tarea como SASS, LESS o Stylus y del cual hablaremos más adelante. Hace unas semanas descubrí un standard para la nomenclatura de estilos que me parece muy interesante y esta teniendo acogida por parte de muchos desarrolladores. Se trata de SUITCSS, un proyecto de GitHub que aparte de también de ser un preprocesador, pretende establecer un standard para nombrar a nuestras clases de estilos de dos maneras.

Empecemos explicando el primer caso:

.namespace-ComponentName-descendentName--modifierName.is-stateName {...}

.namespace: SuitCSS pretende que empecemos nombrando nuestras clases con un namespace. Aunque este parámetro es opcional, se recomienda utilizarlo para tener que evitar conflictos con otros archivos css. Esto debe ser escrito en Camel Case.

-ComponentName: Es el nivel más alto de nuestro componentes. Si nos guiamos a la nueva estructura que propone HTML5, acá se podría declarar los elementos header, section, article, footer, etc. Esto debe ser escrito en Pascal Case.

Archivo CSS usando el namespace y ComponentName juntos

.main-Header{...}
.main-Footer{...}

.popup-Header{...}
.popup-Footer{...}

Página HTML


   ...
   ...


   ...
   ...

-descendantName: Es la parte del componente al cual aplicaremos el estilo. Por ejemplo podría ser un <figure> que esta dentro de un <header>. Esto debe ser escrito en Camel Case.

Archivo CSS

.main-Header{...}
.main-Header-figure {....}

Página HTML

   
   
      ...
      ...

--modifierName: Esta clase nos permite modificar el elemento base de una cierta forma, un ejemplo sería un estilo determinado a un botón por defecto, o los campos de texto que son obligatorios de llenar. Esto debe ser escrito en Camel Case.
Archivo CSS

.main-Header{...}
.main-Header-figure {....}
.main-Header-button {....}
.main-Header-button--default {....}

Página HTML

   
   
      ...
      ...

.is-stateName: Esta clase nos permite indicar un estado que puede tener un determinado elemento, como habilitado, deshabilitado, seleccionado, etc. Esta clase se escribe con un punto al inicio, lo cual indica que es una clase aparte y que puede ser reutilizada por diferentes elementos, pero es recomendable tenerlo dentro del mismo ámbito del componente por temas de orden y para facilitar luego el uso de preprocesadores. Esta clase se debe escribir en Camel Case también.

Archivo CSS

.main-Header{...}
.main-Header-figure {....}
.main-Header-button {....}
.main-Header-button--default {....}
.main-Header-button--default.disabled {....}
.main-Header-button--default.enabled {....}

Página HTML

   
   
      ...
      ...

Por último hablaremos del segundo caso:

.u-utilityName {...}

.u-utilityName: Esta clase está pensada para crear estilos globales. El nombre de la clase debe empezar con u seguido de un guión, lo cual nos permite indicar que será un utilitario capaz de aplicar estilos a muchos elementos. Nos puede ser util para establecer estilos para cosas comunes en toda la aplicación, como los tag de title, h1, h2 o para indicar un tipo de posicionamiento o alineación. La idea es que sea una clase que contengan estilos comunes en la aplicación. Debe ser escrito tambien en Camel Case.

.main-Header{...}
.main-Header-figure {....}
.main-Header-button {....}
.main-Header-button--default {....}
.main-Header-button--default.disabled {....}
.main-Header-button--default.enabled {....}
.u-title {...}
.u-buttons {...}

Página HTML

   
   Hola
   
      ...
      ...

Como podemos ver SuitCSS viene a poner orden en la manera en como declarar las clases de estilos en nuestras páginas html. Hace uso del selector por clases y es una manera ordenada y clara de ver los documentos. Sería genial que los desarrolladores empiecen a usar este tipo de standar de nomenclatura para que el mantenimiento de estilos esté más controlado. Espero les sirva, hasta la próxima :)

OFFTOPIC: Nuevas Tecnologías

2014-09-05T10:31:00.000+02:00

Hola, aunque en un principio traté de orientar este blog a sólo temas de Visual Studio, poco a poco la cosa va evolucionando y como buen amante de la programación me gusta estar viendo y actualizándome con nuevas tecnologías. Asi que poco a poco ~~(si el tiempo me lo permite)~~ iré posteando sobre nuevos temas que voy tocando en el día a día o sobre temas que me van interesando, así que pronto tendrán temas de MongoDB, HTML5, CSS3, Bootstrap, Angular, Windows Azure, NodeJs, Xamarin y demás tecnologías. Estar atentos y disculpen si a veces pasan semanas y no posteo nada, el trabajo a veces es absorvente, un saludo :)

Generando datos de prueba, usando NBuilder

2014-09-04T16:47:00.002+02:00

Muchas veces tenemos la necesidad de generar datos de pruebas por distintas razones. Ya sea para generar prototipos, test unitarios o pruebas de concepto.Imaginemos que tenemos la siguiente clase y queremos crear un listado de 50 nuevos objetos Customer:

 
    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }

Y queremos mostrar un grid con un listado de 50 personas. Reconozco que hace tiempo hacia lo siguiente:
Otros hacen uso de un XML lo cual aún es mas coñazo, o quien sabe que otras técnicas usarán por ahi. No digo que esto no esté mal, pero para que reinventar la rueda cuando tenemos herramientas que ya hacen esto. Para esto tenemos NBuilder Para instalarlo, puedes ir a su página y descargartelo. Yo prefiero instalarlo via Nuget, para lo cual vamos a la Consola de Paquetes de Nuget e escribimos lo siguiente:

Install-Package nbuilder

Después de tenerlo instalado es tan simple generar la lista de 50 objetos Customer:

Vamos a mostrar el resultado en una vista de MVC de la siguiente manera:

Y generamos la vista con un listado de customers. El resultado es el siguiente:

Espero les ayude, hasta la próxima :)

Usando Sublime Text y instalando el package control.

2014-07-16T19:44:00.001+02:00

Hace un tiempo descubrí un editor de texto que me encantaba por la cantidad de plantillas y la forma en que te ayuda a crear diferentes tipos de documentos, sobre todo html y css3 de una manera fácil y rápida. Estamos hablando de Sublime Text, una herramienta open source que tiene una versión de pago pero que también puedes trabajar sin problemas con la versión free.

Entre algunas cosas que me gusta hacer con esto es crear html ya que te permite hacerlo de una manera fácil. Para esto lo que hacemos es abrir un nuevo documento en Sublime, lo guardamos como demo.html por ejemplo y empezamos a crear nuestro html.

Como Sublime sabe que estamos editando un documento html utiliza el marcado respectivo para este tipo de documento, por lo que si escribimos solo html y pulsamos la tecla tab, se genera automaticamente el cuerpo básico de un documento html.

Lo mismo por ejemplo si queremos crear un div con una clase especifica por ejemplo con la clase "header". Lo único que tenemos que hacer es posicionar el cursor dentro del editor de texto en la parte que queremos crear ese div y escribir lo siguiente:

div.header + tecla tab

El resultado será el siguiente:

Como ven, con algunas reglas podemos ir creando un documento html rápidamente. Pero Sublime tiene muchas cosas más, pero para ello necesitamos instalar un paquete de controles, por defecto al instalarlo por primera vez no lo tiene, pero para que tú puedes verificarlo haces lo siguiente:

- Dentro de Sublime pulsas CTRL + SHIFT + P y te aparece una ventana flotante, dentro de ella escribes Package Control y si es que no devuelve ningún resultado, es porque aún no lo tienes instalado.

Para instalarlo vamos al siguiente enlace:

https://sublime.wbond.net/installation

Copiamos el texto que sale dentro del cuadrado rojo de la imagen:

Vamos a Sublime, al Menú View/Show Console y lo pegamos ahí:

Luego de eso vuelves a dar a las teclas CTRL+SHIFT+P y escribes PackageControl y deben aparecer esta vez resultados:

De la lista de resultados, seleccionamos la que dice Package Control: Install Package. Una vez instalado aparece un listado de los plugins disponibles del Package Control para utilizar en nuestro editor de texto. Como ejemplo utilizaremos el plugin "EMMET" y le damos a enter. Debe salir la siguiente imagen:

Como se ve en la imagen, nos pide reiniciar el editor. Una vez reiniciado volvemos al documento y podemos empezar a jugar con este plugin. En el documento html que estábamos creando ponemos lo siguiente.

div.padre>div.hijos*2

Y pulsamos la tecla tab y el resultado debe ser el siguiente:

Como ven se ha generado un div con la clase padre y dos divs hijos con la clase hijos de una manera super fácil. Si quieren profundizar en esto, busquen en google Zen Coding con sublime y sáquenle partido a todas las funcionalidades y ayudas que nos ofrece Sublime Text.

Un abrazo

Compilando vistas de MVC antes de ejecutarlas

2014-06-17T17:01:00.003+02:00

Si trabajas con Asp .Net MVC seguro que te has topado que tu proyecto compila perfectamente en Visual Studio pero si esta vista tiene un error, este error no se mostrará hasta que lo veas en el navegador. Esto puede ocasionarte problemas, perdidas de tiempo al compilar algo que está fallando o un dolor de cabeza muy grande en producción, para entenderlo mejor vamos al código!

Supongamos que tenemos la vista siguiente:


@{
    ViewBag.Title = "Home Page";
    var mensaje = "Aqui va mi mensaje";
}
@section featured {
    
        
            
                @ViewBag.Title.
                @ViewBag.Message
            
        
    
}
Compilando vistas en MVC

@mensajes

Si vemos el código, veremos que es una vista simple y que en la línea 3 declaramos una variable que se llama "mensaje" en la cual almacenaremos un string. Luego si nos vamos a la linea 17, llamamos a esa variable pero escribiéndola mal "mensajes". Si damos a ejecutar el Visual Studio no nos bota ningún error y sólo este error se muestra cuando se muestra la vista ya en ejecución.

El Visual Studio compila satisfactoriamente

El error sólo se muestra en ejecución

Como ven Visual Studio no nos indica que la vista está fallando lo cual nos puede traer problemas más adelante, ya que nadie sabrá que esa página esta mal hasta que la encuentren en tiempo de ejecución. Felizmente VS nos permite configurar esto, lamentablemente esto se logra editando el archivo del proyecto, para lo cual tenemos que hacer lo siguiente:

1- Ir al explorador de soluciones, seleccionar el proyecto que queremos editar, darle click derecho y seleccionar "Unload Project"

2- Una vez descargado el proyecto le das click derecho y seleccionar "Edit [Nombre del proyecto]"

3- Despues de esto se abré el proyecto para editarlo, buscamos el tag "MVCBuildViews" (que por defecto tiene el valor a false) y lo cambiamos a true y le damos a guardar.

4. Por ùltimo volvemos al explorador de soluciones, seleccionamos el proyecto modificado, le damos click derecho y seleccionamos la opción "Reload Project"

Con esto ya tenemos configurado nuestro proyecto para que VS compile nuestras vistas y nos ahorremos dolores de cabezas y collejas inesperadas en producción. Si intentas compilar la solución ahora Visual Studio te mostrará el error en la vista.

Espero les sirva, hasta la próxima.

Documentando código javascript

2014-06-10T17:09:00.001+02:00

Si ya llevas un tiempo en el desarrollo de aplicaciones web, te darás cuenta la evolución e importancia que esta pegando la parte de FrontEnd. Antes se usaba código javascript para lo justo, pero poco a poco ha ido ganando muchas importancia, lo cual genera archivos de js grandes y algunos hasta complejos, con lo que viene bien tenerlos documentados para que la gente que use tu función pueda ver de que se trata y que parámetros necesita.

Para documentar las funciones javascript es casi tan simple como lo haciamos en c#, pero en lugar de poner los comentarios arriba del método o función como lo haciamos en c#, se tiene que hacer dentro de ella.

Ejemplo: Como se comenta el código en c#

Ejemplo: Como se comenta el código en javascript

Es más, si te das cuenta podemos indicarles al parámetro el tipo de valor que tendrá. Con esto, cada vez que llames a tu función js, en mi caso, SaveCustomer, verás que te sale la documentación de la función.

Espero que les sea útil, hasta la próxima :)

Mostrar el número de lineas en el editor de Visual Studio

2014-05-22T10:31:00.000+02:00

Hola, les dejo un post cortito que puede ser útil sobre todo para gente nueva que empieza con Visual Studio, aunque valido tambien para gente como nosotros, que llevamos mucho tiempo en ello y se nos olvidó como era.

Personalmente me gusta tener el número de líneas al lado de mi código, entonces al lío.

- Vamos al menú Tools/ Options (Herramientas/Opciones si tienes el VS en español)
- Seleccionamos Text Editor y desplegamos, luego seleccionamos All Languages y por ultimo damos check a Line Numbers.

Damos aceptar y eso es todo.

Editor si números de líneas en el código:

Editor con números de líneas en el código:

Espero les sirve de algo, hasta la próxima :)

Activando el Intellisense de Javascript en Visual Studio 2012 - un poco de kendo

2014-04-24T15:18:00.002+02:00

Ya que he empezado a usar habitualmente Visual Studio 2012 en los últimos días, me he topado con características muy interesantes como es el Intellisense para Javascript. A lo mejor este artículo va algo tarde (ya que VS2012 lleva mucho tiempo entre nosotros), pero de seguro mucha gente aún no ha tenido la oportunidad de trabajar con él como hasta poco era mi caso. Pero bueno, para no extenderme más, empezamos!

Cuando creamos un proyecto de MVC4 en Visual Studio 2012, en la carpeta Scripts de tu proyecto web hay un js llamado _references.js

Si abrimos este archivo nos toparemos con algo parecido a esto:

 
/// 
/// 
///  
/// 
/// 
///

Este js lo que hace es indicar al Visual Studio que archivos js tendrán Intellisense cuando los referenciemos. Pero ¿qué pasa si queremos tener Intellisense en un js que no está referencia en este archivo? como por ejemplo si queremos tener Intellisense si queremos usar Kendo. La solución es simple, sólo editamos el archivo _references.js y añadimos la referencia a los archivos de js de Kendo que querramos que hagan uso del Intellisense cuando los referenciemos. En mi caso añadimos tres referencias más:

kendo/jquery.js
kendo/kendo.web.js
kendo.aspnetmvc.js

Entonces el _references.js quedaría de la siguiente manera (linea 7, 8 y 9 del código)

 
/// 
/// 
///  
/// 
/// 
/// 
/// 
/// 
///

A continuación muestro un par de imagenes de un js, una sin el intellisense js de Kendo, y otra cuando ya por fin el reference.js ya ha sido configurado.

Js llamando a función Kendo sin el Intellisense: como vemos el intellisense de Javascript nisiquiera reconoce la función.

Js llamando a función Kendo con el Intellisense: al fin el intellisense de Javascript reconoce a la función js de Kendo y nos muestra todos sus parámetros.

En el siguiente artículo mostraré la manera en la que se tiene que documentar los métodos en un js para que cuando se accedan a ellos puedas ver la información del método y la documentación de cada parámetro como se hace en c# con el summary, espero les sirva, hasta la próxima :)

¿Dónde está el 'unshelve' en Visual Studio 2012?

2014-03-31T13:55:00.001+02:00

Para los que venimos de Visual Studio 2010 o anterior, pasar al entorno de Visual Studio 2012 a veces puede ser un poquito complicado. Hoy me encontré con la necesidad de recuperar un shelve que realicé hace ya un tiempo y busco el unshelve de la manera en la que buscaba antiguamente. Así que pongo el cursor en la solución, doy click derecho y no encuentro la opción de UNSHELVE :S:S:S

Entonces para los que se encuentren con la misma situación que yo, aquí les muestro como encontrar la tan preciada opción de unshelve.

1. Te vas al TeamExplorer -> Pending Changes.

2. Una vez que estés en la parte de Pending Changes, le das click al menú de Actions y le das click a la opción de Find Shelvesets.

3. Esta opción te redigirá a todos los shelves que tengas.

4. Finalmente pones el curso sobre el shelve que quieras recuperar, le das click derecho y ahi encontrarás la opción de unshelve.

Y ya lo tienes, espero les sirva, hasta la prox !

Notificaciones no bloqueantes y bonitas: Usando ToastR

2014-03-25T12:56:00.001+01:00

Muchas veces queremos que nuestra aplicación web muestre alertas, notificaciones, avisos y errores de una manera personalizada. El problema de las típicas notificaciones que nos ofrece js son feas y bloqueantes. Felizmente hay una libreria js que nos permite hacer estas notificaciones agradables a la vista del usuario de una manera fácil. Esta librería se llama ToastR y la puedes descargar desde Github. Desde aquí nos bajamos el js y el css y lo integramos a nuestro proyecto. En esa página puedes ver también toda la documentación pero en este post te lo resumo un poco :).

- Una vez añadidos los archivos .js y .css de Toasr (ojo, este librería hace uso de jquery, asi que tambien es necesario que esta librería este en nuestro proyecto) a tu proyecto creamos una nueva página html y referenciamos a la hoja de estilos, a jquery y a toastr.js:

-Lo siguiente es crear unos cuantos botones dentro del body de nuestra página para ver los diferentes tipos de notificación que nos ofrece toastr.

 

Usando ToastR

-Y por ultimo escribir el siguiente script en la parte final de la página (aunque puedes escribirla donde quieras, pero por temas de optimización ~~post que espero escribir más adelante~~ se recomienda poner los scripts al final del todo.

Resumiendo,

Descargamos el js y css de ToastR y lo añadimos al proyecto.
Luego creamos una nueva página y lo referenciamos al proyecto.
Creamos cuatro botones, cada con una función onclick() diferente.
Y por ultimo creamos el script necesario para ejecutar la aplicación. En el documento.ready() de la página ponemos el siguiente código:

 
 toastr.options.closeButton = true;

Esto nos indica que las notificación podrán mostrar el boton de Cierre. En caso no lo quieras mostrar, le pones false y ya está :).

Y bueno el resultado es el siguiente:

Notificación Info

Notificación Warning

Notificación Succcess

Notificación Error

Como vean Toasr nos permite mostrar notificaciónes bonitas de una manera fácil. Además tambien ofrece otras propiedas para mostrar tu notificación de diferentes maneras, posiciones y animaciónes. Todo esto lo puedes ver en la documentación. Aquí te dejo un ejemplo

http://codeseven.github.io/toastr/demo.html

Que lo disfrutes, hasta la próxima.

LLamar a una función js desde un controllador en Asp .Net MVC

2014-03-21T11:36:00.000+01:00

Al fin tengo el blogspot libre y sin bloqueos desde el curro =)... Este post va para responder la pregunta a alguién que me pregunto hace un tiempo como hacer esto.

Aunque la verdad es raro querer ejecutar una funcion js desde un controlador, aquí muestro la manera en que "yo" como lo haría.

1. Crearia una clase que tendra como propiedad un string que tendra el código js que queremos ejecutar:

 
    public class DemoJs
    {
        public string JsFunction { get; set; }
    }

2. Luego sigo con el controlador, en mi caso es un ejemplo simple ya que solo quiero llamar a la funcion js.

 
    public class DemoController : Controller
    {
        //
        // GET: /Demo/
        public ActionResult Index()
        {
            var demoJs = new DemoJs();
            demoJs.JsFunction = "$( window ).load(function() { DisparaAlert();}); ";
            return View(demoJs);
        }
    }

Aquí la explicación, inicializo el objeto y en la propiedad JsFunction escribo el código js que quiero ejecutar, en este caso lo que hago es disparar la función "DisparaAlert()" cada vez que la página ha sido cargada.

3.Genero la vista de este ActionResult

@model Demo.Models.DemoJs

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


Index

La vista lo que hace es llamar a jquery y luego más abajo en la sección js de la página acceder al modelo de la vista y mostrar la propiedad que tenia la funcion js que queriamos que se ejecute en nuestra aplicación. Como la función que seteamos en esta propiedad dijimos que se ejecute la función DisparAlert cada vez que se cargue la página, en la parte de js de la vista tambien declaramos esta función y dentro de ella ponemos un alert sólo para mostrar que esto funciona.

Como ven es un artificio, aunque como dije al principio del post, me parece raro llamar una función js desde un controlador pero como en MVC no tenemos un método RegisterClientScriptBlock o parecidos, esta puede ser una manera. Espero que les sirva de algo , hasta la prox !

Aprendiendo Node.js (I)

2013-09-22T20:46:00.000+02:00

Ya era un tiempo que tenía olvidado este blog por lo que espero volver con fuerza con nuevos temas que empiezan o ya llevan algún tiempo sonando con fuerza. Y que mejor que enseñando algo de Node.js.

Por si no saben que es, es una plataforma de programación en Javascript especializada en el manejo de eventos desde el servidor. Trabaja sobre V8, un motor de Javascript creado por Google optimizado para la web con lo cual la velocidad y escalibilidad de las aplicaciones está asegurada. Si quieres más teoría puedes pinchar aquí.

Pero bueno al lío. Empezamos instalando Node.js asi que nos dirigimos aquí

http://nodejs.org/download/

Node.js puede trabajar bajo Windows, Linux, IOS y otros sistemas operativos. En mi casa descargamoos el instalador para Windows, damos click y empieza el proceso de instalación:

Una vez instalado, para ver que Node.js ya está disponible en nuestro ordenador vamos e ejecutar (Tecla Windows + R) y escribimos cmd o te vas directamente a símbolos del sistema

Escribimos node y damos enter, debería aparecer '>' como se muestra en la imagen

Podemos poner 1+1 y enter y si bota 2 es que node.js ya está funcionando.

Hasta aquí todo bonito, pero ¿cómo mostramos algo en la web?. Seleccionas tu editor de texto favorito y copias lo siguiente:

var http = require('http');

http.createServer(function (req, res){

res.writeHead(200, {'Content-type':'text/plain'});

res.end('Hola node.js');

}).listen(200, "127.0.0.1");

console.log('Servidor activo en http://127.0.0.1:200/');

Le das a guardar como hola.js en la ruta que tu prefieras. En mi caso como en el cmd la ruta por defecto que aparece es c:\Users\Jhon1 la guardaré ahi. Una vez hecho esto, vuelves a abrir el cmd, escribes node hola.js y debería aparecer lo siguiente:

Esto quiere decir que node.js ya está activo y nuestro archivo hola.js ya puede ser utilizado.

Por último abrimos Chrome, Firefox, IE o el que te dé la gana y pones la url que pusiste en la parte de listen de tu archivo hola.js. En nuestro caso http://127.0.0.1:200 y el resultado es el siguiente:

Y ya está, espero que les sirva de utilidad para empezar con esto. En el proximo post hablaremos del gestor de paquetes de node.js y los módulos que tiene. Espero les ayude. Hasta la prox!!!

Primer vistazo con TFS Preview

2012-10-05T10:17:00.001+02:00

Como sabrán muchas compañías están apostando fuerte en la nube, y como estamos en la época del Cloud Microsoft está ofreciendo muchas versiones de sus productos conocidos en la nube. El TFS no iba a ser la excepción y aquí tenemos un pequeño introductorio.

Lo primero que tenemos que hacer es suscribirnos al servicio con una cuenta de Window Live Id, decir que esta versión de TFS aún esta en fase Beta asi que cuidadito con esto =).

Nos dirigimos hacia esta página:

https://tfspreview.com/en-us/ ,buscamos la parte que diga "get started for free" y le damos click. Esta nos redirige a la siguiente pantalla:

ponemos cualquier nombre que nos apetezca a nuestra cuenta, le damos click y despues de unos segundos ya tenemos montado nuestro TFS en la nube.

A partir de aquí ya podemos crear nuevos proyectos, subir código, tambien hay una parte donde podemos descargar el código necesario para poder utilizar TFS Preview desde nuestros entornos de desarrollo.

En el próximo post explicaré como usar TFS Preview desde Visual Studio 2010. Hasta la próxima.

Jhon Marmolejo

Pasa tu aplicación Android a IOS

2012-09-17T13:04:00.000+02:00

Aunque sé que este tema viene fuera de la temática principal, lo leí por ahí y me interesó mucho por eso les comparto el artículo, que lo disfruten:

http://www.xatakamovil.com/desarrollo/j2objc-ayuda-a-portar-una-aplicacion-android-a-ios

Crea tu propia plantilla de proyecto en Visual Studio 2010

2012-09-14T14:43:00.000+02:00

Hola, a que te has dado cuenta que muchos de los proyectos en Visual Studio que empiezas, ya sea en tu trabajo o incluso para ti mismo, siempre tienen al menos al principio las mismas cosas como una clase Common, a lo mejor unos estilos o controles de usuario que siempre se utilizan, o a lo mejor distintos helpers ya programados anteriormente y como hasta ahora funcionan quieres reutilizarlo.

Entonces me pregunto, ¿por qué cada vez que iniciamos un nuevo proyecto tenemos que hacer casi un copy/paste de estas cosas que se repiten en todos los proyectos?, la respuesta es fácil, no tenemos un template de proyecto personalizado. Entonces a por ello.

Crear un template de proyecto es sencillo. Primero abrimos el Visual Studio, en esta caso la versión 2010, y creamos un proyecto cualquiera de acuerdo a tus necesidades. En mi caso en mi trabajo ultimamente estamos haciendo muchos proyectos usando ASP NET MVC 3 asi que haré el ejemplo con esto =).

El nombre y la ruta del proyecto es lo de menos ya que luego esto se podrá cambiar. Damos Ok y tenemos un proyecto de ASP .NET MVC 3 como cualquier otro.

A partir de aquí podemos agregar, eliminar, personalizar, hacer lo que nos de la gana con el proyecto. En mi caso eliminaré de la parte del Modelo la clase AccountModels.cs, de la parte de las Vistas quitaré toda la Carpeta Account y de la parte de Controllers quitare la clase AccountController.cs.

Adicionalmente creare una clase Persona en el modelo, tambien un controlador y vista para esta clase. El proyecto quedaría de esta manera.

He resaltado lo nuevo que he agregado. Ahora nos aseguramos de que esto compile. Si todo va bien, nos vamos al menú File / Export Template le damos click y luego next...

Al final sale esta ventana, donde podemos personalizar el nombre, la descripción, imagen previa e ícono del template. Asi como tambien te da la posibilidad de importar directamente la plantilla a Visual Studio y abriendo el Explorador de Windows para indicarte donde se guardará la plantilla como .zip generado.

Le damos a Finish y ya tenemos nuestra plantilla creada =) ... Ahora cada vez que vayamos a Visual Studio, le damos a nuevo proyecto, la encontraremos y la podemos usar :D!

Y podemos usarla como cualquier otro proyecto, cambiarle el nombre, añadir a un control de código fuente etc, etc. El resultado es el siguiente :

A que mola :D:D!!.. esto nos puede reducir el tiempo considerablemente, espero les sea útil, nos vemos

Jhon Marmolejo

Diagramas de Secuencia en Visual Studio 2010

2012-09-13T14:54:00.000+02:00

Cuantas veces nos ha tocado elaborar diferentes diagramas que vienen a formar parte del documento técnico para entregar un proyecto. Y como todos saben ~~,a lo mejor por ahí alguno me resondra,~~ es un coñazo, pero eso no quita que sea necesario. Felizmente Visual Studio 2010, la versión Ultimate, nos ofrece realizar los Diagramas de Secuencia de una manera muy fácil y rápida. El que no sepa lo que es un diagrama de secuencia puede revisarlo aquí.

Lo único que tenemos que hacer es posicionarnos en el método sobre el cual generaremos el diagrama y le damos click derecho y damos click a la opción "Generate Sequence Diagram...."

Luego nos sale una ventana donde podemos personalizar diferentes cosas del diagrama, como por ejemplo el número de niveles de referencias que tendrá, si buscaremos dll's externas y tambien podemos excluir cosas que no nos interesan como las propiedades o eventos.

Luego simplemente le damos aceptar, esperamos que se genere todo el diagrama y ya los tenemos =)

Ya luego toca revisarlo un poco, si quieres tambien puedes modificarlo desde aquí, simplemente una gran ayuda de Visual Studio :D!

Espero que les sea útil, un saludo !

Jhon Marmolejo

Error instalando Visual Studio 2010

2012-09-13T11:41:00.001+02:00

Hola, he estado un poco liado con el trabajo y no he podido aportar como me hubiera gustado, aún sigo liado pero hoy justo me pasó algo raro en el trabajo. Necesitaba instalar la versión Ultimate de Visual Studio 2010 ya que necesitaba generar unos diagramas de secuencia y esto fue lo que paso.

Lo primero que pense es que seguro se debía a las diferentes versiones de Visual Studio que tenía instaladas en el servidor, pero nooooo !!...buscando y buscando por ahi vi que decían que este error se daba cuando querias instalar Visual Studio desde un disco o una ISO. Asi que copié el archivo a mi disco duro y ejecute y tatararannnnnnnn !!...ya lo tenemos

Ahora que ya lo tengo en el próximo post les enseñare como crear diagramas de secuencia con Visual Studio 2010, es necesario tener la versión Ultimate.

Hasta luego!!!

Visual Studio 2012 tambien disponible para descarga

2012-08-16T11:14:00.002+02:00

Al igual que Windows 8 RTM, el día de ayer, Microsoft puso a disposición la última versión de Visual Studio 2012 completa para ser descargada. Como comenté en el post anterior, está disponible para los suscriptores de MSDN y TechNet, y para los que no !!..tenemos la prueba de 90 días :D!

He aquí el enlace:

http://www.microsoft.com/visualstudio/11/es-es/downloads

A descargar y disfrutar =) !!!.. Pronto más detalles !

Un saludo,
Jhon Marmolejo

Windows 8 RTM ya disponible para descargar

2012-08-16T09:49:00.002+02:00

Pues tal como había dicho Microsoft, a partir de ayer -domingo 15 de agosto- ya está disponible Windows 8 RTM para descargar para los suscriptores de pago de MSDN y también para los de TechNet.

Pero también hay buenas noticias para los que no tenemos el lujo de poder contar ~~o tener la pasta =P~~ con una suscripción de estas, Microsoft nos da la posibilidad de poder descargar esta versión por 90 días y trastear con ello =), está claro que lo más recomendable es instalarlo en una máquina virtual ya que a los 90 días dejará de funcionar.

Aquí tienes el enlace de descarga:

http://msdn.microsoft.com/en-US/evalcenter/jj554510.aspx

Ya mostraré los pasos de la instalación, a descargar todos =) !!

Saludos,
Jhon Marmolejo

GhostDoc, documentando código

2012-08-01T21:38:00.001+02:00

A quien no le ha pasado que muchas veces le toca revisar el código de otra persona y no se entera de nada... es más debo de reconocer que a mi me ha pasado que hubo momentos en que no reconocía que hacia mi propio código xD, pero esto son cosas del pasado y que uno va aprendiendo a punta de collejas =)...

Yo sé que es una tarea tediosa, pero felizmente hay herramientas que nos facilitan la vida como GhostDoc, una herramienta que permite generar documentación de tus clases y métodos con solo apretar una combinación de teclas ...claro que tienes que seguir algunas reglas para que la documentación generada sea coherente.

Lo primero, descargamos Ghostdoc desde aqui -> http://submain.com/download/ghostdoc/

Te pide que pongas tu email, lo pones y a descargar. Una vez descargado, descomprimes el archivo y ejecutas el exe que hay dentro para empezar la instalación. Una vez finalizada la instalación cuando abras el Visual Studio ( en mi caso la versión 2010) te saldrá la siguiente ventana ...

Esta ventana te da la opción de elegir la combinación de teclas que pulsarás cuando quieras generar la documentación de un método, propiedad, cabecera de clase, etc, etc .... con GhostDoc, si se fijan por defecto la combinación de teclas asignadas es Ctrl+Shift+D, yo estoy acostumbrado a usar esta pero si no te gusta pues eliges otra opción de la lista desplegable y pulsas el boton Assign o si no te apetece configurarlo en este momento le das a Skip.

Luego de esto te pregunta si quieres crear una nueva configuración, como es la primera vez que la instalo en este ordenador le doy a crear.

Y listo ya tenemos instalado GhostDoc en nuestro VS =) !

Ahora probemos en el código. Como ejemplo vamos a crear una clase 'Customer' con un par de propiedades y un método, que sería algo como esto:

    
   public class Customer
   {
        public int Id { get; set; }

        public string Name { get; set; }

        public void SaveCustomer(int customerId, string customerName)
        {
          //blablabla  
        }
   }

Ahora seleccionamos la propiedad Id y presionamos Ctrl+Shift+D y veamos el resultado:

 
        /// 
        /// Gets or sets the id.
        /// 
        /// 
        /// The id.
        /// 
        public int Id { get; set; }

Lo mismo hacemos con la propiedad Name y el método SaveCustomer, recuerda que tienes que seleccionar completamente el nombre de la propiedad ó metodo y pulsar Ctrl+Shift+D. Al final el resultado sería el siguiente:

public class Customer
  {
      /// 
      /// Gets or sets the id.
      /// 
      /// 
      /// The id.
      /// 
      public int Id { get; set; }
 
      /// 
      /// Gets or sets the name.
      /// 
      /// 
      /// The name.
      /// 
      public string Name { get; set; }
 
 
      /// 
      /// Saves the customer.
      /// 
      /// The customer id.
      /// Name of the customer.
      public void SaveCustomer(int customerId, string customerName)
      {
        //blablabla  
      }
  }

Como puedes ver, hasta documenta tambien los parámetros de un método. La regla principal para que la documentación generada sea coherente es que el nombre del metodo sea un verbo o un verbo seguido de un sustantivo y la propiedad un nombre válido. La documentación que genera GhostDoc por defecto es en inglés, aunque existen extensiones para generar documentación en español e italiano aunque no son tan completas como en inglés. Espero les sea útil, hasta la próxima =) !!

Un saludo,
Jhon Marmolejo

Log4Net en C#

2012-07-24T22:32:00.000+02:00

Siempre es importante tener logs en nuestras aplicaciones, sobretodo en entornos cerrados donde tengamos accesos limitados o cuando ocurre una excepción inesperada que nos pone los pelos de punta y no sabemos por donde atacar. Hace ya bastante tiempo vengo usando Log4Net y bueno como parece que ahora si le estoy dedicando tiempo al blog y tuve un pequeño problema hace poco que comentaré en el siguiente post, quise escribir sobre esto.

Lo primero, descargarse la release desde aquí: http://logging.apache.org/log4net/download_log4net.cgi

Seleccionamos uno de los archivos binarios, descargamos, descrompimimos el archivo zip y vamos a la carpeta "\bin\net\4.0\release" en el cual encontraremos el archivo log4net.dll y lo añademos como referencia a nuestro proyecto.

Lo siguiente es modificar el web.config. Añadimos la siguiente sección dentro del <configsections> del web.config:


    
    ....
    ....
    ....

Lo siguiente es añadir la parte de la configuración para el log4net. En nuestro caso sólo queremos escribir sobre un archivo, pero aquí tienes muchas más opciones de configuración.

Dentro del appender ponemos la configuración necesaria sobre como queremos que se escriba nuestro log, esta claro que podemos tener varios appenders, por ejemplo uno para que escriba un archivo de texto y otro para que guarda en base de datos.

Luego desde la parte de root señalamos el nivel del Log, que pueden ser INFO, DEBUG, WARNING o ERROR y tambien indicamos los appenders que usará nuestro log.

Por último vamos al Global.asax, importamos el

using log4net;

Añadimos el siguiente código

private static readonly ILog Log = LogManager.GetLogger(MethodBase.GetCurrentMethod().DeclaringType);

Y en el Application_Start() añadimos lo siguiente:

protected void Application_Start()
{
    log4net.Config.XmlConfigurator.Configure();
}

Ya tenemos todo configurado para usar nuestro log, a partir de ahora, dependiendo del nivel en el que hallas seteado tu log, este escribirá en el archivo de texto, bd o como sea que lo hayas configurado.

Aqui les dejo un ejemplo simple para escribir en el log cuando ocurra alguna excepción:

public static void GenerandoError()
        {
            try
            {
                int numero = 53454534543543534324;
            }
            catch (Exception e)
            {
                Log.Error(e.Message, e);
            }
        }

Espero les sea útil, hasta la próxima :D!