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 ››

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 ››

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. 

A esto es lo que llamo el uso adecuado de la tecnología. Nuestro amigo Erik Blanco nos informa de una aplicación web desarrollada por su persona usando Ajax, PHP (orientado a objetos), MySQL, CSS y Javascript. Se trata de un mantenimiento de datos de una tabla MySQL: inserción, actualización, eliminación y consulta (paginada). Lo interesante es que no usa ningún librería Javascript para ello. Un buen ejemplo de como quedaría una aplicación si armamos nuestro propio objeto XMLHttpRequest para usar Ajax.  

Código fuente| Catalogo Empleados (Actualización: 27 Agosto 2008)

Un pequeño ejemplo que nos muestra como desarrollar un interesante menú con CSS y prototype.js (1.5.1).

index.html

 <div id="menu">
	<div id="m-top">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">F.A.Q.</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<div id="m-slider">
		<div id="slider"></div>
	</div>
</div>

¿Como no se me pasó por la mente implementar un tutorial sobre "Cómo armar tu propio calendario con PHP y AJAX"? Pero bueno, aqui una relación de algunos calendarios elaborados con CSS, Javascript y PHP listos para integrarlos a tu web o blogs.

 

1. Monket Calendar
2. Calendario usando AJAX y PHP
   
3. Integrando Google Calendar a tu web
4. Calendario con JavaScript
5. Calendario con DHTML y JavaScript
6. Calendario con CSS y listas (<ul> y <li>)
7. Calendario con CSS
   
8. Calendario con CSS (valida correctamente CSS)
   
9. Calendario con PHP y Scriptaculous
10. Calendario AJAX - Javascript, XML y PHP
11. MySQL Calendar por Jamie McConnell
12. acc_calendar: calendario accesible en javascript
13. Swazz Javascript Calendar
14. Scal - Javascript Calendar Control based on Prototype and Scriptaculous

¿Sabes de alguno más?...

Actualizado: 23/10/07 

Google Code prettify es un módulo que hace uso de Javascript y CSS para resaltar la sintáxis de código fuente en una página HTML. Si tu tiene un blog donde escribes códigos de diversos lenguajes (C, Basic, Javascript, Ruby, etc) puedes hacer uso de esta pequeña utilidad.

Configuración 

1. Descarga el Code prettify.
2. Agrega la referencia al archivo Javascript y CSS en tu página web de esta manera:

   <link href="prettify.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript" src="prettify.js"></script>

3. Agrega onload="prettyPrint()" a la etiqueta body del código HTML.
4. Puedes modificar la hoja de estilos para darle los colores que tu prefieras.

Uso

Coloca en el atributo class de las etiquetas pre y code "prettyprint": <pre class="prettyprint">...</pre> ó <code class="prettyprint">...</code>, así de manera automática se resaltara (ó coloreará) la sintáxis de nuestros códigos en nuestras páginas web.

 

 

Enlace | Documentación

1. AJAX Tabs (Rails Redux):

2. Tabs simple con AJAX y CSS:

3. Javascript Tabbar Component usando una API:

4. TabContainer - ASP.NET AJAX Control:

5. Control Tabs:

 

6. Accesible y no obtrusivo 'JavaScript Tabs' con jQuery:

7. Tab View con Yahoo! UI Library:

8. Tabtastic (sin AJAX):

9. Tab Menu (sin AJAX):

10. RibosoMatic - TabPage con CSS Javascript y Ajax:

Ver Artículo Completo ››

Vía Smashing Magazine una lista de datagrids o tabla de datos hechas con Ajax, DHTML y JavaScript.

1. ExtJs Grid

2. dhtmlxGrid

3. Phatfusion Sortable

4. Mootable Sorting

5. Elite Zebra Tables

Ver Artículo Completo ››

Mediante fValidator podemos usar JavaScript para validar los campos de un formulario HTML antes de ser enviados. Puede validar campos tipo alfabéticos, numéricos, fecha, coincidencia de campos (contraseñas) y mas. Esta utilidad trabaja con mootools y algunas de sus dependencias: core, class, native, element, effects. Veamos una forma básica de usarlo en nuestro proyectos web.

Pero primero descargar el fValidator, existen dos versiones: un paquete comprimido (3.77KB) y una versión completa (7.20KB). También vamos a necesitar en mootools y las dependencia que sitamos arriba, puede descargarlo desde aqui.

Cómo usarlo

Dentro de las etiquetas <head> </head> llamamos a los archivos JavaScript implicados, e iniciamos el validador para nuestro formulario. Ya dentro de nuestro formulario, en cada campo especificaremos que tipo de dato validará el fValidator. Veamos un ejemplo.

Ver Artículo Completo ››