Contenido

45 Themes tipo magazine completamente gratuitos

29 may

+ 3

Listado de más de 45 themes para WordPress, con los que podrás darle un aspecto similar a un magazine a tu blog. Todos ellos completamente gratuitos y listos para empezar a usarlos. [Via]

Implementando <video /> de HTML5 con Javascript

28 may

+ 1

Hasta que aparezca HTML5 y se consolide como un estandar firme <ironía type=”sarcasmo”>puede haber terminado la vida en la faz de la tierra</ironía>, pero mientras tanto ya podemos hacer uso del tag <video /> destinado para futuros contenidos multimedias en cualquier navegador (recordemos que WebKit ya lo integra) gracias a Javascript y SWFObject JavaScript Library. [Demo][Via]Gracias Jesús.

Manipulacion de imagenes con Javascript

28 may

+ 1

¿Que se puede hacer con Javascript , PHP/GD y una buena idea? Pues Phototype, un script capaz de ayudarnos a manipular imagenes directamente desde Javascript, usando las promiedades de la extensión GD de PHP. Simplemente genial.

Bitacoras.com más social que nunca, tengo buenas vibraciones

27 may

+ 9

Esta mañana, los chicos de Bitacoras.com, nos soprenden con una nueva funcionalidad que nos convierte Bitacoras.com en una versión de Meneame/Digg fusionada con el sistema de puntuación interno que ya disponían.

bitacoras-mas-social

Lo que convierte este agregador social en una herramienta ideal para estar al día, sin los problemas de que los usuarios sean los únicos en elegir que noticias aparecen y cuales no, sinó que aportan un valor importante, pero no decisivo a la puntuación del enlace. Por fín, un sistema de votación en el que podremos leer cosas interesante!

Tambien disponemos de un plugin con el que podremos enlazar nuestras entradas con dicho agregador social. ¿Que más podemos pedir?

Enhorabuena chicos, ¿Para cuando una API para trabajar con esos suculentos datos que teneis ahí guardados? :D

WordPress 2.6 permitirá sacar wp-content del directorio Web

27 may

+ 12

Revisando las modificaciones realizadas en el trac de WordPress, encuentro que ya tienen terminada la opción de sacar el directorio wp-content del directorio web de nuestro servidor. Esto además de ser una de las mejores opciones, para evitar accesos no deseados, nos permite tener un mayor control a la hora de actualizar a versiones posteriores.

Actualmente la ruta de directorios de WordPress era similar a esta:

htdocs\
      wp-admin\
      wp-content\
      wp-include\
      ....

Ahora, con la versión 2.6, podremos sacar completamente del servidor web nuestra carpeta wp-content, que como todos sabemos se encarga de almacenar, nuestros plugins, themes, cache, ficheros, ….

htdocs\
      wp-admin\
      wp-include\
      ....
wp-content\

Este cambio seguro que me obliga a revisar la majoría de plugins, pero el cambio merece la pena. Una maravillosa noticia que junto a la incorporación de Google Gears y el Post Revisions, darán mucho que hablar en WordPress 2.6.

Google Ajax Libraries API, ajax sobre la arquitectura Google

27 may

+ 16

Hoy, la comunidad de desarrolladores web ha saltado de alegría al ver el anuncio por parte de Google, de su nuevo proyecto, Google Ajax Libraries API.

Sin duda Google dispone, hoy en día, de una infrastructura capaz de resistir a todos los usuarios de internet accediendo simultáneamente, pues es muy inteligente por su parte, ofrecerla para que fines como este. Con Google Ajax Libraries API, podremos acelerar la carga de nuestro Javascript y tener de forma estandarizada los más importantes frameworks javascript.

Actualmente la lista es la siguiente:

* No son frameworks JS, pero tambien están disponibles dentro de Google Ajax Libraries API.

Aunque conociendo a Google, no descartaría que fueran añadiendo nuevas librerías.

¿Como usarlo?

Para usar este nuevo invento, tenemos 2 opciones:

