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.

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.

Como siempre, ahí va un poco de contexto:

Contexto

En el sitio web donde trabajo -y en este blog-, hasta hace pocos días, usaba el siguiente código para maquetar una imagen bonita de cabecera para algunas entradas o secciones.

Marcado no estructural

Por ejemplo:

1
2
3
4
5

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

La cuestión era usar una imagen ya existente a tamaño original, ponerla como fondo para esa cabecera y añadir texto descriptivo a modo de visor en lugar de texto debajo de la imagen:

Ejemplo de imagen bonita de cabecera

Solución

Usar una etiqueta object para la imagen, lo cual además de ser estándar actualmente, se adelanta a XHTML 2.0 y ya estás maquetando con soporte para un futuro muy lejano; todo esto sin olvidar que si estructuras en XHTML, es XML y las migraciones o la portabilidad se mantienen.

¿Por qué object?

Bien, usar un objeto va a dar muchísimo juego y las opciones pueden ser muchas. En este caso, no necesito inventar atributos ni etiquetas, que se podría hacer pero mantendremos un marcado estándar. Es decir:
Puedes seguir usando una etiqueta de imagen pero para aplicar dimensiones y posiciones deberías usar o peripecias o marcado no válido como atributos raros que luego tendrías que eliminar con JS. En este caso deberías inventar algo para posicionar el fondo. ¿El atributo rel?, no, rel por mucho que nos pueda servir y sea estándar no es para eso… pero ¿por qué seguir pensando?:
OBJECT: Se creó para esto justamente, admite más atributos que son completamente coherentes. Admite contenido alternativo. Admite parámetros de configuración que se abstraen precisamente del marcado que es lo que realmente queremos.

¿Por qué Javascript?

Aunque la tercera cuestión es la más importante, con Javascript, y jQuery en concreto, fabricas una funcionalidad más sólida que, como ya he dicho antes, con CSS avanzado y parcialmente soportado, aunque igualmente la base de todo sea XPath (aludimos a los selectores avanzados de CSS).

¿Por qué XML?

Lo bueno de XML y que tu maquetación básica sea estándar, es, por ejemplo, el uso de Javascript:
Mañana, si quiero eliminar el Javascript puedo hacerlo perfectamente y la funcionalidad de la imagen -el marcado XHTML estándar y semántico- va a seguir prácticamente igual. En este ejemplo se desproporciona la imagen pero es corregible mediante CSS si se desea.
Otra opción, al ser XML, es que puedes aplicarle por ejemplo XSLT si lo prefieres.

En definitiva, hay muchísimas opciones desarrollando en XML, desde que conocí el lenguaje no he hecho otra cosa más que ver sus ventajas :D

Marcado estándar, coherente y semántico

1
2
3
4
5
6
7

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

Con Mime type:

1

[...]<object type="image/jpeg" [...]

Todo es válido, estándar, semántico y sencillo.
Para object puedes establecer incluso el mimetype, puedes establecer como contenido alternativo tu imagen y gestionarla de nuevo con lo que prefieras. Bastaría con meter dentro de la etiqueta del objeto el contenido alternativo, en este caso nuestra imagen que queremos mostrar, e igualmente aplicarle cambios, o dinámicos, o mediante estilos, o volviendo a los inicios, con estilos incrustados:

1
2
3
4
5
6
7
8
9
10

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

Y… vuelta a empezar por ejemplo con modificaciones JavaScript si queremos.

Es decir, este es el proceso por descarte:
XHTML válido + Javascript -si falla Javascript->
XHTML válido y usable -si falla XHTML (object)->
marcado usable tradicional que, aun pudiendo no ser válido, igualmente era la primera opción.

Proceso con jquery

Pues como siempre que usamos esta fantástica librería, muy sencillo: Un poco de XPath y ya está.

Código Javascript

Bueno… un poco, pero obviamente se puede y debe mejorar con lo cual te extiendes un poco más y te puede salir algo así:

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

