css – Utilizar un loading o imagen de carga para indicar el progreso de download de las imagenes grandes by lawebera.es

Fuente: lawebera.es

Resumen: Como usar una imagen animada de carga para amenizar la espera de tus usuarios.

No hay nada mejor que hacer saber al usuario cuando está esperando algo para no impacientarlo, y aunque una animación simple no le informa del progreso exacto o del tiempo que tendrá que esperar, muchas veces es suficiente para retener al usuario en tu página y evitar que se marche pensando que el sitio web no funcionaba.

Una manera muy simple de indicar que una imagen o cualquier otro elemento aun no se cargó es colocar en su lugar una imagen de fondo animada que nos de la sensacion de que ese elemento está descargandose.

Para ello aquí un truco muy sencillo, poner de fondo del elemento una imagen animada muy ligera, para que no añada un exceso de carga a la página web, pero que indique al usuario que la página sigue funcionando.

El código necesario para hacer el loading es el siguiente:

img {
  background:transparent url(images/ajaxload.gif) center no-repeat;
}

Con este código la imagen animada (imagen de fondo) se mostraría en todas las imágenes que estén cargandose en tu web.
Eso es, así de sencillo, con este simple código a todas las imagenes del sitio le colocamos nuestra animación de fondo. Cuando la imagen principal se haya cargado dejará de ser visible, mientras se esté descargando le damos al usuario mayor sensación de continuidad, pareciendo más evidente que la página sigue activa.

Pero como esto puede resultar innecesario usarlo en todas las imágenes de una página web, ya que hay muchas imágenes pequeñas que cargan rápidamente, otra forma es crear una clase CSS que se podrá utilizar en las imagenes grandes (muy pesadas) que usemos en nuestra web, y para las que sí resulta útil añadir un efecto como este puesto que es posible que el usuario tenga que esperar unos segundos para ver la imagen:

.precarga {
    background:transparent url(images/ajaxload.gif) center no-repeat;
}

Y para que la imagen de fondo aparece como la queremos, tenemos que añadir la anchura (width) y la altura (height) de las propiedades de la imagen, mediante estilos CSS en un div que rodee la imagen:

<div style="width: 140px; height: 120px">
	<a href="tp://www.paginaweb.com/>
		<img src="http://www.paginaweb.com/" alt="texto descriptivo" border="0" />
	</a>
</div>

Para conseguir la imagen de fondo a mostrar mientras se carga la imagen de la web, hay páginas muy buenas que nos hacen el trabajo:

  • Ajax Load: esta herramienta online te permite crear imagenes de carga animadas, ya sea para el tema que estamos tratando o para el uso que se te ocurra. Te permite personalizar los colores y el tipo de animación. Muy recomendable. Un ejemplo:
    imagen de carga animada
  • Preloaders: esta otra herramienta hace lo mismo que la anterior, solo que te crea imágenes animadas en 3D. También puedes personalizar colores y tipo de animación. Un ejemplo:
    imagen de carga animada en 3D

También puedes usar Ajax para lograr este tipo de efecto.

Superponiendo cosas con CSS by vagabundia

Fuente: vagabundia.blogspot.com

Toda etiqueta es un rectángulo que se ubica ya sea uno al lado del otro o uno debajo del otro. Esto siempre es así salvo excepciones … como todo.

Justamente, esas excepciones son las que nos permite superponer los rectángulos y hacer que uno se muestre encima del otro. Básicamente, hay dos propiedades que controlan esos detalles:position y z-index.

Por defecto, la propiedad position, tiene el valor static pero, admite otros como relative yabsolute. Usando esos dos valores podemos ubicar cualquier cosa en un lugar preciso. Lo más simple es que el contenedor tenga el valor relative y el contendio el valor absolute:

<div style="position: relative;">
  <div style="position: absolute;"> HOLA </div>
</div>
Así como está, no parece haber diferencias, si le quitamos as propiedades, se verá igual porque nos falta algo más, agregarle las que nos permitirán ubicarlo con exactitud y estas son top, right,bottom y left que son las «coordenadas» cuyo punto de origen es el borde del contenedor asi que si ponemos left: 30px y top: 50px, el contenido bajará 50 pixeles (borde superior = cero) y se movera otros 30 a la izquierda (borde izquierdo = cero):
<div style="position: relative;">
  <div style="position: absolute; left: 30px; top: 50px;"> HOLA </div>
