Archivo de la categoría: Diseño y Programación Web

Temas relacionados con el diseño y la programación Web en todos los lenguajes: html, php, asp.net, javascript, jquery…

Como crear un Theme en ASP NET

Para crear un Tema o Theme en Visual Studio debemos hacer click derecho sobre el proyecto web y añadir la carpeta de ASP.NET App_Themes . Nos pedirá un nombre, le daremos el nombre MainTheme por ejemplo.

Una vez creado este directorio especial podemos añadirle dentro de sí un nuevo item de extensión .Skin.

Lo último que nos queda es especificar en el web.config la theme que usará el sitio por defecto.


<configuration>
 <system.web>
<pages theme="MainTheme">

</pages>

</system.web>

</configuration>

Ya estará funcionando nuestro tema, solo quedaría definir en nuestro skin las propiedades de cada control.

Crear un botón de ASP NET con Glyphicon

Si con Bootstrap queremos utilizar un botón que tenga un icono de Glyphicon tenemos que olvidarnos del clásico asp:button y utilizar asp:linkbutton de la siguiente manera:


<asp:LinkButton runat="server" Text="<span class='glyphicon glyphicon-remove'></span>" CssClass="btn btn-default btn-xs" />

Lo que hacemos es darle una clase al linkbutton de Boostrap y dentro del text (innerhtml) la etiqueta span y su contenido.

No olvides que debes de tener los ficheros de css necesarios para que esto funcione, o sea bootstrap.css o bootstrap.min.css.

Modelo y Base de Datos con Identity en ASP NET

Con la versión 4.5 de .NET Framework se ha incorporado la autenticación basada en Identity. Esto ya lo hablamos en pasadas entradas, ahora vamos a verlo un poquito más a fondo.

Con Identity se crean las siguientes tablas:

  • AspNetRoles
  • AspNetUserClaims
  • AspNetUserLogins
  • AspNetUserRoles
  • AspNetUsers

En estas tablas se guarda toda la información relacionada con los usuarios. Es en la tabla AspNetUsersr donde  se guardan los siguientes campos:

  • Id
  • UserName
  • PasswordHash
  • SecurityStamp
  • Discriminator

En la siguiente imagen se muestra la estructura de tablas y los campos de la tabla AspNetUsers:

Tablas con Identity en ASP.NET 4.5