function imageHeaderPosts(elm) {
	if ( jQuery(elm).length > 0 ) {
		// INIT:
		var errorMsg	= 'No se puede crear un visor de imagen para ' + elm + '.';
		var parentElm	= jQuery(elm);
		var objectElm	= parentElm.children('object');
		if ( true !== objectElm.length > 0 )
			throw new Error(errorMsg + ' No contiene un objeto a procesar.');
		var bckgImg, imgHeight, bckgColor, bckgPos;
 
		// Atributos por defecto:
		var defImgHeight= '200px';
		var defBckgImg= '';
		var defBckgColor= '#333';
		var defBckgPos	= '0% 20%';
 
		// VISOR:
		imgHeight 	= objectElm.attr('height');
		bckgImg 		= objectElm.attr('data');
		bckgColor 	= objectElm.children('param[name=background-color]').attr('value');
		bckgPos 		= objectElm.children('param[name=background-position]').attr('value');
 
		// Check:
		if ( 'undefined' === typeof(imgHeight) ) 
			imgHeight	= defImgHeight;
		if ( 'undefined' === typeof(bckgImg) ) 
			bckgImg		= defBckgImg;
		if ( 'undefined' === typeof(bckgColor) ) 
			bckgColor	= defBckgColor;
		if ( 'undefined' === typeof(bckgPos) ) 
			bckgPos		= defBckgPos;
		// Run...
		parentElm.css({
			'height':				imgHeight, 
			'background-color':		bckgColor, 
			'background-image':	'url(' + bckgImg + ')', 
			'background-position':	bckgPos, 
			'background-repeat':	'no-repeat', 
		});
		objectElm.remove();
	}
}
// Lanzar:
imageHeaderPosts('div.headerImg');

Como hemos dicho antes, lo único que hacemos es aprovechar los parámetros de configuración del objeto. Nosotros les aplicamos JavaScript, pero están ahí para cualquier otro lenguaje o proceso. La cuestión es mantener el marcado coherente, limpio y sin fabricar cosas raras :)

Sobre el comportamiento en sí es necesario aclarar: Usamos una división contenedor tanto para buscarla como para aplicarle cambios: <div class="headerImg"> pero también podríamos actuar directamente sobre el elemento object con unas cuantas modificaciones más.

Resultado

Cabecera bonita usando XHTML (object) y Javascript

Cabecera bonita usando XHTML (object) SIN Javascript

Cabecera bonita con object y Javascript

Cabecera bonita con object SIN Javascript

Otras consideraciones

Algunas otras aplicaciones y/o alternativas y en las que he pensado mientras escribía esto han sido: usar tu propio Namespace -más válido-; si usas Wordpress, tu filtro para etiquetas propias; o simplemente CSS experimental:

Wordpress

Si usas Wordpress, quizá una solución más heterodoxa sea aplicar filtros propios para generar etiquetas.
Este es un ejemplo sencillo del uso de filtros para aplicar al contenido:

1 2 3 4 5 6 7 8

function myFilterTest($content) { $content = str_ireplace('<test>', '<strong>', $content); $content = str_ireplace('</test>', '</strong>', $content); // Más técnico y costoso: //$content = preg_replace('#\<test\>(.*?)\</test\>#si', '<strong>\1</strong>', $content); return $content; } add_filter('the_content', 'myFilterTest');

Para aplicarlo a este ejemplo ya depende de tu imaginación.

Namespace propio

Etiquetas propias con un «Namespace» propio también puede parecer demasiado extremo :mrgreen:
No obstante, lo mismo lo pruebo …porque de lo que se trata es de experimentar ;)

CSS

Por último y como dije al principio, también es posible mediante CSS pero si pensamos, por ejemplo, en la posibilidad de que Javascript esté deshabilitado… es mucho más probable que el navegador no soporte los selectores avanzados de CSS entre otras características.

Información:
Esta entrada es antigua, se ha reabierto -y actualizado un poco- pero data de al menos casi dos años, de ahí referencias obsoletas a temas como «dimensions», el cual se incluye hace tiempo ya como base de «jQuery».

Un poco de Off Topic:

Si hay algún lector habitual de Cultura Digital ya conocerá mi habitual tendencia a irme por las ramas o establecer contextos sobre el tema central de la entrada… Qué le voy a hacer, después de todo, esto es un blog -un blog nacido con pretensiones artísticas- no un compendio de artículos técnico-temáticos; así que siempre me voy a permitir la libertad de divagar -y puede que incluso utilizando recursos literarios- un poco o un mucho, según me de ;)

Pero en fin, por ahora, vamos con ello:

Contexto

Aunque llevaba tiempo resignado aún habiendo soluciones, tampoco era un problema demasiado severo siempre que diseñaras en «fixed». Recordé que Cameron Moll, en el famoso «CSS Mastering» de Andy Budd -la traducción de Anaya® no es gran cosa- indicaba una expresión propietaria de IE con JavaScript para «solucionar» el problema.