1) Cargar la librería directamente

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

De esta forma estaremos cargando directamente desde los servidores de Google la versión 1.6.0.2 de Prototype. Si queremos cargar cualquier otra librería, cargaremos la ruta correspondiente:

//jQuery

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

// Prototype

http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js

//Script.aculo.us

http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js

//MooTools

http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js

//Dojo

http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js

2) Cargarmos mediante el sistema de carga de Google Ajax Libraries API, google.load().

< strong><script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1");

// on page load complete, fire off a jQuery json-p query
// against Google web search
google.setOnLoadCallback(function() {
$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",

// on search completion, process the results
function (data) {
if (data.responseDate.results &&
data.responseDate.results.length>0) {
renderResults(data.responseDate.results);
}
});
});
</script>

Como podemos observar en negrita, vemos que la ruta del javascript que hemos de cargar es diferente y no hace referencia a ninguna librería, ya que simplemente contiene el código necesario para que podamos cargar la librería que deseemos.

La función google.load()

google.load(name, version, opt);

La función google.load() es la clave para entender el sistema anterior, ya que ella es la que se encarga de cargar la librería que solicitemos.

google.load("jquery", "1");

Esta función recibe 3 parámetros, el primero indica la librería que queremos cargar, pudiendo ser cualquiera de estos casos.

google.load("jquery", "1.2.3");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

El segundo, indica la versión de la librería que queremos cargar. Este parámentro es un poco especial, ya que si indicamos que queremos la versión 1.2 de jQuery, Google automáticamente devolverá la ultima versión disponible de la rama 1.2. De igual forma si indicamos la versión 1, nos devolverá la más alta de la rama 1, osea la 1.2.3. Esto nos permite trabajar con versiones antiguas, o más nuevas dependiendo del tipo de desarrollo que estemos efectuando.

El último parámetro será usado para las opciones personalizadas de cada unos de los framework, por ejemplo, MooTools, jQuery y Dojo permite solicitar el código sin comprimir.

google.load("mootools", "1.11", {uncompressed:true});

Usandolo con herramientas de Google

Algo que tambien me ha gustado ha sido que la función google.load(), integre la posibilidad de cargar el API de Google Maps, Google Ajax Search, Google AJAX Feed API o Google data APIs. Algo que nos permite reducir considerablemente las llamadas a las diferentes API’s para cargar el código.

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
    <script type="text/javascript">
      google.load("maps", "2");
      google.load("search", "1");

      // Call this function when the page has been loaded
      function initialize() {
        var map = new google.maps.Map2(document.getElementById("map"));
        map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);

        var searchControl = new google.search.SearchControl();
        searchControl.addSearcher(new google.search.WebSearch());
        searchControl.addSearcher(new google.search.NewsSearch());
        searchControl.draw(document.getElementById("searchcontrol"));
      }
      google.setOnLoadCallback(initialize);
    </script>

  </head>
  <body>
    <div id="map" style="width: 200px; height: 200px"></div>
    <div id="searchcontrol"></div>
  </body>
</html>

Combos dependientes accesibles con PHP y jQuery

27 may

+ 15

En el último proyecto en el que estoy desarrollando en el trabajo he tenido que crear unos combos dependientes, hasta el momento siempre los había hecho con Javascript, usando Ajax para cargar los datos de un combo a otro, pero para este proyecto quería hacerlo un poco más accesible.

Como ya hemos visto en muchos posts, el desarrollar pensando en ser accesibles para todo el mundo es complicado, pero no imposible.

Empecemos

Lo primero que tenemos que hacer es tener claro que es lo que queremos hacer, en el ejemplo, una select de destino que dependerá de una select padre llamada pais.

combos_dependientes_accesibles

Viendo que es lo que necesitamos crear, veamos como podría ser una aproximación al código PHP que necesitamos.

Al código…

Primero vayamos por partes, y como hay que empezar por alguna definamos la estructura en el servidor y ya iremos subiendo.

destino.php

