Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más » ajax

Enviar formularios con AJAX y jQuery parte II

Damian — Fri, 27 Jan 2012 20:33:17 +0000

Hace mucho tiempo escribí en el blog como enviar un formulario con AJAX y jQuery mediante el plugin jquery.form.js. A día de hoy y con mucha más experiencia en jQuery prefiero escribir mis propios códigos en lugar de utilizar tantos plugins.
Por lo que hoy les voy a explicar como enviar un formulario con AJAX gracias a jQuery y sin usar ningún plugin.

Para seguir el mismo ejemplo que en el otro post vamos a utilizar el mismo formulario:

 
    Nombre:  
    Mensaje:

Pero ahora para enviar el formulario tan solo haremos uso de algunas funciones de jQuery como son :

.serialize() : encargada de codificar todos los valores del formulario en una cadena para ser pasada.
.submit(): encargada de añadir al evento submit del formulario la función que usaremos para enviar el mismo.
jQuery.ajax(): encargada de realizar AJAX request.

Nuestro nuevo script quedaría de la siguiente manera:

        $(document).ready(function() { 
 
          $('#myForm').submit(function(){ //en el evento submit del fomulario
	          event.preventDefault();  //detenemos el comportamiento por default
 
			  var url = $(this).attr('action');  //la url del action del formulario
			  var datos = $(this).serialize(); // los datos del formulario
			  $.ajax({
				  type: 'POST',
				  url: url,
				  data: datos,
				  beforeSend: mostrarLoader, //funciones que definimos más abajo
				  success: mostrarRespuesta  //funciones que definimos más abajo
			   });
 
          });	
 
 
 
 
        });
 
 
        function mostrarLoader(){
              $('#loader_gif').fadeIn("slow"); //muestro el loader de ajax
        };
        function mostrarRespuesta (responseText){
	          alert("Mensaje enviado: "+responseText);  //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo "Hola" , la variable responseText = "Hola" . Aca hago un alert con el valor de response text
	          $("#loader_gif").fadeOut("slow"); // Hago desaparecer el loader de ajax
	          $("#ajax_loader").append("
Mensaje: "+responseText); // Aca utilizo la función append de JQuery para añadir el responseText  dentro del div "ajax_loader"
        };

Pueden ver un ejemplo online en “Como enviar un formulario AJAX con jQuery”

Pueden descargar el código antiguo en este post

Como integrar Goo.gl en tu web en 5 minutos

Damian — Sat, 02 Oct 2010 22:22:15 +0000

Desde que salió el nuevo acortador de urls de Google intenté encontrar la manera de integrarlo en una página web. A través de un post donde explicaban como sacaron el código fuente de un addon para Google Chrome logré encontrar una clase de PHP que te permite integrar Goo.gl en tu web fácilmente y que comparto con ustedes a continuación.

La clase de PHP es muy sencilla, básicamente hace un POST mediante CURL a la API de Goo.gl y devuelve el resultado. El groso de las funcionen es para sacar el Auth Token y utiliza el usuario toolbar@google.com de las extensiones de Chrome para conectarse.

/* 
API Google URL Shortner - goo.gl 
Marcus Nunes - marcusnunes.com - 09/18/2010
*/
 
class goo_gl{
 
	var $url, $resul;
 
	//goo.gl construct method
	function goo_gl($url){
 
		$this->url = $url;
 
		$curl = curl_init(); 
		curl_setopt($curl, CURLOPT_URL, 'http://goo.gl/api/url'); 
		curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); 
		curl_setopt($curl, CURLOPT_POST, 1); 
		curl_setopt($curl, CURLOPT_POSTFIELDS, 'user=toolbar@google.com&url='.urlencode($this->url).'&auth_token='.$this->googlToken($url)); 
		$saida = curl_exec($curl); 
		curl_close($curl);
		if($saida){
			$json = json_decode($saida);
			$this->resul = $json->short_url;
		}
	}
 
	//show url shorted by goo.gl
	function result(){
		return $this->resul;
	}
 
	//token code
	function googlToken($b){
		$i = $this->tke($b);
		$i = $i >> 2 & 1073741823;
		$i = $i >> 4 & 67108800 | $i & 63;
		$i = $i >> 4 & 4193280 | $i & 1023;
		$i = $i >> 4 & 245760 | $i & 16383;
		$j = "7";
		$h = $this->tkf($b);
		$k = ($i >> 2 & 15) << 4 | $h & 15;
		$k |= ($i >> 6 & 15) << 12 | ($h >> 8 & 15) << 8;
		$k |= ($i >> 10 & 15) << 20 | ($h >> 16 & 15) << 16;
		$k |= ($i >> 14 & 15) << 28 | ($h >> 24 & 15) << 24;
		$j .= $this->tkd($k);
		return $j;
	}
 
	function tkc(){
		$l = 0;
		foreach(func_get_args() as $val){
			$val &= 4294967295;
			$val += $val > 2147483647 ? -4294967296 : ($val < -2147483647 ? 4294967296 : 0);
			$l   += $val;
			$l   += $l > 2147483647 ? -4294967296 : ($l < -2147483647 ? 4294967296 : 0);
		}
		return $l;
	}
 
	function tkd($l){
		$l = $l > 0 ? $l : $l + 4294967296;
		$m = "$l";  //deve ser uma string
		$o = 0;
		$n = false;
		for($p = strlen($m) - 1; $p >= 0; --$p){
			$q = $m[$p];
			if($n){
				$q *= 2;
				$o += floor($q / 10) + $q % 10;
			} else {
				$o += $q;
			}
			$n = !$n;
		}
		$m = $o % 10;
		$o = 0;
		if($m != 0){
			$o = 10 - $m;
			if(strlen($l) % 2 == 1){
				if ($o % 2 == 1){
					$o += 9;
				}
				$o /= 2;
			}
		}
		return "$o$l";
	}
 
	function tke($l){
		$m = 5381;
		for($o = 0; $o < strlen($l); $o++){
			$m = $this->tkc($m << 5, $m, ord($l[$o]));
		}
		return $m;
	}
 
	function tkf($l){
		$m = 0;
		for($o = 0; $o < strlen($l); $o++){
			$m = $this->tkc(ord($l[$o]), $m << 6, $m << 16, -$m);
		}
		return $m;
	}
 
}

