Contenido

Disfruta de HTML5 en Internet Explorer y Firefox 2

30 Jun

+ 0

Aunque el HTML5 está lejos, la gente ya está empezando a desarrollar cosillas usando sus nuevas capacidades. Y es que cada vez más los navegadores lo están adoptando, aunque aún es muy pronto para poder usarlo libremente sin preocuparnos de navegadores menos modernizados (IE8 e inferiores, Firefox 2,…).

Internet Explorer no le aplica estilos a elementos HTML5

Una de las peculiaridades de Internet Explorer es que si no reconoce el tag HTML que estamos usando no nos permite que le apliquemos estilos:

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

El resultado obtenido, nos mostará un texto sin rastros de cursivas. Esto lo podemos solventar con Sjoerd Visscher publicó hace menos de un año y que John Resig nos explica en este artículo.

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>
  <script>document.createElement('time');</script>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

Misteriosamente, el texto aparecerá en cursiva. Por este motivo, y para permitirnos darle estilos en IE a los elementos HTML5 disponemos de un sencillo Javascript que nos generará cada uno de los elementos HTML usando el sistema anterior mediante Javascript.

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()

Tan sencillo como insertarlo en un fichero javascript e incluir este código en nuestro <head></head>:

<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->

Conclusiones

Por desgracia, implica que el Javascript es una tecnología requerida para aplicarle estilos a estos nuevos tags. Así que hemos de ser conscientes de ello.

Problema de renderizado en Gecko 1.9b5(Firefox 2, Camino)

Aunque son solo el 3% de los usuarios de Internet que aún están usando Firefox 2, este problema no es despreciable.

Y es que los navegadores basados en Gecko 1.9b5 (o inferiores) tienen un problema a la hora de renderizar elemento de bloque, por ejemplo, si tenemos HTML:

<body>
  <header><h1>Title</h1></header>
  <article><p>...</p></article>
</body>

Gecko, nos lo transforma en algo similar a esto:

<body>
  <header></header>
  <h1>Title</h1>
  <article></article>
  <p>...</p>
</body>

Siendo el resultado muy similar al que produciría Internet Explorer sin Javascript en el ejemplo anterior.

Soluciones

Podemos usar una técnica basada en Javascript que Simon Pieters nos ofrece, o servir XHTML en lugar HTML al navegador:

// HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

// HTACCESS
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

