AWC Blackjack: Blackjack con AJAX

AWC Blackjack es un juego multi-jugador online de blackjack en fase de desarrollo pero actualmente disponible para testers con el fin de dar información y ayudar a mejorar el juego. El juego está completamente escrito en PHP, y la presentacion HTML usa AJAX.

AWC Blackjack

Por el momento falta algunos arreglos, que mayormente tienen que ver con el diseño gráfico. Puedes probar el juego, de momento, en Firefox +1.5, IE +6.0. Esto demuestra, una vez más, que es lo que se puede lograr usando AJAX y un poco de creatividad.

Vía AJAX Magazine

Complementos (plugins) para frameworks JavaScript

Un listado de complementos (ó plug-ins) para combinarlos con los frameworks más conocidos como jQuery, Mootools, etc.

Mostrar imágen en un pop-up (ventana emergente)

Lightbox

Mostrar una ó más imágenes dentro de la misma página web no es tan complicado con estas ayudas.

  1. Lightbox
  2. jQuery lightBox Plugin
  3. Thickbox
  4. Highslide JS
  5. FancyBox
  6. jQZoom

Presentación de imágenes

Slideshow

Hacer una presentación de imágenes le da un valor agregado a nuestra aplicación web.

  1. Slideshow 2! for Mootools
  2. SmoothGallery
  3. jQuery Galleria
  4. Noobslide
  5. Product Slider

Carousel

Carousel

Ahora bien si deseamos crear una presentacion de imágenes con algo de efectos extra, podemos usar los de tipo Carousel.

  1. jCarousel
  2. YUI Carousel Component
  3. DynamicDrive - Carousel Slideshow
  4. iCarousel - MooTools

Panel deslizante

Sliders

Desplazar contenidos de forma horizontal como si de un libro se tratara.

  1. Coda Slider Plugin
  2. jQuery Coda Slide Tutorial
  3. Sliding Tabs
Ver Artículo Completo ››

Número entero aleatorio con JavaScript

Para generar un número entero entre 0 y X:

var myNumeroAleatorio = Math.floor(Math.random()*(X+1))

De esa forma, si tu deseas un número aleatorio entre 0 y 100:

var myNumeroAleatorio = Math.floor(Math.random()*101)

Ahora si quieres un número aleatorio entre un rango X y Y entonces usa esto:

var myNumeroAleatorio = Math.floor(Math.random()*(Y-X))+X

En la práctica, supongamos un entero entre estos dos números 79 y 473:

var myNumeroAleatorio = Math.floor(Math.random()*394)+79

Vía Victor’s Programming Aid



Tool Tips con Mootools

Este tutorial describe de forma sencilla cómo podemos implementar tool tips (un pequeño cuadro informativo que aparece cuando posamos el cursor sobre un elemento en la pantalla) con efectos en nuestra aplicaciones web gracias a Mootools.

Tool Tip con Mootools

Bien lo primero que hacer es descargar la librería core de mootools 1.2 y la librería more con el plugin TIPS.

Ver Artículo Completo ››

ImageInfo: obtener información de una imágen con JavaScript

ImageInfo es una pequeña librería JavaScript que obtiene la información ó metadatos (formato, dimensiones, etc) de los archivos de imágen. Basado en IMG2JSON.

Bastará con incluir los archivos JavaScript necesarios en la cabezara de nuestro documento HTML. Pueder ver en el siguiente ejemplo la forma de usar esta librería.

<!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>Reading image's info</title>
<script type="text/javascript" src="binaryajax.js"></script>
<script type="text/javascript" src="imageinfo.js" ></script>
<script type="text/javascript" src="exif.js" ></script>

<script type="text/javascript" >
	// URL de la imagen (debe estar en el mismo dominio)
	var file = "london-olympic-logo.gif";
	
	// define tu propia función de respuesta
	function mycallback() {
		document.getElementById('info1').innerHTML = "Todo la informacion: " + ImageInfo.getAllFields(file).toSource()
	   	document.getElementById('info2').innerHTML = "Formato: " + ImageInfo.getField(file, "format") + ", Dimensiones : " + ImageInfo.getField(file, "width") + "x" + ImageInfo.getField(file, "height")
	}
	
	// Finalmente mostrar la informacion de la imagen
	ImageInfo.loadInfo(file, mycallback);
</script>
</head>

<body>
    <img src="london-olympic-logo.gif" alt="Imagen" height="126" width="210"  />
    <h3>Informacion de la imagen</h3>
    <div id="info1">
    </div>
    <div id="info2">
    </div>
