El día de ayer y el de hoy por la madrugada me la pasé entretenido en uno de mis muchos pasatiempos: me dediqué a asegurarme que mi plantilla de WordPress fuera lo más apegada a los estándares. Tengo entendido que HTML 5 y XHTML 2 están a la vuelta, … y cada uno traerá consigo buenas ventajas.
Lo bueno es que en estas fases XHTML 1.1 y HTML 4.0 Estricto son casi lo mismo. Lo que difiere entre ellos es la declaración de tipo de documento y que además que hay ciertos ‘elements’ que en XHTML deben de cerrarse (ejemplo: <br />, <link ... />).
El día de ayer comencé con el rediseño de esta página, y pues lo que me mantuvo entretenido fue el hecho de que en Internet Explorer si funcionaba cierto código de JavaScript que no funcionaba en FireFox (algo nunca antes escuchado).
Había encontrado un artículo que me ayudó a servir apropiadamente mi contenido (servir como XHTML si el browser lo soporta, y si no como HTML). Después intenté poner una sección con un ‘template’ que utilizaba un script para la inclusión de un mapa de Frappr (al cual, por cierto, tienen que añadirse). El script de Frappr utiliza document.write(); para escribir un iframe cuyo código fue concatenado por javascript. Esto en XHTML no es posible…
Básicamente mi afán por apegarme a los estándares me estaba ahogando. En XHTML (servido con MIMEtype apropiado de application/xhtml+xml) no se puede escribir en el documento con JavaScript así como así.
Se necesita tener ciertas consideraciones que afectan a todos los ‘browsers’… pero hay que saber cómo reparar el código descompuesto.
Rápidamente mi ‘dique’ rápido rediseño se tornó en algo un poco más para fumarolos de código, y no tanto para el ‘amateur’ que va de paso (como yo).
Lo bueno es que contaba con utilidades de validación de javascript y de eliminación de errores.
Después de enterarme que tenía que usar la función de createElement, me enteré que hay más consideraciones especiales para no ‘quebrar’ el código.
Esta es la plantilla que se coloca adentro de cada carpeta adentro de /wp-content/themes/. Ya que se subió el archivo a cada carpeta (y se le da CHMOD 666)… jejeje \m/, entonces uno puede proceder a escribir una página en WordPress y le aparecerá en la lista desplegable la plantilla que se subió. En mi caso, es friends.php.
Nota Importante: es necesario no dejar una línea vacía (un ‘enter’ de más) entre el comentario y la función de get_header, o de lo contrario se rompe la validación del documento… y en XHTML simplemente aparecerá un documento color crema, especificando que hay un error.
<?php
/*
Template Name: FrapprFriends
*/
?>
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<h2>Frappr Map:</h2>
<div id="frappr"><noscript><p>Unfortunately, you do not have a javascript enabled browser.</p></noscript></div>
<script type="text/javascript" src="http://rolandog.com/wp-content/mapwidget.js"></script>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
El siguiente código es el contenido del archivo mapwidget.js… modificado. El original se encuentra en http://www.frappr.com/ajax/mapwidget.js. El primer ‘párrafo’ de código es proveido por Frappr en la sección de ‘Widgets’ de un grupo.
var frappr_mapheight = 480;
var frappr_mapwidth = 480;
var frappr_maplat = 25.650432;
var frappr_maplon = -100.386059;
var frappr_mapzoom = 15;
var frappr_host = "http://www.frappr.com/";
var gid = 73345;
var frappr_url = frappr_host+"?a=mapwidget";
El siguiente bloque es el script modificado. Lo único que cambia es el código que escribe en el documento. En lugar de utilizar document.write(); se utiliza document.createElement();.
addToUrl('req','map');
if (typeof frappr_mapwidth == "undefined") {frappr_mapwidth = 300;}
if (typeof frappr_mapheight == "undefined") {frappr_mapheight = 300;}
if (typeof frappr_mapzoom == "undefined") {frappr_mapzoom = 7;}
if (typeof frappr_maplat == "undefined") {frappr_maplat = 43;}
if (typeof frappr_maplon == "undefined") {frappr_maplon = -97;}
frappr_mapwidth = frappr_range_check(frappr_mapwidth,50,2000,300);
frappr_mapheight = frappr_range_check(frappr_mapheight,50,2000,300);
frappr_mapzoom = frappr_range_check(frappr_mapzoom,1,15,7);
frappr_maplat = frappr_range_check(frappr_maplat,-90,90,43);
frappr_maplon = frappr_range_check(frappr_maplon,-180,180,-97);
function frappr_range_check(v,min,max,defaultval) {
if (isNaN(v)) { v = defaultval;}
else if (v > max) {v = max;}
else if (v < min) {v = min;}
return v;
}
addToUrl('width',frappr_mapwidth);
addToUrl('height',frappr_mapheight);
addToUrl('zoom',frappr_mapzoom);
addToUrl('lat',frappr_maplat);
addToUrl('lon',frappr_maplon);
if (typeof gid != "undefined") {addToUrl('gid',gid);}
if (typeof gname != "undefined") {addToUrl('gname',gname);}
function quoted(str) {
return (str !== null) ? '"' + str + '"' : '""';
}
function addToUrl(name,val) {
frappr_url+=("&"+name+"="+val);
}
function createElement(element) {
if (typeof document.createElementNS != 'undefined') {
return document.createElementNS('http://www.w3.org/1999/xhtml', element);
}
if (typeof document.createElement != 'undefined') {
return document.createElement(element);
}
return false;
}
if (document.getElementById) {
tff = document.createElement("iframe");
tff.setAttribute("id", "frappr_mapwidget_frame");
tff.setAttribute("height", quoted(frappr_mapheight));
tff.setAttribute("width", quoted(frappr_mapwidth));
tff.setAttribute("frameborder", "0");
tff.setAttribute("src", frappr_url);
tff.setAttribute("marginwidth", "0");
tff.setAttribute("marginheight", "0");
tff.setAttribute("vspace", "0");
tff.setAttribute("hspace", "0");
tff.setAttribute("allowtransparency", "true");
tff.setAttribute("scrolling", "no");
document.getElementById("frappr").appendChild(tff);
}
Los dos bloques de JavaScript los guardé en el documento mapwidget.js. Y con eso quedó lista la infraestructura necesaria para que el mapa de los amigos quedara abierto para el público… además de que sigue validando como XHTML.