Ya entrando en el código, si has generado el proyecto web con una de las plantillas que ofrece Visual Studio 2013 verás que en la carpeta «Models» se ha creado un archivo llamado «IdentityModels.cs». En este fichero existen varias clases que definen la funcionalidad de Identity en la aplicación. Las clases son:

  • ApplicationUser. Es la entidad Usuario de aplicación. Hereda de «IdentityUser» e inicialmente está vacía aunque podemos meterle las propiedades que deseemos para personalizar nuestro modelo de usuario (http://go.microsoft.com/fwlink/?LinkID=317594). Si nos fijamos en la clase de la que hereda contiene las siguientes propiedades que se mapean a la base de datos: Id, PasswordHash, SecurityStamp, UserName así como las colecciones que relacionan con las demás tablas.

Clase IdentityUser

  • ApplicationDbContext. Es la clase que maneja el contexto Entity Framework con la base de datos. De hecho en su constructor coge el connectionstring del web.config para su conexión con la base de datos en este caso «DefaultConnection».

Clase ApplicationDbContext

  • UserManager. Es una clase que gestiona operaciones típicas de usuarios con la base de datos. Hereda de «UserStore» y tiene diversos métodos de creación y borrado de usuarios, adicción y eliminación de roles por usuario, búsqueda por nombre o id y muchos más. También tiene gran parte de estos métodos en su modalidad asíncrona. Sin embargo desde aquí no es posible obtener todos los usuarios.
  • IdentityHelper. Esta clase estática situada fuera del espacio de nombres «Models»se encarga de sincronizar la base de datos en los registros de usuarios con el comportamiento de la aplicación en lo que se refiere a la autenticación. Cada vez que un registro de un usuario se efectúa correctamente pasará por IdentityHelper para insertarlo en la base de datos y posteriormente autenticarlo en la aplicación.

Después de analizar todo este rollo vamos a ver como podríamos obtener todos los usuarios con Identity. Si utilizamos directamente el contexto «ApplicationDbContext» accederemos a todos los usuarios mediante su propiedad «Users»:


IList<ApplicationUser> users = context.Users.ToList();

Unobtrusive validation en ASP NET 4.5

Unobstrusive validation (algo así como validación no obstrusiva) es una nueva característica introducida en ASP.NET 4.5. En un escenario normal cuando usamos un validador para validar cualquier control en el lado cliente se genera cierto código javascript automáticamente que se encarga de realizar esa funcionalidad.

Con la característica Unobstrusive Validation no se genera este código javascript pero para realizar la validación utiliza los atributos HTML5 data-*.

Cuando se crea un nuevo proyecto web con Visual Studio 2013 esta característica está por defecto habilitada.

Para manejar el valor en el que se establecerá esta característica podremos hacerlo de dos formas:

  • Dentro de <appSettings> en web.config:

Habilitado:

<add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms"/>

Deshabilitado:

<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
  • En Application_Start dentro del global.asax:
void Application_Start(object sender, EventArgs e)
{
//Habilitar característica Unobtrusive Validation
ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.WebForms;
//Deshabilitar característica Unobtrusive Validation
ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
}

Redirigir url por idioma en htaccess

Si tienes un sitio web en Apache y necesitas redirigir a una dirección url distinta por cada idioma (inglés, español, portugués…) puede ser muy útil hacerlo mediante htaccess con la cabecera HTTP:Accept-Language que transmite el navegador del cliente. De este modo «confiaremos» en la configuración de lenguaje que cada usuario tiene en su navegador.

Así que nos ponemos manos a la obra:

Crear estructura de directorios

Deberemos crear un directorio por cada uno de los idiomas.

Por ejemplo si nuestro dominio es midominio.com crearemos en la raíz tantas subcarpetas como idiomas queramos manejar:

midominio.com/pt

midominio.com/es

midominio.com/en

Editar el archivo .htaccess

Añadiremos estas líneas:


RewriteEngine On
RewriteBase /

# Lenguaje portugués: 'pt'
RewriteCond %{HTTP:Accept-Language} ^pt [NC]
RewriteRule ^/?$ pt/ [R,NC,L]

# Lenguaje portugués: 'es'
RewriteCond %{HTTP:Accept-Language} ^es [NC]
RewriteRule ^/?$ es/ [R,NC,L]

#Regla general para los demás casos
RewriteRule ^/?$ en/ [R,NC,L]

En el código podemos comprobar que se establecen diversas reglas de redireccionamiento para cada condición de la cabecera enviada por el navegador.

Aplicaciones web contra Sitios Web en visual studio

Desde que recuerdo en Visual Studio siempre ha habido dos maneras de crear webs llamadas:

  • Aplicaciones Web
  • Sitios Web

En Visual Studio 2013 sigue existiendo está filosofía pero… ¿en qué se diferencian las aplicaciones web de los sitios web?

Existen ventajas y desventajas en cada una de las dos implementaciones.

En aplicaciones web:

  • Permite utilizar la característica «Editar y continuar» del depurador. Esta característica es un problema en Visual Studio 2010 instalado en Sistemas Operativos de 64 bits ya que no funcionaba correctamente. En Visual Studio 2013 funciona correctamente.
  • Permite ejecutar pruebas unitarias en los codebehind de los aspx.
  • Puedes crear referencias a todos los archivos de código de la aplicación.
  • Es posible crear dependencias de proyecto entre varios proyectos web.
  • El compilador puede crear un ensamblado único para todo el sitio.
  • Puedes controlar la versión y nombre de ensamblado.
  • Es posible evitar situar código fuente en producción.

En sitios web:

  • No es necesario compilar el proyecto para implementarlo.
  • Es posible actualizar los archivos en producción editándolos directamente.
  • No existe un archivo de proyecto (.csproj o .vbproj).
  • La ejecución de una página individual no requiere la compilación correcta de todo el sitio web al completo. (En un proyecto de aplicación Web, no pueden existir errores de compilación en cualquier parte del sitio ya que de esta manera no generaría el ensamblado)

Resumiendo y desde mi punto de vista, los sitios web se utilizan para proyectos simples que no requieren de una gran infraestructura de código ni un gran número de dependencias. En cambio para proyectos de gran envergadura y que necesiten cierta arquitectura (3 capas por ejemplo) es mejor utilizar una implementación de proyecto Web.

Bundling y Minification en ASP.NET 4.5

Bundling es una nueva característica dentro de ASP.NET 4.5 que hace fácil combinar diversos ficheros en un único fichero. Esto es muy recomendable porque acelera sustancialmente la carga de la página y con ello mejora el rendimiento de la aplicación.

No hay que confundir bundling con minification, pero… ¿qué signfica Minification? Seguro que os habéis preguntado en alguna ocasión por qué en muchos ficheros que os descargáis por la red existen dos ficheros uno con extensión min.css o min.js y otro sin él. El fichero min es básicamente el mismo pero en él se eliminan los espacios en blanco no significativos, comentarios y se acortan los nombres de las variables. El objetivo final de esto es acortar el tiempo de carga de estos ficheros.

Los ficheros donde se utilizan estas técnicas son archivos javascript y css.

Bundling y minification se habilitan o deshabilitan en base al valor de la propiedad debug dentro del elemento compilation del web.config.

Si debug=»true» entonces el agrupamiento y la minificación estarán deshabilitadas. Es lógico, si queremos depurar la aplicación y queremos que el código sea legible necesitaremos distintos archivos y líneas de código, no un «tocho» de código dentro de una misma línea.

Si debug=»false» entonces se habilitarán estas dos características.

En un proyecto web creado con plantilla con Visual Studio podremos observar que existe un fichero llamado startup.cs gestionado por OWIN que se ejecuta al iniciar la aplicación.En este fichero se llama a un fichero de configuración de bundling llamado BundleConfig.cs (dentro del directorio App_Start) que se encarga de asignar los Bundling y Minification.

 

 

 

Autenticación en Visual Studio 2013

En Visual Studio 2013 han introducido una manera sencilla para establecer el tipo de autenticación que usará la aplicación web.

autenticacion_visual studio 2013

Estos son los métodos de autenticación en Visual Studio 2013

  • Sin autenticación
  • Cuentas de usuario individuales: usuarios guardados en base de datos, o cuentas de Facebook, Twitter, Google, Microsoft o de otros proveedores.
  • Cuentas profesionales: Active Directory, Windows Azure Active Directory y Office 365.
  • Autenticación de Windows

Como podemos comprobar la autenticación de aplicaciones de Visual Studio 2013 ha cambiado notablemente, este aspecto está influido por la nueva filosofía que ha tomado Microsoft para su integración de aplicaciones web en un entorno más actual y no completamente atado a tecnologías propias de Microsoft.