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…

Instalar y configurar ELMAH

Bases de Datos, Diseño y Programación Web, Programación, , ,

Como todos sabemos el trabajo de un programador no es perfecto y por eso, haciendo caso al refrán,  es mejor prevenir que curar.  Un buen desarrollador de software tendrá en cuenta crear un log para monitorizar aquellos errores de programación y de cualquier otro tipo que puedan suceder en la aplicacíón que se desarrolla.

Al respecto el programador tiene varias opciones:

  • Crearse por sí mismo un sistema de control de errores dentro de su aplicación. Si es hábil podrá migrar este sistema a futuros desarrollos.
  • Utilizar librerías ya implementadas que cubren la funcionalidad de control de errores.

En mi caso yo recomiendo ELMAH (Error Logging Modules and Handlers) que permite crear un sistema automático de guardado de errores y además crear la infraestructura (tablas y procedimientos en base de datos y librerías .Net) para utilizarlas como servicio de logging.

Este post intentará explicar cómo instalar y configurar ELMAH para una aplicación o sitio web en asp.net.

Paso 1. Descargar las librerías de ELMAH.

El primer paso que deberás hacer es descargarte las librerías de ELMAH en tu sitio web asp.net. Esto lo puedes hacer manualmente (en este enlace) o mediante el administrador de paquetes NuGet de Visual Studio (Menú Tools – Library Package Manager – Manage NuGet Packages for Solution…)

Instalar y configurar ELMAH

En la ventana emergente buscaremos en nuget.org (Online) con la palabra clave ELMAH y lo instalaremos en nuestra aplicación Web.

Una vez instalado veremos que nos ha referenciado algunas librerías nuevas y nos habrá modificado el web.config.

Paso 2. Ejecutar el script de la base de datos.

ELMAH puede utilizar una base de datos sqlserver para guardar los errores que se van generando. El siguiente paso será crear la estructura de la base de datos a través de un script que podremos descargar aquí.

Paso 3. Utilizar la monitorización de errores.

En este punto ya podremos ver una de las ventajas de ELMAH. Utilizaremos la url http://»misitio.com»/elmah.axd para monitorizar los errores por pantalla.

Por ejemplo,

si lanzamos una excepción manualmente en nuestro código…

ELMAH Excepción manual

lo ejecutamos y después de lanzado el error vamos a la url http://»misitio.com»/elmah.axd veremos una pantalla donde aparece lo siguiente:

Error monitorización ELMAH

Es útil, pero en este punto el error no se ha guardado en la base de datos, de hecho si no te interesa guardarlo en un almacenamiento persistente podrás saltarte el paso 2 y los siguientes.

Paso 4. Configurar la base de datos.

Para enlazar ELMAH con la base de datos es necesario indicarle cual es la cadena de conexión. Para ello deberemos ir al web.config y añadir la cadena de conexión dentro de la sección que define la etiqueta <elmah>

ELMAH cadena de conexión

Si nos fijamos en la etiqueta errorLog, se le está indicando que para el tipo de módulo sqlerrorlog utilice la cadena de conexión con el nombre «DefaultConnection» que la hemos definido previamente en el web.config.

Si la cadena de conexión es correcta los errores se empezarán a guardar en este punto en la base de datos.

En futuros posts veremos algunas configuraciones extra que podemos utilizar con ELMAH como son el envío de mails, seguridad, etc…

 

Qué es Visual Studio LightSwitch

Bases de Datos, Diseño y Programación Web, Herramientas de desarrollo, Programación, Tecnologías y conocimiento, Windows, ,

Con esta tecnología Microsoft pretende llevar el campo de desarrollo a manos que no se dedican especialmente a la programación.

Su utilización se asemeja a lo que pueda ser access comparado a cualquier gestor de base de datos.

En visual studio 2013 puedes elegir entre crear una aplicación LightSwitch de escritorio o una de tipo web.

Si bien todas estas soluciones rápidas de desarrollo son muy poco personalizables puede llegar en alguna ocasión a ser interesante para desarrollar una aplicación de una manera rápida y sencilla.

Más Info

Como añadir una nueva entrada a un fichero po y mo

Diseño y Programación Web, Herramientas de desarrollo,

Si utilizas la aplicación Poedit para editar tus traducciones de WordPress te habrás fijado que no existe ningún botón ni ninguna opción para añadir una nueva fila o traducción al fichero.

Para poder añadir una nueva entrada a un fichero po y mo tan solo debes olvidarte al principio de Poedit y editarlo con un procesador de textos cualquiera (por ejemplo notepad++) y copiar una fila como la siguiente.

