el origen del slider…

Independientemente del camino que tomemos para armar y dar la funcionalidad de un slider, el siguiente código dará una idea de cómo es el funcionamiento y estructura.

La idea general central es, generar un código HTML sin tanta personalización en atriburos (id, clases de CSS, names) y que por si solo sea tomado y animado para dar el efecto de estos elemtos tan utilizados actualmente en una variedad de sitios.

Se parte de la estructura HTML.

<div id=»contenedor»>
  <div id=»imagenes»>
      <div><a href=»inna1.html»><img src=»img1.jpg» alt=»» /></a></div>
      <div><a href=»inna2.html»><img src=»img2.jpg» alt=»» /></a></div>
      <div><a href=»inna3.html»><img src=»img3.jpg» alt=»» /></a></div>
      <div><a href=»inna4.html»><img src=»img4.jpg» alt=»» /></a></div>
  </div>
</div>

Nota, de acuerdo a la forma en que será propuesto el ejercicio es necesario crear un contenedor principal, en este caso llamado «contenedor» y otro que es el que se desplazará cada cierto tiempo.

Ahora es necesaria la personalización de estos DIV’s con CSS

#contenedor
{
      border:1px solid red;
      height:100px;
      width:300px;
      overflow:hidden;
}
#contenedor #imagenes
{
      position:relative;
}

una vez definida la apariencia y limitado los espacios la función que será llamada al momento del cargado de la página.

<body onload=»rotarImagen()»>

el código es:

<script type=»text/javascript» language=»javascript»>
      var nImg = 1;
      var pos=100;
      var intervalo=10;
      function rotarImagen()
      {
            if ((pos*(-1))<((document.getElementById(‘imagenes’).children.length-1)*100))
            {
                  document.getElementById(‘imagenes’).style.top = (pos-intervalo) + «px»;
                  pos = pos – intervalo;
            }
            else
            {
                  document.getElementById(‘imagenes’).style.top = «0px»;
                  pos = 0;
            }
      if ((pos%100)!=0) setTimeout(«rotarImagen()»,50);
      else setTimeout(«rotarImagen()»,2000);
     }
</script>

Como pueden ver la transición de las imágenes está en función de su tamaño y se provoca un desplazamiento secuencial del contenedor «Imagenes» que tiene una pausa menor cuando el desplazamiento ha cumplido con el tamaño de la imagen, esto da la apariencia de transición.

En caso de querer incorporar algún otro efecto de transición como difuminado de la imagen se debe modificar el alpha de la imagen (valor entre 0 y 1) y así dar otro efecto de movimiento.

A partir de este pequeño código es que podemos encontrar slides tan elaborados como nuestra imaginación (o el diseñador gráfico) lo requiera.

Saludos

[ASPX] Mostrar Imagen en Base de Datos en una etiqueta

Es muy común que en alguna aplicación además de información de tipo texto o numérico (entre otras), sea también necesario almacenar imágenes correspondientes a la información que se requiere representar.

Supongamos una aplicación en la cual se desean mostrar los eventos que se realizaran en cierta institución ordenada en cierta manera pero que además de la información propia del evento, se quiera mostrar un carrusel con JQuery en el cual se muestren los banners correspondientes a cada evento.

Para esto se deberá almacenar dicho banner en Base de Datos junto con la información textual del evento. He aquí la pregunta. Si mi imagen esta almacenada en base de datos, ¿Cómo puedo mostrar esta imagen en una etiqueta IMG? A continuación se muestra una opción para hacerlo.

Paso 1: Crear un WebForm llamado Imagen.aspx

Este formulario funcionara como url local para acceder a la imagen.

Paso 2: Obtener la imagen.

En este paso se consulta la base de datos para obtener la imagen en el evento Page_Load de la página Imagen.aspx, esto se hace de la misma forma que con cualquier dato.

//Recuperar el identificador
string id = Request.QueryString["id"];
//Crear conexion
using (SqlConnection con = new SqlConnection())
{
   //Obtener ConnectionSctring de web.config
   System.Configuration.Configuration rootWebConfig = System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration("~");
   System.Configuration.ConnectionStringSettings connString;
   if (0 < rootWebConfig.ConnectionStrings.ConnectionStrings.Count)
   {
     connString=rootWebConfig.ConnectionStrings.ConnectionStrings["MiCadena"];
     if (null != connString)
     {
       con.ConnectionString = connString.ToString();
       con.Open();
       using (SqlCommand com = con.CreateCommand())
       {
          //tipo de comado StoreProcedure o consulta
          com.CommandType = CommandType.Text;
         //nombre del StoreProcedure o consulta
          com.CommandText = "SELECT Banner FROM Eventos WHERE IdEvento=" + id;
         try
         {
            //Ejecutar comando
            byte[] img = (byte[])com.ExecuteScalar();
         }catch(SqlException se){}
      }
      //Cerrar conexion
      con.Close();
   }
 }
}

Paso 3: Una vez obtenida la información de la imagen. Solo nos resta responder esta imagen como contenido de tipo “image/jpeg” ya que JPG es el formato en que se almaceno la imagen en la Base de Datos. Ver Tipos Mime


MemoryStream str = new MemoryStream();
str.Write(img, 0, img.Length);
Bitmap bit = new Bitmap(str);
Response.ContentType = "image/jpeg";//Responder Img JPG
bit.Save(Response.OutputStream, ImageFormat.Jpeg);

Paso 4: En el codigo HTML, mostrar la imagen de la siguiente manera:

<img alt="imagen1" src="Imagen.aspx?id=1" />

Con esto nos queda una URL local con la cual accedemos a la imagen que necesitamos.

Gracias

Mostrar PDF en IFRAME dentro de Master Page

En algunas ocasiones es necesario mostrar archivos PDF en un sitio Web, por ejemplo, en un Sistema que genera Ordenes de Pago, pues es lógico pensar que las ordenes generadas sean mostradas en un Web Form, para su impresión o almacenamiento por parte del cliente.

He aquí una forma de mostrar un archivo PDF creado en Directorios de la aplicación (Servidor) en un Web Form, hijo de una Master Page.

ASPX


<iframe id="pdf" runat="server" height="800" width="600"><iframe>

Como puedes darte cuenta, coloco la etiqueta runat=»server», esto hace visible este control del lado del servidor.

C#

//Nuevo control HTML y Buscamos dentro del ContentPlaceHolder del sitio llamado "contenido"
HtmlControl frame1 = (HtmlControl) Page.Master.FindControl("Contenido").FindControl("pdf");
//Asignamos a la propiedad "src" la ruta donde se genero el archivo
frame1.Attributes["src"] = "../../Documentos/" + Session["usuario"] + ".pdf";

Con esto se le indica al contro iframe (de lado del cliente), la ruta del archivo PDF (del lado del servidor). Esto bastará para mostrarse correctamente.

Saludos.
Gracias.

Actualizar contenido dentro de un IFRAME

Usualmente la etiqueta <iframe> se utiliza para mostrar contenido web dentro de un sitio web, si este contenido web dentro del frame no cambia no existe mucha complicación, pero si el contenido esta cambiando automáticamente y es necesario mostrar la versión mas actual existe el inconveniente de que el navegador pueda guardar en cache este contenido y no se muestre como nosotros queremos.

Una solución fácil y rápida, siempre y cuando el contenido que se muestre en el iframe sea nuestro, es el de agregar las siguientes metas que evitan que el contenido se guarde en cache y se muestre la versión mas reciente de este contenido:


<head>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>

Adémas, también se pueden utilizar si queremos que al dar clic en botón atrás del navegador, la pagina no se quede con datos sino que refresque.

Gracias