</div>
Y si ponemos right: 30px y bottom: 50px, el contenido subirá 50 pixeles (borde inferior = cero) y se movera otros 30 a la derecha (borde derecho = cero):
<div style="position: relative;">
  <div style="position: absolute; right: 30px; bottom: 50px;"> HOLA </div>
</div>
De este modo, bien podríamos ubicar más de un contenido:
<div style="position: relative;">
  <div style="position: absolute; left: 30px; top: 50px;"> CONTENIDO UNO </div>
  <div style="position: absolute; right: 30px; bottom: 50px;"> CONTENIDO DOS </div>
</div>
En el ejemplo, dadas las ubicaciones, el segundo se superpone al primero y aparece por encima ya que esa es la forma normal en que se muestran los rectángulos; a medida que los agregamos, se van «apilando» y la propiedad z-index permite cambiar ese orden natural.

Como no los hemos definido, basta ponerles un número, y el que tenga el número más alto, se mostrará por encima sin importar la forma en que esté escrito el código; en este ejemplo, el tercero no se muestra arriba de los otros porque forzamos a que sea el segundo el que esté arriba de todo, poniéndole un valor de z-index superior:

<div style="position: relative;">
  <div style="position: absolute; left: 10px; top: 30px; z-index: 1;"> CONTENIDO UNO </div>
  <div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> CONTENIDO DOS </div>
  <div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> CONTENIDO TRES </div>
</div>
Hasta ahí son rectángulos de colores pero el contenido puede ser cualquier cosa; por ejemplo textos y si estos textos no tienen fondos de color, también se superpondrán
Mezclamos entonces varias propiedades y si es necesario, pueden verse algunas ideas básicas en webdesignerdepot.com.
<style>
#superponer {
  position: relative;
  text-align: center;}
#superponer h5 {
  color: #D0D9E1;
  font-family: Georgia;
  font-size: 140px;
  letter-spacing: -6px;
  margin: 0;
  opacity: .9;
  padding: 0;
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  -webkit-transform: skew(20deg);
}
#superponer h6 {
  color: #4682B4;
  font-family: Verdana;
  font-size: 60px;
  left: 120px;
  letter-spacing: 20px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 20px;
}
#superponer h6 span {
  color: #F66;
  font-family: Times New Roman;
  font-size: 100px;
  font-style: italic;
  text-shadow: 3px 3px 1px #000;
}
#superponer:hover > h6 span {
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -webkit-transform: scale(2);zoom:2;
}
</style>

<div id="superponer">
  <h5> un título </h5>
  <h6> eje <span> m </span> plo </h6>
</div>

css: Div fijo en la parte inferior de la pantalla

Fuente: http://seembiosis.blogspot.com.es/2012/05/div-fijo-en-la-parte-inferior-de-la.html

a) Creamos el div o la section, lo que viene siendo el contenedor que queremos posicionar al pie de la página y le añadimos el id:  fixed-bar.

<div id=»fixed-bar»>
Aquí va el contenido
</div>

b) Añadir el siguiente css

    #fixed-bar {
bottom: 0;
        height: 34px;
        padding: 13px 0 4px;
        position: fixed;
        width: 100%;
        z-index: 5000;
}
Listo!

Efecto Hover sobre imágenes con CSS by ribosomatic

Fuente: http://www.ribosomatic.com/articulos/efecto-hover-sobre-imagenes-con-css/

Quizás lo hayan notado, nos referimos a un efecto que consiste en una serie de imágenes semi-transparentes que al pasar ó posar el cursor toman sus intensidad normal. Como pueden apreciar en esta imágen:

Hover efecto

Veamos como realizar esto con una estilos. Dentro de las etiquetas <head></head>colocamos el siguiente código:

<style type="text/css">
a.linkopacity img {
        filter:alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
        -khtml-opacity: 0.5;
}
 
a.linkopacity:hover img {
        filter:alpha(opacity=100);  
        -moz-opacity: 1.0;  
        opacity: 1.0;
        -khtml-opacity: 1.0; 
}
</style>

Ahora simplemente nos queda aplicarlo a nuestras imágenes. Dentro de las etiquetas <body></body> escribimos lo siguiente:

<a class="linkopacity" href="#" title="Enlace 1" >
<img src="http://mihost/img/img1.jpg" alt="Imagen 1"></a>
 
<a class="linkopacity" href="#" title="Enlace 2" >
<img src="http://mihost/img/img2.jpg" alt="Imagen 2"></a> 
 
<a class="linkopacity" href="#" title="Enlace 3" >
<img src="http://mihost/img/img2.jpg" alt="Imagen 3"></a>

Vía AbeOnTech