<?php if ($_POST["type"] == "xml")	header ("content-type: text/xml"); ?>
<select id="destino" name="destino">
        <option value="-1">Selecciona una zona</option>
<?php if ($_POST["pais"] == "ES"){ ?>
	<option value="PMI">Palma de Mallorca</option>
	<option value="AGP">Malaga</option>
	<option value="BCN">Barcelona</option>
<?php } else if($_POST["pais"] == "FR") { ?>
	<option value="TOU">Toulousse</option>
	<option value="CHD">Charles de Gaulle</option>
<?php } ?>	
</select>

Este fichero es un ejemplo rápido de un XML bien formado, que a su vez hará de elemento <select /> en nuestro script. La primera línea nos condicionará, más adelante, el formato de salida que usaremos. Ahora veamos en donde lo incrustamos.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<select name="pais" id="pais">
				<option value="-1">Selecciona un pais</code>
				<option value="ES">España</code>
				<option value="FR">Francia</code>	
			</select>
		</p>
		<p class="destino">
			<?php echo "Destino: ";
			      include("destino.php"); 
 			?>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Como vemos, lo incluimos mediante un include normal, que nos generará el HTML necesario para que veamos un <select />.

Si ahora miramos el código resultante, nos encontramos con esto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<select name="pais" id="pais">
				<option value="-1">Selecciona un pais</code>
				<option value="ES">España</code>
				<option value="FR">Francia</code>	
			</select>
		</p>
		<p class="destino">
			Destino:
			<select id="destino" name="destino">
				<option value="-1">Selecciona una zona</option>
			</select>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Como podemos ver, se trata de un HTML normal, sin ningún tipo de secreto. Ahora empezemos a ponerle polvos mágicos para que esata rana se convierta en principe.

Abracadabra…

Para hacer mágia, voy a usar jQuery (principalmente por su simplicidad para el ejemplo) y con él veremos lo fácil que es conseguir unos combos disponibles para todos. Primero hemos de volver a replantearnos los ficheros PHP

<?php	
	$hayPais = false; // No hay pais por defecto
	if (isset($_POST["pais"])) $hayPais = true; //Si hay país
	
	// URL de destino
	$url =  ($hayPais)?"receptor.php":"";	
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<?php if ($hayPais) : ?>
				<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
			<?php else: ?>
		<select name="pais" id="pais">
			<option value="-1">Selecciona un pais</code>
			<option value="ES">España</code>
			<option value="FR">Francia</code>	
		</select>
		<?php endif;?>
		</p>
		<p class="destino">
			<?php if ($hayPais) {
				echo "Destino: ";
				include("destino.php"); 
			} else { ?>
				<noscript>
					<input type="submit" value="Buscar Destinos" />
				</noscript>
			<?php }	?>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Vayamos por partes:

<?php	
	$hayPais = false; // No hay pais por defecto
	if (isset($_POST["pais"])) $hayPais = true; //Si hay país
        /*
		Esta versión es más corta, pero menos ilustrativa.
		$hayPais = isset($_POST["pais"]); // ¿Existe $_POST["pais"];
	*/
	
	// URL de destino
	$url =  ($hayPais)?"receptor.php":"";	
?>

Con la variable $hayPais, arrastramos por todo el script un valor Booleano que nos permite conocer si el parámetro $_POST["pais"] existe. De esta forma, las futuras comprobaciones son más sencillas.

Acto seguido, nos encargamos de informar la variable $url, que contendrá la URL a donde ha de ser redirigido el formulario. Esto es simplemente para conseguir submitar al lugar correcto en cada paso.

<?php if ($hayPais) : ?>
	<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
<?php else: ?>
	<select name="pais" id="pais">
		<option value="-1">Selecciona un pais</code>
		<option value="ES">España</code>
		<option value="FR">Francia</code>	
	</select>
<?php endif;?>

Al igual que la comprobación anterior, sabiendo que hemos recibido el parámetro $_POST["pais"], modificamos el <select /> por un elemento <input /> con el valor que hemos pasado previamente. Esto nos servirá para submitar el valor a la página siguiente.

