Cómo usar los íconos Font Awesome (fa)

El conjunto de íconos Font Awesome es una de las alternativas que nos permiten decorar nuestro sitio o desarrollo web con elementos gráficos que le den un toque moderno y ligero ya que la representación gráfica de los íconos no se realiza mediante imágenes sino a través de una tipografía (fuente).

La versión actual incluye una colección de 585 íconos en la versión 4.4.0 de Font Awesome y constantemente se agregan más.

font-awesome

La imagen anterior muestra una parte de la colección de íconos Font Awesome.

Unas de las características especiales de este conjunto de íconos es:

  • Al no ser gráficos y ser representados mediante una fuente, el peso en mucho menor.
  • Pueden utilizarse distintos colores para su representación
  • Es posible utilizar varios tamaños sin que estos se deformen

Prácticamente para usar estos íconos es necesario:

  • del proyecto de Font-Awesome es necesario descargar a la carpeta de tu proyecto la carpeta:
    • CSS que incluye los siguientes archivos:
      • font-awesome.css
      • font-awesome.css.map
      • font-awesome.min.css
    • fonts que incluye los siguientes archivos
      • FontAwesome.otf
      • fontawesome-webfont.eot
      • fontawesome-webfont.svg
      • fontawesome-webfont.ttf
      • fontawesome-webfont.woff
      • fontawesome-webfont.woff2



Una vez que tengas la estructura de directorios mencionada en la carpeta de tu proyecto, es necesario incluir el siguiente código en las páginas desde donde se utilizarán los íconos:

La referencia a los archivos CSS:
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.min.css”/>
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.css”/>

y ¡listo!, esto es lo que necesitas.

Ahora, para llamar los íconos en tu página web se hace através del artributo class de HTML y donde se mandan a llamar las conjuntos de estilos defindos por Font Awesome, de la siguiente manera:

<span class=”fa fa-folder-open”></span> directorio<br/>
<span class=”fa fa-folder-open fa-2x”></span> directorio al doble<br/>
<span class=”fa fa-folder-open fa-3x”></span> directorio al triple<br />
<span class=”fa fa-spinner fa-2x”></span>cambio de ícono <br/>
<span class=”fa fa-spinner fa-2x” style=”color:red”></span>Al ser una fuente puedes indicar el color que necesitas<br/>

el resultado es:

font-awesome-ejemplo

Utilizar una etiqueta spam es semanticamente mejor que utilizar <i> como lo menciona la ayuda de la página oficial de Font Awesome, sin emabargo es posible utilizar cualquiera de las dos.

Una de las características de estos íconos es la rotación, la puedes experimentar con el estilo: fa-spin

Font Awesome incluye el soporte para botones, listas y controles HTML, puedes encontrar documentación completa en: http://fortawesome.github.io/Font-Awesome/examples/

Saludos

Crear un menu usando elementos DIV y CSS

Generalmente la creación de menús horizontales en páginas web se realizan mediante listas (ul,ol) o mediante el uso de DIV, en algún otro momento chuyrdz ya expuso detalladamente cómo se realiza la creación de un menu (ul) desde cero.

Ahora mostraré los elementos mínimos para la creación de un menú horizontal usando solamente DIV y darle la funcionalidad necesaria sin uso de JavaScript para lograr la funcionalidad.

A partir de este código mostrado tendrán la posibilidad de personalizarlo de acuerdo al diseño que se seleccione.

La estructura en HTML es la siguiente:

<div class=”Menu”>
    <div><a href=”#”>inicio</a></div>
    <div><a href=”google.com.mx”>Google</a></div>
    <div><a href=”wordpress.com”>Word Press</a></div>
    <div>
            <a href=”#”>Correos</a>
            <div class=”SubMenu”>
                <div><a href=”gmail.com”>google</a></div>
                <div><a href=”hotmail.com”>hotmail</a></div>
                <div><a href=”yahoo.com”>yahoo</a></div>
            </div>
    </div>
    <div>
           <a href=”#”>Enlaces</a>
          <div class=”SubMenu”>
               <div><a href=”www.google.com.mx”>google</a></div>
               <div><a href=”hotmail.com”>hotmail</a></div>
                <div><a href=”yahoo.com”>yahoo</a></div>
           </div>
    </div>
