Segunda Aplicacion con AJAX ... y Prototype

Esta pequeña aplicación sencilla, consiste en seleccionar el numero del cierto mes de una lista y en otra lista aparecen los numeros de días. Si seleccionamos el numero de mes que corresponde a Febrero (2) la lista mostrará 29 días, y así por el estilo.

Veamos, la parte HTML donde también incluimos el código JavaScript haciendo uso de funciónes de Prototype.js:

<html>
<head>
<title>Prototype Segunda Aplicacion</title>
<script type="text/javascript" src="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script>
<script type="text/javascript">
//enviando el numero del mes
function send(value){
//eliminando los dias del mes anterior
var length=$("day").length;
for (i=0;i<length;i++){
$("day").remove(0);
}
//nos conectamos con response.php
//que nos dará el numero de dias segun el mes
new Ajax.Request(
'./response.php',{
method: "get",
parameters: {month: value},
onSuccess: function(response){
var days=response.responseText;
for (i=1;i<=days;i++){
$("day").options.add(new Option(i,i));
}
},
onFailure: function(){
alert('Failed!'); //en caso de errores
}
}
);
}

//esta función se ejecuta al iniciar
//consiste en llenar las dos lista con
//el primer mes y sus dias correspondientes
function init(){
for (i=1;i<=12;i++){
$("month").options.add(new Option(i,i));
}
for (i=1;i<=31;i++){
$("day").options.add(new Option(i,i));
}
}
</script>
</head>

<body onLoad="init();">
<p>
Mes: <select id="month" onChange="send(this.value);"></select>
Dia: <select id="day"></select>
</p>
</body>
</html>

Ahora veamos el archivo response.php:

<?php
$d=$_GET['month'];
//definimos un array con los maximos de dias de cada mes
$days=array(31,29,31,30,31,30,31,31,30,31,30,31);
//mostramos según el numero del mes
echo $days[$d-1];
?>

Ver el demo.

ClearBox JS, lightbox ligero y con hermosos efectos

ClearBox JS es un utilidad para crear un ventana modal dentro del navegador con JavaScript, ó como bien conocemos: lightbox. A diferencia de otros lightbox's este es bien ligero, algo de 20Kb y es compatible con la mayoría de navegadores. 

Ofrece la posibilidad de generar colecciónes de imágenes con efecto slideshow (presentación, diapositivas) , pero además de imágenes podemos mostrar contenido HTML, como una página web.

Clear Box

Clear Box Samples

Qooxdoo, framework AJAX Open Source

qooxdoo Recientemente se publico la versión 0.8 de este interesante framework: Qooxdoo, el cual nos permite crear aplicaciciones con AJAX de nivel superior y RIA (Rich Internet Applications). Soporta JavaScript orientado a objetos permitiendo a los desarrolladores construir impresionantes aplicaciones cross-browser (aplicación soportada por todos los navegadores). No requiere de conocimientos HTML, CSS ó DOM.

Demos


Tip: Detectar Navegador Google Chrome con JavaScript

Una manera de saber si el navegador usado es Chrome mediante JavaScript:

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

Probando:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chrome testing</title>
<script type="text/javascript">
function is_chrome(){
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
alert(is_chrome);
}
</script>
</head>

<body onload="is_chrome()">
</body>
</html>

Chrome Test

Vía Code Purity

 

qGallery, otra forma de crear una galería de imágenes en JavaScript

qGallery, aún en desarrollo, es una herramienta que nos ayuda a crear una galería de fotos-imágenes pero con un estilo particular. Aun no disponible para descargar (lo será en las próximas semanas) pero podemos mencionar que funciona sobre Safari 3.1 y Firefox 2+. De momento cuenta con estas características:

  • Modo pantalla completa
  • Desplazamiento vertical
  • Navegación por teclado

qGallery

Vía Freeze_Soul In Hard Working

Timeline, línea del tiempo con JavaScript

Timeline es un utilidad hecha con JavaScript que nos permite crear un gráfico del tiempo en la cual podemos agregar/mostrar eventos ocurridos en determinado momento. Por ejemplo el BlogoEdad de anieto2k usa esta herramienta.

Timeline

Sin embargo todos podemos configurar nuestro propio gráfico de eventos en el tiempo. Veamos un ejemplo:

Para empezar hagamos referencia a la API, coloquemos esta línea dentro de las etiquetas <head></head>

<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript">
</script>

Creamos un contenedor para nuestro gráfico del tiempo:

<div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div>

Ahora configuramos para llamar algunas funciones cuando ocurran los eventos onload y onresize: del documento HTML:

<body onload="onLoad();" onresize="onResize();">
...
</body>

Colocamos el siguiente código con las configuraciones necesarias-básicas para que funciones nuestro gráfico del tiempo:

var tl;
function onLoad() {
var bandInfos = [
Timeline.createBandInfo({
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
}

var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}

El resultado final pueden apreciarlo aquí. En un próximo artículo entraremos a más detalles con esta herramienta.

Me entere por Freeze_Soul In Hard Working

MooCrop: Recortar imágenes con Mootools (image cropping)

Anteriormente comentabamos de Crop un plugin para Mootools que nos permite recortar una imágen. Ahora con el mismo objetivo tenemos a MooCrop una gran utilidad para recortar imágenes de forma visual en web utilizando Mootools.

Crop image con Mootools

Y en Unijimpe encontramos un gran tutorial sobre como hacer uso de esta herramienta en nuestros desarrollos web, y lo bueno que esta explicado en nuestro propio idioma (sino te gusta lidiar con el inglés). Este es un excelente tutorial, puedes ver el resultado final también.

Funciona en IE 6 & 7, Firefox 2+, Opera 9.2 y Safari 2 & 3.

Vía Unijimpe

 

sphere.js, aplicar efecto esférico a tus imágenes

sphere.js 1.0 permite agregar efecto esférico a las imágenes en nuestro sitio web. Trabaja en la mayoría de los navegadores: Firefox 1.5+, Opera 9+, Safari y IE6+. 

Efecto esferico

Descargar sphere.js 1.0

Invaders from Mars, juego en JavaScript

Y la colección de games hechos con JavaScript aumenta, en esta oportunidad se trata de un juego donde tenemos que disparar a marcianos en sus platillos voladores mientras tratamos de esquivar sus disparos.

Invaders of Mars

Vía Ajaxian

Sandbag, texto al contorno de una imagen (Canvas + JavaScript)

Envolver con texto una imagenInteresante utilidad que crear un efecto interesante con texto e imágenes: El texto se acomoda muy bien al contorno de una imágen, cualquiera sea su forma. Es común ver posts con imágenes incluidas, sin embargo algunas con mucho espacio en blanco (por ejemplo el planeta tierra con fondo blanco, deja muchas esquinas en blanco que podrían usarse) como que no va con la estética de la página. Este efecto se puede lograr en las aplicaciones de escritorio como MS Word ó OpenOffice, pero en HTML es imposible. Sin embargo gracias a JavaScript y Canvas no lo es.

En Nihilogic podemos encontrar esta herramienta, como usarlo e incluso podemos ver un ejemplo para que quede mas claro el asunto.

Vía Ajaxian | Artículo | Demo

Navegación

Categorias

Archivos

Monitored by eXternalTest