Hace poco tiempo que decidí cambiar de framework Javascript, en concreto desde que vi los problemas que jQuery tenía para trabajar con DOM distinto de HTML. Mi elección entonces fue volver a Prototype para más tarde pasarme a MooTools.

Objetivo

Ahora estoy migrando el Javascript que uso en algunos sitios a esta librería, MooTools, y con esta entrada trato de ilustrar lo intuitivo y fácil que resulta trabajar con MooTools para extender Javascript y adaptarlo de una forma estándar a tus propósitos. Es, a diferencia de jQuery, para lo que está hecha esta librería.

Newsticker

Aunque es espectacular el ritmo de crecimiento de los plugins para MooTools en su sección Forge y en concreto los slideshow de varios tipos, lo cierto es que no encontraba un scroll de noticias sencillo -técnicamente más conocidos como ticker o newsticker-.

Haberlos los hay, pero ninguno satisfacía mis necesidades pues: o generaban marcado que no me parecía correcto; o se basaban en procesos demasiado estrictos, demasiado complicados; o se basaban más bien en CSS. …O sea, todo demasiado estricto y yo solo quería implementar la funcionalidad para cualquier listado independientemente del estilo CSS asignado y de su marcado.
Así que, como en otras ocasiones -en las BeTools por ejemplo- e inspirado en la idea de Antonio Lupetti para jQuery (es un ciclo de posiciones básicamente), decidí ponerme manos a la obra y reinventar la rueda porque a veces sigue siendo la mejor solución para conseguir exactamente lo que quieres, como en este caso.

Código NewsTicker con MooTools

Esta es la clase que he implementado, nada del otro mundo pero que me funciona perfecta y hace exactamente lo que quiero:

Funcionalidad

• Me permite aplicarlo a cualquier elemento que contenga hijos, ya sea un listado o no, aunque obviamente lo recomendable y más fiable son los listados.
• Me permite mantener el estilo original de los elementos abstrayéndose de si se usan o no para el ticker. El ticker simplemente aplica el estilo mínimo para la funcionalidad, en este caso la visualización de un solo item del listado y de acuerdo a la altura original del elemento. Es decir, olvídate de anchos o altos estrictos preestablecidos, es la funcionalidad y punto.
• El resto ya es lo normal: tiempo entre repeticiones, establecer un efecto, etc.

Actualizado

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

/**
 * MooTools NewsTicker by Covi.
 * 
 * Inspirado en la idea de Antonio Lupetti 
 * (http://woork.blogspot.com/2009/05/how-to-implement-news-ticker-with.html)
 *
 * @author Covi
 * @copyright 2010 J.A.Cobo (Covi)
 * @version 0.1beta
 * @todo Interfaz y extender para ticker pequeño, slideshow...
 *
 * @license MIT License http://www.opensource.org/licenses/mit-license.php
Copyright (c) 2010 J. A. Cobo Ruz (Covi), inspired by Antonio Lupetti cycle idea.
 
Permission is hereby granted, free of charge, to any
person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the
Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the
Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
 
The above copyright notice and this permission notice
shall be included in all copies or substantial portions of
the Software.
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
var NewsTicker = new Class({
	Implements: Options,
 
	options: {
		autostart: 		true, 		// Comenzar automático o no.
		animation: 		'fade', 	// Tipo de animación, por el momento: fade, slide (mode:horizontal|vertical).
		mode:			'vertical', // Para animación slide.
		transition:		'sine:out', // TODO slide con transición expo da error pues no crea el div vacío.
		speed: 			1000, 		// Velocidad de la transición en efectos.
		periodical: 	5000, 		// Periocidad de la iteración sobre los ítems.
		padding:		0, 			// Aplicar espaciado a cada ítem si se desea (en un futuro será estilo completo).
		fixedHeight:	true		// Alto fijo o flexible para adaptarse al alto de cada ítem.
	}, 
 
	/**
	 * Constructor
	 */
	initialize: function(el, options)
	{
		this.timer 		= null;
		this.container 	= el;
		this.setOptions(options);
		if ( null === this.container ) 
			throw new Error('El contenedor de la lista no se encontró.');
 
		// # Setup container: Establecer el alto al primer hijo del container:
		this.container.setStyles({
			'height':	this.container.getFirst().getComputedSize().totalHeight + this.options.padding.toInt(), 
			'overflow':	'hidden'
		});
 
		// Eventos y run...
		if ( true === this.options.autostart ) {
			this.run();
		}
	}, 
 
	/**
	 * Efecto.
	 * @access private
	 */
	_animate: function()
	{
		var item 		= this.container.getFirst();	// Primer elemento del listado
		var first 		= item.clone(); 				// Clonar el ITEM ORIGINAL para situarlo al final
 
		// Eliminar y efecto:
		switch ( this.options.animation ) {
			// # FADE:
			default:
			case 'fade':
				item.set('tween', {
					duration: 	this.options.speed, 
					transition: this.options.transition, 
					onComplete: function() {
						this._cycleItem(item, first);
					}.bind(this)
				}).tween('opacity', 0);
			break;
 
			// # SLIDE:
			case 'slide':
				item.set('slide', {
					duration: 	this.options.speed, 
					transition: this.options.transition, 
					mode: 		this.options.mode, 
					onComplete: function() {
						this._cycleItem(item, first);
					}.bind(this)
				}).slide('out');
			break;
		}
	}, 
 
	/**
	 * Ciclo: Eliminar el ítem y pasarlo al final.
	 * @access private
	 */
	_cycleItem: function(item, first)
	{
		if ( !$chk(item) || !$chk(first) ) 
			return;
		var itemHeight 	= item.getComputedSize().totalHeight; 	// Alto del ítem para ajustar el container
		// Eliminar y copiarlo al final:
		item.dispose();
		this.container.grab(first, 'bottom');
 
		// FIXME Eliminar el div vacío que deja slide (para MooTools 1.2.6)
		// @see https://mootools.lighthouseapp.com/projects/24057/tickets/194-fxslide-sometimes-clips-the-contents-of-divs
		if ( 'slide' === this.options.animation ) {
			var wrongDivSlide = this.container.getFirst();
			if ( 'div' == wrongDivSlide.get('tag') ) {
				wrongDivSlide.dispose();
				var nextItem 	= this.container.getFirst();
				// Para el ajustar el alto del container, volvemos a coger el ítem superior.
				itemHeight 		= nextItem.getComputedSize().totalHeight;
				if ( 'horizontal' == this.options.mode ) {
					var myFx = new Fx.Slide(nextItem, {
						duration: 	this.options.speed,
						transition: this.options.transition, 
						mode:		this.options.mode
					});
					myFx.hide().slideIn();
				}
			}
		}
 
		// Si no se establece como alto fijo, ajustamos el alto del container:
		if ( false === this.options.fixedHeight ) {
			this.container.setStyle('height', itemHeight);
		}
	}, 
 
	/**
	 * Inicia el bucle para iterar sobre los ítems.
	 */
	start: function()
	{
		this.timer = this._animate.periodical(this.options.periodical, this);
	}, 
 
	/**
	 * Detiene el bucle.
	 */
	stop: function()
	{
		$clear(this.timer);
	}, 
 
	/**
	 * Lanza todo el proceso: establece, si procede, el bucle y los eventos.
	 */
	run: function()
	{
		this.container.addEvents({
			"mouseover": 	function()	{ this.stop(); 	}.bind(this),
			"mouseout": 	function() 	{ this.start(); }.bind(this)
		});
		this.start();
	}
});

