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

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 -.
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: 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… 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 … 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

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
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 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 . Ya haré una versión corta y una demo.

Vía el nuevo nivel de reporte de errores STRICT que usa php5 y Zend Framework, me entero de que Zend_Loader está depreciado desde esta nueva -y fantástica- versión 1.8.
…la cual, por otra parte, me ha sorprendido muy gratamente gracias a temas como Zend_Tool (scaffolding al estilo Simphony, Ruby… algo que extrañaba ya no lo hubieran implementado) o Zend_Application de la que pende, por ejemplo, Zend_Module_Autoloader o la clase Bootstrap. Las tediosas tareas de inicialización -bootstrap- de nuestra aplicación ahora sobre una base sólida y estándar ; o montarte un sistema modular totalmente funcional en segundos y con una estructura también estándar y basada en NameSpaces ^^!

… como mola; cada vez me gusta más. ¡Viva Zend Framework!

Empezar a utilizar en serio Zend Framework y POO con PHP me ha vuelto a abrir los ojos al margen de desarrollar nuevas secciones en el sitio web. No puedo negar que hace tiempo que el blog me gusta más bien poco, de hecho no hace mucho que ya lo abandoné una vez: hay pocas ganas de escribir sobre no muchas cosas… y si las hay, la experimentación sobre el diseño siempre acaba ganando sobre lo que de verdad quiero hacer en un blog: escribir y punto.

Este último theme de Wordpress me sirvió para trasladar aquí lo probado en el diseño de la web de La Guardia pero lo cierto es que ya estoy un poco harto de un diseño tan «empalogoso» Diseño, porque por lo demás -la aplicación- me encanta TemplateBase.
Quiero volver a los orígenes, a una lectura sencilla y cómoda, nada más.

De hecho, es posible que pronto incluso deje a un lado Wordpress para montarme algo sencillo con Zend FW, porque mientras más lo uso, más me gusta y más claro lo veo ^^!

Por lo pronto, voy a volver a mi antiguo theme Standar WP a otro algo menos recargado: simpleCovi.

Así que pretendo experimentar con esta estructura base, algo que llevo intentando tener desde no poco tiempo. El problema es que hasta ahora, tenía varias estructuras base… digamos modulares y que en e fondo presentan algunos problemas, por ejemplo:

• Tengo una estructura base basada en Wordpress, que en mi opinión es perfecto para un CMS si lo conoces.
• La más importante: tengo una estructura base para recursos estáticos en un servidor y sobre un subdominio habitualmente. Además de ésta última, también uso librerías y otros recursos globales o genéricos.

Problemas

El problema al usar Zend Framework no es, o debería ser, algo como por ejemplo el tema de la propia librería de Zend, sino dicha estructura y sus recursos estáticos. Una aplicación sencilla o pequeña (como por ejemplo mis 1SCTools) montarla en base a esta aplicación base, ya sea como un módulo o en solitario, es demasiado pesado y no es útil más que, como decía, si ya tienes más aplicaciones montadas en tu aplicación general.

Con el tema de los recursos pasa igual y revela un problema de mi servidor estático: no siempre podrás montarlo así, o al menos, como subdominio aunque eso es lo menos importante. Eso sin olvidar que la mayoría de las aplicaciones web incorporan siempre dichos recursos lo que implica que siempre, siempre deberás adaptarlos y editar

El eterno dilema

Así pues, ahora me toca una de dos: Adaptar mis estructuras base a una sola basada en Zend, incluyendo servidor estático y tal o adaptar esta misma a las estructuras actuales.
Y es por estas cuestiones por las que aún hoy no tengo un sistema base completo y robusto que me haga montar algo rápido con el mayor número de opciones

Rewrite, servidores estáticos…

Lo que además revela es mi incapacidad, aunque lo cierto es que ni lo he intentado, de escribir un… ¡ostias! gg, ahora mismo -y no es coña- acabo de acordarme del «Zend Router» que es un controlador para rewrite (véase por ejemplo el objeto Rewrite de Wordpress), que es a su vez de lo que precisamente iba a hablar ^^!

No obstante y si se analiza bien, el problema persiste, rewrite no lo soluciona ya que mi intención es usar subdominios estáticos desde que comprobé cómo mejoran las aplicaciones web en relación a rendimiento y optimización.
Ese es el problema real: que es un coñazo montar una aplicación que albergue ambas posibilidades por no hablar de la duplicidad de recursos: Usar recursos internos de la aplicación y recursos basados en subdominios, lo cual empeora aún si, como suele ser habitual, se usan hostings compartidos.

En sitios propios no es un problema, pero si escribes algo para alguien, o una aplicación estándar para distribuir, es una auténtica locura , si bien lo sencillo es usar recursos internos y punto.

En fin, por lo pronto, iré probando a montar algo base olvidándome de servidores estáticos, algo que por otra parte se está convirtiendo en un estándar.