Resaltar Fila al pasar el puntero del Mouse by codigo caxa

Fuente : http://www.codigocaxa.net78.net/?p=13Resalta fila al pasar el puntero

Pues bien, la idea es resaltar(aplicar una regla de estilo CSS) toda una fila de una tabla al situar el mouse en dicha fila, tal y como se puede apreciar en la figura del costado.

La regla CSS a aplicar en nuestro ejemplo se llamará: resaltar, cuyo código es el siguiente:

tr.resaltar {
    background-color: #F5FFD7;
    cursor: pointer;
}

Veamos brevemente lo que contiene nuestra regla CSS. Primeramente con tr. estamos diciendo que solo es aplicable a las filas(<tr>)de una tabla. La propiedad background-color establece como color de fondo de la fila al valor hexadecimal #F5FFD7 (parecido al verde agua). Finalmente la propiedad cursor: pointer indica que el cursor se tiene que cambiar por la del icono de la manito.

Bueno, La forma clásica y usual de hacer el RESALTE es colocando manualmente en el evento onmouseover de la fila(<tr>) el estilo css que deseamos que obtenga al situarnos encima de dicha fila y en el evento onmouseout donde indicaremos que no se aplicará regla css alguna cuando el puntero del mouse salga de la fila. El Código sería el siguiente:

<tr onmouseover="this.className = 'resaltar'" onmouseout="this.className = null">
    <td>Paraguay</td><td>Asunci&amp;amp;amp;amp;amp;amp;amp;amp;amp;oacute;n</td>
</tr>
<tr onmouseover="this.className = 'resaltar'" onmouseout="this.className = null">
    <td>Per&amp;amp;amp;amp;amp;amp;amp;amp;amp;uacute;</td><td>Lima</td>
</tr>

Esto es aceptable siempre y cuando la tabla conste de pocas filas, pero ¿Qué sucedería si la tabla consta de 20, 500 ó 1000 e incluso más filas?, ¿demasiado tedioso verdad?, pues la idóneo,en estos casos, es utilizar DHTML (HTML Dinámico) para hacerlo realidad con tan solo unas cuantas líneas de código.

¿Qué es DHTML?

DHTML (HTML Dinámico): No es un lenguaje de programacion nuevo; es más bien el uso combinado de HTML, Hojas de estilos CSS y JavaScript que me permitirá,luego de cargada la página, acceder a cada una de las etiquetas html y poder modificar sus atributos. Para aplicar DHTML necesitamos obligatoriamente conocer el DOM (Document Object Model).

¿Qué es DOM?

DOM (Document Object Model): Es el Modelo en Objetos para la representación de Documentos, es sobretodo otra forma de ver el contenido HTML de una Página Web. Este modelo es altamente gerarquizado y a través de él podemos acceder al contenido y estilo de cada etiqueta html del documento y modificarla de acuerdo a algún evento. DOM permite entonces insertar, borrar o modificar las etiquetas HTML y sobretodo sin recargar la pagína.

Pues bien, luego de estos conocimeintos previos ya podemos realizar la función JavaScript que permitirá realizar el resalte del manera rápida. El Código necesario es el siguiente:

function ResaltarFila(id_tabla){
    if (id_tabla == undefined)      // si no se le pasa parametro
        // recupera todas las filas de todas las tablas
        var filas = document.getElementsByTagName("tr");
    else{
        // recupera todas las filas de la tabla indicada en el parametro
        var tabla = document.getElementById(id_tabla);
        var filas = tabla.getElementsByTagName("tr");
    }
    // recorre cada una de las filas
    for(var i in filas) {
    	// si el puntero esta encima de la fila asigna la regla css: resaltar
        filas[i].onmouseover = function() {
            this.className = "resaltar";
        }
        // si el puntero salga de la fila asigna ninguna regla
        filas[i].onmouseout = function() {
            this.className = null;
        }
    }
}

Línea 04, Se utiliza la función: getElementsByTagName que provee DOM a través del objeto document retornando la referencia a todas las etiquetas(TagName) <tr>(filas de una tabla).

Línea 07: Si es que le he pasado el nombre de la tabla, recupera la referencia a la tabla cuyo nombre(id) sea igual al parámetro id_tabla mediante la función getElementsById y lo almcaenda en la variable tabla.

Linea 08: a diferencia de la línea 04 se almacena en la variable fila todas las referencia de todas las filas pero tan solo de la tabla almacenada en la variable tabla.