Para nosotros integrarlo en nuestra web podemos hacer lo siguiente:

Primero en index.php creamos lo siguiente:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Goo.gl integrado en tu web</title>
 
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#url').focus();
});
 
function googl_it(){
	$('#loading').fadeIn();
 var url = $('#url').val();
 $.post("goo.gl_api.php", {url:url},
 function(data){
	 $('#loading').fadeOut();
 $('#resultado').slideDown('fast');
 $('#resultado').html(data);
 });
}
 
</script>
</head>
 
<body>
  <div style="width:730px;margin:0 auto;">
    <form onsubmit="googl_it(); return false;">
	<input type="text" size="40" style="font-size: 30px;" id="url" name="url">
	<input type="button" onclick="googl_it();" style="font-size: 30px;" value="goo.gl it">
	</form>
    <div style="width: 566px;text-align:center;display:none;" id="loading" ><img src="loader.gif" alt="loading" /></div>
    <div style="clear: both; width: 566px; background-color: #FFC;border:1px solid #CCC; padding: 10px; font-size: 30px; margin-top: 20px;text-align:center;display:none;" id="resultado"> 
    </div>
    </div>
 
  </body>
</html>

Explicando los pasos

Básicamente hemos creado un formulario para introducir la url que deseamos acortar.
Creamos un boton que al ejecutarse llama a la función google_it() de javascript
La función google_it realiza las siguientes tareas:

Carga el loader.gif
Envía mediante JQuery AJAX, a traver del método POST la url a acortar a la página goo.gl_api.php
Oculta loader.gif y carga el resultado con un efecto JQuery

Con esto ya tendríamos la base armada, ahora hay que crear goo.gl_api.php y pegar nuestra clase PHP de la siguiente manera:

goo.gl_api.php


 
$url=$_POST['url'];
$googl = new goo_gl($url);
  echo '.$googl->result().'" title="'.$url.'">'.$googl->result().'  (.$googl->result().'.info">info)';
 
 
class goo_gl{
 
    var $url, $resul;
 