// PHP
if (preg_match('/rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) {
    header('Content-type: application/xhtml+xml');
}

Esto hará más sensibles las páginas web y necesitarán que los tags estén correctamente cerrados ya que pasará a tratarlo como si de XML se tratara.

Baja tus scripts al final del fichero

30 Jun

+ 20

Una de las técnicas más usadas para reducir el tiempo de carga de una página web es la de bajar el Javascript al final del fichero HTML, concretamente justo encima de </body>.

Esto hace que la carga de la página, no se quede en stand-by mientras termina de cargar el javascript. El resultado es realmente sorprendente:

Antes:

beforenet
(Ver Imagen)

Despues:

afternet
(Ver Imagen)

Conclusión

Como podemos ver hemos reducido un 47% el tiempo de carga de la página (la del ejemplo) o hemos mejorado el tiempo de carga un 210%, haciendo que esta cargue en casi la mitad de tiempo.

Esto además, nos evita problemas con el evento onload ya que los elementos HTML ya están añadidos al árbol DOM.

Una de cosillas rápidas

30 Jun

+ 0

Un par de cosillas que he encontrado y que pueden interesantes tener presentes:

  1. SMT (Simple Mouse Tracking): Sistema basado en Javascript para guardar el rastro del ratón del usuario al pasear por tus páginas.
  2. <MyTableGrid />: Librería que usa Prototype + Script.aculo.us para conseguir unas tablas dinámicas muy interesantes.
  3. Wordpress Configuration Tips: Trucos de optimización durante la configuración de Wordpress.
  4. wordwrap en Javascript: James Padolsey crea una pequeña función que emula la función wordwrap() de php.
  5. Trucos de Gmail: Conviertete en un Gmail Ninja!!
  6. Haz Dra&Drop en tablas: Javascript para realizar drag & drop con el contenido de las tablas.
  7. $fx: Librería Javascript especializada en animaciones.
  8. jsAnim: Otra librería Javascript especializada en animaciones.
  9. Gx: Y una más, otra librería Javascript para realizar animaciones (tan solo 10kb sin comprimir).

El elemento video del HTML5

30 Jun

+ 1

Se está hablando mucho de HTML5, y no es para menos. Va a suponer un antes y un despues en la forma de mostrar nuestras páginas web a Internet. El tag <video /> es sin duda el atractivo más visual de este nuevo estandar y es que su llegada puede revolucionar el mundo multimeda en Internet.

Antes (ahora)

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

La forma de visualizar un video en una página web, actualmente es similar a la que muestro en este código. Pasa por el elemento <object /> que nos permite especificar otro <embed /> que nos permite incrustar una película flash en nuestro página.

Semánticamente, estamos hablando de un objeto (<object />) embebido en la página (<embed />), pero no nos dice que se trata de un video ya que este código, sirve para incrustar juegos flash, galerías,….

Con HTML5

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
<p> Try this page in Safari  4! Or you can <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a> instead.</p>
</video>

Con HTML5, además de quedar más claro que este contenido es un contenido de formato video nos permite informar una alternativa a los usuarios que no estén visualizando la aplicación con un navegador con esta capacidad.  Posibilitando descargar el video para que el usuario lo descargue y lo visualize con su reproductor predeterminado.

Conclusiones

Aún nos queda mucho tiempo para poder disfrutar de un potencial real, por el momento tendremos que seguir lidiando con las diferentes versiones de HTML para ofrecer las nuevas características a los navegadores más modernos sin dejar a los navegadores antiguos olvidados.

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.youtube.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>

Si no quieres usar el tag <video />, para que las páginas validen por la W3C, siempre puedes usar la forma válida de incrustar videos flash en tus páginas.

<object width="460" height="265" data="http://vimeo.com/moogaloop.swf?clip_id=5072163" type="application/x-shockwave-flash">
<param value="http://vimeo.com/moogaloop.swf?clip_id=5072163"></param>
<param name="allowFullScreen" value="true"></param>
<param value="always"></param>
</object>

Via

Los usuarios me avisan

29 Jun

+ 2

Via email he recibido un par de artículos interesantes que me parece interesante compartir:

  1. Pautas de diseños en Photoshop [peivem.com]
  2. Ventanas gelatinosas con Javascript y CSS Transformations [Turleando.com.ar]
  3. Honda Insight [Vimeo] (Via Hans Christian)

Si quieres compartir algo, solo tienes que hacermelo saber :D

10 shortcodes para hacerte la vida más fácil con Wordpress

28 Jun

+ 4

Hemos visto varias veces lo que son los shortcodes y la capacidad que tienen de extender nuestros posts. Mediante una nomenclatura sencilla y cómoda de usar podemo hacer que el trabajo de publicar en nuestro blog sea más sencillo, con estos 10 shortcodes que he encontrado en CatsWhoCode algo más sencillo seguro que lo será:

1) Artículos relacionados

function related_posts_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'limit' => '5',
	), $atts));

	global $wpdb, $post, $table_prefix;

	if ($post->ID) {
		$retval = '<ul>';
 		// Get tags
		$tags = wp_get_post_tags($post->ID);
		$tagsarray = array();
		foreach ($tags as $tag) {
			$tagsarray[] = $tag->term_id;
		}
		$tagslist = implode(',', $tagsarray);

		// Do the query
		$q = "SELECT p.*, count(tr.object_id) as count
			FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id  = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
				AND p.post_status = 'publish'
				AND p.post_date_gmt < NOW()
 			GROUP BY tr.object_id
			ORDER BY count DESC, p.post_date_gmt DESC
			LIMIT $limit;";

		$related = $wpdb->get_results($q);
 		if ( $related ) {
			foreach($related as $r) {
				$retval .= '<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>';
			}
		} else {
			$retval .= '
	<li>No related posts found</li>';
		}
		$retval .= '</ul>';
		return $retval;
	}
	return;
}
add_shortcode('related_posts', 'related_posts_shortcode');