</div>

La estructura de estos elementos es la siguiente:

div (menu)
    – div
            -a
    – div
            -a
    – div
            -a
            -div (submenu)
                    -div
                          -a
                    -div
                          -a
                    -div
                          -a
    – div
            -a
            -div (submenu)
                    -div
                          -a
                    -div
                          -a
                    -div
                          -a

La estructura anterior muestra los elementos principales del menú que contienen submenú, en este caso, se ejemplificará para los dos últimos elementos, sin embargo si los dos primeros elementos tuvieran submenú, solo tendría que seguirse la estructura especificada y la funcionalidad se aplicará sin realizar ninguna modificación.

Ahora, para que esta estructura tenga la funcionalidad mínima de mostrar los submenús cuando el mouse esté arriba de la opción se deberá especificar el siguiente código como parte de los estilos.

/*establecemos el alto del menú*/
.Menu

{
height:30px; 
}

/*flotamos los div que son hijos directos del div que tiene como clase Menu*/
.Menu > div
{
float:left;
}

/*se indica que los enlaces ocupen todo el espacio del DIV donde están contenidos, se les da un espacio de separación interior entre el texto y el borde (padding)*/
.Menu a
{
display:block;
padding:5px 15px 5px 15px;
}

/*se establece la funcionalidad del enlace al colocar el mouse arriba del enlace*/
.Menu a:hover
{
background-color:gray;
}

/*Se establecen las características iniciales del submenú, el cual no debe mostrarse*/
.SubMenu
{
position:absolute;
visibility:hidden;
display:none;
}

/*Se establece la funcionalidad del submenu cuando el mouse esté arriba de la opción de menu*/
.Menu > div:hover .SubMenu
{
display:block;
visibility:visible;
}

Hasta el momento se tiene solamente funcionalidad, sin embargo este código está listo para adaptarle cualquier diseño de colores, contornos, estilos de letra y demás monerías  a los elementos estáticos o dinámicos.

Saludos

Cómo usar las animaciones con CSS3

Con la versión 3.0 de CSS es posible crear animaciones de elementos web que anteriormente solo se podía crear mediante un lenguaje de programación estructurado que permitiera estructuras de control (ciclos y condicionantes).

De manera similar ocurrió con las transiciones (también incorporadas en CSS3), sin embargo la diferencia entre las transiciones y las animaciones es que las transiciones se ejecutan a partir de un evento como puede ser el hover y las animaciones no responden a un evento en especial, sino al cargado de los estilos al momento de cargar la página.

para ejemplificar el uso de las animaciones usaremos una imagen.

<img alt=”” ” src=”tatto%20page.jpg”  />

y lo que haremos es que mediante animaciones cambiaremos la propiedad de opacidad (opacity) de la imagen de manera que esté transparente al unicio y que se comience a visualizar conforme pasa el tiempo.

Entonces los atributos de la imagen quedaría así:

img{
    animation: aparecer 5s; /*se declara para la imagen una animación llamada “aparecer” y que la animación se realizará en 5 segundos */ 
}

Nota: Estas instrucciones son las declaraciones estándares, en caso de que no se ejecuten tendrás que agregar los prefijos (-webkit-, -o-, -ms-, etc) de acuerdo al navegador que utilices para revisar el ejercicio.

Una vez declarada la animación para el elemento se realiza la declaración de la animación de la siguiente manera:

@keyframes animacion
{
    from{opacity:0;}  /* apariencia inicial del elemento*/
    to{opacity:1;} /* apariencia finaldel elemento*/
}

El ejemplo anterior indica que la opacidad del elemento que tenga asignada esta animación será de “cero” inicialmente (es decir no se verá) y durante la animación se transitará hasta llegar a “uno” (es decir será completamente visible).

Si el ejemplo se deja tal como está, esta animación solo hará una transición es decir de opacidad cero a opacidad uno, sin embargo si queremos que esto sea cíclico (que cuando llegue a opacidad 1 inicie nuevamente) debemos agregar a la animación una instrucción indicando que la animación no se detenga en el estado final:

animation-iteration-count: infinite;