    //goo.gl construct method
    function goo_gl($url){
 
        $this->url = $url;
 
        $curl = curl_init(); 
        curl_setopt($curl, CURLOPT_URL, 'http://goo.gl/api/url'); 
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); 
        curl_setopt($curl, CURLOPT_POST, 1); 
        curl_setopt($curl, CURLOPT_POSTFIELDS, 'user=toolbar@google.com&url='.urlencode($this->url).'&auth_token='.$this->googlToken($url)); 
        $saida = curl_exec($curl); 
        curl_close($curl);
        if($saida){
            $json = json_decode($saida);
            $this->resul = $json->short_url;
        }
    }
 
    //show url shorted by goo.gl
    function result(){
        return $this->resul;
    }
 
    //token code
    function googlToken($b){
        $i = $this->tke($b);
        $i = $i >> 2 & 1073741823;
        $i = $i >> 4 & 67108800 | $i & 63;
        $i = $i >> 4 & 4193280 | $i & 1023;
        $i = $i >> 4 & 245760 | $i & 16383;
        $j = "7";
        $h = $this->tkf($b);
        $k = ($i >> 2 & 15) << 4 | $h & 15;
        $k |= ($i >> 6 & 15) << 12 | ($h >> 8 & 15) << 8;
        $k |= ($i >> 10 & 15) << 20 | ($h >> 16 & 15) << 16;
        $k |= ($i >> 14 & 15) << 28 | ($h >> 24 & 15) << 24;
        $j .= $this->tkd($k);
        return $j;
    }
 
    function tkc(){
        $l = 0;
        foreach(func_get_args() as $val){
            $val &= 4294967295;
            $val += $val > 2147483647 ? -4294967296 : ($val < -2147483647 ? 4294967296 : 0);
            $l   += $val;
            $l   += $l > 2147483647 ? -4294967296 : ($l < -2147483647 ? 4294967296 : 0);
        }
        return $l;
    }
 
    function tkd($l){
        $l = $l > 0 ? $l : $l + 4294967296;
        $m = "$l";  //deve ser uma string
        $o = 0;
        $n = false;
        for($p = strlen($m) - 1; $p >= 0; --$p){
            $q = $m[$p];
            if($n){
                $q *= 2;
                $o += floor($q / 10) + $q % 10;
            } else {
                $o += $q;
            }
            $n = !$n;
        }
        $m = $o % 10;
        $o = 0;
        if($m != 0){
            $o = 10 - $m;
            if(strlen($l) % 2 == 1){
                if ($o % 2 == 1){
                    $o += 9;
                }
                $o /= 2;
            }
        }
        return "$o$l";
    }
 
    function tke($l){
        $m = 5381;
        for($o = 0; $o < strlen($l); $o++){
            $m = $this->tkc($m << 5, $m, ord($l[$o]));
        }
        return $m;
    }
 
    function tkf($l){
        $m = 0;
        for($o = 0; $o < strlen($l); $o++){
            $m = $this->tkc(ord($l[$o]), $m << 6, $m << 16, -$m);
        }
        return $m;
    }
 
}
?>

Y con eso ya podrán integrar goo.gl en sus webs y mostrar los resultados con un toque de AJAX fácil y rápidamente.

Pueden ver el ejemplo funcionando aquí.
O descargar el código desde aquí.

Como usar AJAX Auto Suggest V2.0

Damian — Sun, 16 May 2010 16:32:39 +0000

Yo personalmente las pocas veces que he implementado un Auto Suggest o caja de sugerencias en mis proyectos he utilizado AJAX Auto Suggest V2.0. No es que haya probado muchos , pero en su día este fue el que más me convencio por su facilidad de uso y de personalización.

Para utilizarlo primero debemos incluir sus archivos:

1
2
3

<link type="text/css" rel="stylesheet" href="autosuggest_inquisitor.css">
 
<script src="bsn.AutoSuggest_2.1.3.js" type="text/javascript"></script>

Crear un campo de texto y asignarle un Id:

1 2	<input type="text" style="width: 200px; color: rgb(204, 204, 204);" id="materiales_input" name="materiales" autocomplete="off">

Luego definimos algunas opciones y creamos el objeto autosuggest:

