Liberando el código de Tablero dinámico (2)

Ahora veremos la parte del servidor. Creamos el archivo conexion.php con los datos de la conexión al tu servidor MySQL, algo así:

<?php
//Configuracion de la conexion a base de datos
$bd_host = "miservidor";
$bd_usuario = "miusuario";
$bd_password = "micontraseña";
$bd_base = "mibasededatos";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
?>

Vamos con el archivo que realiza la consulta de todos los datos en la tabla tablero: consulta.php

Hacemos referencia (require) al archivo con los datos de la conexión a la base de datos MySQL (conexion.php). Obtenemos la variable GET ultfec (la variable que definimos en JavaScript), si no tiene valor entonces consultamos todos los datos de la tabla tablero caso contrario, si tiene un valor (la ultima fecha que se consultó) entonces solo se consultará la diferencia, osea todos los datos cuya fecha sea mayor a la última.

Ver Artículo Completo ››

Liberando el código de Tablero dinámico (1)

Son muchas las solicitudes para mostrar el código fuente del Tablero dinámico, el fisgón (si así desean llamarlo) de este blog, por ello aquí explicaré su funcionamiento desde el registro de la hora, ip y enlace del articulo hasta el efecto de alumbrado o fade de color amarillo y la creación de los divs mediante el manejo del DOM con JavaScript.

Ver Artículo Completo ››

wrapScroll: Desplazamiento automático de DIV's

Haber, para entender esto mejor vamos a suponer que deseamos mostrar un aviso "importante" a nuestro navegantes y (debido a su importancia) queremos que ese aviso (dentro de un DIV) se mueva a medida que el usuario se desplaza verticalmente por la página. Bien, para ello existe una librería hecha en Javascript: wrapScroll.

Uso básico

Primero descargamos la librería, y ubicamos el archivo wrapscroll.js y lo referenciamos en nuestra página html.

 <script type="text/javascript" src="wrapscroll.js"></script>

Iniciamos el método wrapScroll donde indicaremos el div que se desplazara.

 <script type="text/javascript">
new wrapScroll("midiv");
</script>

Creamos un hoja de estilo con los siguientes valores. Nota: para la etiqueta body la propiedad height le colocamos el valor 1200px para poder ver el efecto del desplazamiento.

#midiv{
position:absolute;
top:100px;
border:3px dashed red;
width:200px;
height:150px;
}
body{
height:1200px;
}

Esta librería funciona con:

  • InternetExplore 6.x, 7.0 o sup.
  • Firefox 1.5, 2.0 o sup.
  • Opera 9.x o sup.
  • Safari 1.2 o sup., Safari3.0 para Windows
[ Descargar este ejemplo ]

Hemos explicado la forma básica de usar esta excelente librería, sin embargo podemos añadirle otras funciones adicionales, como se puede observar en los siguientes ejemplos: 1, 2, 3, 4 y 5

Plantillas y diseños en CSS

Cuando iniciamos un proyecto web puede venirnos bien tener alguna inspiración visual para el diseño, por ello presentamos esta lista de algunos sitios web donde podemos encontrar plantillas y diseños elaborados con CSS. En algunos casos nos permite una demo del diseño.

1. CSSeasy

2. Open Source Web Design

Ver Artículo Completo ››

Extensiones Firefox para el Desarrollado Web

1. Firebug

Fire Bug

Con esta extensión podemos editar y depurar código HTML en tiempo real, mejorar los estilos, monitorizar tiempo de carga de un sitio, depurador Javascript, explorador del DOM y mucho más. [ Ver mas ]

2. MeasureIt

Measure It

Esta extensión, permite obtener las dimensiones de cualquier zona de una página web. Útil cuando estamos diseñando una web y necesitamos ajustar al máximo todas las imágenes.

3. ColorZilla

colorzilla

Al instalar esta extensión, se añade un icono de cuentagotas en la barra de estado; basta pulsar sobre él para que se abra el programa. Pasando el cursor sobre las zonas coloreadas de la página visitada, muestra el código (en RGB o hexadecimal), y al pulsar con el botón derecho podemos guardar el código, así como acceder a un selector de paletas. [ Ver mas

4. Screen Grab

Screen Grab

Permite realizar capturas de pantalla de páginas web dentro del propio navegador. Una vez instalada tan sólo tenemos que pulsar con el botón derecho en cualquier lugar de la página y acceder al menú de ScreenGrab, que da diferentes opciones de captura. Las imágenes se pueden guardar en los formatos .png o .jpg, o bien copiarlas directamente al portapapeles del sistema operativo. [ Ver mas

Ver Artículo Completo ››

Comparando los Web Messengers más conocidos

Los messenger basado en web, o 'web messenger', abundan ante la necesidad de estar comunicados (o simple diversión) en los centros de estudios ó trabajo donde el programa de mensajería se encuentra bloqueado. Justamente los 'web messenger' son una alternativa al programa de escritorio pues no hay necesidad de instalarlo en nuestra PC, pues podemos acceder a éstas simplemente teniendo un navegador web. Ha simple vista parece que estas, los web messenger, estuviera limitadas en cuanto a caracteristicas por ser una aplicación web, pero no es así. Algunas por ejemplo permiten acceso a través del móvil, acceso con diversas cuentas y otras ventajas más. Aquí un lista de los más conocidos web messenger y final hay enlace donde podemos ver un articulo (en inglés) que compara las características (en algunos ventajosas) de estos servicios.
  1. eBuddy
  2. ILoveIM
  3. Yahoo Web Messenger
  4. MSN Web Messenger
  5. Google Talk
  6. Meebo
  7. Kool IM
  8. Radius IM
  9. Snimmer
  10. Mabber
  11. EasyMessenger
  12. IMunitive
  13. Messenger FX
  14. AIM Express

Web Messenger Comparacion

Google

Categorias

Archivos