Archivo por meses: enero 2014

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.

Fondo personalizado en Outlook

Un diseño de fondo personalizado en Outlook te permite crear plantillas para cada mensaje de correo electrónico. Es algo más que una firma ya que permite crear cabecera y texto que por defecto se incluirá en cada nuevo mensaje.

Para crear el fondo lo primero que hay que hacer es diseñarlo por primera vez en un mensaje de correo.

  1. Crear un mensaje nuevo. Una vez realizado todos los pasos se podrá descartar este mensaje.
  2. Personalizar el mensaje con imágenes, colores de fondo, líneas, viñetas y demás elementos.
  3. Cuando esté el mensaje preparado pincharemos en Archivo -> Guardar como
  4. En la barra de direcciones del cuadro de diálogo Guardar como escribiremos %appdata%\microsoft\stationery y a continuación intro. De esta manera se abrirán la carpeta Diseños de fondo.
  5. En cuadro Nombre de archivo, escribiremos un nombre para el nuevo diseño y lo guardaremos como tipo HTML.

A partir de ahora en outlook podremos ver el nuevo fondo dentro de las opciones de Outlook para los mensajes pudiéndolo aplicar por defecto a cada nuevo correo electrónico.

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.

Red no identificada en Windows

Me encontré un problema en Windows 7 que me impedía conectarme a internet e incluso a la red local mediante cable con una tarjeta de red ethernet integrada en una placa base. Al intentar conectar en el centro de redes de windows me aparecía como conectado a una red no identificada y con una ip muy extraña 169.xxx.xxx.xxx.

Lo primero que intenté fue cambiar la ip dinámica a una estática pero el problema persistía y lo más extraño es que el ipconfig me daba la misma ip extraña: 169.xxx.xxx.xxx.

Al investigar por internet en mil foros se hablaba de ciertas soluciones que aparentemente parecía que podían funcionar: el servicio bonjour, de ipconfig/renew, reinicio del router…

Lo probé todo pero aún así seguía el mismo problema.

Yo estaba convencido de que el problema iba a ser Windows pero al arrancar con un linux booteable pude comprobar que… ¡la tarjeta no podía conectar!

Así que le metimos una tarjeta PCI y por fin se conectó.

red no identificada en windows

Por lo que he visto por internet el error «Red no identificada en Windows» puede ser debido a muchos motivos pero si ves que ninguno te soluciona el problema es posible que tu tarjeta de red esté rota.

Problema con git en windows – fatal: could not read password

Primero vamos a ponernos en la situación que me encontraba:

Había instalado NetBeans  7.4 (versión php) y tenía un proyecto al que quería hacer un control del código fuente. Por suerte en esta versión de NetBeans existía un plugin instalado de git con lo que en principio todo iba a parecer fácil…

Decidí instalar el repositorio origen en un servidor de internet y pronto me decidí por bitbucket.org. Allí me registré y me dispuse a crear un repositorio para luego trabajar en local y subir los cambios a este servidor.

Cuando en bitbucket le das a comenzar me da la opción de crear un repositorio vacío o subir un repositorio existente desde un equipo local, esta última opción era la que yo quería porque el proyecto estaba ya bastante avanzado. Según me indicaba el propio bitbucket debía introducir las siguientes líneas:


$ cd /path/to/my/repo

$ git remote add origin https://usuario@bitbucket.org/usuario/repositorio.git

$ git push -u origin --all

$ git push -u origin --tags

Las dos primeras líneas se ejecutaron sin ningún problema pero cuando llegué a la tercera me topé con el siguiente error:

fatal: could not read Password for ‘https://usuario@bitbucket.org’: No such file or directory

Después de buscar soluciones por internet encontré esta herramienta.

Se trata de una consola parecida pero que te permite ejecutar estos comandos sin ningún problema.