function autosuggest(){
var options = {
	script: "get_materiales.php?limit=6&",//página la cual recibirá la llamada AJAX
	varname: "materiales",// nombre de la variable que contendra el valor escrito
	json:false,//Podemos elegir JSON o XML
	maxresults:10,//Un máximo de resulados para mostrar
       timeout:9999,//numero en milisegundos antes de que se cierre la lista de valores sugeridos
	noresults:'Ingresar nuevo material a la base de datos' //valor que muestra en caso de no encontrar resultados
};
var as = new bsn.AutoSuggest('materiales_input',  options); //creamos el objeto AutoSuggest
}

Para más opciones consultar la página del autor.

Llamamos a la función cuando cargue la página:

1	<body onload="autosuggest();">

Por último creamos un archivo PHP que devuelva los resultados de búsqueda(en este caso XML) para que se muestren en las sugerencias.

get_materiales.php:

 
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Fecha del pasado 
	header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // siempre modificado
	header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
	header ("Pragma: no-cache"); // HTTP/1.0
 
include_once('config/db.php'); 
$conn=get_db_conn();
$input=utf8_decode(cleanQuery($_GET['materiales']));
$query='SELECT * FROM categoria_materiales WHERE nombreMaterial LIKE \'%'.$input.'%\'';
$materiales=mysql_query($query,$conn);
 
if (isset($_REQUEST['json']))
	{
		header("Content-Type: application/json" );
 
		echo "{\"results\": [";
		$arr = array();
		while ($row=mysql_fetch_assoc($materiales))
		{
 
			$arr[] = "{\"id\": \"".$row['idCatMaterial']."\", \"value\": \"".$row['nombreMaterial']."\", \"info\": \"\"}";
		}
		echo implode(", ", $arr);
		echo "]}";
	}
	else
	{
header("Content-Type: text/xml");
 
		echo "\"1.0\" encoding=\"ISO-8859-1\" ?>";
		while ($row=mysql_fetch_assoc($materiales))
		{
 
			echo "\"".$row['idCatMaterial']."\" info=\"\">".$row['nombreMaterial']."";
		}
		echo "";
 
	}	
 
	?>

Explicando get_materiales.php:

Para empezar nos encontramos con las cabezeras que sirven para el nuestro navegador no guarde en cache los resultados.
db.php, get_db_conn() y cleanQuery son explicados en mi blog en DB.php : Como definir los parametros de conexión de tu base de datos.
utf8_decode lo utilizo porque en mi caso yo envio el formulario por AJAX y por lo tanto el campo de texto que se manda a get_materiales lo tengo codificado en UTF-8 como explico en Acentos y caracteres especiales con Ajax y JQuery.
Para terminar tan solo queda devolver el resultado en el formato correcto.

Formato XML:


	id="1" info="Cheshire">Foobar</rs>
	id="2" info="">Foobarfly</rs>
	id="3" info="">Foobarnacle</rs>
</results>

Formato JSON:

{ results: [
	{ id: "1", value: "Foobar", info: "Cheshire" },
	{ id: "2", value: "Foobarfly", info: "" },
	{ id: "3", value: "Foobarnacle", info: "Essex" }
] }

Como anotacíon en mi caso al enviar el formulario compruebo si el material ingresado existe en la base de datos y sino existe lo agrego. Por ese motivo en noresults muestro el mensaje de “Añadir a la base de datos”.Para ello hago lo siguiente:


include_once('db.php'); 
$conn=get_db_conn();
if($_POST['materiales']!=''){
    $material=cleanQuery($_POST['materiales']);
	$existe=mysql_query("SELECT * FROM materiales WHERE nombreMaterial ='$material'",$conn);
					if (mysql_num_rows($existe) == 0) mysql_query("INSERT INTO materiales (nombreMaterial) VALUES ('$material')",$conn);	  
 
}
?>

Con todo esto tendriamos el autosuggest o caja de sugerencias funcionando a la perfección.

Pueden ver un EJEMPLO FUNCIONANDO
O tambien DESCARGARSE EL CÓDIGO

Un saludo a todos, espero sus comentarios!

Acentos y caracteres especiales con Ajax y JQuery II parte

Damian — Tue, 06 Apr 2010 13:54:14 +0000

Hace un tiempo escribí un post acerca de los acentos y caracteres especiales con AJAX y JQuery que explicaba como salvar este problema en los formularios enviados por AJAX.

