AjaxRain es una web que muestra una serie de utilidades (ide, librerías, demos, ejemplos, código fuente) sobre Ajax, Javascript y Dhtml; de momento existen 485 utilidades y algo más. Así que si estamos por desarrollar un proyecto usando Javascript ó relacionados, debemos dar un paseo por este site muy bueno.

El control dhtmlxCombo podemos usarlo de 4 modos: como un control desplegable editable, el usuario puede editar un elemento de la lista o agregar uno nuevo; solo lectura, no permite edición; filtrar elementos, para buscar algún elemento en la lista; y autocompletado, mientras agregamos texto nos aparece una lista de elementos como posibles alternativas. Vale resaltar que podemos agregar pequeñas imágenes a los elementos de la lista. Este control trabaja con Ajax y Javascript. Trabaja sobre IE 5 ó superior, Mozilla 1.4 ó superior, Firefox 0.9 o superior y Safari 2.0 ó superior.

Enlaces | Ejemplo con 100000 elementos, Descarga

Sigma Grid es un control datagrid (tabla de datos) elaborado con Ajax / Javascript. Nos permite realizar: edición en línea, navegar por los datos con el teclado, agregar y eliminar datos, ordenar columnas, seleccionar multiples datos, etc. La página principal de esta utilidad indica que trabaja sobre IE y Firefox, pero no indica las versiones específicas. Es una excelente solución, sobre todo profesional, para mostrar y editar los datos de una Base de Datos.

Descargar !

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: 04 Noviembre 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