Linea 13,14: Agrega a la fila actual,observen que con el for de la linea 11 se recorre una a una las filas, el evento onmouseover e indica que cuando suceda esto le asigne a la fila la regla de estilo CSS llamada “resaltar“(this.className =”resaltar”;).

Línea 17,18: Agrega a la fila actual el evento onmouseout e indica que cuando suceda esto le asigne a la fila ninguna regla de estilo CSS (this.className =”null”;)”.

Listo!!!, eso es todo, lo que nos queda es llamar a la función luego que la carga de pagina haya sido completada (importante). el código sería el siguiente:

// resaltar fila de tabla cuyo nombre sea tabla_paises
ResaltarFila('tabla_paises');
// si queremos resaltar todas las tablas,
// no le pasamos parametro
ResaltarFila();

Les dejo ahora todo el codigo perteniente al archivo: resalta_fila.html.

<html>
<head>
    <title>Resaltar fila de una Tabla al pasar el Mouse</title>
    <script language="JavaScript" type="text/javascript">
    function ResaltarFila(id_tabla){
            if (id_tabla == undefined)      // si no se le pasa parametro
            // recupera todas las filas de todas las tablas
            var filas = document.getElementsByTagName("tr");
        else{
            // recupera todas las filas de la tabla indicada en el parametro
            var tabla = document.getElementById(id_tabla);
            var filas = tabla.getElementsByTagName("tr");
        }
        // recorre cada una de las filas
        for(var i in filas) {
            // cuando el puntero esta encima de la fila asigna la regla css: resaltar
            filas[i].onmouseover = function() {
                this.className = "resaltar";
            }
            // cuando el puntero salga de la fila asigna ninguna regla
            filas[i].onmouseout = function() {
                this.className = null;
            }
        }
    }
    </script>
    <style type="text/css">
    tr.resaltar {
        background-color: #F5FFD7;
        cursor: pointer;
    }
    </style>
</head>

<body>
<table id="tabla_paises">
<caption>Pa&amp;amp;amp;amp;amp;amp;amp;amp;iacute;ses Sudamericanos</caption>
<tr>
    <th width="180">Pa&amp;amp;amp;amp;amp;amp;amp;amp;iacute;s</th>
    <th width="120">Capital</th>
</tr>
<tr><td>Argentina</td><td>Buenos Aires</td></tr>
<tr><td>Bolivia</td><td>La Paz</td></tr>
<tr><td>Brasil</td><td>Brasilia</td></tr>
<tr><td>Chile</td><td>Santiago de Chile</td></tr>
<tr><td>Colombia</td><td>Bogot&amp;amp;amp;amp;amp;amp;amp;amp;aacute;</td></tr>
<tr><td>Ecuador</td><td>Quito</td></tr>
<tr><td>Guyana</td><td>Georgetown</td></tr>
<tr><td>Paraguay</td><td>Asunci&amp;amp;amp;amp;amp;amp;amp;amp;oacute;n</td></tr>
<tr><td>Per&amp;amp;amp;amp;amp;amp;amp;amp;uacute;</td><td>Lima</td></tr>
<tr><td>Surinam</td><td>Paramaribo</td></tr>
<tr><td>Trinidad y Tobago</td><td>Puerto Espa&amp;amp;amp;amp;amp;amp;amp;amp;ntilde;a</td></tr>
<tr><td>Uruguay</td><td>Montevideo</td></tr>
<tr><td>Venezuela</td><td>Caracas</td></tr>
</table>
<br /><br />

<table id="tabla_libros">
<caption>Libros Programación</caption>
<tr>
    <th width="220">Nombre</th>
    <th width="80">P&amp;amp;amp;amp;amp;amp;amp;amp;aacute;ginas</th>
</tr>
<tr><td>PHP</td><td>650</td></tr>
<tr><td>JavaScrip</td><td>420</td></tr>
<tr><td>CSS</td><td>345</td></tr>
</table>

<script language="JavaScript" type="text/javascript">
    // resaltar fila de tabla cuyo nombre sea tabla_paises
    ResaltarFila('tabla_paises');
    // si queremos resaltar todas las tablas,
    // no le pasamos parametro
    ResaltarFila();
</script>
</body>
</html>

Bueno yo recomiendo tener el código Javascript en un archivo aparte, el Código CSS también en un archivo aparte para luego hacer en nuestro archivo html la llamada a esos archivos, esto permite generar codigo más limpio y entendible. En la demo he aplicado esto.

Ver Demo Online | Descargar Código Fuente

Biliografía : DHTML Ya, DOM

Pasar una variable de PHP a JavaScript

