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…

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.

Crear nuevo proyecto ASP Net MVC

En este post trataremos de explicar como crear un nuevo proyecto ASP.NET MVC.

Los pantallazos de esta entrada están tomados de Visual Studio 2010 Ultimate pero el proceso de creación para otras versiones de Visual Studio es similar.

Lo primero que debemos hacer una vez abiero Visual Studio es ir a Archivo -> Nuevo -> Proyecto

ASPNET MVC NUEVO

Aparecerá una ventana en la que nos dejará elegir el tipo de proyecto. Del menú de la izquierda seleccionaremos Web y en el cuerpo de la ventana podremos elegir ASP.NET MVC Web Application o bien ASP.NET MVC Empty Web Application.

Nuevo proyecto MVC

La diferencia entre ambas es que para la primera vienen implementadas ciertas funcionalidades mientras que para la segunda únicamente crea el «esqueleto» de una aplicación MVC.

En ambos casos se crean las referencias a las librerías MVC de .Net necesarias para su uso.

Nosotros seleccionaremos la primera opción: ASP.NET MVC Web Application.

Es posible que dependiendo de tu versión de Visual Studio te pregunte en este punt o si deseas crear un proyecto dentro de la solución para tests, esto lo seleccionarás si deseas hacer código de pruebas.

Una vez hecho todo esto Visual Studio creará por medio de una plantilla toda una estructura de carpetas y ficheros necesarios para la correcta implementación de un proyecto MVC:

ASPNET MVC Estructura inicial

Obtener índice seleccionado de un tab con jquery

Si tenemos una pestaña y queremos obtener índice seleccionado de un tab con jquery puedes probar:

...
var current_index = $("#tabs").tabs("option","selected");
...

En caso de que no funcione es porque en la versión más reciente de jquery se utiliza lo siguiente:

...
var current_index = $("#tabs").tabs('option', 'active');
...

Donde #tabs es el id de la capa que contendrá las pestañas con jquery.

Autorización de urls en ASP.NET

La autorización de ASP.NET permite controlar el acceso a los recursos por parte de un usuario autenticado. Es decir podemos establecer si un usuario o grupo de usuarios tendrá posibilidad de acceder a una url en concreto.

Para ello se pueden establecer por cada directorio o archivo los permisos necesarios para acceder a él.

Todos sabemos que se pueden establecer reglas de reescritura mediante un web.config. A mi parecer la autorización de urls en asp.net está mal llamado por Microsoft porque lo que en realidad se controla es el acceso a un fichero o directorio determinado (es decir un recurso físico, no urls como tal).

Para establecer permisos en un sitio web se utilizarán los ficheros de configuración web.config. A continuación vamos a introducir algunos ejemplos que indican el funcionamiento de la autorización de urls en ASP.NET.

  • Denegar usuarios anónimos a toda la web. En el web.config del sitio:

<system.web>

...
	<authorization>
		<deny users="?"/> //acceso denegado a usuarios anónimos
	</authorization>

</system.web> 

  • Acceso denegado a usuarios anónimos pero posibilidad de acceso de uno a una página determinada

...

<configuration>

	<system.web>
	
		<authorization> 
			<deny users="?"/>  //restringir usuarios anónimos
		</authorization>
		
	</system.web>

	<location path="registro.aspx"> //página a la que se aplicarán las siguientes configuraciones

		<system.web>

			<authorization>
				<allow users="*"/> // esto permitirá el acceso a cualquier usuario anónimo
			</authorization>

		</system.web>

	</location>

</configuration> 

  • Dar permiso a un usuario en concreto y denegar a todos los demás:

<location path="usuario_con_privilegios.aspx">

    <system.web>

        <authorization>

			<allow users="premium"/> // acceso permitido a usuario_premium
			<deny users="*"/>  // acceso denegado a todos los demás

        </authorization>

    </system.web>

</location>

 


  • Permitir a usuarios con un determinado rol

<location path="DirectorioAdmin">

    <system.web>
		<authorization>

			<allow roles="Admin"/> //Acceso permitido para usuarios con rol Admin
			<deny users="*"/> // Acceso denegado a todos los demás

		</authorization>
    </system.web>

</location>

<location path="CustomerFolder">

    <system.web>
		<authorization>

			<allow roles="Admin, Clientes"/> //Acceso permitido a usuarios con roles admin o clientes
			<deny users="*"/> // Acceso denegado a todos los demás

		</authorization>
    </system.web>