Soluciones habituales

En el portátil dónde suelo probar el diseño en IE (Windows XP SP2 + IE6 de casa) no me ha funcionado, está a 1024, y ninguna de las otras soluciones que he encontrado, como la del «crack» Dean Edwards, tampoco han servido de mucho. Entre ellas algunos resets de prestigio como el de Yahoo, del mismo Dean Edwards…

Información
Actualizado: Hoy por hoy -09/09-, el mismo Edwards ha desarrollado soluciones de compatibilidad con estándares, y en este caso en concreto con CSS, dónde evidentemente ya podemos usar min-width, max-width y muchos otros, no sé cuantos, pseudo-selectores en casi o todas las versiones IE, al menos 6, 7 y 8.
Enlace: Dean Edwards IE7 Actualizaciones

Test

El caso es que el resultado de laguardiadejaen.com para IE, con unos pocos arreglos sobre imágenes y un CSS con unas 6/7 reglas para solucionar problemas específicos, no difiere mucho del diseño basado en estándares o por ejemplo del resultado en FF (Firefox). Pero… tenía un inconveniente bastante desagradable que me alarmó al ver los accesos por resoluciones de pantalla:

Resoluciones de usuario

El último cambio de look se basaba en esto, una ampliación de la anchura gracias a la creciente facilidad para adquirir pantallas planas o monitores -¿monitores?… me atrevería a decir que prácticamente se han extinguido en el ámbito doméstico-, pues eso: resolví que 1260 podría ser en poco tiempo la media… de hecho, casi lo es ya, pero por ahora continuamos en 1024.
Así que cambié a un diseño fluido de 1000 píxeles mínimos, algo justo pero válido para resoluciones de 1024, y 1260 de máxima anchura para resoluciones más grandes y que no diera un ancho excesivo.

Bien… pues encontré que había bastantes accesos a 800…, ¡Dios! -aún no había tanto acceso con pda’s, móviles, etc-. A 800 y con I. Explorer, sin poder usar min-width, ufff… aunque no hice nada en ese momento -había cosas más serias-, al final era inevitable usar una solución en un trabajo para un organismo público:

La solución: de nuevo jQuery

Dimensions:
En una entrada anterior hablaba de como me sorprendió este plugin para jQuery… Así que después de probar mil y un hacks que, como decía, no me convencieron y sobre todo, no funcionaban (por ejemplo para usar un reset debes usarlo desde el principio… y el que estés usando seguir usándolo), decidí probar con JavaScript, jQuery y su plugin Dimensions:

Código JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript" charset="utf-8">
// <![CDATA[
jQuery(document).ready(function() {
	if ( jQuery.browser.msie ) {
		jQuery(window).resize(function() {
			var windowWidth 	= jQuery(window).width();
			var wrapper 		= jQuery('#wrapper');
			if ( 'number' == typeof(windowWidth) && 'object' === typeof(wrapper) ) {
				if 		( windowWidth < 1000 )	wrapper.width(1000);
				else if 	( windowWidth > 1260 )	wrapper.width(1260);
				else							wrapper.width('98%');
			}
		});
	}
});
// ]]>
</script>

Y para hacer un test dejo esto:

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

<script type="text/javascript" charset="utf-8">
// <![CDATA[
jQuery(document).ready(function() {
	// IE, simular max y min-width con dimensions:
	jQuery(window).resize(function() {
		var windowWidth	= jQuery(window).width();
		var wrapper		= jQuery('#wrapper');
		var wrapperWidth	= wrapper.width();
		var msgWindow	= 'Resolución: ' + windowWidth;
		var msgWrapper	= 'Wrapper ajustado a: ' + wrapperWidth;
 
		if ( windowWidth < 1000 ) {
			wrapper.width(1000);
			alert(msgWindow + ' min-width activo!.' + '\n' + msgWrapper);
		} else if ( windowWidth > 1260 ) {
			wrapper.width(1260);
			alert(msgWindow + ' max-width activo!.' + '\n' + msgWrapper);
		} else {
			wrapper.width('98%');
			alert(msgWindow + ' dentro de los límites.' + '\n' + msgWrapper);
		}
	});
});
// ]]>
</script>