Otro mecanismo para ejemplificar el paso de la animación entre el estado inicial y el final es hacerlo mediante el porcentaje del tiempo que durará la animación, de la siguiente manera:

@-webkit-keyframes aparecer {
    0% {opacity:0;}      /*  similar al “from” estado inicial*/
    50% {opacity:1;}    /*  estado que marca el estado al 50% del tiempo transcurrido */
    100% {opacity:0;} /*  similar a “to”, marca el estado al 100% del tiempo transcurrido */
}

Les recomiendo profundizar en los demás parametros de las animaciones que permiten personaliar la transición de la aminación:

  • animation-delay, especifica el tiempo en que comenzará la animación
  • animation-direction, especifica como se desarrollará la animación
  • animation-duration, especifica cuanto tiempo durará el tiempo del ciclo de la animación
  • animation-fill-mode, especifica el estilo que se le aplicará al elemento cuando la animación no ha terminado o no ha comenzado
  • animation-play-state, especifica cuando la animación está ejecutándose o está en pausa.

Cada una de estos parámetros tiene su conjunto de valores.

Espero les sea de utilidad.

Como utilizar un Sprite con CSS

Esta técnica ha sido utilizada desde hace mucho tiempo, principalmente en juegos para simular movimiento a los elementos (gráficos).

Los sprites en el desarrollo de páginas web, evita que para cada icono incorporado como imagen se haga una petición y transferencia entre cliente y servidor, es decir, si mi página tiene un conjunto de iconos para cada icono se hace una petición de transferencia de imagen, entonces con esta técnica, todas las imágenes de los íconos están en una sola imagen, de manera sólo se transfiere una sola imagen al cliente (navegador), evitando así un sinnúmero de peticiones y transferencias para cada icono de la página web.

Una primera opción es crear las imagen con los íconos en una sola linea vertical, como se muestra en al siguiente imagen:
css-sprites-vertical
esta distribución vertical es la forma más sencilla de implementar porque solo nos preocupamos por el alto entre cada gráfico, el HTML se vería así:

<p id=”l1″>Las calculadores del siglo pasado</p>
<p id=”l2″>Sonido desactivado</p>
<p id=”l3″>Unidad de CD/DVD</p>
<p id=”l4″>Cara con lentes</p>

El CSS de la siguiente manera:

#l1, #l2, #l3, #l4 {
    padding-left: 32px;
    height: 32px;
    line-height: 32px;
    background-image:url(‘css-sprites-vertical.gif’);
    background-repeat: no-repeat;
}
#l1 {background-position: 0px 0px;}
#l2 {background-position: 0px -32px;}
#l3 {background-position: 0px -64px;}
#l4 {background-position: 0px -96px;}

donde se declaran algunos aspectos generales, la separación del margen izquierdo (padding), el alto específico (height), la misma imagen de fondo (con la distribución vertical de los gráficos), por último la posición del background de manera estratégica que corresponde al gráfico que se quiere mostrar.

Un inconveniente al utilizar imágenes como sprites donde tienen todas las imágenes ordenadas verticalmente, es cuando son demasiadas imágenes, entonces se propone otra alternativa, la cual establece una sola imagen que contiene gráficos (imágenes) tanto vertical como horizontalmente, como lo muestra la siguiente imagen.

css-sprites

Esto tiene implicaciones, la primera es que el código HTML tiene que cambiar, es necesario hacer uso de un elemento más que servirá para delimitar el espacio vertical y horizontal del background que se mostrará, los elementos que pueden servir para trabajar esta técnica son div, p o img.

En este caso mostraré el ejemplo usando un elemento img, el código HTML quedaría de la siguiente forma:

<p id=”l5″><img src=”pixel.png” alt=”” />Las calculadores del siglo pasado</p>
<p id=”l6″><img src=”pixel.png” alt=”” />Tecla a con acento</p>
<p id=”l7″><img src=”pixel.png” alt=”” />Signo de música</p>
<p id=”l8″><img src=”pixel.png” alt=”” />gráfico de copiar</p>

La imagen pixel.png es una imagen de 1px de alto por 1px por ancho de manera que no interfiera en tapar el background del elemento web.

