Contenido

Librerías para generar gráficas con Javascript

26 Jun

+ 13

Pocas son las cosas que no podamos hacer con Javascript, y la de hacer gráficas no es una de ellas.

Protochart2
(Ver Imagen)

Gracias a alguna de estas librerías, hacer nuestras gráficas más elegantes para nuestros usuarios es realmente sencillo:

  1. Flot [jQuery]
  2. fgCharting [jQuery]
  3. jQuery Sparklines [jQuery]
  4. jqPlot [jQuery]
  5. TufteGraph [jQuery]
  6. jQuery Google Charting [jQuery]
  7. ProtoChart [Prototype]
  8. JSXGraph [Prototype o jQuery]
  9. Protovis [Native JS]
  10. PlotKit [Nativa JS]

Me ha parecido muy raro que no hubiera nada para MooTools, así que he estado buscando algo para los que desarrollamos con este framework.

  1. MooChart
  2. TabletoChart
  3. MooWheel

¿Me he dejado alguna que valga la pena conocer?

Evita SPAM invirtiendo tu email con CSS

23 Jun

+ 23

Via Sentido Web descubro un artículo muy interesante que nos muestra como el ingenio puede ayudarnos a solucionar problemas. En este caso, mediante el uso de la propiedad direction del CSS invertimos nuestro email para mostrarlo correctamente por pantalla.

<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }  
</style>
<p><span class="test">moc.liamg@5k2oteina</span></p>

Interesante técnica para evitar el SPAM. Quizás como recomendación recomendaría email con algún punto en el nombre para hacer más dificil la lectura del mismo (xxx.yyy@zzzz.aaa). Incluso deberíamos tener en cuenta a los visitantes que no tengan activas las CSS e informar que ese correo está al revés aunque despues ocultemos el texto mediante CSS para los que si lo tengan activado.

WordPress Adsense Stats, ten siempre visibles tus ganancias en tu WordPress

22 Jun

+ 6

Actualizo:
Al parecer a muchos usuarios les está fallando el plugin. Me he puesto en contacto con Eduardo a ver si lo soluciona rápidamente y no dice cosas. Así que por el momento no lo useis.

Eduardo Sada (Coders.me) me avisa de que ya tiene listo WordPress Adsense Stats, un plugin que nos permite visualizar en nuestro Dashboard nuestros datos de Adsense sin necesidad de acceder a nuestra cuenta. Algo realmente interesante para tenerlo todo en el mismo sitio. [Descargar]

Consumo de memoria de los navegadores modernos

22 Jun

+ 18

Desde que conozco Firefox siempre me he quejado del excesivo consumo de memoria que el navegador produce en mi máquina. Es cierto que versión, tras versión, esto se ha ido corrigiendo aunque sigue siendo excesivo y preocupante en alguno casos.

073
(Ver Imagen)

Según esta gráfica, que descubro en dotnetperls.com, parece ser que en una comparativa entre Google Chrome 3.0 Dev, Firefox 3.5 RC, Safari 4.0 for Windows y Opera 10b podemos ver el cambio. En la gráfica vemos como Google Chrome llega a necesitar hasta 1,2GB de RAM para abrir las 150 primeras páginas del Top de Alexa, frente a los 327 MB de Firefox y los 554 y 517MB de Operay Safari respectivamente. Y es que un navegador es algo más que ejecutar Javascript muy rápido 😀

Desde que tengo Firefox 3.5RC1 (ha salido la RC2) es cierto que he notado una disminución en consumo de recursos, pero aún es pronto para segurar que esta versión será la que estabamos esperando (en cuanto a consumo de memoria).

Futurebox, el lightbox sin Javascript

21 Jun

+ 7

La gente de TheCSSNinja ha desarrollado un sistema para conseguir emular el efecto lightbox mediante CSS3.

futurebox
(Ver Imagen)

El resultado es muy similiar al ofrecido por cualquiera de las versiones de Lightbox, salvo que con esta versión no disfrutaremos de efectos ni de funcionalidades que nos permitan interactuar con la foto (pasar fotos, cambiar tamaño, moverla por pantalla). Sin duda se trata de un experimento CSS muy interesante.