El problema es que esta solución no abarca cuando con JQuery hacemos un .load() de información con AJAX y para variar nos salen cuadraditos o rombos negros con un signo de interrogación adentro. con caracteres como á, é, í, ó, ú ,Á, É, Í, Ó, Ú, ñ, Ñ ,º ,ö, Ö, ü, Ü, etc

Para salvar esto tan solo tenemos que configurar JQuery.ajax() de la siguiente forma:

 
$.ajaxSetup({
'beforeSend' : function(xhr) {
xhr.overrideMimeType('text/html; charset=iso-8859-1');
}
});

Con esa opción forzamos que el encabezado de respuesta sea iso-8859-1 y no UTF-8.

UPDATE:

Este método solo funciona con FF ya que IE no soporta xhr.overrideMimeType como bien comento Ignacio en los comentarios. Una forma de solucionar esto es hacer lo siguiente:
Modificar el codigo inicial

$.ajaxSetup({
'beforeSend' : function(xhr) {
try{
xhr.overrideMimeType('text/html; charset=iso-8859-1');
}
catch(e){
 
 
}
}});

Y luego hay que agregar en nuestro archivo PHP

1	header( 'Content-type: text/html; charset=iso-8859-1' );?>

Mandando el encabezado con PHP lograremos que funcione en IE. Un saludo , hagan pruebas y comenten que yo no tuve mucho tiempo.

UPDATE II:
Ignacio comenta que para ASP habria que usar el metodo :
Response.ContentType=”text/html; charset=iso-8859-1?

Un saludo espero que les haya servido de ayuda.

Como enviar un formulario via AJAX con JQuery

Damian — Sun, 05 Jul 2009 21:30:48 +0000

Hoy en dia y gracias a JQuery cualquiera puede implementar AJAX en sus webs para hacerlas más dinámicas. Hoy debido a todo el tema de la fiebre porcina cierran los boliches así que ya que me quedo en casa aprovecho y les cuento como poder usar el plugin jquery.forms para enviar un formulario mediante AJAX de una forma super sencilla.

Para empezar necesitamos un formulario. Vamos a usar de ejemplo un formulario de contácto sencillo:

<form id="myForm" action="contacto.php" method="post" style="height:200px;"> 
    <label>Nombre:</label> <input type="text" name="name" /> 
    <label>Mensaje:</label> <textarea name="mensaje"></textarea> 
    <input type="submit" value="Enviar" /> <div id="ajax_loader"><img id="loader_gif" src="loader.gif" style=" display:none;"/></div>
</form>

Una vez tengamos el codigo HTML del formulario tan solo debemos añadir el plugin y ejecutarlo una vez el DOM este cargado añadiendo las opciones que creamos convenientes.
Hay diferentes gif animados para ajax, si quieren alguno diferente echen un vistazo al último artículo que escribí.
Para consultar las diferente opciones de jquery.form visiten su web.

index.php:


  
 
