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

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

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

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

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

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

   
   
   

      ...
      ...
   
   
   

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

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

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 :)