Con este shortcode, podemos añadir en nuestro post, un listado de artículos relacionados usando los tags del mismo para buscarlo los similares.

Modo de uso

[related_posts]

2) Mostrar una gráfica de Google Chart

function chart_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'data' => '',
	    'colors' => '',
	    'size' => '400x200',
	    'bg' => 'ffffff',
	    'title' => '',
	    'labels' => '',
	    'advanced' => '',
	    'type' => 'pie'
	), $atts));

	switch ($type) {
		case 'line' :
			$charttype = 'lc'; break;
		case 'xyline' :
			$charttype = 'lxy'; break;
		case 'sparkline' :
			$charttype = 'ls'; break;
		case 'meter' :
			$charttype = 'gom'; break;
		case 'scatter' :
			$charttype = 's'; break;
		case 'venn' :
			$charttype = 'v'; break;
		case 'pie' :
			$charttype = 'p3'; break;
		case 'pie2d' :
			$charttype = 'p'; break;
		default :
			$charttype = $type;
		break;
	}

	if ($title) $string .= '&chtt='.$title.'';
	if ($labels) $string .= '&chl='.$labels.'';
	if ($colors) $string .= '&chco='.$colors.'';
	$string .= '&chs='.$size.'';
	$string .= '&chd=t:'.$data.'';
	$string .= '&chf='.$bg.'';

	return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />';
}
add_shortcode('chart', 'chart_shortcode');

El shortcode ideal para incrustar gráficas en nuestros posts. Mediante una nomenclatura con una serie de parámetros la personalización de la gráfica será más sencilla y cómoda.

Modo de uso

[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"]

3) Muestra tu publicidad Adsense

function showads() {
    return '<script type="text/javascript"><!--
google_ad_client = "pub-3637220125174754";
google_ad_slot = "4668915978";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
';
}

add_shortcode('adsense', 'showads');

Sencillo shortcode que nos permite insertar adsense allá donde queramos dentro e nuestro post.

Modo de uso

[adsense]

4) Mostrar contenido en relación a las capacidades del usuario

function access_check_shortcode( $attr, $content = null ) {
    extract( shortcode_atts( array( 'capability' => 'read' ), $attr ) );
    if ( current_user_can( $capability ) && !is_null( $content ) && !is_feed() )
        return $content;

    return 'Sorry, only registered members can see this text.';
}

add_shortcode( 'access', 'access_check_shortcode' );

Si quieres mostrar contenido de tu post, pero quieres que todos los usuarios lo puedan ver, este shortcode es el tuyo. Con el puedes ocultar el contenido según las capacidades del usuario que lo lee.

Modo de uso

[access capability="switch_themes"]

5) Incrusta un RSS en tu post

/This file is needed to be able to use the wp_rss() function.
include_once(ABSPATH.WPINC.'/rss.php');

function readRss($atts) {
    extract(shortcode_atts(array(
	"feed" => 'http://',
      "num" => '1',
    ), $atts));

    return wp_rss($feed, $num);
}

add_shortcode('rss', 'readRss');

Sencillo sistema para insertar un RSS en tu post.

Modo de uso

[rss feed="http://feeds2.feedburner.com/Catswhocode" num="5"]

6) Crea automáticamente una mini url para Twitter

function subzane_shorturl($atts) {
	extract(shortcode_atts(array(
		'url' => '',
		'name' => '',
), $atts));
$request = 'http://u.nu/unu-api-simple?url=' . urlencode($url);
$short_url = file_get_contents($request);
	if (substr($short_url, 0, 4) == 'http')    {
		$name = empty($name)?$short_url:$name;
		return '<a href="'.$short_url.'">'.$name.'</a>';
	} else {
		$name = empty($name)?$url:$name;
		return '<a href="'.$url.'">'.$name.'</a>';
	}
}
add_shortcode('shorturl', 'subzane_shorturl');