<script type="text/javascript">
 
        // esperamos que el DOM cargue
        $(document).ready(function() { 
            // definimos las opciones del plugin AJAX FORM
            var opciones= {
                               beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#myForm').ajaxForm(opciones) ; 
 
             //lugar donde defino las funciones que utilizo dentro de "opciones"
             function mostrarLoader(){
                          $(#loader_gif).fadeIn("slow"); //muestro el loader de ajax
             };
             function mostrarRespuesta (responseText){
                           alert("Mensaje enviado: "+responseText);  //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo "Hola" , la variable responseText = "Hola" . Aca hago un alert con el valor de response text
                          $("#loader_gif").fadeOut("slow"); // Hago desaparecer el loader de ajax
                          $("#ajax_loader").append("
Mensaje: "+responseText); // Aca utilizo la función append de JQuery para añadir el responseText  dentro del div "ajax_loader"
             };
 
        }); 
 
script>

Este ejemplo es muy simple. El action del formulario apunta a contacto.php y es ahi donde hay que poner las funciones que queramos, como por ejemplo que nos envie un mail con el mensaje y nombre que aparece en el formulario. Si no estuvieramos usando JQuery y el plugin de jquery.form, al hacer click en “Enviar” nuestro navegador cargaria la página contacto.php como suele pasar normalmente. En este caso gracias al AJAX el contenido del formulario se enviara mediante la variable $_POST a la página contacto.php de una forma invisible al usuario y una vez que se envie correctamente se va a ejecutar este simple código:

contacto.php:


if($_POST['mensaje'] != ''){
	echo $_POST['mensaje'];
}
?>

Lo que hacemos aca es un echo del mensaje enviado que aunque para el usuario pasa inadvertido , podremos mostrarlo con “responseText”.

Ver ejemplo
Descargar código

Si quieren ver un ejemplo de un formulario de contacto con AJAX, pueden probar este.

Espero que haya servido de ayuda. Un saludo a todos!!!

Pueden ver un ejemplo sin plugin en “Como enviar un formulario AJAX con jQuery parte II”

Gif animados para AJAX

Damian — Sun, 05 Jul 2009 06:22:42 +0000

Todos conocemos los famosos gif animados que aparecen cuando una página carga con AJAX.

Ademas de este existen varias formas más y diferentes tamaños, como barras , estrellas, y un sin fin de colores. Pero para que vamos a coleccionar tantos archivos si podemos crearlos de una forma sencilla en 2 simples pasos.

Para eso solo tenemos que ir a http://www.ajaxload.info/ y seleccionar el modelo y color de loader que queremos y despues hacer click en descargar. Y si, es tan sencillo como suena.

Acentos y caracteres especiales con Ajax y JQuery

Damian — Tue, 26 May 2009 19:47:28 +0000

Unos de mis primeros problemas al usar jquery.forms o $.Ajax era que los acentos ,la ñ , etc no eran ingresados correctamente en la base de datos y por lo tanto no se mostraban correctamente en mis programas y por lo general aparecian como cuadraditos o rombos negros con un signo de interrogación adentro.
Algunos de los caracteres afectados:

á, é, í, ó, ú ,Á, É, Í, Ó, Ú, ñ, Ñ ,º ,ö, Ö, ü, Ü

Una forma simple para solucionar esto es hacer lo siguiente:

En el formulario agregar accept-charset=”utf-8“

1
2
3

<form id="formulario" action="index.php" accept-charset="utf-8" method="post">
<input type="input" name="nombre"/>
</form>

Y a la hora de recibir el dato ya sea mediante $_POST o $_GET tenemos que hacer un utf8_decode() y ya estará listo el valor para ingresar en la base de datos.

1	$usuario=utf8_decode($_POST['nombre`]);

Con este método JQuery ya no me da problemas con los caracteres especiales. Saludos!!!

UPDATE: SEGUNDA PARTE

Introducción a AJAX, Javascript, CSS, XHTML

Damian — Thu, 21 May 2009 15:01:12 +0000

Hoy les traigo una página que me ayudo mucho en mis comienzos. Estoy hablando de Librosweb, en ella podemos encontrar una serie de PDFs escritos en su mayoria por profesores con los contenidos que imparten en sus cursos.

Los libros son totalmente gratuitos y se pueden leer en la web o descargarlos. La verdad que estan muy bien como complemento y referencia, la mayoria incluye ejemplos y ejercicios para ir practicando a medida que se aprende.

Acá les dejo el listado completo:

Programación web

Introducción a AJAX :

Comenzando desde cero y llegando hasta las técnicas más avanzadas.
Incluye Google Maps, Prototype, jQuery y decenas de ejemplos.

Empezar a leerlo

Introducción a JavaScript :

Creado para diseñadores web sin experiencia en programación.
Aprende a manejar eventos, validar formularios y crear otras utilidades comunes.

Empezar a leerlo

Diseño web

Introducción a CSS :

Guía completa para aplicar estilos a las páginas web.
Incluye las propiedades de CSS 2.1 y decenas de ejemplos.

Empezar a leerlo

CSS avanzado :

Técnicas imprescindibles como sustitución de texto, sprites, sombras y transparencias
Buenas prácticas y recomendaciones de los mejores diseñadores
Frameworks CSS y diseño de páginas con YUI
Referencia imprescindible para diseñadores web avanzados

Empezar a leerlo

Referencia de CSS 2.1 :

Las 115 propiedades de CSS 2.1 explicadas detalladamente
Incluye más de 300 ejemplos originales

Empezar a leerlo

Introducción a XHTML :

Guía completa para crear páginas web, con más de 60 ejemplos.
Aprende cómo crear páginas web accesibles y que validen.

Empezar a leerlo