<?php if ($hayPais) {
	echo "Destino: ";
	include("destino.php"); 
} else { ?>
        <noscript>
	<input type="submit" value="Buscar Destinos" />
	</noscript>
<?php }	?>

Aqui es donde está parte de la gracia del script, y curiosamente se llama <noscript />. Como podemos ver, en caso de haber pasado el parámetro $_POST["pais"], cargaremos el fichero destino.php y este ya se encargará de mostrar los datos relacionados al parámetro enviado. En caso de no enviar este parámetro, insertaremos el tag <noscript /> que contendrá un elemento <input type="submit" /> que se encargará de submitar el formulario con el valor necesario para cargar $_POST["pais"].

Hasta ahora, todo bien. Salvo para los que si tenemos Javascript activo. No nos olvidemos que el tag <noscript /> no será mostrado en caso de disponer de Javascript en nuestro navegador. Para ello, debemos extendernos a la siguiente capa, la del javascript.

Mejorando la experiencia del usuario

Como hemos dicho antes, usaremos jQuery para la capa de cliente. Así, que manos a la obra.

<?php	
	$hayPais = false; // No hay pais por defecto
	if (isset($_POST["pais"])) $hayPais = true; //Si hay país
	
	// URL de destino
	$url =  ($hayPais)?"receptor.php":"";	
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
	<title>Combos dependientes accesibles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			// Creamos elemento destino y lo incrustamos en <p class="destino">
			$("p.destino").append('Destino: <select id="destino" name="destino"><option value="-1">Seleciona un destino</option></select>');

			// Modificamos el action del formulario a la página receptora.
			$("form#form").attr("action", "receptor.php");

			// Definimos la petición de ajax, al fichero destino.php
			$("#pais").bind("change", function() {
			    $.post("destino.php", {pais: $(this).val(), type: "xml"}, function(xml){
			        $("#destino").empty();
			        $(xml).find("option").each(function(x,el) {
			         $("#destino").append('<option value="'+$(el).attr("value")+'">' +$(el).text() + '</option>');
			        });
			    }, "xml");
			});

		});
	</script>
</head>
<body>
	<form id="form" method="post" action="<?=$url?>">
		<p class="pais">
		Pais: 
			<?php if ($hayPais) : ?>
				<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
			<?php else: ?>
		<select name="pais" id="pais">
			<option value="-1">Selecciona un pais</code>
			<option value="ES">España</code>
			<option value="FR">Francia</code>	
		</select>
		<?php endif;?>
		</p>
		<p class="destino">
			<?php if ($hayPais) {
				echo "Destino: ";
				include("destino.php"); 
			} else { ?>
				<noscript>
					<input type="submit" value="Buscar Destinos" />
				</noscript>
			<?php }	?>
		</p>
		<p class="submit">
			<input type="submit" value="Enviar" />
		</p>
	</form>
</body>
</html>

Destripémoslo un poco para entenderlo mejor.

<script type="text/javascript" src="jquery.js"></script>

Cargamos jQuery para disponer de las ventajas que nos ofrece este framework.

// Creamos elemento destino y lo incrustamos en <p class="destino">
$("p.destino").append('Destino: <select id="destino" name="destino"><option value="-1">Seleciona un destino</option></select>');