Para este ejemplo el CSS quedaría así:

#l5 img, #l6 img, #l7 img, #l8 img{
    height: 32px;
    width: 32px;
    background-image: url(‘css-sprites.gif’);
    background-repeat: no-repeat;
    vertical-align: middle;
}

#l5 img{background-position: 0px 0px;}
#l6 img{background-position: -32px 0px;}
#l7 img{background-position: -32px -32px;}
#l8 img{background-position: -64px -64px;}

de igual manera se define el ancho, alto del espacio del gráfico, una única imagen de fondo para el elemento img y de manera personalizada el espacio de la imagen que se mostrará.

Ahora a probar!.

Saludos

Nota: las imágenes utilizadas no son propias, son imágenes tomadas de otros sitios en internet que también las utilizan para ejemplificar el uso de sprites.

Cómo cargar archivos en SQL Server con ASP.NET usando C#

El siguiente ejemplo muestra las líneas necesarias para cargar un archivo en una base de datos, el ejemplo se basará en usar SQL Server, así que los pasos son:

1.- Antes de comenzar con la creación del código es necesario crear la base de datos, creamos una tabla, le llamaré “tblArchivos

2.- Las columnas que contendrá la tabla “tblArchivos” serán:

Imagen

Recuerden que esta tabla solo nos servirá de ejemplo para realizar el cargado de los archivos, así como para conocer que tipo de archivo se está cargando, es probable que para un ejercicio real esta tabla se complemente.

Los siguientes pasos muestran lo necesario en cuanto a controles y lineas de código para hacer la transferencia del archivo al servidor.

3.- Una vez creado el proyecto de tipo Web Aplication, agregar un WebForm.

4.- Dentro de la página añadir un control de tipo “FileUpload” y un control de tipo “Button“, el primero nos servirá para seleccionar el archivo que queremos cargar, el segundo nos servirá para invocar el envío de datos al servidor.

5.- Al control de tipo FileUpload le llamaremos “archivoSeleccionado”, al botón pueden darle el nombre que mejor les parezca.

6.- Invocar el método onClick del botón, ahí colocaremos el siguiente código.

//Con esta condición nos aseguramos de dos cosas, primero que el se haya realizado la carga o la transferencia de un archivo ya que con PostedFile se recupera la información relacionada al archivo (tamaño, tipo, contenido, etc.) y en segundo lugar que el arreglo contenga al menos un archivo cargado.
if ((archivoSeleccionado.PostedFile != null) &&
(archivoSeleccionado.PostedFile.ContentLength > 0))  
{

//Con la clase HttpPostedFile se obtiene acceso de forma individual a los archivos cargados
HttpPostedFile imgFile = archivoSeleccionado.PostedFile;

//Creamos byteFile que contendrá todo el contenido del archivo
Byte[] byteFile = new Byte[archivoSeleccionado.PostedFile.ContentLength];

//Se lee el contenido del archivo en la variable creada byteFile
imgFile.InputStream.Read(byteFile, 0, archivoSeleccionado.PostedFile.ContentLength); 

//Se crea la sentencia SQL que insertará los datos en la tabla de la BD
string sql = “insert into tblArchivos (Image, Tipo) values (@Archivo, @Tipo)”;

//Se crea el recurso de conexión a la BD, la cadena de conexión varia de acuerdo a los parámetros establecidos por su conexión al gestor, usuario, contraseña y método de conexión.
SqlConnection conn = new SqlConnection(“String de conexión al gestor y a la BD.”);

//Se crea el recurso de Command que permitirá ejecutar la instrucción SQL.
SqlCommand cmd = new SqlCommand(sql, conn);

cmd.CommandType = CommandType.Text;
cmd.Parameters.Add(“@Archivo”, System.Data.SqlDbType.Image);
cmd.Parameters.Add(“@Tipo”, System.Data.SqlDbType.VarChar, 50);
cmd.Parameters[“@Archivo”].Value = byteFile;
cmd.Parameters[“@Tipo”].Value = archivoSeleccionado.PostedFile.ContentType;

//se abre la conexión al gestor de BD y se hace la ejecución de la sentencia
conn.Open();

cmd.ExecuteNonQuery();
conn.Close();

}