Uso

Por ejemplo para elementos con la clase newsticker:

1
2
3
4
5
6

$$('.newsticker').each(function(item){
	var myTicker = new NewsTicker(item, {
		periodical:		5000, 
		animation:		'slide'
	});
});

Opciones

Las opciones, valga la redundancia, son opcionales ya que se establecen las siguientes por defecto:

1
2
3
4
5
6
7
8
9
10

options: {
		autostart: 		true, 		// Comenzar automático o no.
		animation: 		'fade', 	// Tipo de animación, por el momento: fade, slide (mode:horizontal|vertical).
		mode:			'vertical', // Para animación slide.
		transition:		'sine:out', // TODO slide con transición expo da error pues no crea el div vacío.
		speed: 			1000, 		// Velocidad de la transición en efectos.
		periodical: 	5000, 		// Periocidad de la iteración sobre los ítems.
		padding:		0, 			// Aplicar espaciado a cada ítem si se desea (en un futuro será estilo completo).
		fixedHeight:	true		// Alto fijo o flexible para adaptarse al alto de cada ítem.
	}

• (Boolean) Autostart (true): true|false. Comenzar o no automáticamente, obvio.
• (String) Animation (‘fade’): fade|slide por el momento. Tipo de animación (efecto) a usar en las transiciones de ítems.
• (String) Mode (‘vertical’): vertical|horizontal. Modo del efecto slide si se usa..
• (String) Transition (‘bounce:out’): Fx.Transitions (sine|bounce|bounce:in|…). Tipo de transición para el efecto.
• (Integer) Speed (1000): Número. Velocidad de la transición (opción anterior) del efecto.
• (Integer) Periodical (5000): Número. Lapso de tiempo entre el intercambio de ítems.
• (Integer) Padding (0): Número. Espaciado a aplicar al item.
  Me gustaría hacer de esto una opción para aplicar un estilo completo si se decide, daría más control sobre la visualización y corregiría posibles fallos que pudiera haber.
• (Boolean) FixedHeight (true): Número. Alto fijo o flexible para adaptarse al alto de cada ítem.

Notas