Es sencillo, simplemente es hacer la asignación respetando la sintaxis de JavaScript. El siguiente ejemplo lo ilustra de una forma sencilla:

<?php

echo ‘<head><title>’.$_SERVER[PHP_SELF].'</title></head>

<html>

<body>’;
$variable_php=»variable en php»;
echo ‘<script languaje=»JavaScript»>

var varjs=»‘.$variable_php.'»;

alert(varjs);

</script>’;
echo «<a href=$_SERVER[PHP_SELF]>Recargar la Página</a>»;

echo ‘</body>

</html>’;
?>

Fuente http://dns.bdat.net/trucos/faqphp-v1/x98.html

javascript: controlar entrada de datos en caja de texto (este si que funciona en chrome, firefox y explorer)

Con este código se valida lo que va tecleando el usuario en un cuadro de texto o un textarea. Puede validarse que solo escriban números, solo letras, números y letras, determinados caracteres…

Primero veremos el código (con la posibilidad de ver el ejemplo funcionando) y comentaremos el significado y funcionamiento de algunas líneas. Más adelante pondremos varias modificaciones del código original para que se adapte a lo que necesitemos en determinado momento

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Validar entrada de datos</title>
<script type="text/javascript">
function validar(e) { // 1
    tecla = (document.all) ? e.keyCode : e.which; // 2
    if (tecla==8) return true; // 3
    patron =/[A-Za-z\s]/; // 4
    te = String.fromCharCode(tecla); // 5
    return patron.test(te); // 6
}
</script>
</head>

<body>
<p><input type="text" name="textfield" onkeypress="return validar(event)" /><br />
<textarea rows="5" cols="20" onkeypress="return validar(event)"></textarea></p>
</body>
</html>

Ver ejemplo

A continuación la explicación de las líneas de código que aparecen numeradas:

1- A la función se le pasa el objeto event

2- Aquí hay que distinguir si el navegador es Internet Explorer (IE) document.all u otro, porque ya os habreis dado cuenta que no todos los navegadores son iguales. Si el navegador es IE se asigna a la variable tecla el valor de e.keyCode, en caso contrario se asigna el valor de e.which. En los dos casos se obtiene el valor ASCII de la tecla pulsada.

3- En esta línea se comprueba si es la tecla pulsada es la tecla de retroceso y en ese caso la función termina (retorna). De esta forma se permite borrar caracteres.

4- Aquí se pone la expresión regular que permite validar si se admite o no la pulsación. En el ejemplo se admiten letras mayúsculas A-Z, letras minúsculas a-z y el espacio \s

5- Se pasa el valor ASCII de la variable tecla a su carácter correspondiente

6- Si el carácter coincide con el patrón, la función devuelve true, si no coincide devuelve false.

Ahora vamos a ver varias expresiones regulares para distintas validaciones. Sustituye la línea 4 por la que necesites:

patron = /\d/; // Solo acepta números
patron = /\w/; // Acepta números y letras
patron = /\D/; // No acepta números
patron =/[A-Za-zñÑ\s]/; // igual que el ejemplo, pero acepta también las letras ñ y Ñ

También se puede hacer un patrón que acepte determinados caracteres, poniendolos entre corchetes. Veamos un ejemplo para validar que solo se acepte a, j, t, 6 y 9:

patron = /[ajt69]/;

O el caso contrario, queremos aceptar cualquier caracter, menos alguno. Los que no nos sirven se ponen en el patron y se cambia un poco el código de la función que usamos para validar

patron =/[javierb]/; // 4
te = String.fromCharCode(tecla); // 5
return !patron.test(te); // 6

Fuente: http://www.telefonica.net/web2/blas-mar/validarformu.html

formularios: campo que solo acepta numeros (ie y chrome bien, firefox mal) :(

Agregando este código en el evento OnKeyPress de un elemento INPUT, logramos que solo se puedan escribir numeros dentro de él.

< input onKeypress=»if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;»>

Si queremos ademas permitir el caracter «.» para numeros decimales por ejemplo, es el siguiente código el que deberiamos usar.

< input onKeypress=»if (event.keyCode < 46 || event.keyCode > 57) event.returnValue = false;»>

fuente:http://www.soloasp.com.ar/vercodigo.asp?id=5

www.coudlain.com web 2.0

CoudLain.com es el portfolio on-line de un programador web de Gijon, Asturias

Pagina web desarrollada en xhtml, css2, flash, actionscript, asp, php, mysql, access, xml, w3c

www.coudlain.com