De esta manera el código anterior permite a partir de una página web seleccionar un archivo y cargarlo en una BD.

El límite de tamaño de un archivo está restringido a 4096 KB es decir 4MB, si queremos permitir la carga de archivos de mayor se debe especificar en el archivo de configuración Web.Config, de igual manera si se quiere restringir a un tamaño menor, en el ejemplo siguiente se permite el tamaño hasta 8MB.

<httpRuntime targetFramework=”4.5″ executionTimeout=”90″ maxRequestLength=”8192″ />

Otros valores para maxRequestLength son: 16384 para 16 Mb, 65536 para 64 Mb, y así sucesivamente.

Saludos

Una “intro” a BumpBox…

La idea de este post es mostrar como usar BumpBox (http://www.artviper.net/website-tools/bumpbox-lightbox.php) en los sitios web en desarrollo.

Esta herramienta hace que la presentación de PDF, imágenes, videos se haga diferente, atractiva, de manera que se salga de las formas comunes de presentación.

No es la única herramienta que hace este tipo de transiciones y efectos… sin embargo es una de las que hace presentación de una amplia variedad de recursos., sin tanto rollo comencemos con la creación del ejercicio.

Entendamos la parte conceptual:

  • Lo que se va mostrar en la ventana emergente que crea BumpBox es el valor de href del enlace que hace referencia a la herramienta.

Como ejemplo mostraré el contenido de una página y además un documento PDF, el HTML quedaría así:

<a href=”navegar.pdf”>Enlace de texto</a> <br/><br/>
<a href=”https://www.google.com.mx”><img src=”images/imagen.jpg” /></a>

y para que estos enlaces se reconozcan por la herramienta den incorporar el atributo class, además debemos especificar el tamaño de la ventana emergente en el atributo rel con el formato ancho-alto.

<a href=”navegar.pdf” class=”elemento” rel=”800-600″>Enlace de texto</a> <br/><br/>
<a href=”https://www.google.com.mx” class=”elemento” rel=”800-600″><img src=”images/inna1.jpg” /></a>

Ahora hay que hacer referencia a los recursos JS necesarios.

<script type=”text/javascript” src=”js/mootools.js”></script>
<script type=”text/javascript” src=”js/bumpbox-2.0.1.js”></script>

Justo como lo vemos en las referencias, BumpBox se acompaña de MooTools para funcionar, aunque esto es transparente ya que no tendemos que entrar a detalle.

Por ultimo, necesitamos invocar la función que creará la interacción y dejará los enlaces listos para que al dar clic se muestren dentro de las ventana emergentes los contenidos correspondientes, la función es: doBump( )

La mínima declaración es: doBump( ‘.elemento’);

Aquí se indica que los elementos que transformará son los que usan la clase elemento de CSS, los enlaces que no necesiten ser transformados por BumpBox pueden no llevar la clase o tener otra clase declarada y no son tomadas en cuenta.

La llamada se puede hacer al final de la página mediante la llamada a la función o en el evento onload de body, ambos tendrán el mismo resultado.

La función doBump además de la clase tiene una colección extensa de parámetros, la siguiente tabla lo resume:

name Nombre de la clase de CSS de los elementos que queremos que se afectan por BumpBox
inSpeed Tiempo de transición para mostrar la ventana en milisegundos
outSpeed Tiempo de transición para cerrar la ventana en milisegundos
boxColor Color de bumpbox sin el #
backColor Color del fondo, omitir #
bgOpacity Valor de la opacidad del contorno de la ventana emergente.
bRadius Especificar el redondeo de la ventana
borderWeight Especificar el grosor del borde de la ventana
borderColor Color del borde de la ventana emergente, omitir #
boxShadowSize Tamaño de la sombra en pixeles
boxShadowColor Color de la sombra de la ventana
iconSet Especificar entre 1 y 4 el conjunto de iconos que se utilizarán en la ventana
effectsIn El efecto de transición usada para mostrar la ventana
effectsOut El efecto de la transición usada para ocultar la ventana
bgImage Imagen que puede ser usada de fondo
bgPosition Posición del fondo
bgRepeat Tipo de repetición del fondo

Para tener más información sobre los efectos de transición consultar la referencia de transiciones Fx de MooTools

http://mootools.net/docs/core/Fx/Fx.Transitions#Fx-Transitions

De esta manera una llamada a la función doBump puede quedar así:

<body onload=”doBump( ‘.emergente’,1000, 4000, ‘111’, ‘900’, ‘0.8’, 5, 1 ,’333′, 15,’000′, 2, Fx.Transitions.Bounce.EaseOut, Fx.Transitions.Bounce.EaseOut );”>

Listo, es lo mínimo necesario para usar BumpBox en nuestro sitio web, ya sea un desarrollo propio o un manejador de contenido.

Nos vemos la próxima

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

Varias transiciones en CSS 3…

Como sabemos CSS3 está incorporando atributos que facilitan la vida, me refiero evitar meternos con JS sin necesidad.

Ahora les muestro una forma rápida de incorporar varios movimientos en una figura, por ejemplo, rotar e incrementar el tamaño de alguna imagen, o crecer y desvanecer, etc, cualquier combinación es posible.

Primero veamos por separado:

<body style=”margin:150px;”>
   <div>
   </div>
</body>

A este único elemento div que tenemos le daremos unas características iniciales, para lo cual utilizamos algunos atributos de CSS.

div
{
background:red;
width:200px;
height:200px;

//especificamos que su aparencia será tener una rotación de 5 grados
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);

//Especificamos que ademas tendrá una transformación la cual tardará en este caso 5s, 
//todavía no especificamos que transformación tendrá, solo que se hará en el tiempo especificado.

transition: transform 5s;
-moz-transition: -moz-transform 5s;
-webkit-transition:-webkit-transform 5s;
-o-transition: -o-transform 5s;
}