</body>
</html>

ImageInfo libreria JavaScript

Con el método getField podemos obtener información específica de la imagen. He aquí otros valores para getField:

  • format (formato de la imagen el cual puede retornar: "JPEG", "PNG", "GIF" or "BMP")
  • version (actualmente solo para formatos GIF)
  • width (ancho en píxeles)
  • height (altura en píxeles)
  • bpp (bits por píxel)
  • alpha (retorna verdadeo si el canal alpha está presente, solo para formato PNG)
  • mimeType (el tipo mime enviado por el servidor)
  • byteSize (tamaño del archivo)
  • exif (si la imagen contiene datos EXIF. Solo en formato JPEGs)

Vía Ajaxian

Blog del autor Nihilogic

Validando formulario con jQuery

Si nos gusta utilizar jQuery en el desarrollo de aplicaciones podemos hacer uso de este pequeño tutorial que nos enseña a validar el contenido de los campos de un formulario.

 Validacion de campos de formulario

¿Cómo hacerlo?

  1. Descargar e incluye jquery.js.
  2. HTML: En la etiqueta form, incluye onSubmit="return checkForm(this);".
  3. HTML: En la etiqueta del campo de entrada (input), incluye onblur="checkField(this);".
  4. HTML: Asigna un Identificador a los campos (atributo id). Estos se usará para identificar los campos en el código JavaScript.
  5. Javascript: Actualiza la función checkFieldTask() con tus campos.
  6. Javascript: Configura demo_mode=false.
Ver Artículo Completo ››

JavaScript ó CSS dinámico en PHP

Algunos visitantes han tenido preguntas al respecto. Preguntaban si podían generar dinámicamente con PHP código JavaScript ó CSS. La respuesta es: Si. Simplemente tienes que expecificar la cabecera del documento PHP lo siguiente:

Para JavaScript:

header ('Content-Type: text/javascript; charset=utf-8');

Para CSS:

header ('Content-Type: text/css; charset=utf-8');

Recuerda que no debes enviar ningun texto antes. Por supuesto que el archivo PHP conservará su extensión cuando los referenciemos desde la página HTML:

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

Espero les sirva el tip.

Programación Orientado a Objetos con JavaScript

Algunos desarrolladores no usan JavaScript con Programación Orientada a Objetos (POO)  cuando crean aplicaciones, pero lo cierto es que mediante este enfoque de programación nos podemos ahorrar mucho tiempo y hacer nuestro código reutilizable para futuras aplicaciones. Veamos en este tutorial como hacer esto siguiendo un ejemplo práctico.

Creando la Clase

Vamos a crear la clase Temporizador. El siguiente código muestra como hacerlo: 

// Declarando la clase "Temporizador"
var Temporizador = function()
{
    // ....        
    // Cuerpo de la clase
    // ....
}

Agregando Propiedades Públicas

Para agregar propiedades a la clase debemos usar la siguiente sintaxis, dentro de cuerpo de la clase, como se muestra a continuación: 

// Declarando clase "Temporizador"
var Temporizador = function()
{        
    // Propiedad: Frecuencia de tiempo en milisegundos
    this.Intervalo = 1000;
    
    // Propiedad: Habilitar ó no el temporizador 
    this.Activo = new Boolean(false);
}

Como puedes apreciar hemos creado 2 propiedades (Intervalo y Activo) a la clase Temporizador y asignamos valores por defecto.

Ver Artículo Completo ››

15, juego en Javascript

El desarrollo web tiene su parte entretenida también, por ello aquí les dejo un jueguito llamado "15" que nos hará relajarnos por un momento del trabajo.

 Juego en JavaScript

Este es un proyecto de Dmitry Baranovskiy quien además tienes otros más muy interesantes.

Raphaël, gráficos vectoriales con JavaScript

Raphaël es una librería JavaScript que nos simplifica el trabajo de crear gráficos vectoriales en páginas web. Utiliza SVG y VML como base para la creación de gráficos. Debido a que cada objeto creado es un objeto DOM, puedes crear eventos con JavaScript para manipular ó modificar dichos objetos. Está librería va de maravilla en versiones iguales ó superiores a Firefox 3.0, Safari 3.0, Opera 9.5 e Intenet Explorer 6.0.

¿Cómo usarlo?

Descarga e incluye raphael.js dentro de tus páginas HTML, luego algo tan simple como esto para crear un círculo.

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

Demos

Descarga

15 páginas : Anterior 1 ...3 4 5 6 7 ...15 Siguiente

Navegación

Categorias

Archivos

Monitored by eXternalTest