Obviamente, en un navegador estándar, restrinjo el ancho con la división wrapper que envuelve la maquetación, un 98% me parece bien para aplicar un pequeño margen en resoluciones inferiores a 1260 y en concreto a 1024 trabajando a 1000 píxeles más o menos.

Además, piensa que, en el caso de los comentarios de un blog por ejemplo, se ahorran implementaciones extra y recursos como chequeos de usuarios -aunque siga habiendo spam en Facebook- ya que, en general, se usa una gestión externa con los beneficios que ello conlleva, aunque también, obviamente, sus desventajas.

(16/01/2010) Muy importante: No estoy seguro porque no he hecho todas las pruebas necesarias, pero al menos a mí, en dos servidores y aplicaciones distintas:
El script (js) de la librería de Facebook me da error sirviendo como: application/xhtml+xml, es decir XML de verdad.
En el blog funciona porque se sirve como html plano, al menos el documento real, las cabeceras; el marcado, DocType y tal es otro tema aunque debería ser el mismo.
Es decir: Funciona sirviendo como text/html

Tutorial rápido

Bien, en cualquier caso, paso ya a escribir esta especie de minitutorial rápido para aquellos que, pese a darle tanto bombo, resulta que el vídeo de 8 minutos -como ya ha comentado alguien por ahí- no son tan 8 minutos y sí más bien unos cuantos más, sin contar porrazos al teclado estilo «niño alemán de Youtube», etc.

Como siempre recordar que solo pretendo echar una mano a aquellos que, quizá como yo, se hayan atrancado intentando implementar el servicio por su cuenta o a través de plugins. Personalmente soy bastante poco amigo de los plugins -en Wordpress me refiero-… esto ya es otra historia. aunque reconozco su valía para usuarios web finales que, a decir verdad, hoy no son lo que era antes: Es decir, no hay porqué ser un diseñador o desarrollador web para tener un blog, la verdad.
Así que vamos allá:

Empecemos

Al menos, esta es la forma como yo lo he hecho, liberando al sitio web de librerías propias -aunque estoy deseando probarlo al completo en PHP- y creando un sistema más o menos rápido y sencillo mediante la api y librerías de Facebook. Vamos, lo normal.

1. Creando la conexión Facebook App – tu blog

Esto básicamente lo podéis mirar aquí:
Facebook Connect – Tutorial 1.

Como en el resto de tutoriales que se hayan podido consultar, lo primero es crear tu aplicación en Facebook.
…hay muchos tutoriales sobre cómo hacer pero lo básico, al margen de estar registrado en Facebook y en la sección de desarrolladores ^^!, sería comentar que hay muuuuuuchos manuales que nos hablan sobre la antigua interfaz de configuración, que ha cambiado, que si canvas url, callback post y delete… Nos os liéis!!:

• Nombre de la aplicación
• Url Callback -donde irá vuestro famoso xd_receiver.html-
• y, esto no estoy seguro, activar el uso del marcado especial de Facebook -necesitará un namespace extra en el
  documento- FBML en lugar de un marco: iframe.

¡PUNTO!

En imágenes

2. Lo importante de verdad.

Así es como yo lo he implementado -con JavaScript (parte de jQuery)- en el blog y, hasta ahora, funciona bien.

Importante: Todo el código a continuación, es más o menos a modo rápido de prueba. Por ejemplo, Facebook Connect se debería inicializar con el Bootstrap de la librería (ver wiki), para asegurarse de la carga completa de la misma, el DOM, etc.

Incluye el Namespace del marcado de Facebook (FBML):

xmlns:fb="http://www.facebook.com/2008/fbml"

	<html 
		xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:fb="http://www.facebook.com/2008/fbml" 
		xml:lang="es"> <!-- Yo, es que no uso el language_attributes() pero vamos... puedes hacerlo aquí -->

Aunque es muy muy pesado, si lo prefieres, imagino que también puedes usar namespaces incrustados en lugar del
atributo del html; por ejemplo, si vas a generar poco código FBML y todo tú.
Ej.:

		<fb:login-button xmlns="http://www.facebook.com/2008/fbml" size="medium" length="long" />

Resultado:

Incluye el script de Facebook

<script 
		src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_ES" 
		type="text/javascript" 
		charset="utf-8"></script>

Archivo comments.php:

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