Quiero extenderlo bastante más, mejorarlo, añadir más efectos… pero para ilustrar creo que sobra.
Este código se distribuye bajo la licencia del MIT (MIT License: http://www.opensource.org/licenses/mit-license.php), por lo tanto hay que mantener el copyright de la cabecera.

PD: Aún no tengo implementado MooTools en el blog y no hay demo pero pronto pondré alguna.

Demo

Demo y tests en MooShell:
http://mootools.net/shell/XaUJA/3/.

MooShell iframe

Por si no resultará obvio: pulsa en la pestaña RESULT para ver el resultado de la demo.

TODO

1. Cada ítem debe tener su propia altura si los ítems no tienen la misma.

Imagen de ejemplo de código PHP

Contexto

Aprovechando la función the_widget() para llamar a tus widgets desde plantillas de «themes» en Wordpress; imagino que es normal que la gente también vaya queriendo usarlo en los contenidos de las entradas.
Aunque se pueden usar plugins para ejecutar código PHP en el contenido, a mí hace tiempo que no me gusta en absoluto… por cómodo que pueda ser.

Objetivo

Esta es una función simple que he estado probando para llamar, por ahora, a los widgets que por defecto incorpora Wordpress a través de Shortcode. Digo por ahora porque también se puede llamar a otros widgets instalados por plugins, por ti mismo… aunque no se comprueba si están activos ni nada más, solo se comprueba si existe la clase que gestiona el widget -que creo que sobra- y si es una instancia válida (ver siguiente).

Esto significa que los widgets que no utilicen la nueva API, es decir, que no sean instancias de WP_Widget, no se reconocen y no se pueden utilizar. No obstante, migrar un antiguo widget a la nueva API, basada en objetos, es muy fácil ¿eh?

Código

En fin, esto es lo que estoy probando ahora y no va mal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<?php
if ( !function_exists('myWidgetSC') ) {
/**
 * Shortcode para the_widget().
 * 
 * @uses WP_Widget
 * 
 * @param array $atts: Shortcode atts.
 * @return string $output: Salida del widget (the_widget)
 */
function myWidgetSC($atts) {
	global $wp_widget_factory;
 
	// # Parámetros base:
	$output 	= '';
	$msgError	= '<p class="error">%s</p>';
	$instance	= array();
	// No se pasan argumentos extra del widget, es peligroso:
	$defaultArgs= array(
		'before_widget' => '',
		'after_widget' 	=> '',
		'before_title' 	=> '',
		'after_title' 	=> ''
	);
 
	// # Init check:
	if ( empty($wp_widget_factory) ) 
		return sprintf($msgError, 'No tenemos acceso a, o no podemos generar, Widgets.');
 
	// # Options: para Debug
	/*$options 	= shortcode_atts(array(
		'widget_name' 	=> false, 
	), $atts);
	extract($options);*/
	extract(shortcode_atts(array(
		'widget_name' 	=> false
	), $atts));
 
	$widget_name = esc_html($widget_name);
	// FIXME Eliminar la clave widget_name en concreto.
	array_shift($atts); // Eliminar parámetro nombre del Widget para parsear los argumentos del mismo.
 
	// # Check:
	if ( !class_exists("$widget_name") ) 
		return apply_filters('the_content', sprintf($msgError, 'El Widget: ' . $widget_name . ' no existe.'));
	else {
		$widget = $wp_widget_factory->widgets["$widget_name"];
		if ( !($widget instanceof WP_Widget) )
			return sprintf($msgError, 'El widget no es una instancia válida de WP_Widget.');
 
		// Settings del widget original cacheado:
		$widgetSettings = current($widget->get_settings());
		// Formatear instancia final para el widget:
		if ( !empty($widgetSettings) ) {
			// Limpiar los valores cacheados del widget original:
			$defaultSettings= array_fill_keys(array_keys($widgetSettings), '');
			// Parsear los valores pasados por shortcode de acuerdo a los settings del widget:
			$instance 	= wp_parse_args($atts, $defaultSettings);
		}
	}
 
	// # Run...
	ob_start();
	// Menos pesado aunque más inseguro; the_widget() vuelve a instanciar el Widget:
	//$widget->widget($defaultArgs, $instance); // Sin parámetros extra
	// Más seguro pero redundante (con argumentos da problemas con tags html y es inseguro): 
	the_widget("$widget_name", $instance, $defaultArgs);
	$output = ob_get_clean();
 
	// # Return:
	return !empty($output) ? $output : sprintf($msgError, 'El widget no generó contenido.');
}
}
add_shortcode('widget', 'myWidgetSC');

Uso

[widget widget_name="WP_Widget_RSS" url="http://blog.culturadigital.org/feed/" items="5"]

Notas

Opciones comunes de los widgets:

He intentado que se pudieran añadir argumentos típicos de los widgets como before_title y demás pero…, a parte de ser un coñazo por los resultados impredecibles que puede dar el uso de etiquetas html, también es peligroso usarlos a no ser que se haga una limpieza que a mí se me antoja demasiado intensiva, teniendo en cuenta que estamos en el contenido y si se quieren incluir etiquetas html, al menos antes y después del widget, es tan fácil como incluirlas en la entrada y punto.

Más simple:

Obviamente, se puede hacer mucho más reducido y simple, entre otras cosas, si no se quieren comprobar los argumentos del Widget al que se llama por ejemplo (a partir de la línea 50 del código en el bloque condicional).

Más simple todavía:

Yo he preferido documentarme directamente en la clase WP_Widget, pero hay otras opciones. Por ejemplo, en Digging into Wordpress tenéis para widgets sin parámetros.

Aunque hace tiempo de su implantación y de la entrada, no he podido evitar expresar mi descontento con la dirección que está tomando el W3C con cuestiones como esta y HTML5 entre muchas otras. Ya he dicho muchas veces que soy muy talibán de XML, en este caso en concreto de XHTML.

CSS Animations

En mi opinión, esto debería ser parte de las animaciones estándar: SVG, al menos en XHTML. No debería haber ningún problema al incrustarlo en un documento con ambos Doctypes.

Si no, como dicen en los comentarios de la entrada, esto va a empezar a ser lo que fue en su día con la Guerra de los navegadores y un batiburrillo de soportes en todas las tecnologías para hacer lo mismo.
No entiendo por qué el W3C no sigue manteniéndolo todo tan simple como al principio:

• Estructura: (X)HTML;
• estilo visual: CSS;
• animaciones: como parte de SVG, PNG…;
• objetos: object…

Juro que no lo entiendo, imagino que Microsoft y Adobe cada vez ejercen más influencia en el W3C. Una pena
:(

Ejemplo

En definitiva, el estilo para la etiqueta kbd y que se puede apreciar ampliamente en la sección Accesibilidad queda así:

Alt

Reglas CSS

Las reglas CSS son las siguientes:

En mi basic.css:
Una regla genérica y común anterior:

1
2
3
4
5
6

pre, code, tt, kbd {
	font-size:		0.87em;
	font-family:		Monaco, 'Andale Mono', 
				'Bitstream Vera Sans Mono', monospace !important;
	color:			#008000;
}

* Nota: Aunque Monaco me gusta mucho, antes usaba la nueva fuente monoespaciada de Windows Vista para edición de código Consolas, pero su tamaño varía mucho con el resto de fuentes alternativas. Creo que también hay que tener cuidado, aunque no recuerdo cierto, con Andale Mono.
…aunque siempre se puede recurrir a @font-face {} para usar una fuente propia o incluso a cufon.

Personalización para el estilo final:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

kbd {
	margin: 		0 0.5em 0.5em 0;
	padding: 		0 0.5em 0.1em 0.25em;
	width: 			4em;
	height: 		4em;
	line-height: 		4em;
 
	background:		#EEE none repeat scroll 0% 0%;
	border:			0.23em outset #DDD;
	border-bottom-color:	#BBB;
	border-right-color:	#BBB;
	border-radius: 		0.3em;
 
	color:			black;
	text-align: 		center;
	white-space:		nowrap;
}
kbd:hover {
	margin: 		0 0.75em 0.75em 0;
	padding: 		0 0.53em 0.13em 0.28em;
	border:			0.1em outset #DDD;
	border-bottom-color:	#EEE;
	border-right-color:	#EEE;
	cursor:			pointer;
}

Básicamente cambiamos los bordes inferior y derecho a otro color para el efecto de sombreado, además del tamaño para el efecto pulsada. Luego ajustamos los espaciados y márgenes para que, al reducir o aumentar el tamaño de los bordes, el del botón no varíe -al menos demasiado (nota siguiente)-.

Pueden existir problemas al usar medidas relativas… pero yo al menos ya me he acostumbrado a ellas y prácticamente no diseño nada en base a píxeles.
…es algo arriesgado, sobre todo con navegadores poco estándares, pero diseñando de un modo más flexible y aceptando las variaciones de estos últimos -que las tienen con o sin píxeles- al final el resultado es casi más gratificante. Los píxeles quedan casi en exclusiva para elementos que no redimensionen o que solo lo hagan dentro de unos límites conocidos. Por ejemplo un elemento que sepas solo se ampliará o reducirá por un lado y dejes un espacio para una imagen de tamaño fijo. No obstante, incluso en casos así se sigue pudiendo prescindir de ellos perfectamente.

Además ajustamos el texto, como en los teclados, un poco a la parte superior izquierda, un efecto sutil en teclas pequeñas y visible en las grandes.

Jugando un poco, más ejemplos

Aquí viene otra de las bondades de los tamaños relativos: aunque no sean medidas exactas de teclas, las teclas grandes -con más texto- se autoexpanden. Y permiten jugar un poco con su contenido aunque de forma menos semántica. En concreto, añadiendo texto y ajustando la autoexpansión, se le da sentido a las teclas cuando no se usa CSS. Por ejemplo:
Para Ctrl y Alt, el mismo tamaño del texto es suficiente, pero para mayúsculas simples (shift) podemos o añadir la palabra inglesa, u ocultarla mediante algo de CSS de presentación -del que no me gusta pero bueno- y conseguir el tamaño deseado.

⇑ Shift
Versión ocultando shift sin extras:
⇑ Shift
Una tecla más real, mayúsculas corta:
⇑ Shift
Mayúsculas larga:
⇑ Shift

Espacio:
Shift

Retroceso:
←return
:D

Bueno, ahí queda por si le gusta o interesa a alguien.

Todo son datos

En especial me gusta el apunte que hace sobre de la poca importancia que se le da hoy en día a publicar un documento web…
Son datos, y deberían contener hipervínculos, hipervínculos que enlazan más datos y, ya que estamos de moda con Avatar, conforman un todo superior de entidad propia: Una gran red de datos disponible para todo el mundo. Lo que nunca se han cansado de defender los gurús de la web: enlaza, enlaza y enlaza.

Todo se puede relacionar

Cualquier dato, por mínimo que sea, es susceptible de ser enlazado, de ser ampliado; por sí mismo puede significar quizá poco pero tiene un valor incalculable -y diría que infinito- en un conjunto lógico de datos relacionados. De ahí también en parte el valor que mucha gente no ve cuando aportas datos en las redes sociales; la tontería -lo digo por nimiedad- de simplemente etiquetar a personas en fotos, algo a lo que muchos nos negamos, es de un valor incalculable para la empresa que gestione los datos por ejemplo.

Al final y como no, también se vuelve indefectiblemente a un punto importante: los estándares.
Para que la relación entre datos sea viable y compatible. Separar contenido, datos, del diseño visual. Esto es datos en bruto con los que se pueda trabajar, manipular de forma libre.
Lo que ahora me causa algo de sensación es comprobar que se está empezando a consolidar el término web 3.0 y que uno de sus defensores es precisamente uno de estos gurúes: Jeffrey Zeldman. Con el que por cierto comparto las mismas reservas sobre la web 2.0 como mencionaba al final de esta entrada.
Aunque en mi opinión, la llamada web 3.0 es esto que hablamos, una vuelta a los orígenes, maquillada de tecnología punta para rivalizar con la «deslumbrante» y glossy 2.0.

El vídeo

Lo cual vuelve a relanzar mis propósitos sobre algunos conceptos a la hora de publicar datos, por ejemplo, en un blog (el contenido de mi primer blog casero se escribía en XML). O distribuir APIs y canales de distribución -y, como no, relación- de contenido en proyectos para las administraciones.

Conclusiones

En este último caso siento la misma frustración que Berners-Lee cuando veo que la AEMET no publica API, que el INE tampoco, que la DGT al menos ya sí lo hace en parte.
Pero sobre todo, cuando los recursos que desarrollo y publico en el sitio para un ayuntamiento son los menos apreciados: redes sociales, sindicación de contenidos en infinidad de formatos, accesibilidad, semántica, APIs de datos en proyecto; y en su lugar se aprecian cuatro, con perdón, mierdas de efectos y pijadas, precisamente y a lo que vamos, WEB 2.0.

Como anécdota… no deja de impresionarme -y si no es en la gente es en mí- la influencia de Avatar, y no hablo precisamente del películón en exclusiva -que por cierto no he hablado de él aún porque no encuentro palabras, literalmente-, sino del mundo que ha creado Cameron para la misma.
No es que sea un concepto nuevo ni a nivel tecnológico: Internet, ni a nivel filosófico y biológico quizá: Gaia; pero se sitúa en las nuevas tecnologías y ayuda a relanzar la web en este nueva ola de postmodernismo audiovisual donde se empezaba a perder y menospreciar el sentido real de la web. Sí, el de la 1.0 en especial.

Por cosas como estas es por lo que nunca me he visto capaz de borrar las entradas antiguas del blog :D

Por finnnn; por favor, que nos la pongan en abierto si acaso después del Plus; quizá TeleCinco siga teniendo contrato con HBO que, como a la mayoría de los que le interese esta noticia ya sabrán, ya pusieron «Hermanos de Sangre» («Band of Brothers») conociendo que habría otra miniserie para el Pacífico.

Lo genial, aunque lo dudo, sería poderla ver en marzo que es cuando se estrena en USA imagino pero, como decía, yo me conformo con que nos la pongan en abierto. ¿Quizá Cuatro, o Antena 3… que ya han tenido también series de la HBO?

Actualización

Anteriormente la euforia pudo conmigo y hablaba de verla en marzo… ¡qué locura en este país!, ¿quien va a poner una serie en V.O.?? Que bien podrían hacerlo para verlas en tiempo de emisión yankee, total, el Plus por ejemplo emite, o al menos antes lo hacía aunque a deshoras, en V.O.; es decir subtítulos hay que meterle tarde o temprano y más hoy en día con la TDT que imagino van dándose patadas en culo desde que aparecen las emisiones.
O sea… si primero se subtitula, imagino que es el guión que luego queda para el audio localizado, ¿no?
Me respondo a mí mismo: en fin, comercialmente es una tontería hacer eso; al menos hoy en día.

Así que nos quedan algunas herramientas para los aficionados a las series, y en concreto quizá, del V.O.
A riesgo de que se pasen por aquí los nuevos inquisidores de la Economía Sostenible, la combinación sería:

• Mininova (original) + subtitulos.es o análoga. La mejor y más rápida opción en mi opinión ya que incuso puedes hacerte tus propios arreglos para los subtítulos, si no incluso intentar traducirla tú mismo.
• O más simple: seriesyonkis y tal y cual. Creo que es muy obvio que van a tardar más.

Enlaces de interés

• Enlace a la promoción de la HBO
• Noticia en Canal Plus
• The Pacific en Wikipedia

PD: Por cierto, la cabecera es muy al estilo, conceptualmente, de Mad Men.
Por otra parte… viendo la suerte que tengo en mis deseos y peticiones sobre series… ggg, me da que no la veremos en abierto hasta el otoño o invierno de 2010 y eso con suerte :D

PD2: Ummm… estaba pensando quien era el actor rubio de pelo rizado -tipo querubín británico- que sale en varias ocasiones y trailers y ya me he acordado de quien es: ^^! Tim o Timmy -Joshep Mazzello-, de Parque Jurásico, jiji :D

La foto

Bien, el fondo es el Golden Gate ^^

El aparato del fondo es un Corsair de Grumman (F4U Corsair).

¿Cual es el siguiente más próximo?

:shock:
En un principio, por contexto y de un vistazo rápido, había pensado que era un Hellcat ya que el ángulo del morro no es tan pronunciado como el del Wildcat. Pero más de cerca y mirando la protección -esto pasa a la siguiente cuestión-, por cierto increíblemente reluciente, del eje de la hélice no me parecía que fuera ninguno de los dos y sí más un Corsair. Pero no puede ser este último por la forma del ala.

De seguido y por la tobera en la nariz del morro, pensé que quizá fuera algún caza de la aviación de tierra, en concreto de los Marines (USMC), por ejemplo el famoso P40; pero el morro es más bien ovalado y no circular completamente, además de un motor radial abierto. Lo que me llevaba de nuevo a un caza embarcado de la Marina.

Por la misma razón anterior, la forma del morro y el rotor despejan la duda sobre si es alguno de Hawker, por ejemplo el Tempest o el Typhoon, a parte de que es extraño que entre 3 aviones americanos incluyeran uno británico. Así que en todo caso sería un P-47 pero tampoco coincide ni esa tobera ni la forma del rotor.

Además, y de aquí las suposiciones iniciales acerca de un Grumman, los anteriores son de ala elíptica o al menos no son alas más o menos rectas. Y en la foto, ese caza tiene un borde exterior del ala con toda la pinta de un Hellcat, un ala recta o como mucho trapezoidal.

Con esto se barajan las opciones más conocidas y famosas de la aviación de la marina yankee en el periodo de la Guerra del Pacífico en concreto, que creo es en donde se concentra el contexto de la foto.

Así que solo me queda la opción de que pudiera ser un Curtiss P36; aunque la tobera sigue despistando mucho y es posible que se colocara para mejorar el rendimiento -refrigeración ¿y turbo?- al ser un aparato viejo, y no sea de ningún diseño original.

B-25 Mitchell o B-17

Como decía, al fijarme en la protección del eje del segundo aparato vi el reflejo desde donde se toma la foto. Yo imagino que se hizo exprofeso aunque creo que el resultado fue algo peor del esperado.
No obstante, se puede ver bastante bien el aparato que acompaña a los otros dos y desde parece ser que se toma la foto.

Es un bombardero medio de la USAAF y es más factible que un fotógrafo trabaje desde allí que desde cualquier otro aparato más pequeño. Al principio y rápido creí que era un B-17 del modelo de fuselaje en aluminio, el plateado al estilo de los nuevos -relativamente, claro- B-52.
Pero la forma del morro, o sea, donde la posición del operador de bombardeo o de la mira del bombardeo y los artilleros de proa es algo diferente, más cerrada y más parecida al B-25 Mitchell. La forma del morro en general también está más estilizada y menos tosca -¿aerodinámica?- al estilo del B-25.

Estas cuestiones también lo distinguen de los modelos comunes de Liberator (B-24) con un morro de cabina abierta para los artilleros de proa. Así que casi aseguro que es un B-25 Mitchell.

Sugerencias

…pues eso, amantes de la aviación: estáis invitados a participar ;)

Actualizaciones y soluciones

Sobre el primero, acabo de encontrar que también podría ser algún Douglas, en concreto el A-33…
También podría ser un bombardero ligero como el Avenger, mirando…

Como a no poca gente creo, me encantan los créditos finales de The Bourne Identity (El caso Bourne) y la saga en general -creo que es obvio que Extreme Ways tiene mucho que ver :D -.
Hace poco vi algunos vídeos en Youtube para recrear los efectos de los créditos desde diferentes aplicaciones pero sobre todo con After Effects, que por cierto es genial, y en ese mismo instante pensé: vamos a demostrar que no necesitamos Flash para hacer lo mismo de forma estándar, es decir: con SVG.

Ejemplo de créditos finales Bourne con SVG

Anoche realicé mi primera aproximación en apenas una hora y los resultados prometían mucho. Debo aclarar que solo es eso: una aproximación, además de que no estoy muy puesto aún en la animación declarativa -nativa- de SVG ya que solo está soportada por Opera, Safari creo, y poco más. Normalmente yo utilizo scripting pero con el tiempo y el aumento de soporte todo pasará a ser declarativa, en su mayor parte al menos.

Lo que quiero decir es que estos han sido mis primeros pasos en animación declarativa SVG, no está optimizado ni acabado, solo pretende mostrar el potencial de SVG.

Resultado

Muy importante: Como decía, la animación declarativa solo está soportada -que yo sepa hasta ahora- en Opera y Safari, no sé si webkit en general como por ejemplo Chrome. Por lo tanto necesitas un navegador compatible para ver la animación de este SVG, aunque no de su contenido para ver como funciona.

Nota: :D Es muy recomendable escuchar de fondo, sobre todo el comienzo, el tema «Extreme Ways» de los créditos; es del álbum, estupendo por cierto, «18», de «Moby», y aunque no lo he mirado creo recordar que se puede hacer también con animación SVG.

Me he encontrado de repente sorprendido porque aún no había escrito nada sobre SVG… con lo inmerso que estoy en ello ahora mismo en relación a las Battleground Europe Tools; una aplicación de monitorización para jugadores de Battleground Europe y que está centrada en la creación de un mapa lo más parecido al del juego, para poder seguir el desarrollo de la campaña online y sin necesidad de entrar en él. …de hecho, tengo una sección en el blog sobre el proyecto: BE/1SCTools.

Para no enrollarme mucho más, solo voy a dejar unas capturas del potencial de SVG como estándar para gráficos vectoriales y escalables en la web; es decir, en lugar de formatos o tecnologías propietarias como por ejemplo gif, flash… y/o no nativos como este último. Además sin necesidad de plugins, como el de Adobe por ejemplo, y sin animaciones declarativas ya que aún están muy poco soportadas, sustituyendo las mismas con Javascript, en este caso Ecmascript.

Capturas Battleground Europe Tools

v.39beta:

Scripting: Javascript, Ecmascript, DOM…

En el sentido del scripting, he aprendido mucho gracias, paradójicamente, a las pocas, por no decir ninguna, librerías Javascript que trabajan con el DOM de XML… o al menos de SVG en concreto. Y me refiero muy en parte a jQuery que desde luego hace lo que indica en su eslogan pero lo cierto es que se queda corta en el sentido global de extender y mejorar Javascript -como ya hace comentaba Anieto2K-. Es decir, por ejemplo mootools se abstrae más del tipo de documento o del DOM en este caso para montar un framework genérico que extienda y mejore de verdad Javascript… lo que ellos denominan «como debería ser Javascript».

He de decir que en este caso me ha sorprendido mucho mucho Prototype, el primer framework Javascript que usé en los albores de AJAX en la web 2.0, e imagino que es debido a su sólida génesis. De ahí que ni haya crecido como otras librerías… ni se haya desvirtuado que es lo bueno.

Lo fundamental: diseñar en base a estándares

La cuestión fundamental es: <object> nos da muchísimas más posibilidades y es más flexible que <img>; además es estándar, compatible con los navegadores actuales y con soporte para mucho mucho tiempo en el futuro.

La funcionalidad es la misma prácticamente que con la etiqueta propietaria de Netscape (img) usado de forma básica, pero ésta es extensible de mil y una maneras ya que se pueden usar parámetros que se abstraen del marcado estructural, y además es mucho más flexible y potente para contenido alternativo en navegadores que no lo soporten.

Es más estándar y coherente, por lo tanto más semántica, por ejemplo se puede establecer el mime type del objeto, etc. O sea, proporciona más información al navegador que, en teoría, debería redundar en un mayor rendimiento y menos coste de proceso.
Es decir, todo son beneficios.

¿Por qué resistirse?

Existe un ámbito de ciertas opiniones clásicas que se escudan en la usabilidad y que saltan a la palestra siempre que se habla de Estándares web, de marcado basura, obsoleto, Flash, soporte Internet Explorer y profesionalidad; en especial cuando al parecer se ejerce intrusismo laboral y se presupone falta de experiencia.
En referencia a esta última cuestión: No entiendo porqué les parece un sacrilegio olvidar de una vez a Internet Explorer 6 e inferiores, y por añadidura prácticamente el HTML clásico y obsoleto. En mi opinión diría que ya está bien y basta de dar soporte a un software con más de diez años y 5 sin actualizarse por no decir 7. Eso, es una aberración obvia en el desarrollo -y soporte- de software y no hubiera pasado nunca si su propietario no fuera Microsoft.

Profesionalidad o pereza

No, no es dar al cliente algo que funcione seguro, se trata de ser profesional; y ser profesional significa trabajar bien y superar las dificultades -entiendo yo, claro-, no hacer chapuzas de las que tenemos muchos ejemplos, ejemplos profesionales: web del Congreso, de Telefónica (ver ejemplo de la copia para promoción IPhone: Apple con Javascript válido y Telefónica con Flash xD) y algunas de Microsoft…

Quiero decir, SÍ es posible diseñar en base a los estándares y que tu diseño funcione, por ejemplo, en Internet Explorer -no me refiero al 6 en exclusiva- sin tener que escribir marcado basura, propietario u obsoleto. Otra cosa es pasar del tema, cobrar un pastón pero seguir siendo un chapucero, aun teniendo quinientos mil títulos académicos.

…y tampoco me creo que porque se use un sistema de gestión mastodóntico -administración pública- sea imposible proporcionar salidas de documentos válidas. Y si es el caso, si han migrado y actualizado la administración, deberían haber migrado también ese sistema… por que no será por falta de dinero para hacerlo.

Ejemplos

Como mencionaba, en el ejemplo de una imagen de cabecera bonita la tendencia natural es usar una división, aplicar estilos incrustados e insertar una imagen de fondo. La solución directa también podría ser diseñar dos versiones o más de una imagen, como ocurre en Wordpress cuando subes medios o casi en cualquier CMS.
Bien… :D rentable no es que sea mucho la verdad, eso sin contar con que por ejemplo quieras posicionar esa imagen de mil formas distintas: ¿una versión para cada caso o estilo que quieras aplicar?
¿Porqué tener 20 versiones de la misma imagen para solo aplicar estilos?

La solución, en mi opinión obvia, es usarla como fondo y aplicar CSS. El problema a superar como decía es usar marcado válido, estructural y semántico. Ese es el problema que hay superar y ser profesional.

Ejemplo no profesional o falto de recursos

Lo más terrorífico: tengo mil versiones para una imagen

1
2
3
4
5
6

<p>
	<img 
		src="mi versión de imagen, de entre unas 4/5 para aplicar un estilo caprichoso" 
		alt="Mi contenido alternativo se reduce a esta patatilla." /><br />
		Cristina Scabbia de Lacuna Coil.
</p>

Si bueno… puedes incrustar estilos, javascript… o incluso podría no ser ni javascript intrusivo y CSS externo pero es muy muy fácil caer en la clasitis por ejemplo; sin contar con que img se cae en XHTML 2.0, y se caerá de todo en un futuro muy cercano, y sus limitaciones obvias.

Estilos incrustados

1
2
3
4
5
6

<div 
	class="headerImg" 
	style="height:200px; background:#333 url(http://farm1.static.flickr.com/41/115559256_918ab03490_o_d.jpg) 
	no-repeat 0 30%;">
	<p>Cristina Scabbia de Lacuna Coil.</p>
</div>

Algo es algo, al menos eliminamos la etiqueta imagen, las posibles versiones de una imagen y pasamos a usar una sola. Igualmente se nos va al garete sin CSS.

Como tengo recursos, puedo ser estándar

Esto es y debería ser la base. Que un maquetador se dedique a hacer las cosas correctamente, como mandan los cánones -en este caso los estándares web-; tener una versión portable y mantenible venga quien venga después; jueguen como quieran jugar después con los objetos y les den la salida que prefieran. Como hemos dicho mil veces: abstracción de la estructura, en este caso frente al diseño visual:

Object

1
2
3
4
5
6
7

<div class="headerImg">
	<object data="http://farm1.static.flickr.com/41/115559256_918ab03490_o_d.jpg" 
		type="image/jpeg" height="200px" width="100%">
		<param name="background-position" value="0% 30%" />
	</object>
	<p>Cristina Scabbia de Lacuna Coil.</p>
</div>

Cojonudo:
Por lo pronto, funciona, aunque no del todo bien, sin CSS, o sea de forma básica. Podemos jugar con los parámetros del objeto desde cualquier lenguaje de servidor que parsee el HTML, con Javascript… el caso es que se abstrae del estilo visual.
Es coherente y semántico ya que proporciona información a los renderizadores: navegadores, etc.

Por ejemplo les dice que es una imagen/jpeg y se supone que en un futuro si no ya, da la posibilidad a los desarrolladores de navegadores web optimizar su funcionamiento y hacerlos más rápidos, sino ya desarrollar plugins específicos para imágenes, en concreto si tienen transparencias o no (png, gif vs jpeg, bmp…)… bff, y muchas cosas más imagino.
Es decir, todo lo que sea dar información concreta sobre los elementos del documento es beneficio y renderización optimizada del navegador, algo que creo que se pierde, y se perdía, con HTML que normalmente es muy poco semántico, hasta ahora al menos.

Casos probados

Todo funcional, con Javascript y CSS al vuelo

Usando Javascript para gestionar el objeto:

1
2
3
4
5
6
7

<div class="headerImg">
	<object data="http://farm1.static.flickr.com/41/115559256_918ab03490_o_d.jpg" 
		type="image/jpeg" height="200px" width="100%">
		<param name="background-position" value="0% 30%" />
	</object>
	<p>Cristina Scabbia de Lacuna Coil.</p>
</div>

Vamos a jugar un poco con la imagen, no necesito más versiones de la misma, no necesito CSS incrustado, solo los parámetros del objeto que para eso están:
En este caso se gestiona con Javascript (jQuery) generando, eso sí, CSS al vuelo, pero como digo… es un proceso externo al marcado que es de lo que se trata.

param name="background-position" value="50% 30%":

param name="background-position" value="70% 70%":

param name="background-color" value="red":

param name="background-border" value="5px solid blue":

param name="background-position" value="50% 0"
param name="background-border" value="1px solid blue"
param name="border-radius" value="3em 3em 0 0":

¿Más pequeña?
<object [...]height="100px" width="50%"[...]
param name="background-position" value="50% 0"
param name="background-border" value="1px solid blue"
param name="border-radius" value="3em 3em 0 0":

Conclusión

Con imagen (<img>) es inevitable o caer en clasitis o establecer atributos no estándares (hacks). Además se hace trabajar al navegador con cuestiones raras que no tiene porqué entender; es decir: debe intentar buscar atributos, por ejemplo rel -que se usa mucho y mal para hacks ya que su función no es ni por asomo esa salvo contadas excepciones- que no concuerdan con nada de lo que conoce. Cuando si usamos un objeto, sabe perfectamente de qué se trata, lo renderiza y punto porque él no se encarga de gestionar sus parámetros; al menos y que yo sepa en este caso (mime type: imagen/jpeg), no sé exactamente como se comportan con otros objetos pero en cualquier caso les ayudamos a comportarse mejor porque concretamos un medio.

Alguien puede pensar que simplemente es una pasarela para atributos CSS, pero no obstante es igual de válido que con imagen (van a comportarse de la misma manera aplicando clases y reglas CSS) y te ofrece además estas posibilidades: gestionarlo con cualquier lenguaje sin marcado no válido, inventado o extra. Además, tu marcado será válido también para XML, lo que lo convierte en portable, estándar y por lo tanto mantenible, y compatible con el pasado y futuro.

En resumen: Es por lo que precisamente, actualmente el W3C mantiene <object> en el estándar para elementos multimedia frente a la simpleza y pobreza de <img> de Netscape. Y obviamente porque es un elemento multimedia, claro.

¿No es demasiado complicado?

No nos equivoquemos, object puede ser tan simple como img:

1
2
3
4
5
6
7
8
9

<img 
	src="http://farm1.static.flickr.com/41/115559256_918ab03490_o_d.jpg" 
	width="25%" 
	alt="Cristina Scabbia, Lacuna Coil" />
<object 
	data="http://farm1.static.flickr.com/41/115559256_918ab03490_o_d.jpg" 
	width="25%">
	Cristina Scabbia, Lacuna Coil
</object>

Pero es aún mejor, potencial del contenido alternativo y parámetros propios:

1
2
3
4
5
6
7

<object type="image/jpeg" 
	data="no existo" width="25%">
	<p class="italic">Tu navegador no puede mostrar esta imagen de <a 
	href="http://es.wikipedia.org/wiki/Cristina Scabbia" 
	title="Cristina Scabbia en Wikipedia">Cristina Scabbia, Lacuna Coil</a> 
	cantando con su característico gesto apasionado, bajo la tenue iluminación azul del escenario.</p>
</object>

Tampoco quiero confundir a nadie, el cierre de la etiqueta de imagen solo significa que esa etiqueta no tiene contenido, pero se puede especificar con contenido:

1
2
3
4
5
6

<img src="no existo" width="25%">
	<p class="italic">Tu navegador no puede mostrar esta imagen de <a 
		href="http://es.wikipedia.org/wiki/Cristina Scabbia" 
		title="Cristina Scabbia en Wikipedia">Cristina Scabbia, Lacuna Coil</a>
		cantando con su característico gesto apasionado, bajo la tenue iluminación azul del escenario.</p>
	</img>

No obstante sigue siendo muy pobre en comparación con object, no es estándar y por lo tanto si se renderiza bien solo es fruto de una funcionalidad específica del navegador en uso, por lo tanto es jugar con fuego. De hecho, una etiqueta de cierre de img está prohibida.
Más referencias: W3C – HTML4

Salvando las dificultades

Sin Javascript y con reglas CSS

1
2
3
4
5

<object 
	data="http://farm1.static.flickr.com/41/115559256_918ab03490_o_d.jpg" 
	type="image/jpeg" 
	class="headerImg"></object>
	<p>Cristina Scabbia de Lacuna Coil.</p>

Yo prefiero con XML cerrar una etiqueta vacía: class="testImgHead"></object> class="testImgHead"/>

[...].static.flickr.com/41/115559256_918ab03490_o_d.jpg"/>

Cristina Scabbia de Lacuna Coil.

Para solucionar la expansión máxima de la imagen, bastaría con añadir una clase CSS que la redujera en el caso de estar desactivado Javascript. Ej:

.adjustHeaderImageNoJs { width:200px !important; }
/* Puede bastar con !important (cuidado IE6) pero dependería del CSS 
y siempre se puede aplicar más especificidad con herencia */
html body .post .entry .etc... div.headerImage.adjustHeaderImageNoJs object { width:200px; }

¿Cómo? «Captain Obvious to the rescue» que dirían los yankis ^.^ , muy fácil -relativamente, claro-, eliminando dicha clase mediante Javascript 8) … o/y viceversa.
Por ejemplo y a bote pronto -ojo-:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Entendiendo que tenemos esta y el resto de funciones básicas
// ...porque es un coñazo, ponerme a escribir ahora aquí el bucle para encontrar la clase.
var newClasses	= ''; // Esto será string, no array.
var objectClasses	= new Array();
var myObjects		= document.getElementsByClassName('headerImg'); // DOM 2 en todo caso
 
for ( var i; i = 0; i <= myObjects.length; i++ ) {
	var myObject		= myObjects[i];
	var objectAttrClass	= myObject.getAttributeNS(null, 'class');
	var objectClasses	= objectAttrClass.split(' ');
 
	// Eliminar todas las clases:
	myObject.removeAttributeNS(null, 'class');
 
	// Volver a añadirlas excepto la que no queremos:
	for ( var i; i = 0; i <= objectClasses.length; i++ ) {
		if ( 'adjustHeaderImageNoJs' != objectClasses[i] ) { // La clase que ajusta el objeto sin Js
			newClasses += objectClasses[i] + ' ';
		}
	}
	// Volver a añadir el atributo de clase
	myObject.setAttributeNS(null, 'class', newClasses);
}
// Resto de instrucciones de proceso del objeto.

..mmm, como siempre, con jQuery sería tan sencillo como esto:

1

jQuery('.headerImg').removeClass('adjustHeaderImageNoJs');

Sin Javascript ni CSS

Tendríamos un problema ya algo serio ya que la imagen se expandiría sin remedio, esta vez sí, sin alternativa a usar una etiqueta de imagen… que no obstante, tendría el mismo problema:

Cristina Scabbia de Lacuna Coil.