Shortcode al que le pasamos una url y nos devuelve la url minimzada.

Modo de uso

[shorturl name="shortcode" url="http://codex.wordpress.org/Shortcode_API"]

7)  Mostrar la última imagen asociada al post

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));
	$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
	foreach( $images as $imageID => $imagePost )
	$fullimage = wp_get_attachment_image($imageID, $size, false);
	$imagedata = wp_get_attachment_image_src($imageID, $size, false);
	$width = ($imagedata[1]+2);
	$height = ($imagedata[2]+2);
	return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

Nos mostrará la última imagen asociada al artículo.

Modo de uso

[postimage]

8) Deja notas para administradores en los posts

add_shortcode( 'note', 'sc_note' );

function sc_note( $atts, $content = null ) {
	 if ( current_user_can( 'publish_posts' ) )
		return '<div class="note">'.$content.'</div>';
	return '';
}

Genial idea que nos permite dejar notas, únicamente visibles para los administradores, en nuestro posts.

Modo de uso

[note]This is a personal note that only admins can see![/note]

9) Quitando el autoformato de Wordpress

function my_formatter($content) {
	$new_content = '';
	$pattern_full = '{(\[raw\].*?\[/raw\])}is';
	$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
	$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

	foreach ($pieces as $piece) {
		if (preg_match($pattern_contents, $piece, $matches)) {
			$new_content .= $matches[1];
		} else {
			$new_content .= wptexturize(wpautop($piece));
		}
	}

	return $new_content;
}

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'my_formatter', 99);

Ideal para los que mostramos código en la página, ya que nos elimina las funciones encargadas de autoformatear el código. Aunque técnicamente no es un shortcode, se comporta como tal, y el texto que no esté dentro de los tags será autoformateado como por defecto.

Modo de uso

[raw]This portion of text will not be automatically formatted by WP.[/raw]

10) Muestra tus estadísticas con shortcodes

Se trata de un plugin que permite mostrar una serie de estadísticas mediante shortcodes.

Modo de uso

[pagerank]
[feedburner_subscribers]
[alexa_rank]
[technorati_authority]
[technorati_rank]
[user_count]
[post_count]
[page_count]
[comment_count]
[trackback_count]
[avg_comments_per_post]
[category_count]
[tag_count]
[link_count]
[google_backlinks]
[yahoo_backlinks]
[delicious_bookmarks]

Scripty2, un lavado por dentro y por fuera para Script.aculo.us

27 Jun

+ 5

Script.aculo.us, la librería gráfica de Prototype se ha lavado la cara y de que manera.

script2
(Ver Imagen)

Scripty2 se ha reescrito completamente desde 0 para suplir a la antigua librería, consiguiendo reducir su tamaño considerablemente, ideal para aplicarle efectos gráficos, enriquecer el interface del usuario de tus páginas en tan solo 20kb (gzzipped).

Como usarlo

Para disponer de las funcionalidades que la librería nos ofrece deberemos incluir la llamada al fichero correspondiente.

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

Como podemos ver, necesitaremos prototype.js para que esta librería funcione. Además requiere la versión 1.6.3_rc3 de Prototype o superior.

Una vez añadido este código, podremos hacer uso de las funcionalidades que Scripty2 nos ofrece, funcionalidades que están divididas en 3 categorías:

  1. Core: Funciones básicas usadas en el resto de la librería.
  2. Fx: Colección de métodos para aplicarle efectos a los elementos de la página.
  3. Ui: Funciones para el parseo de CSS

Descargar y demos

Para ver las posibilidades que ofrece, se han desarrollado un par de ejemplos. Puedes descargarlo directamente (con documentación) aquí.

Librerías para generar gráficas con Javascript

26 Jun

+ 11

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

+ 21

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.

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.