Hasta el momento tenemos:

  1. El objeto div creado
  2. Los estilos con lo que aparecerá de entrada
  3. Se ha especificado que tendrá una transición que durará 5 segs.

Ahora es momento de especificar que transformación tendrá en el tiempo que se ha especificado.

div:hover
{
-webkit-transform:rotate(-10deg) scale(1.5);
-moz-transform:rotate(-10deg) scale(1.5);
-o-transform:rotate(-10deg) scale(1.5);
-ms-transform:rotate(-10deg) scale(1.5);
transform:rotate(-10deg) scale(1.5);
}

Como se aprecia, la transformación consiste en dos cosas, una rotación hasta los -10 grados y ademas crecerá 50% de su tamaño real.

De esta manera podemos agregar la cantidad de transformaciones necesarias sobre el objeto.

Saludos

Transición y transformacion con CSS

Este ejemplo está basado en Original Hover Effects with CSS3, pero lo he resumido para que sea un poco más claro de entender principalmente para aquellos que no estén muy involucrados o que estén iniciando con CSS.

Entonces la cosa está así, como HTML tenemos la siguiente estructura:

<div>
    <img src=”sha.jpg” />
    <div>Mouse arriba</div>
    <div>
        <h2>Transición con CSS3</h2>
        <p>Transición y transformación con CSS3.</p>
        <a href=”http://a.uaslp.mx/e2CSs6z8“>Enlace original</a>
    </div>
</div>

El código anterior no involucra nada en especial, unos cuantos DIV, IMG, P, H2, A que son elementos básicos al estructurar un documento HTML.

Nota: Este ejemplo utiliza imagenes, dos para ser exactos, pueden hacer uso de cualquier imagen de su agrado, solo asegurense que tienen el tamaño apropiado para ser usadas, en este caso se usando de 200 x 15 pixeles.

Ahora vamos definiendo los estilos para cada uno de los elementos del documento HTML que se mostro anteriormente:

.vista{
/*Características generales del DIV*/

width: 200px;
height: 150px;
margin: 10px;   
float: left;   
border: 10px solid #fff;   
overflow: hidden;   
position: relative;    /*se especifica que la posicion sea relativa*/
text-align: center;
/*especificamos un sombreado al DIV*/

-webkit-box-shadow: 2px 2px 5px #000000;   
-moz-box-shadow: 2px 2px 5px #000000;   
box-shadow: 2px 2px 5px #000000;   
background: #FFFFFF url(bgpiel.jpg) no-repeat center center;
}