<?php if ( $user_ID ) : ?> ... <?php else : ?> ... <?php // Facebook Connect ?> <p id="facebookConnect"> <span id="facebookLogin"></span> <!-- ó <span id="facebookLogin" /> --> <!-- ó incluso <span id="facebookLogin"/> si sirves xml de verdad --> </p> ... <?php // END Facebook Connect ?>   <p id="userBox"> <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /> <label for="author"> <span class="x-small<?php if ( $req ) echo ' required';?>"> <?php echo _e('Name'); ?> <?php echo ( $req ) ? _e('*') : ''; ?> </span> </label> </p>   <p id="userMail"> <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /> <label for="email"> <span class="x-small<?php if ( $req ) echo ' required'; ?>"> Email (no se publicar&aacute;) <?php echo ( $req ) ? _e('*') : ''; ?> </span> </label> </p>   <?php endif; ?>

Javascript: Preferiblemente incluir antes de la etiqueta body de tu documento. Por ejemplo puedes añadirlo al wp_footer(), tú mismo.

Unas cuántas cuestiones interesantes:
En estos ejemplos hay ciertas cosas que lo mismo pueden liar a alguien pero son bastante triviales.

• Por ejemplo aplico mediante jQuery una clase CSS que añade el cursor correspondiente (pointer) – M$I.E. usa cursor: hand; -
  Si se prefiere usar CSS al vuelo con jQuery debería bastar con algo como:

  jQuery('elemento').css('cursor', 'pointer');

  Pero yo prefiero crear marcado válido incluso si es con JavaScript al vuelo (el método anterior añade estilo incrustado mientras que si usas una clase sigue siendo válido y no intrusivo), además de que es una clase que ya uso normalmente.

• También es necesario tener en cuenta los identificadores de los elementos párrafo que engloban las secciones, en este caso nombre y correo: userBox y userMail; además del wrapper HTML en el botón de login para aplicarle cambios sin tener que tocar el marcado de facebook FBML: facebookLogin.

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

<script type="text/javascript" charset="utf-8">
// <![CDATA[
	jQuery(function($) {
		var apiKey		= 'CLAVE_DE_TU_APLICACIÓN_ACCESO_A_LA_API';
		var channelPath	= 'URL A TU RECEIVER: xd_receiver.htm';
 
		/* DESCONECTADO */
		function fbNotConnected(result) {
			jQuery('#facebookLogin')
			.addClass('pointer')
			.html('<fb:login-button size="medium" length="long" />');
			FB.XFBML.Host.parseDomTree();
		}
 
		/* CONECTADO */
		function fbConnected(result) {
			var api			= FB.Facebook.apiClient;
			var userUid		= api.get_session().uid;
 
			var htmlLogin 	= '<span><fb:profile-pic uid="loggedinuser" facebook-logo="true" linked="false" '
			+ 'class="alignleft" /> Bienvenido <fb:name uid="loggedinuser" useyou="false" />'
			+ ', estás conectado con tu cuenta de Facebook.'
			+ '<fb:user uid="loggedinuser" /><fb:website uid="loggediuserin" /></span>';
			// Según mi punto de vista, no se debería usar php incrustado -the_permalink()-
			var htmlLogout 	= '<a class="pointer" title="Desconectar de tu cuenta Facebook y esta web." '
			+ 'onclick="FB.Connect.logoutAndRedirect(\'<?php the_permalink(); ?>\'); return false;">'
			+ '<img alt="Logout" src="http://static.ak.fbcdn.net/rsrc.php/zDUG0/hash/3g5yiwv5.gif"></a>';
 
			api.users_getInfo(userUid, ['name', 'website', 'profile_url'], function(res){
				fbGenerateFormField('author', res[0].name);
				fbGenerateFormField('email', userUid + '@facebook.com');
				if ( 'string' === typeof(res[0].website) ) {
					jQuery('#commentform input#url').attr('value', res[0].website);
					// Forzar: fbUpdateFormField('url', res[0].website);
				} else {
					if ( 'string' === typeof(res[0].profile_url) )  
						jQuery('#commentform input#url').attr('value', res[0].profile_url);
						// Forzar: fbUpdateFormField('url', res[0].profile_url);
				}
			});
 
			jQuery('#facebookLogin').html(htmlLogout);
			jQuery('#userBox').html(htmlLogin);
			jQuery('#userMail').html('');
			FB.XFBML.Host.parseDomTree();
		}
		function fbGenerateFormField(elId, value) {
			var formField = '<input id="' + elId + '" name="' + elId + '" value="' + value + '" type="hidden" />';
			jQuery('form#commentform').append(formField);
		}
 
		// Init setup:
		FB.init(apiKey, channelPath, { "ifUserConnected" : fbConnected, "ifUserNotConnected" : fbNotConnected });
	});
	// End jQuery