¿Como funciona?

Veamos el código para entender como han conseguido hacer este efecto.

// HTML
// Miniaturas
<a href="#futurebox_img1">
	<img
		src="gr_ninja-attack_med.gif"
		width="100"
		height="102"
		alt="The CSS Ninja"
		id="futurebox01"
	/>
</a>
// Contenedor de imagenes grandes (uno por cada imagen grande)
<div class="overlay" id="futurebox_img1">
	<div class="overlay_container">
		<a href="#close" title="Close future box">
			<img
				src="gr_cssninja_lrg.png"
				alt="The Css Ninja"
				width="600"
				height="639"
			/>
		</a>
	</div>
</div>

// CSS
html, body { height: 100%; }

.overlay
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	z-index: 999;
	background: rgba(0,0,0,0.7);
}
	.overlay .overlay_container
	{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
		.overlay_container img
		{
			background: #ffffff;
			padding: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}

.overlay:target { display: table; }

Como podemos ver la mágia del script es el uso de :target para aplicar el display: table; al fondo de la pantalla (.overlay). Gracias a este pseudo-selector detectamos cuando un enlace-ancla lo está referenciando y al ser este accionado, aplicará el estilo asociado.

Evidentemente por el momento este código, únicamente funcionará en Firefox 1.5+, Safari 3.2+, Chrome 2+ y Opera 9.5+, echarle un vistazo a la demo y vereis lo bien que queda.

Internet Explorer 8 el más mejor navegador del mundo mundial

19 Jun

+ 11

Impresionante e imprescindible artículo que Victor Pimentel ha escrito para Genbeta. Se puede decir más alto, pero no más claro. Internet Explorer 8 está mejor que sus versiones anteriores, pero a años luz de los navegadores modernos. Via @goldrak.

Aporta más información sobre tus plugins de WordPress

19 Jun

+ 6

Para ser un buen desarrollador de plugins para WordPress debemos mejorar algunos de nuestros puntos de interacción con el usuario. Para ello WordPress nos ofrece una serie de opciones para mejorar la información relacionada con el plugin que hemos desarrollado.

plugin_action_links

Se trata de un filtro que se aplicara siempre que entremos en la página de gestión de plugins. En él podemos modificar la salida de links que el plugin nos ofrece:

plugin_action_links
(Ver Imagen)

Estos links pueden, por ejemplo, llevarnos directamente a la página de configuración del plugin. Un valor añadido que hará que el plugin gane un poco de calidad.

<?php
// Asociamos la función add_plugin_links() al filtro
add_filter('plugin_action_links', 'add_plugin_links', 10, 2);

// Declaramos la función
function add_plugin_links($links, $file) {
	// Marcamos el plugin actual
	static $this_plugin;
	if (!$this_plugin) $this_plugin = plugin_basename(__FILE__);

		// Comprobamos que el plugin que estamos mostrando por pantalla es el nuestro.
		if ($file == $this_plugin ){

		// Definimos el enlace a "Configuración"
		$settings_link = '<a href="index.php">Configuración</a>';

		// Añadimos el nuevo link a los ya existentes
		array_unshift($links, $settings_link);
	}
	// Devolvemos los links
	return $links;
}
?>

after_plugin_row

Otra forma de ofrecer más información al usuario es informar de que existe una actualización pendiente para el plugin. Para ello podemos mostrar un mensaje en la parte inferior del plugin y así se verá claramente la actualización:

plugin_after_row
(Ver Imagen)

Esto hará que el usuario sea consciente del cambio de versión que está disponible en cada momento. Para ello Wordpres nos ofrece la posibilidad de comprobar un fichero alojado en nuestro servidor que indicará la versión y la contrastará con la instalada (siempre y cuando el servidor permita este tipo de peticiones).

<?php
// Asociamos add_plugin_row() al action.
add_action('after_plugin_row', 'add_plugin_row', 10, 2);

// Declaramos la función
function add_plugin_row($links, $file) {
	global $wp_version;
	// Marcamos el plugin actual
	static $this_plugin;
	if (!$this_plugin) $this_plugin = plugin_basename(__FILE__);

	// Comprobamos que el plugin que estamos mostrando por pantalla es el nuestro.
	if ($file == $this_plugin ){
		// ¿Está disponible la actualización de plugins?
		$current = get_option('update_plugins');
		if (!isset($current->response[$file])) return false;

		// Controlamos el número de columnas disponibles dependiendo de la versión.
		$columns = substr($wp_version, 0, 3) == "2.8" ? 3 : 5;

		// Definimos la ruta de nuestro fichero de información.
		$url = "http://www.yoursite.com/info.txt";

		// Lanzamos la consulta externa.
		$update = wp_remote_fopen($url);

		// Pintamos el mensaje de alerta.
		echo '<td colspan="'.$columns.'">';
		echo $update;
		echo '</td>';
	}
}

Minimizando

Apartir de WordPress 2.7 disponemos de 2 posibilidades más:

<?php
// Nombre del plugin
$plugin_name = "miplugin";

// Filtros específicos para cada plugin
add_filter("plugin_action_links_$plugin_name", "....");
add_action("after_plugin_row_$plugin_name", "....");
?>

7 consejos para desarrollar Javascript de calidad

18 Jun

+ 4

Luis publica un enlace en el que nos muestra 7 consejos básicos que hemos de seguir los desarrolladores con Javascript para conseguir que nuestro Javascript tenga ese toque de calidad que lo diferencie de un simple script. [Original]

WP Memory Usage y WP Sytem Health, controla el estado de tu WordPress

18 Jun

+ 6

Hoy via WP-Engineer descubro dos plugins que considero realmente importantes para nuestro WordPress. Ambos ofrecen información acerca de nuestro servidor, algo realmente útil para tener controlado lo que no solemos controlar.

WP Memory Usage

wp-memory-usage
(Ver Imagen)

Se trata de un simple Widget, desarrollado por Alex Rabe,  que nos vá mostrando con una gráfica de colores el nivel de memoria consumida sobre el máximo de memoria establecida para WordPress. Muy útil para los que tienen problemas de rendimiento.

[Descargar][Página del plugin]

WP System Health

sytem
(Ver Imagen)
php
(Ver Imagen)
wordpress
(Ver Imagen)
database
(Ver Imagen)

Se trata de un plugin muy completo que además de mostrar información de la máquina, nos muestra información sobre nuestra instalación PHP, nuestro WordPress y nuestra base de datos. Una información muy interesante de conocer.

[Descargar] [Página del plugin]

Actualización II

David Rojas nos avisa que en servidores con IIS (Internet Information Services) no funcionan correctamente los 2 plugins.

Actualización

A petición de Relay, ahí van las capturas de aNieto2k 😀

Continua —>

Compatibilidad entre diferentes versiones de javascript y los navegadores

18 Jun

+ 0

Un desarrollador web cada día debe lidiar, para hacer compatibles sus aplicaciones, con los diferentes navegadores que hay actualmente en Internet, con las diferentes versiones de cada uno de los navegadores y además con las diferentes versiones de las tecnologías que usa. Ya sea CSS2, CSS3 o Javascript 1.6, 1.7 … al fin y al cabo siempre tenemos que ir condicionando nuestras aplicaciones para todas las posibles combinaciones. Como sabemos que es nuestro trabajo y que si no lo hacemos nosotros no lo hará nadie, nuestra mejor herramienta es estar bien informado de todo lo relacionado a estas incompatibilidades y así poder acotarlas antes de que el problema nos haga correr.

comparativa
(Ver Imagen)

Para ello, páginas como estas nos ayudarán en el día a día. Se trata de una recopilación de diferencias entre las diferentes versiones de Javascript, desde la 1.6 hasta la 1.8.1, en la que podemos ver la compatibilidad con los principales navegadores disponibles. ¿Conoces alguna más?