.vista .mascara {
/*Características generales del DIV máscara que quedará ocupará el mismo espacio*/

width: 200px;
height: 150px;
position: absolute;   
overflow: hidden;   
top: 0;   
left: 0;     
background-color: rgba(255, 231, 179, 0.3);
/*Se especifica el comportamiento en transición de todo el DIV*/

-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;   
-o-transition: all 0.5s linear;   
-ms-transition: all 0.5s linear;   
transition: all 0.5s linear;   
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;   
filter: alpha(opacity=0);   
opacity: 0;
}

.vista img {
display: block;   
position: relative;
/*se declara la apariencia de la imagen sin ningun evento, indicando su tamaño orignal (1)*/

-webkit-transform: scaleY(1);   
-moz-transform: scaleY(1);   
-o-transform: scaleY(1);   
-ms-transform: scaleY(1);   
transform: scaleY(1);
/*declaración de como se efecturará la transición de la IMG*/

-webkit-transition: all 0.7s ease-in-out;   
-moz-transition: all 0.7s ease-in-out;   
-o-transition: all 0.7s ease-in-out;   
-ms-transition: all 0.7s ease-in-out;   
transition: all 0.7s ease-in-out;
}

El DIV mascara contiene 3 elementos, un H2, un P y un A a los cuales tambien se les dan características de transición, para que tengan un movimiento propio e independiente del DIV máscara.

.vista h2 {   
text-transform: uppercase;   
color: #fff;   
text-align: center;   
position: relative;   
font-size: 14px;   
border-bottom: 1px solid rgba(0, 0, 0, 0.3);   
background: transparent;   
margin: 5px 20px 0px 20px;
/*Despues de las caractérísticas generales se especifica su transformación, en este caso se escalará*/

-webkit-transform: scale(0);   
-moz-transform: scale(0);   
-o-transform: scale(0);   
-ms-transform: scale(0);   
transform: scale(0);   
color: #333;
/*Se declara como será la transición de la transformación especificada.*/

-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;   
-o-transition: all 0.5s linear;   
-ms-transition: all 0.5s linear;   
transition: all 0.5s linear;
}

.vista .descripcion {  
font-family: Georgia, serif;  
font-style: italic;  
font-size: 12px;  
position: relative;  
color: #fff;  
padding: 10px 20px;  
text-align: center;  color: #333;
/*Una vez declaradas las características generales de P, se declara la transformación, en este caso como en el H2, se escalará*/

-webkit-transform: scale(0);  
-moz-transform: scale(0);
 -o-transform: scale(0);  
-ms-transform: scale(0);  
transform: scale(0);
/*Se declara la forma en que se realizará la transición del escalado para este elemento*/

-webkit-transition: all 0.5s linear;  
-moz-transition: all 0.5s linear;  
-o-transition: all 0.5s linear;  
-ms-transition: all 0.5s linear;  
transition: all 0.5s linear;
}

/*Para el elemento A, se hace básicamente lo mismo que para los elementos P y H2, declarar sus apariencia, su transformación y su transición*/
.vista a.info

{   
display: inline-block;   
text-decoration: none;   
padding: 7px 14px;   
background: #000;   
color: #fff;   
text-transform: uppercase;   
-webkit-box-shadow: 0 0 1px #000;   
-moz-box-shadow: 0 0 1px #000;   
box-shadow: 0 0 1px #000;      
-webkit-transform: scale(0);   
-moz-transform: scale(0);   
-o-transform: scale(0);   
-ms-transform: scale(0);   
transform: scale(0);   
-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}

/*Por ultimo un elemento DIV que aparecerá posicionado arriba de la imagen, para la cual se parte del posicionamiento relativo (que es despues de la IMG) y apartir de ahí se reccorre 70px hacia arriba, para después especificar como será su transición. Para este elemento DIV comenzará con estar visible y al final de la transición será invisible*/
.vista .aviso {

  position:relative;
  top: -70px;
  background-color:#FFFFFF;
  -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=.7)”;
     filter: alpha(opacity=.7);
     opacity: .7;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