Dentro del $(document).ready(... definimos las tareas que ayudarán al usuario. La que vemos arriba se encarga de añadir el <select /> de destinos vacio en el lugar apropiado, pendiente de ser relleneado con la petición ajax.

// Modificamos el action del formulario a la página receptora.
$("form#form").attr("action", "receptor.php");

Modificamos el action del formulario para que la ruta de submit sea la correcta.

// Definimos la petición de ajax, al fichero destino.php
$("#pais").bind("change", function() {
    $.post("destino.php", {pais: $(this).val(), type: "xml"}, function(xml){
      $("#destino").empty();
      $(xml).find("option").each(function(x,el) {
         $("#destino").append('<option value="'+$(el).attr("value")+'">' +$(el).text() + '</option>');
       });
    }, "xml");
});

Con este código, lanzamos una petición a nuestro fichero destino.php con los parámetros pais y type, cargamos con los datos que necesitamos para que al detectar un cambio en el elemento <select id="pais" /> este envie la petición indicando que quiero recibir los datos en XML para luego recorrerlo y pintar las option que necesito para rellenar <select id="destino" />

Resultado

El resultado es una página en la que podemos acceder con dos posibles configuraciones, con Javascript o sin él. En caso de entrar con javascript, todo estará preparado para usarlo y hacer que selección de destino sea mediante Ajax y en un solo paso.

En caso de tener el javascript desactivado, tendremos que realizar un paso más para cargar los datos referentes al destino, pero al final enviaremos los mismo datos a la página siguiente.

Podeis probarlo en esta demo que he montado, solo he podido probar el JS en Firefox, así que si alguien me lo puede probar en otros navegadores se lo agradeceré.

Espero vuestras opiniones, y sugerencias.

Acordeón horizontal en Javascript de solo 1kb

26 may

+ 3

Alternativa muy elegante a los Kwicks de MooTools o jQuery, de tan solo 1kb, y sin necesidad de depender de ningún framework. Ideal para cambiar esos menus horizontales tan sosos por estos con algo de movimiento.[Demo][Descargar]

Web Development Helper monitoriza ajax en tu Internet Explorer

25 may

+ 4

Gracias a edusanver descubro Web Development Helper es un plugin para Internet Explorer que nos permite, entre otras cosas, monitorizar las peticiones Ajax como si de Firebug en Firefox se tratara.

web_development_helper

Características

Entre las características más interesantes de este plugin se encuetran:

  • Inspector DOM de todos los elementos.
  • Capturas de imagenes de la página en la que estás.
  • Log de las peticiones HTTP (o HTTPS) solicitadas por el navegador o peticiones Ajax.
  • Ver las peticiones y respuestas en detalle.
  • Habilidad de filtrar por tipos de URL’s en los logs.
  • Traza de errores en detalle de las peticiones Javascript.
  • Consola con posibilidad de interacción Javascript usando (window.debugService).

Requerimientos

Descargar

Descargar

Cortar palabras con Javascript

25 may

+ 2

Hace 2 días vimos como una de las características de Firefox 3.0, la de soft hyphens nos permitía conseguir que las palabras extremadamente largas se corten evitando así que estás salgan del elemento contenedor.

wbr-navigator-compatibility

Está propiedad, implementado en la mayoría de navegadores, utiliza la entidad &shy; que se encarga de dividir la palabra en el lugar en la que se encuentra. Firefox, disponía de elementos que realizaban la misma funcionalidad, como el elemento <wbr /> o la entidad &#8203;. Podemos ver más información en este artículo de QuirksMode.

Etnas, me preguntaba si había alguna posibilidad de hacerlo en PHP sin tener que recurrir a wordwrap(). Y justamente hoy John Resig escribía hoy sobre la posibilidad de cortar automáticamente en palabras de nuestro contenido mediante Javascript.

function wbr(str, num) { 
  return str.replace(RegExp("(\\w{" + num + "})(\\w)", "g"), function(all,text,char){
    return text + "<wbr>" + char;
  });
}

Basandose en los propuestos por Eduardo Lundgren, escribe esta función que nos permite usarla para que nos corte nuestro contenido.

wbr("Hello everyone how are you doing? I'm writing an extravagently long string.", 6);

//Resultado
"Hello everyo<wbr>ne how are you doing? I'm writin<wbr>g an extrav<wbr>agently long string."

Otra solución, basada en Javascript, es la de usar hyphenator, una solución bastante compleja que nos permite realizar cortes en palabras adecuadamente, incluso dependiendo del idioma en el que estemos trabajando, hasta ahora Inglés, Francés y Alemán.