// ]]>
</script>

Explicando el código

Inicialización

1
2
3
4
5
6
7

<script type="text/javascript" charset="utf-8">
// <![CDATA[
	// jQuery sin conflicto con la función de dólar de otras librerías
	jQuery(function($) {
		// Init vars: PUB_URL es una variable propia en otro sitio
		var apiKey		= 'CLAVE_DE_TU_APLICACIÓN_PARA_ACCEDER_A_LA_API';	// API KEY Facebook
		var channelPath	= PUB_URL + '/xd_receiver.htm';						// Url a tu xd_receiver.html

xd_receiver: A mí al menos me funciona tanto con rutas relativas como con absolutas pero tienes que tener cuidado, si usas redirecciones de cualquier tipo, mod_rewritte, wordpress…
En mi opinión la mejor forma de comprobarlo es hacer una llamada AJAX al archivo a ver si obtienes una respuesta correcta
200 OK al menos. Ej:

jQuery.get('tu_receiver_url', function(response){alert(response);});
// O prueba con post

Estado: Desconectado

Desconectado: Se puede generar FBML, XHTML… Yo recomiendo usar FBML siempre que sea posible para evitar problemas, por ejemplo de carga del DOM por otras librerías si se usan -ej. jQuery- y la de Facebook. Obviamente, esto se puede -y debe- mejorar, crear un plugin jQuery… pero eso ahora no corresponde.

1
2
3
4
5
6
7
8
9

		/* DESCONECTADO */
		// Mostrar login:
		function fbNotConnected(result) {
			jQuery('#facebookLogin')
			.addClass('pointer') // Clase CSS que añade el cursor correspondiente al botón padre span.
			.html('<fb:login-button size="medium" length="long" />');
			// Parsear el DOM FB
			FB.XFBML.Host.parseDomTree();
		}

Estado: Desconectado, versión DOM

Ejemplo rápido DOM. Ojo, se puede usar la librería de gestión del DOM de Facebook, pero yo aún no la he mirado. Sé que al menos usa la «función del dólar».

Desconectado

1
2
3
4
5
6
7
8
9
10
11
12
13
14

		/* DESCONECTADO */
		// Mostrar login:
		function fbNotConnected(result) {
			var userBoxLogin = document.getElementById('facebookLogin');
			userBoxLogin.setAttribute('style', 'cursor:pointer'); // cursor:hand para IE.
			// Es un coñazo -y más con namespace extras- pero no voy a usar el puto innerHTML de M$
			var fbLogin = document.createElementNS('http://www.facebook.com/2008/fbml', 'fb:login-button');
			// Atributos, imagino, que no registrados xhtml:
			fbLogin.setAttributte('size', 'medium');
			fbLogin.setAttributte('length', 'long');
			userBoxLogin.appendChild(fbLogin);
			// Parsear el DOM FB
			FB.XFBML.Host.parseDomTree();
		}

result es opcional, debería devolver un null.

Básicamente generamos marcado Facebook (FBML) al vuelo, con jQuery si el usuario no está conectado y lo parseamos con la librería de Facebook.
Muy importante: Como ya dije, necesitas un Namespace extra para el mismo, tu documento debe soportarlo y, como siempre y en cualquier caso, ¡estar bien formado! ;) Yo, como buen talibán XML y anti M$ que soy, recomiendo XHTML1.1 de verdad, es decir, servir application/xhtml+xml que soporta XML, pero ojo con Wordpress que la puede liar. Tú mismo; debería bastarte con un XHTML 1.0 Strict o Transicional.

Del resto se encarga la librería de Facebook al parsear el FBML, en este caso: generando el botón de login y su comportamiento. Se le puede añadir incluso una gestión de login/out -atributo autologoutlink="(bool)"-, aunque he preferido hacer el cambio yo mismo.

Estado: Conectado

1. Generar la userbox del usuario y las opciones pertinentes.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* CONECTADO */ // Update userbox: function fbConnected(result) { var api = FB.Facebook.apiClient; var userUid = api.get_session().uid;   // Html + FBML: var htmlLogin = '<span>' + '<fb:profile-pic uid="loggedinuser" facebook-logo="true" linked="false" class="alignleft" />' + 'Bienvenido <fb:name uid="loggedinuser" useyou="false" />' + ', estás conectado con tu cuenta de Facebook.' + '<fb:user uid="loggedinuser" /><fb:website uid="loggediuserin" />'; + '</span>'; var htmlLogout = '<a class="pointer" title="Desconectar de tu cuenta Facebook y esta web." ' + 'onclick="FB.Connect.logoutAndRedirect(\'<?php the_permalink(); ?>\'); return false;">' + '<img alt="Logout" src="http://static.ak.fbcdn.net/rsrc.php/zDUG0/hash/3g5yiwv5.gif"></a>';

2. Lo más importante: Conseguir un formulario útil y coherente.

2.a En este sentido existe el problema, que por añadidura es una gran ventaja para los usuarios Facebook, de los permisos para el correo.

En concreto, Facebook no distribuye emails de usuarios lo cual me parece absolutamente necesario y genial.
Solo ofrece un servicio comunicación proxy de emails a través de hashes o cadenas codificadas de los mismos que ellos de/codifican. Todo ello en el caso de obtener el permiso del usuario para que nuestra aplicación acceda al servicio de emails; permiso el cual solo es una cuestión ética, ya que podemos obtener la dirección proxy del email, aunque no nos va a servir de nada, al menos hasta que alguien decida intentar conocer la forma en que se codifican.

En resumen: Nunca nos van a dar el mail, solo el acceso al servicio.

2.b Otras implementaciones que he visto no realizan lo siguiente; y los plugins, como digo, no me gustan y son muy pesados. Se limitan a enviar un nombre.

Nosotros obtendremos el nombre del usuario, un correo sustancialmente inútil pero válido en nuestro caso: id del usuario + cuenta facebook y otros campos a gusto del consumidor: Sitio web del perfil de Facebook, url del perfil, imagen…

Más detalles en este sentido con una simple búsqueda web por Facebook Connect: users.getInfo, users.getStandarInfo…, FQL User Tables, etc.

3.b Por fin, rellenaremos el formulario vía JavaScrit y jQuery a ser posible, aunque podemos usar el DOM puro y duro.

Aquí ya depende de cada uno como hacerlo:
Se pueden rellenar los campos de forma visible al usuario para que pueda modificarlo si quiere, -lo más correcto y honesto-.
Se pueden rellenar de forma silenciosa para evitar cambios no deseados -en la mayoría de los casos el usuario no sabrá cambiarlos aunque es perfectamente posible-.
Se pueden rellenar justo al enviar el formulario -la forma más vil :mrgreen: aunque se me ocurren otras como es lógico-.

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

// Obtener el nombre: api.users_getInfo(userUid, ['name', 'website', 'profile_url'], function(res){ fbGenerateFormField('author', res[0].name); fbGenerateFormField('email', userUid + '@facebook.com');   // Opcionales: Se pueden forzar o dejar para rellenar por el usuario // Sitio Web: Url del sitio web establecido en el perfil o el propio perfil. if ( 'string' === typeof(res[0].website) ) { jQuery('#commentform input#url').attr('value', res[0].website); // Forzar: fbUpdateFormField('url', res[0].website); } else { if ( 'string' === typeof(res[0].profile_url) ) { jQuery('#commentform input#url').attr('value', res[0].profile_url); // Forzar: fbUpdateFormField('url', res[0].profile_url); } } });   // Cambiar la userbox: jQuery('#facebookLogin').html(htmlLogout); jQuery('#userBox').html(htmlLogin); jQuery('#userMail').html(''); // Parsear el DOM FB FB.XFBML.Host.parseDomTree(); } // Helper: Crear nuevos campos en el formulario: function fbGenerateFormField(elId, value) { var formField = '<input id="' + elId + '" name="' + elId + '" value="' + value + '" type="hidden" />'; jQuery('form#commentform').append(formField); }   // Init setup: FB.init(apiKey, channelPath, { "ifUserConnected" : fbConnected, "ifUserNotConnected" : fbNotConnected }); }); // End jQuery // ]]> </script>

:( …bueno, al final no ha salido tan breve ni rápido :mrgreen: . Ya haré una versión corta y una demo.