Ahora, se declararán las características de los elementos de acuerdo a al reacción del mouse cuando se encuentre arriba de ellos (hover), estos conjuntos de estilos pueden considerarse como los puntos finales despues de la transición es decir, por ejemplo, si para el elemento IMG se especifico una transición y el hover de la imagen especifica que tendrá una escalado de 10, significa que la transición será de su tamaño original a un tamaño de 10 veces más.

Por lo tanto aqui no se especifican las transiciones, sino las caracteristicas de como será el elemento al final de la transición.

.vista a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.vista:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;
   filter: alpha(opacity=0);
   opacity: 0;
}

.vista:hover .mascara {
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”;
   filter: alpha(opacity=100);
   opacity: 1;
}

.vista:hover h2, .vista:hover .descripcion, .vista:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”;
   filter: alpha(opacity=100);
   opacity: 1;
}

.vista:hover .aviso {
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;
   filter: alpha(opacity=0);
   opacity: 0;

Con los elementos establecidos anteriormente tendrás un efecto interesante de presentación de información, sin necesidad de utilizar algun complemento de JS o cualquier variante, sólo HTML y CSS3.

Si este código lo colocas en una página web podrás ver su funcionamiento, sin embargo con sus respectivas limitantes, que ya se podrán imaginar cual es: IE no soporta hasta el momento las características de transición (para algunos esto es de esperarse). Sin embargo las características de opacidad, transformación si lo son por lo que, lo unico que no veremos es la transición de un estado a otro.

Descarga el ejemplo completo[19KB]

En la red encotrarás mucha información relativa a los atributos de transición, opacidad y transformación como en w3schools o desarrolloWeb, por mencionar algunos.

saludos

Igar

Publicar imagenes desde ASP.NET

En este ejercicio ejemplificaré como recuperar una imagen desde SQL Server y publicarla usando ASP.NET. Con este mecanismo tendremos una paguna aspx que responderá una imagen en lugar de responder HTML.
1.- Iniciamos recuperando el parametro que identificará a la imagen dentro de nuestra tabla en la BD. En esta parte debemos tener el suficiente control para no admitir cualquier valor sino solo aque que pueda darnos un resultado correcto al recuperar la información de la imagen desde nuextra tabla para esto podemos hacer uso de las siguientes condiciones:
Request.QueryString[“img”] == null
Request.QueryString[“img”].ToString() == “”
si esto no se cumple significa que no se ha pasado en la variable “img” la referencia a la imagen que debemos recuperar por lo que no seguimos, ya que no se cumple con los requisitos.
2.- Recuperar la colección de Bytes que corresponde a la BD de acuerdo a la referencia recuperada en el punto 1.
SqlConnection conn = new SqlConnection(Properties.Settings.Default.ConnString);
SqlCommand cmd = new SqlCommand(“select Foto from tabla where Id=@id”, conn);
cmd.Parameters.Add(“id”, SqlDbType.Int).Value = id;
conn.Open();
byte[] byteImage;
try
{
byteImage = (byte[])cmd.ExecuteScalar();
Response.ContentType = “image/jpeg”;
Response.Expires = 0;
Response.Buffer = true;
Response.Clear();
Response.BinaryWrite(byteImage);
Response.End();
}
catch
{
byteImage = null;
}
conn.Close();

La lógica es, si hay una imagen para mostrar se envia el encabezado de acuerdo al formato de la imagen que se va a enviar en el ejmemplo se considera que las imagenes siempre tendrán el mismo formato (JPG) por eso enviamos de encabezado image/jpeg.

Establacemos que el contenido enviado no va a expirar, además de habilitar el uso de Buffer durante en el envio de contenido de la imagen.
El paso de aplicar el método Clear ya que limpia todo el contenido colocado en la salida como parte de la respuesta de la página ASPX. así nos aseguramos que lo unico que se va a responder por parte de la página es la imagen recuperada desde la BD.
Escribimos la coleccion de Bytes recuperada y para finalizar especificamos que el envío de información ha terminado.

Cabe resaltar que con esta código no importa la estructura HTML que se tenga en la pagina ASPX. Estas instrucciones podrían están en el evento Page_Load.

Un saludo a todos