Contenido

Propuesta de subtítulos para el tag video en HTML5

30 Jun

+ 11

En Ginger’s Thoughts leo una propuesta muy interesante que creo que quedará en solo eso, una propuesta. Aunque la idea es muy buena y podría ser interesante disponer de ello en el nuevo HTML5. La propuesta es de Diciembre de 2008, y por el momento no hay novedades al respecto.

La idea es incluir al tag <video /> del HTML5 la capacidad de manejar subtítulos:

<video src="http://example.com/video.ogv" controls>
<text category="CC" lang="en" type="text/x-srt" src="caption.srt"></text>
<text category="SUB" lang="de" type="application/ttaf+xml" src="german.dfxp"></text>
<text category="SUB" lang="jp" type="application/smil" src="japanese.smil"></text>
<text category="SUB" lang="fr" type="text/x-srt" src="translation_webservice/fr/caption.srt"></text>
</video>

Como podemos ver en el código superior, estaríamos incluyendo texto al tag <video /> que nos permitiría establecer mediante el atributo lang el idioma del subtítulo y tu seleccionarlo directamente desde el control incluido en el navegador (preseleccionando el del idioma por defecto del navegador).

El tag <text />

Únicamente indicaría la ubicación del fichero de subtítulos que debe cargar (src), indicando el idioma (lang) y el tipo (type) de subtítulo que vamos a cargar.

Por el momento…

Por el momento podemos hacer uso de jQuert SRT, para simular el resultado con Javascript.

<!-- Javascript -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.srt.js"></script>

<!-- HTML  -->
<video src="http://example.com/video.ogv" id="video" controls>
<div class="srt"
data-video="video"
data-srt="http://example.com/video.srt" />

La idea es intersante para cuando las películas lleguen «oficialmente» a Internet. ¿no?

Lanzado Firefox 3.5!

30 Jun

+ 44

Bueno, ya está aquí. La versión final de Firefox 3.5 irrumpe hoy en el mercado y planea romperlo

firefox35
(Ver Imagen)

Ya lo puedes descargar directamente desde aquí.

Disfruta de HTML5 en Internet Explorer y Firefox 2

30 Jun

+ 1

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

+ 23

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.

¿Que podremos ver en Firefox 3.6?

30 Jun

+ 10

Aún no ha salido la versión 3.5 (oficialmente) y ya se están viendo algunas de las mejoras que estarán disponibles ( o pretenderán que lo estén) en Firefox 3.6. Tendremos que esperar hasta 2010, pero algunas de las novedades que he visto me han gustado mucho:

1) Mejoras en el rendimiento

Importante! Quizás, en lo que más esperamos que se esmeren ya que, es por todos sabido los problemas de rendimiento que Firefox siempre ha sufrido. Esperemos que esta nueva versión mejore la ya mejorada 3.5.

2) Más personalización y opciones disponibles

Uno de los puntos fuertes de Firefox es la capacidad de extenderlo con plugins y la posibilidad de cambiar el aspecto mediante el uso de Themes. Pues en la nueva versión, nos permitirá que estos plugins sean más complejos y nos permitan extender controles que hasta ahora no es posible.

3) Nuevas opciones de navegación

La inclusión de Ubiquity en el core de Firefox propiciará mejoras en la navegación por internet.

awesomebar-ubiquity
(Ver Imagen)

Como podemos ver en la imagen, podremos buscar direcciones directamente desde nuestra barra de navegación.

4) Prism Integrado

prism-menu
(Ver Imagen)

Ya vimos hace tiempo Prism, el proyecto que nos permite disponer de un Firefox limitado a una aplicación web. Pues en Firefox 3.6, nos será posible guardar una aplicación web como un elemento Prism que podrá ser usado en una de estas versiones limitadas.

Algunas cosillas que se están considerando para Firefox 3.6

Las que hemos visto hasta ahora, son funcionalidades que están aprovadas y desarrollándose para la nueva versión, aunque aún hay algunas cosillas que se están barajando para esta nueva versión y aún están considerando si llegarán a esta versión o habrá que esperar a la siguiente.

1) Integración de Taskfox

Se trata de un nuevo proyecto anunciado por Mozilla y que pretende mejorar el interface del usuario con nuevos paradigmas de navegación. Similar a Ubiquity aunque algo más potente.

2) Mejor manejo de sesiones

Mejoras en la gestión de sesiones, será posible guardar sesiones, restaurarlas posteriormente y así no perder nada de nuestro trabajo cuando cerramos nuestro navegador.

3) Estadísticas de navegación

about-me
(Ver Imagen)

Interesante ventana (about:me) que nos mostará la información relacionada a nuestra navegación.

4) Manejor de identidades

No hay mucha información, aunque parece que se está barajando la posibilidad de integración con OpenID y CardSpace.

5) Nueva pestaña

Uno de los atractivos de Google Chrome es la opción de nueva pestaña que nos permite acceder sitios recientes o más visitados. Firefox 3.6 hace ya tiempo que está planeando como implantar esta mejora y puede que sea una de las que veamos en la nueva versión, aunque tambien vimos que podría ser que no tuviera pestañas.

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

+ 15

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 😀

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

28 Jun

+ 12

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í.