</location>

  • Es posible también establecer reglas en un web.config por cada directorio. Es decir tener un fichero web.config para cada directorio.

<configuration>

    <system.web>

        <authorization>
			<allow roles="Admin"/> //Acceso permitido a usuarios con el rol Admin
			<deny users="*"/> // prohibir acceso a todos los demás
        </authorization>

    </system.web>

</configuration> 

Reglas

Hay que tener en cuenta de cómo se aplican las reglas:

  • Las reglas contenidas en archivos de configuración en la aplicación tienen prioridad sobre las reglas heredadas. El sistema determina la regla que tiene prioridad creando una lista combinada de todas las reglas de una dirección URL, con las reglas más recientes (más arriba en la jerarquía) al principio de la lista.
  • Dado un conjunto de reglas combinadas para una aplicación, ASP.NET comienza al principio de la lista y comprueba las reglas hasta que encuentra la primera coincidencia <allow users=»*»/> que autoriza a todos los usuarios. (Esta regla se aplica en último lugar de forma predeterminada.) Si no coincide ninguna otra regla de autorización, se permite la solicitud. Si se encuentra una coincidencia y ésta es un elemento deny, la solicitud se devuelve con el código de estado 401 HTTP. Si coincide un elemento allow, el módulo permite que se siga procesando la solicitud.

Redireccionar url en función del navegador en Apache

En ocasiones es necesario añadir reglas de redireccionamiento dependiendo el navegador que utilice nuestro cliente web.

Para ello podemos utilizar el archivo .htaccess e indicar unas directivas en función del navegador que se esté utilizando el cliente.

El siguiente bloque escrito en htaccess puede ser muy útil si tienes sitios que no se muestran correctamente en navegadores viejos y obsoletos:


<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} "MSIE 8" [or]
RewriteCond %{HTTP_USER_AGENT} "MSIE 7" [or]
RewriteCond %{HTTP_USER_AGENT} "MSIE 6"

RewriteRule . actualizar-navegador.html [L]

Con esto le estamos diciendo que si el navegador del cliente en Internet Explorer 6, 7 u 8 vaya a una página especial donde le podremos indicar al usuario que necesita actualizar el navegador.


<!DOCTYPE html>

<body>

<div>

...

necesita actualizar el navegador para visualizar correctamente la página, para ello visite los siguientes links...

</div>

</body>

</html>

Redireccionar url en función del navegador en Apache permite también ocultar el acceso a ciertos navegadores. Esto puede ser útil en empresas que tienen intranets y obligan a sus empleados a utilizar un único navegador por seguridad.

Diferencias entre autenticación y autorización

En muchas ocasiones no se llega a distinguir las palabras o términos que más se utilizan en el mundo del software o Internet.

Un ejemplo podría ser las diferencias entre autenticación y autorización que son fundamentales en el desarrollo del software.

  • La autenticación es el proceso por el cual se identifica un cliente (persona) como válida para posteriormente acceder a ciertos recursos definidos.
  • La autorización es el proceso sobre el cual se establecen que tipos de recursos están permitidos o denegados para cierto usuario o grupo de usuarios concreto.

Podríamos poner un ejemplo de un usuario que se autentifique (identificado) en una aplicación pero que no tenga acceso a ningún recurso porque no está autorizado a ello. Esto sería como que tu presentaras tus credenciales en un sitio web y al acceder a tu panel de administración no podrías realizar ninguna acción. En realidad este caso sería un caso poco realista pero serviría para explicar cual es la diferencia entre autenticación y autorización.

La autorización tiene mucho que ver con perfiles y roles de usuarios. Lo normal es que al diseñar una aplicación existan muchos tipos de usuario que englobemos en distintos perfiles: por ejemplo: administrador, editor, invitado…

Estos usuarios tendrán acceso a distintos recursos según sea el perfil al que pertenezcan. Un administrador de un sistema, por ejemplo, tendrá acceso a todos los recursos que ofrezca la aplicación. Hablamos de recursos como todos los recursos, no solamente los contenidos sino también ficheros, servicios, etc. que se encuentren en el servidor web o incluso fuera de él.

Existen hasta modos de establecer que nivel de autorización tiene un usuario que no está autenticado, es decir, un invitado de un sitio web a veces puede tener acceso a muchos pero no todos los recursos.

Diferenciar estos dos conceptos es importante para un desarrollador sobretodo a la hora de buscar documentación.