#: ../header.php:391 ../header.php:442
msgid «Just type and press ‘enter'»
msgstr «Teclea y pulsa intro»

La primera fila es un comentario que indica en que sitios se está utilizando la traducción.

La segunda fila (la que empieza por msgid) significa que el id del mensaje es lo que va entre comillas. Lo ideal es que para todos tus ficheros de idiomas existan los mismos ids. Es común sobretodo cuando descargas plantillas que se hayan olvidado en los ficheros de traducción algunas claves con lo que la traducción no se realizará. En este caso obtendrá el valor por defecto que contiene el fichero de idioma por defecto.

La tercera fila (comienza por msgstr) es el sitio donde se realiza la traducción en el idioma que pertenezca el fichero a editar.

Una vez hemos introducido estas 3 filas con su correspondiente traducción al idioma y guardado el archivo po podremos abrir este mismo archivo con Poedit. Ahora podremos ver que con esta app se visualiza la nueva entrada que anteriormente no estaba.

El último paso es guardar con Poedit y se generará o actualizará el fichero mo.

Estos dos últimos ficheros (po y mo) son los que utilizaremos para su correcta traducción.

Eventos de ratón para un marcador en Google Maps

Diseño y Programación Web, Programación, , ,

A continuación se enumerarán los distintos eventos que son disparados cuando se interactua con el ratón sobre un marcador de Google Maps.


google.maps.event.addListener(marker, "click", function (e) { log("Click"); });
google.maps.event.addListener(marker, "dblclick", function (e) { log("Double Click"); });
google.maps.event.addListener(marker, "mouseover", function (e) { log("Mouse Over"); });
google.maps.event.addListener(marker, "mouseout", function (e) { log("Mouse Out"); });
google.maps.event.addListener(marker, "mouseup", function (e) { log("Mouse Up"); });
google.maps.event.addListener(marker, "mousedown", function (e) { log("Mouse Down"); });
google.maps.event.addListener(marker, "dragstart", function (mEvent) { log("Drag Start: " + mEvent.latLng.toString()); });
google.maps.event.addListener(marker, "drag", function (mEvent) { log("Drag: " + mEvent.latLng.toString()); });
google.maps.event.addListener(marker, "dragend", function (mEvent) { log("Drag End: " + mEvent.latLng.toString()); });

Google Maps: crear un marcador con etiqueta

Diseño y Programación Web, Programación, , ,

Antes de nada hay que indicar que es necesario añadir la referencia a la api de google maps para realizar lo que hace este post. Para crear un marcador que muestre una etiqueta con Google Maps podremos seguir el siguiente ejemplo. Marcador-google-maps

Crear un marcador básico

La clase google.maps.InfoWindow será la que nos permita visualizar la etiqueta. Estará asociada a un mapa y un marcador cuando decidamos abrirla con el comando: iw.open(map, marker); Si nos fijamos el lugar donde se mostraría la información sería en el click del marcador ya que hemos registrado un manejador del evento correspondiente en la última línea, esto desencadenará la visualización de la etiqueta.

