Archivo de la categoría: Programación

Temas relacionados con la programación en general. Lenguajes .Net, java, python, C#, Visual Basic, C…

OWIN: Otra novedad en Visual Studio 2013

Open Web Interface for .NET (OWIN) define una nueva capa de abstración entre el servidor web y una aplicación web. De este modo OWIN permite a las aplicaciones que no les importe en que host esté hospedado. Por ejemplo una aplicación web se puede hospedar en IIS o en un proceso personalizado.

Esta tecnología se conoce también como el proyecto Katana y se inspira en otras tecnologías del estilo node.js.

El problema que intenta solucionar OWIN es desacoplar la dependencia que tenían las aplicaciones ASP.Net con el servidor IIS introduciendo una capa que maneje las peticiones Http.

Sin Open Web Interface for .Net:

Sin OWIN

Con Open Web Interface for .Net:

Con OWIN

Razor en ASP NET

Desde la aparición de Visual Studio 2010 en las aplicaciones MVC se utiliza Razor pero… ¿qué es Razor en ASP Net?

Razor no es un lenguaje de programación sino que es un código insertado en ficheros .cshtml (c#) o .vbhtml (visual basic) que interpreta el servidor. Es decir, Razor es un marcado que «escapa» el código html para utilizar el que es en realidad el verdadero lenguaje de programación (C# o Visual Basic). El caracter con el que «escapa» el código html es @.

Cuando conocí Razor la primera idea que me vino a la cabeza fue que esto llevaba inventado mucho tiempo pero con otros nombres: asp clásico, php incluso en asp.net se puede «escapar» el código con las etiquetas <%%>. Todo esto es cierto pero la ventaja fundamental que ofrece Razor es su simplicidad que se traduce posteriormente en una mayor legibilidad del código.

Un ejemplo:

ASP.Net Sin Razor:

sin_razor

ASP.Net con Razor:

con razor

En mi opinión es muy fácil de aprender, se mejora la legibilidad y más sencillo de escribir. Además en Visual Studio funciona el Intellisense.

Visual Studio 2013 apuesta por Bootstrap

Del mismo modo que Microsoft se decantó por dar soporte a jquery dentro de sus plantillas de proyectos de Visual Studio 2010 ahora podemos comprobar que con Visual Studio 2013 existen plantillas para desarrollar con bootstrap.

Creo que se han dado cuenta de que no podían prescindir de un framework que hiciera más fácil el diseño web adaptable (responsive design) indispensable hoy en día como todos bien sabemos.

Siempre podemos utilizar Foundation (el gran competidor de bootstrap) aunque yo no lo recomendaría por dos razones. La primera razón es que considero que hay que confiar en las decisiones de Microsoft, ellos son los que mejor conocen su framework y seguro que lo han valorado en su día. La segunda razón, sufrida en mis propias carnes, es que he comprobado que algunos controles asp no se llevan muy bien con Foundation.

Menús con scroll

En este post explicaré la forma de hacer menús con scroll típicos en sitios web de una sola página.

Antes de nada decir que existen unos cuantos plugins de jquery para realizar webs de una sola página en el que viene implementado ya un menú de este tipo. Por ejemplo son muy conocidos Smint y CoolKitten. En el ejemplo de este post utlizaremos jquery waypoints.

Lo primero que debemos hacer es crear las distintas secciones a los que se dirigirán los enlaces del menú.


...

<div id="seccion_1">...</div>

<div id="seccion_2">...</div>

<div id="seccion_3">...</div>

...

Posteriormente implementaremos el menú con enlaces a cada uno de las secciones establecidas anteriormente.


<div id="menu">

<ul>

<li><a id="menu_seccion1" href="#seccion_1">ir a seccion 1</a></li>

<li><a id="menu_seccion2" href="#seccion_2">ir a seccion 2</a></li>

<li><a id="menu_seccion3" href="#seccion_3">ir a seccion 3</a></li>

</ul>

</div>

Este menú necesitamos dejarlo fijo en algún punto para que sea visible durante todo el scroll de la página. Por ejemplo en nuestro caso lo situaremos debajo de la pantalla. Para ello usaremos css y la propiedad position fixed:


#menu

{

position:fixed;

bottom:0;

}

Con todo esto y utilizando únicamente html y css podemos crear un menú con scroll. El problema es si queremos que los elementos del menú se activen o desactiven dependiendo de que sección nos encontremos. Para hacerlo ya necesitaremos javascript. Con jquery y jquery waypoints podemos manejar eventos que se produzcan cuando el usuario se encuentre en una u otra sección de la página. No olvideis importarlo a vuestra página.


$('#seccion_1') .waypoint(function(direction) {

//esto se ejecutará cuando el usurio esté dentro de la sección 1

alert('esto se ejecutará cuando el usurio esté dentro de la sección 1');
}

Con esto, jquery y un poco de imaginación podemos hacer casi todo. Entre otras cosas cambiar la clase css de cualquier elemento del menú cuando se llegue a la sección indicada.


$('#seccion_1') .waypoint(function(direction) {

$('#menu_seccion1').addClass('menu_active');

}

Scroll lento a secciones de una página mediante enlaces

Quizá ya conozcamos que si estamos en una página que tiene distintas secciones se puede ir a través de un menú o enlaces.

...
<div id="seccion_1">contenido 1</div>
<div id="seccion_2">contenido 2</div>
...
<a href="#seccion_1">ir a sección 1</a>
<a href="#seccion_2">ir a sección 2</a>
...

La navegación a estos elementos o capas es instantánea. Con jQuery podemos establecer la velocidad con la que se producirá la navegación haciendo un efecto de transición que en muchas ocasiones es visualmente más atractivo.

Lo primero que haremos es importarnos, si no la tenemos ya, nuestra librería de jQuery.

Después para cada elemento que queramos el efecto de animación usaremos este código:

$('a[href=#seccion_1]').click(function (event)
{
event.stopPropagation();
var Position = jQuery('[id="seccion_1"]').offset().top;
jQuery('html, body').animate({ scrollTop: Position }, 1100);
return false;
});

Donde pone 1100 se refiere al tiempo en milisegundos que estará realizando la animación.

Con este valor podemos establecer un scroll lento a secciones de una página.

Globalización en Master Pages

Esta entrada tratará sobre cómo incluir la globalización en Master Pages en asp.net de manera independiente. En el ejemplo utilizaremos código C#.

3 pasos:

Establecer la cultura en el Global.asax

Utilizaremos cookies para guardar el valor de la currentculture en el manejador BeginRequest.


protected void Application_BeginRequest(object sender, EventArgs e)
{
HttpCookie cookie = Request.Cookies["CultureInfo"];

if (cookie != null && cookie.Value != null)
{
Thread.CurrentThread.CurrentUICulture = new CultureInfo(cookie.Value);
Thread.CurrentThread.CurrentCulture = new CultureInfo(cookie.Value);
}
else
{
Thread.CurrentThread.CurrentUICulture = new CultureInfo("es-ES");
Thread.CurrentThread.CurrentCulture = new CultureInfo("es-ES");
}
}

Este código lee la información del actual culture y lo establece en la cookie, si la cookie no está establecida entonces pone la cultura por defecto es-ES.

Usar un desplegable para cambiar la cultura en el MasterPage

En nuestro ejemplo usaremos un dropdownlist para cambiar la cultura:


<asp:DropDownList ID="ddlLanguage" runat="server"
OnSelectedIndexChanged="ddlLanguage_SelectedIndexChanged"
AutoPostBack="true">
<asp:ListItem Text="<%$ Resources:Resource, users_Spanish %>" Value="es-ES" />
<asp:ListItem Text="<%$ Resources:Resource, users_French %>" Value="fr-FR" />
</asp:DropDownList>

Manejaremos el evento SelectedIndexChanged en el codebehind:


protected void ddlLanguage_SelectedIndexChanged(object sender, EventArgs e)
{
//Establecemos la cookie que será usada en el Global.asax
HttpCookie cookie = new HttpCookie("CultureInfo");
cookie.Value = ddlLanguage.SelectedValue;
Response.Cookies.Add(cookie);

//Establecemos la cultura en el currentthread y refrescamos la página.
//Global asax se encargará del siguiente trabajo.
Thread.CurrentThread.CurrentCulture =
new CultureInfo(ddlLanguage.SelectedValue);
Thread.CurrentThread.CurrentUICulture =
new CultureInfo(ddlLanguage.SelectedValue);
Server.Transfer(Request.Path);
}

En este paso establecemos el valor de la nueva cultura y volvemos a recargar la página mediante el comando Server.Transfer.

Mostrar la cultura actual seleccionada en el dropdownlist en el MasterPage

En este punto solamente queda mostrar cual es la cultura actual seleccionada. Lo haremos con el siguiente código:


protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
ddlLanguage.SelectedValue = Thread.CurrentThread.CurrentCulture.Name;
}
}

Crear ficheros de recursos de localización en ASP NET

Para crear ficheros de recursos de localización en ASP.NET es necesario tener una carpeta especial de ASP.NET llamada App_GlobalResources o App_LocalResources dependiendo si queremos archivos locales o globales dentro de nuestra aplicación.

Visual Studio te permite crear esta carpeta de una manera sencilla: botón derecho encima de la raíz de tu sitio web y después pinchar en Add->Add ASP.NET Folder->App_GlobarResources.

Recursos Localizacion ASPNET

Una vez hecho esto crearemos nuestro primer fichero de recursos para el idioma neutro, esto es, el que usaremos por defecto para la aplicación. Para hacer este paso pulsaremos botón derecho sobre el directorio que acabamos de crear y añadiremos un archivo de tipo recurso (.resx). El nombre que le demos es el que utilizaremos más tarde para recuperar sus valores. En este caso le llamaremos «res.resx».

Una vez abierto en este fichero podremos insertar pares de clave y valor donde el valor es la traducción y la clave el identificador unívoco para obtener la traducción.

Podemos crear tantos archivos de recursos como idiomas queramos en nuestro sitio web, para ello podemos copiar el fichero original y pegarlo dentro del mismo directorio: App_GlobalResources pero teniendo en cuenta que el nombre de cada fichero es el que determinará el idioma correspondiente. Por ejemplo para el idioma inglés el nombre del fichero en nuestro caso será «res.en.resx», en francés sería «res-fr-resx»…

Una vez metida una misma clave en cada fichero con las traducciones correspondientes en la casilla valor podemos empezar a utilizar las traducciones.

Por ejemplo en un fichero aspx:


...

<asp:Literal runat="server" Text="<%$Resources:res,default_bienvenido%>" />

...

Este ejemplo nos escribe un literal y el texto se va a buscarlo a la clave de nombre «default_bienvenido» que exista en el fichero de recursos «res». Si no encuentra la clave para un fichero de un determinado idioma entonces cogerá la del idioma neutral y si no escribirá directamente la clave.

Instalar Foundation para ASP.NET MVC

En esta entrada se explicará cómo instalar Foundation para ASP.NET MVC.

Se hará directamente sobre Visual Studio instalando el paquete NuGet. Para ello dentro del Visual Studio iremos a Tools->Library Package Manager->Package Manager Console. De esta forma se abrirá la consola de administración de librerías.

Package Manager Console

En la consola escribiremos: PM> Install-Package Foundation5.MVC y directamente se descargará de internet el paquete de foundation.

Explicación sencilla de MVC

MVC significa Model-View-Controller, en castellano: modelo-vista-controlador y es un patrón para desarrollar aplicaciones que se supone (y yo creo que efectivamente es así) para facilitar su mantenimiento.

Las aplicaciones MVC contienen:

  • Modelos: son clases que representan los datos y efectúan toda la lógica de negocio. Es decir son los objetos menos visibles de una aplicación web (el usuario no saben que están ahí) pero son los que hacen el trabajo «sucio»: insertar, modificar y eliminar datos en la base de datos, validar que los datos introducidos son correctos, realizar modificaciones en ficheros, etc.
  • Vistas: son plantillas que después de ser rellenadas por datos del modelo generan la respuesta HTML al navegador.
  • Controlador: son los intermediarios entre los anteriores elementos. Organizan las peticiones del navegador para recuperar los datos del modelo y especificar que vista se utilizará en cada caso concreto.

Diagrama modelo vista controlador

Esto ha pretendido ser una explicación sencilla de MVC, espero haberlo conseguido.