var latLng = new google.maps.LatLng(49.47805, -123.84716); var homeLatLng = new google.maps.LatLng(49.47805, -123.84716); var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 12, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new MarkerWithLabel({ position: homeLatLng, draggable: true, map: map, labelContent: "A", labelAnchor: new google.maps.Point(22, 0), labelClass: "labels", // la clase CSS para la etiqueta labelStyle: {opacity: 0.75} }); var iw = new google.maps.InfoWindow({ content: "Home For Sale" }); google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); });

Crear marcadores en Google Maps con la API

Diseño y Programación Web, Programación, , , ,

Otra de las cosas muy interesantes que nos permite la API de google maps es poder utilizar los marcadores que queramos y situarlos a nuestro antojo dentro de un mismo mapa. Incluso podemos vincular este marcador con una url de tal modo que al hacer click sobre él nos lleve a otro contenido dentro de Internet.

Obtener la capa y asignarle al objeto «mapa»

En un principio deberás tener colocada dentro de tu página una capa vacía donde querrás ubicar el mapa. Lo normal será rellenar el mapa en el momento que carguemos la página.


...

<div id="map_canvas"></div>

...

Con jquery podemos utlizar el evento onload de la ventana para realizar todas las operaciones del mapa.


window.onload = function () {  

//Creamos las opciones que estarán asignadas al mapa

var options = {
 mapTypeControlOptions: {
 mapTypeIds: ['Styled']
 },
 center: new google.maps.LatLng(39.644024, -3.185656),
 zoom: 5,
 disableDefaultUI: true,
 mapTypeId: 'Styled'
 };
 var div = document.getElementById('map_canvas');  //En esta línea obtenemos la capa donde se ubicará nuestro mapa

//Creamos el objeto mapa de google con las opciones y asignamos la capa div html
 var map = new google.maps.Map(div, options); 

}

 

Cómo crear el marcador

Para crear un marcador es necesario dos objetos de google que son:

  • google.maps.Marker, será el propio marcador.
  • google.maps.LatLng, objeto que representa las coordenadas dentro del mapa.

Primero creamos un objeto LatLng , en él fijaremos la longitud y latitud del marcador.


var gijon = new google.maps.LatLng(43.532362, -5.661588);

Posteriormente creamos el marcador:


var marker_gijon = new google.maps.Marker({
 position: gijon,
 url: '/sedes/sede-gijon/',
 title: 'Gijón',
 map: map
 });

En este punto podemos ver en la propiedad «position» le asignamos la variable de tipo LatLng establecido previamente.

Title, será la cadena que se mostrará al pasar el ratón por encima.

Y «map» es el objeto mapa creado anteriormente.

La propiedad url no existe como tal en el objeto de google marker pero la creamos nosotros para establecer la dirección a la que se dirigirá posteriormente.

Para tratar esta dirección podemos utilizar el siguiente código:


google.maps.event.addListener(marker_gijon, 'click', function() {
window.location.href = marker_gijon.url;
});

Este ha sido un pequeño tutorial para crear marcadores en Google Maps con la API. Seguro que existen más posibilidades pero esto es solo una manera sencilla de empezar.

Parámetros que podemos pasar al iframe de Youtube

Diseño y Programación Web,

Dentro de lo poco que nos permite personalizar youtube cuando insertamos un vídeo que no es nuestro está el pasarle parámetros por la url del src del frame en el que se inserta el vídeo.

Cuando insertamos el vídeo en una página el código es parecido al siguiente:


<iframe width="420" height="315" src="//www.youtube.com/embed/t3MHLYD6--g" frameborder="0" allowfullscreen></iframe>

Bien, pues podemos pasarle parámetros después de la url origen de esta manera:


<iframe width="420" height="315" src="//www.youtube.com/embed/t3MHLYD6--g?rel=0&showinfo=0&controls=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>

Si nos fijamos en el ejemplo anterior podemos ver los siguientes parámetros:

  • rel, indica si queremos que al finalizar el vídeo se muestren sugerencias de vídeos relacionados.
  • showinfo, este parámetro sirve para mostrar la información del vídeo en la parte superior.
  • controls, si queremos ocultar o mostrar los controles del vídeo.
  • modestbranding, borra el logo de «Youtube» de la barra de controles del vídeo.

Cada uno de estos parámetros pueden tomar el valor 0 o 1 (falso o verdadero).

Los parámetros que podemos pasar al iframe de Youtube son más bien escasos lo que hace de una personalización bastante complicada. Si se necesita llegar más lejos seguramente necesites utilizar jquery y el api de youtube.

Firmas DKIM y SPF para programación Newsletter

Diseño y Programación Web, Marketing on-line, Programación, Tecnologías y conocimiento

En el envío de correos electrónicos masivos se corre el riesgo de que los correos sean tratados como Spam. En este caso la IP desde la cual se envía el correo electrónico seguramente quedará añadida a la lista negra de servidores. En el caso de que esto suceda estarás en un grave problema ya que es complicado revertir este problema.

El origen del problema

Mediante programación se puede falsear el campo «From» desde el cual se envía un correo electrónico. Esta característica hace que un usuario que entienda un poco de programación pueda enviar uno o varios correos electrónicos con la dirección remitente falseada.

De Wikipedia:

… El correo masivo supone actualmente la mayor parte de los mensajes electrónicos intercambiados en Internet, siendo utilizado para anunciar productos y servicios de dudosa calidad. Rolex, eBay y viagra son los asuntos de los mensajes que compiten por el primer lugar en las clasificaciones de spam.

Usualmente los mensajes indican como remitente del correo una dirección falsa. Por esta razón, no sirve de nada contestar a los mensajes de spam: las respuestas serán recibidas por usuarios que nada tienen que ver con ellos. Por ahora, el servicio de correo electrónico no puede identificar los mensajes de forma que se pueda discriminar la verdadera dirección de correo electrónico del remitente, de una falsa. Esta situación que puede resultar chocante en un primer momento, es semejante por ejemplo a la que ocurre con el correo postal ordinario: nada impide poner en una carta o postal una dirección de remitente aleatoria: el correo llegará en cualquier caso. No obstante, hay tecnologías desarrolladas en esta dirección: por ejemplo el remitente puede firmar sus mensajes mediante criptografía de clave pública.

Los filtros automáticos antispam analizan el contenido de los mensajes buscando, por ejemplo, palabras como rolex, viagra, y sex que son las más usuales en los mensajes no deseados. No se recomienda utilizar estas palabras en la correspondencia por correo electrónico: el mensaje podría ser calificado como no deseado por los sistemas automáticos anti correo masivo…

Soluciones

Para indicar que el remitente del correo electrónico es realmente quién dice ser se han propuesto algunas soluciones.

Los sistemas más utilizados para este fin son:

  • SPF
  • DKIM
SPF

Consiste en indicar en el DNS del dominio a configurar cuales serán las máquinas que están autorizadas para enviar correos electrónicos. Como es el propietario del dominio el único autorizado que puede modificar el registro DNS entonces puede indicar que equipos (IPs) pueden realizar el envío bajo su nombre.

En el servidor de  correo entrante del destinatario se comprobará los registros DNS del dominio del remitente. Si la dirección IP del servidor que ha enviado el correo concuerda con lo que nos dice el DNS que es una máquina autorizada entonces el correo quedará autenticado en SPF.

SPF es una extensión del protocolo SMTP.

Ver + info en Wikipedia.

DKIM

Consiste en firmar cada correo electrónico enviado. Esto se realiza mediante la utilización de una clave pública que permita ser verificado por cada destinatario.

El proceso incluye la inserción de una firma DKIM en las cabeceras del mensaje. El receptor se encarga de validar la firma obteniendo la clave pública a través del DNS.

DKIM es independiente del protocolo SMTP. Únicamente actúa sobre el cuerpo y cabeceras del mensaje y no en la conversación SMTP.

Ver +info en Wikipedia

Conclusiones

Estos dos sistemas son complementarios y no se excluyen entre sí. De hecho lo ideal sería mantener los dos si tienes que implementar un software de envío masivo de correos para evitar entrar en las dichosas listas negras.

A nivel de programador / desarrollador existen unas diferencias:

  • En el caso de SPF no es necesario tocar «código» ya que únicamente se modifica el DNS del dominio que realizará los envíos.
  • En el caso de DKIM, es necesario tocar el DNS y además el programador deberá tener en cuenta que debe firmar el correo antes de enviarlo mediante programación.

Lo que a priori parece una tarea sencilla para el programador, el envío de boletines de noticias se torna complicada cuando descubrimos que podemos ser tratados como spam.

La programación Newsletter no es tan sencilla. Esperamos que aquí hayáis encontrado la manera de realizarlo sin problemas de ser tratados como no deseados.

 

Dar estilo a los mapas de google

Diseño y Programación Web, Programación, ,

Antes de nada decir que para dar estilo a los mapas de google es necesario utilizar la API de Google Maps.

Una vez dado de alta en este servicio se te ofrecerá un número de cliente que utilizarás para acceder a todas sus características.


<script src="http://maps.googleapis.com/maps/api/js?client=numerodecliente&sensor=true_or_false"
 type="text/javascript"></script>

Una vez añadido este código javascript. Podremos modificar los estilos de nuestro mapa a nuestro antojo. La referencia donde encontrarás toda la documentación es la siguiente:

https://developers.google.com/maps/documentation/javascript/reference?hl=es-ES

En este enlace podremos ver ejemplos de distintos estilos de mapas que podremos pintar:

Para utilizar correctamente cada uno de los ejemplo se ha de crear una capa con id=»map». Esta capa será la que al cargar la página contenga el mapa.

 

 

 

 

 

Bug en imagenes Internet Explorer 8

Diseño y Programación Web,

Es posible que hayas sufrido en IE8 el siguiente problema:

Las imágenes «responsive» en IE8 se ajustan correctamente en anchura pero su altura se alarga o deforma.

Para solucionar esto el CSS debe hacer las imágenes responsive en ccs y tener la siguiente declaración añadida:

width: auto;

img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
/* vertical-align: bottom; */ /* Suppress the space beneath the baseline */
/* Responsive images */
/* @todo Add responsive embedded video. */
max-width: 100%;
height: auto;
width: auto;
}

Este bug en imágenes Internet Explorer 8 aparece debido a que no se ha metido el archivo normalize.css