Sentido Web » How to

W3C: fallos de accesibilidad (II)

displaynone — Tue, 29 May 2007 23:00:00 +0000

Seguimos con los fallos de accesibilidad que se suelen cometer en el desarrollo web, que nos ofrece la W3C y que empezamos a tratar hace unos días.

Mostrar imágenes con información importante mediante estilos

Se trata de usar una imagen que contiene información (por ejemplo para los enlaces del menú) y mostrarla como fondo de un elemento y que no haya un texto que indique el contenido de la imagen.

Una solución es escribir el texto pero no hacerlo visible, para ello usaremos la propiedad text-ident, si le damos un valor negativo elevado el texto desaparecerá por la izquierda. Por ejemplo, tenemos una imagen titulo.png que tiene el título del blog con un diseño especial, lógicamente queremos que se vea así por temas de diseño e imagen. Ahora bien, si solo mostramos la imagen, no somos capaces de leer el contenido de esta. Por ello tendremos que hacer lo siguiente para que el texto aparezca sin que haya estilos y con estilos solo aparezca la imagen:

h1 {
background: url(titulo.png);
width: 200px;
height: 100px;
text-indent: -10000px;
}

Título

Usar el estilo blink sin el mecanismo para parar el parpadeo

Esta es corta, no uses jamás text-decoration: blink. Y si por un casual no te queda otra posibilidad que usarlo, crea un script que pare el parpadeo a los 3 segundos.

Usar un applet o un flash que parpadee sin el mecanismo para pararlos

Lo mismo que el punto anterior, pero enfocado a applets y a animaciones Flash.

Usar subtítulos que omiten parte del diálogo o sonidos importantes

Si vas a ofrecer un sonido, una conversación y no muestras los subtítulos con todo el contenido (conversación y sonidos destacados), no se trata de un buen subtítulo y puede haber información importante que se escape.

Más información

W3C: fallos de accesibilidad (I)

displaynone — Wed, 23 May 2007 23:00:00 +0000

Hoy vamos a empezar una serie de artículos en los que pretendemos explicar los fallos que se cometen en accesibilidad cuando se realizan aplicaciones web y las técnicas que debemos usar para evitar estos fallos. Para ello nos basamos en lo que especifica la W3C en su WCAG 2.0 (aún en estado borrador).

Error 1: modificar el significado del contenido debido al posicionamiento mediante CSS

Se trata de cambiar el significado semántico de una etiqueta, modificando su posicionamiento mediante CSS. Por ejemplo, si queremos crearnos una lista de elementos:

Elemento 1
- Elemento 1.1
- Elemento 1.2
- Elemento 1.3
Elemento 2
- Elemento 2.1
- Elemento 2.2

El fallo consiste en usar etiquetas no destinadas a ese sentido, cambiarle los estilos y representarlas como queremos. Por ejemplo podemos usar span para representar cada elemento y disponerlos en la posición que nos conviene:

Elemento 1
Elemento 2
Elemento 1.1
Elemento 2.1
Elemento 1.2
Elemento 2.3

Y con los estilos siguientes:

.cab1 {
position: absolute;
top: 0px;
left: 0px;
}
.cab2 {
position: absolute;
top: 0px;
left: 200px;
}
.ele1 {
position: absolute;
top: 20px;
left: 0px;
}
.ele2 {
position: absolute;
top: 20px;
left: 200px;
}
.ele3 {
position: absolute;
top: 40px;
left: 0px;
}
.ele4 {
position: absolute;
top: 40px;
left: 200px;
}

obtendríamos el mismo resultado visual, pero si quitaramos los estilos obtendríamos lo siguiente:

Elemento 1 Elemento 2 Elemento 1.1 Elemento 2.1 Elemento 1.2 Elemento 2.3

lo cual no tendría mucho sentido.

Error 2: modificar el aspecto del texto para mostrar algo que ya representa una etiqueta

Existen varias etiquetas de texto que tiene diferentes funcionalidades, pero aún así es típico encontrarse textos con sus estilos modificados para mostrar el resultado de una etiqueta ya existente. Un ejemplo muy común es este:

Título

.negrita {
font-weight: bold;
}

Lo correcto sería usar la etiqueta strong.

Más información

10 consejos para mejorar tus queries MySQL

displaynone — Wed, 11 Apr 2007 17:45:00 +0000

10 interesantes consejos a seguir para mejorar nuestras sentencias en MySQL, algunas de ellas para poder optimizar las ya creadas.

Usa el comando explain: el comando explain te puede ayudar a identificar los índices que se usan y además te proporciona más información útil.
Usa permisos menos complejos: usar permisos más sencillos evita que se comprueben muchas condiciones en cada ejecución de una sentencia.
Comando benchmark: este comando nos permite saber cuánto tiempo tarda en ejecutarse una expresión.
Optimiza tus cláusulas: ya sea quitando paréntesis innecesarios, usando count(*) sin condiciones en el where ya que tira de tablas internas de MyQSL o usando la opción SQL_SMALL_RESULT para usar tablas temporales en memoria.
Ejecuta optimize table: defragmenta una tabla después de varios borrados, el acceso a disco es algo importante a tener en cuenta.
Evita campos de longitud variable: en tablas de frecuente actualización evita campos como VARCHAR, BLOB o TEXT.
Usa insert delayed: solo cuando sea no importe cuando se inserten los datos.
Prioridades en las sentencias: usa INSERT LOW_PRIORITY para darle a las consultas mayor prioridad, o usa SELECT HIGH_PRIORITY para ejecutar una consulta aunque haya otros clientes esperando.
Haz múltiples inserciones en una única sentencia: en vez de varias sentencias de una única inserción.
Sincroniza tipos de datos: mismos datos en tablas diferentes deben ser del mismo tipo de datos.

Yo siempre he tenido una duda, que no he resuelto por pereza, sobre el caso de ejecutar count(*) o count(1). La leyenda urbana dice que es mejor count(1), ya que de la otra forma obtienes que enviar todas las columnas, al igual que haces en un select *. Un consultor en Oracle nos dijo que era falsa esa afirmación porque tardaba lo mismo, yo creo que también, entre otras cosas porque seguro que ese punto está optimizado, pero claro, que sea consultor o que sea de Oracle no quiere decir nada, y menos aún si hablamos de otras bases de datos.

10 tips for optimizing mysql queries

Vía / Alex Sancho

Consejos para configuraciones SSH

displaynone — Tue, 03 Apr 2007 23:00:00 +0000

Aunque yo, la verdad, he tratado las conexiones SSH de resfilón, nunca está mal conocer algunos trucos para cuando tengamos que configurar nuestras conexiones SSH.

Cambia el puerto: por defecto el puerto de escucha es el 22, cámbialo para que dificultar los ataques, sobre todo si es mayor a 1024, ya que la mayoría de los scanners no admite valores tan altos.
Admite solo el protocolo 2: SSH admite dos protocolos, permite tan solo el 2 ya que es más seguro.
Permite solo usuarios específicos: no admitas al usuario root ya que es aumentar los riegos de ataque.
Especifica tu propio aviso: si quieres que cualquier usuario pueda ver un aviso de acceso denegado crea tu propio fichero de texto que muestre el mensaje. Este punto no lo comprendo muy bien, está claro que me tengo que meter más a fondo con el SSH.
Usa clave pública DSA: puedes usar para la autenticación claves públicas DSA en vez de usuario y contraseña.
Usa TCP wrappers: permitiendo así conectarse solo a ciertos hosts.
Usa iptables para permitir acceso a hosts: como alternativa a los TCP wrappers.
Limita el acceso a periodos de tiempo

Advanced SSH security tips and tricks

Vía / dzone

FireMarker: cómo crear una extensión para Firefox

displaynone — Fri, 02 Mar 2007 23:25:00 +0000

Si el otro día os hablaba de FireMarker, la extensión de Firefox para marcar texto en una página, hoy voy a intentar explicar cómo la desarrollé y así conseguir que otras personas no se encuentren con las mismas dificultades que yo.

Vamos a ir paso a paso, explicando la estructura, los distintos ficheros y sus contenidos, siempre dentro de mi limitado conocimiento, ya que lo que he aprendido ha sido destripando otras extensiones y mirando la documentación que hay sobre XUL.

Estructura de directorios

Lo primero es mostrar la estructura de directorios y los ficheros que se encuentran en estos directorios:

raíz: contiene ficheros de instalación y de configuración del contenido y el resto de directorios.
chrome: contiene toda la información de la extensión organizada en subdirectorios.
firemarker: congrega contenido y estética.
content: información sobre el contenido de la extensión.
firemarker (dentro de content): contenido de la extensión.
locale: información para el multilingüismo de la extensión.
en-US: para cuando el navegador es la versión en inglés de Estados Unidos, creo que si el navegador es de una versión de idioma diferente, al estar indicada en el fichero de configuración en primer término, es la que se coge por defecto.
es-ES: para cuando el navegador es la versión en español de España. Creo que también es la usada para otras versiones de navegadores en español (es-AR, …).
skin: contiene la información necesaria para la estética de la página.
classic: el theme de firefox por defecto, si se quiere modificar para otro theme se debería crear una estructura paralela a esta.
firemarker (dentro de classic): información para esta extensión.

Ficheros

Dentro de una extensión de Firefox hay una serie de ficheros que son necesarios y otros que son creados por el desarrollador. Según la versión de Firefox, estos ficheros sufren distintas modificaciones. Lo mejor para crearte tu propia extensión es descomprimir una extensión ya creada y modificar estos ficheros según tus necesidades.

Directorio raíz

chrome.manifest: se especifica los distintos contenidos de la extensión: overlay (interfaces de usuario que se añaden a Firefox), content (contenido), skin y locale (ficheros para la internacionalización).

overlay	chrome://browser/content/browser.xul	chrome://firemarker/content/firemarkerOverlay.xul
overlay	chrome://navigator/content/navigator.xul	chrome://firemarker/content/firemarkerOverlay.xul
content	firemarker	chrome/firemarker/content/firemarker/
skin	firemarker	classic/1.0	chrome/firemarker/skin/classic/firemarker/
locale	firemarker	en-US	chrome/firemarker/content/locale/en-US/
locale	firemarker	es-ES	chrome/firemarker/content/locale/es-ES/

install.rdf: xml (RDF) que contiene la información necesaria para la instalación de la extensión, en este caso si que copié directamente de otra extensión y lo modifiqué según mis necesidades. El em:id indentifica a la extensión y debe ser un código UUID único, para generarlo puedes usar esta aplicación.





locale/en-US/
locale/es-ES/

en-US

Sirve igual para es-ES o cualquier otro idioma. Hay un fichero de configuración de contenido (contents.rdf) y otro que es una DTD que luego se usará para las traducciones (firemarker.dtd).

contents.rdf: contenido del directorio, hacer copy/paste y modificar de otra extensión.
firemarker.dtd: DTD con las traducciones, a las que se podrá acceder desde los ficheros XUL:

firemarker (dentro de classic)

En este directorio se guardan las imágenes que vayamos a usar, como por ejemplo iconos y los ficheros de estilos, todo configurado por el fichero contents.rdf correspondiente.

firemarker (dentro de content)

Contiene los scripts y los layouts de la extensión, en nuestro caso tenemos tres archivos (sin incluir el contents.rdf):

acercade.xul: muestra la ventana de información de “Acerca de…”.
firemarkerOverlay.xul: muestra el menú contextual de la extensión cuando se pulsa con el botón derecho del ratón en el icono y el propio icono en la barra de estado.
firemarkerOverlay.js: scripts necesarios para la ejecución de la extensión.

El único fichero que vamos a comentar, que es el que más dificultad puede tener es firemarkerOverlay.js ya que es el que se encarga de toda la funcionalidad de la extensión. El script contiene un objeto JSON que tiene toda la funcionalidad.

Cuando se selecciona un texto podemos obtener tres cosas, el texto seleccionado, el nodo origen y el nodo fin desde los que hemos realizado la selección y los desplazamientos de los textos donde empiezan los textos de los nodos seleccionados. Veamos un ejemplo para comprenderlo mejor:

Tenemos el siguiente código HTML:

Cabecera
Texto
Footer

Si seleccionamos de izquierda a derecha el siguiente texto: “era Texto Foo“, obtenemos los siguientes datos:

Texto seleccionado: era Texto Foo
Nodo inicial: h1
Nodo final: div
Offset inicial: 6 (el texto seleccionado empieza en la 6 posición)
Offset final: 3 (el texto seleccionado acaba en la 3 posición)

Si la selección se realiza de derecha a izquierda los datos que obtengo son distintos:

Texto seleccionado: era Texto Foo
Nodo inicial: div
Nodo final: h1
Offset inicial: 6 (el texto seleccionado empieza en la 6 posición)
Offset final: 3 (el texto seleccionado acaba en la 3 posición)

En este instante se puede acceder directamente a los nodos, pero como se tiene que localizar los nodos (inicial y final) cuando se recarga la página, y no tenemos un puntero al nodo, lo que hago es obtener el texto que contiene el nodo y buscarlo en todo el documento, así puedo guardar los textos de los nodos en las propiedades del Firefox, para poder acceder a los nodos siempre que quiero.

Lo que debemos hacer en este instante es modificar los objetos HTML para añadirles un SPAN que tiene el estilo de marcado.

El resto del código creo que se puede entender con los comentarios:

window.addEventListener(
"load",
function () {
gBrowser.addEventListener("load", __SW_FIREMARKER_FIREFOX__.marcarPagina, true);
},
false
);
var __SW_FIREMARKER_FIREFOX__ = {
"nodoIni" : null, // El nodo inicial desde el que se empieza la selección de texto
"nodoFin" : null, // El nodo final de la selección de texto
"offsetIni" : 0,  // Dónde empieza la selección del texto en el nodo inicial
"offsetFin" : 0,  // Dónde acaba la selección del texto
"lista_textos" : null,  // Un array con todos los textos seleccionados ordenados por página
"lista_offsets" : null, // Un array con las posiciones inicio-fin de los textos seleccionados ordenados por página
"lista_nodos" : null,   // Un array con los textos de los nodos inicio-fin de los textos seleccionados ordenados por página
"selectedText" : "",    // El texto seleccionado actualmente
"colorfondo" : null,    // El color de fondo que se usa para marcar el texto
"colorletra" : null,    // El color de letra que se usa para marcar el texto
// Muestra la ventana Acerca de...
"mostrarAcercaDe" : function() {
window.open('chrome://firemarker/content/acercade.xul','','chrome,centerscreen');
},
// Carga las preferencias guardadas como un texto formateado en los distintos arrays
"cargarPrefs" : function() {
/*
* Estructura
*   {{*}}URL1{{**}}offsetIni{{,}}offsetFin{{,}}Texto1{{**}}offsetIni{{,}}offsetFin{{,}}Texto2{{**}}...
*            {{**}}offsetIni{{,}}offsetFin{{,}}TextoN
*   {{*}}URL2{{**}}offsetIni{{,}}offsetFin{{,}}Texto1{{**}}....
*/
try {
// Se inicializa y recupera las preferencias
var prefs = Components.classes["@mozilla.org/preferences-service;1"].
getService(Components.interfaces.nsIPrefBranch);
var Branch = prefs.getBranch("extensions.swfiremarker.");
// Se recupera la lista codificada
var lista_codificada;
try {
lista_codificada = Branch.getCharPref("sw_listatextos");
} catch (e) {
Branch.setCharPref("sw_listatextos", "");
lista_codificada = "";
}
// Se inicializan los arrays de datos
__SW_FIREMARKER_FIREFOX__.lista_textos = new Array();
__SW_FIREMARKER_FIREFOX__.lista_offsets = new Array();
__SW_FIREMARKER_FIREFOX__.lista_nodos = new Array();
// Se guardan los datos recuperados en los arrays
if (lista_codificada != "") {
// Se divide la lista codificada en URLs
var lista_aux = lista_codificada.split("{{*}}");
for (var i=0; i 0) {
txtIni = obj.nodeValue.substring(0, inicio);
}
// Cojo el texto seleccionado
txtSel = obj.nodeValue.substring(inicio, fin);
// Cojo el texto desde el fin de selección hasta el fin de texto
if (fin < obj.nodeValue.length) {
txtFin = obj.nodeValue.substring(fin);
}
var nuevo = null;
// Inserto la parte anterior a la seleccionada
if (txtIni != "") {
nuevo = obj.ownerDocument.createTextNode(txtIni);
obj.parentNode.insertBefore(nuevo, obj);
}
// Inserto la parte seleccionada como un span
nuevo = obj.ownerDocument.createTextNode(txtSel);
var span = obj.ownerDocument.createElement('SPAN');
span.rel = "SW_FIREMARKER";
span.style.backgroundColor = __SW_FIREMARKER_FIREFOX__.colorfondo;
span.style.color = __SW_FIREMARKER_FIREFOX__.colorletra;
span.appendChild(nuevo);
if (txtFin != "") {
obj.parentNode.insertBefore(span, obj);
} else {
obj.parentNode.replaceChild(span, obj);
}
// Inserto la parte posterior a la seleccionada
if (txtFin != "") {
nuevo = obj.ownerDocument.createTextNode(txtFin);
obj.parentNode.replaceChild(nuevo, obj);
}
},
// Guardo dentro de las preferencias los textos seleccionados para las urls en un formato
"setPref" : function(pref) {
/*
* Estructura
*   {{*}}URL1{{**}}Texto1{{**}}Texto2{{**}}...{{**}}TextoN{{*}}URL2{{**}}Texto1{{**}}....
*/
// Recupero las listas anteriores si no se ha recuperado ya
if (!__SW_FIREMARKER_FIREFOX__.lista_textos || !__SW_FIREMARKER_FIREFOX__.lista_textos.lenght == 0) {
__SW_FIREMARKER_FIREFOX__.cargarPrefs();
}
// Obtengo la URL
var url = content.document.location;
// Actualizo la url actual
if (!__SW_FIREMARKER_FIREFOX__.lista_textos[url]) {
__SW_FIREMARKER_FIREFOX__.lista_textos[url] = new Array();
__SW_FIREMARKER_FIREFOX__.lista_nodos[url] = new Array();
__SW_FIREMARKER_FIREFOX__.lista_offsets[url] = new Array();
}
var len = __SW_FIREMARKER_FIREFOX__.lista_textos[url].length;
__SW_FIREMARKER_FIREFOX__.lista_textos[url][len] = __SW_FIREMARKER_FIREFOX__.selectedText;
__SW_FIREMARKER_FIREFOX__.lista_nodos[url][len] = new Array(__SW_FIREMARKER_FIREFOX__.nodoIni, __SW_FIREMARKER_FIREFOX__.nodoFin);
__SW_FIREMARKER_FIREFOX__.lista_offsets[url][len] = new Array(__SW_FIREMARKER_FIREFOX__.offsetIni, __SW_FIREMARKER_FIREFOX__.offsetFin);
// Guardo todos los datos
__SW_FIREMARKER_FIREFOX__.guardarDatos();
},
// Guarda los datos en las preferencias
"guardarDatos" : function() {
var res = "";
// Por cada URL dentro de la lista de textos, formateo los datos
for (var _url in __SW_FIREMARKER_FIREFOX__.lista_textos) {
try {
res += '{{*}}'+_url;
for (var i=0; i<__SW_FIREMARKER_FIREFOX__.lista_textos[_url].length; i++) {
var textos_aux = __SW_FIREMARKER_FIREFOX__.lista_textos[_url][i];
var offsets_aux = __SW_FIREMARKER_FIREFOX__.lista_offsets[_url][i];
var nodos_aux = __SW_FIREMARKER_FIREFOX__.lista_nodos[_url][i];
res += '{{**}}'+offsets_aux[0]+'{{,}}'+offsets_aux[1]+'{{,}}';
res += nodos_aux[0]+'{{,}}'+nodos_aux[1]+'{{,}}';
res += textos_aux;
}
} catch (e) {}
}
// Guardo en las preferencias
var prefs = Components.classes["@mozilla.org/preferences-service;1"].
getService(Components.interfaces.nsIPrefBranch);
var Branch = prefs.getBranch("extensions.swfiremarker.");
Branch.setCharPref("sw_listatextos", res);
},
// Limpio todas las preferencias, por lo que borro todos los textos seleccionados
"limpiarPrefs" : function() {
// Borro los datos de la preferencia
var prefs = Components.classes["@mozilla.org/preferences-service;1"].
getService(Components.interfaces.nsIPrefBranch);
prefs.deleteBranch("extensions.swfiremarker.");
// Vacio los arrays
__SW_FIREMARKER_FIREFOX__.lista_textos = new Array();
__SW_FIREMARKER_FIREFOX__.lista_nodos = new Array();
__SW_FIREMARKER_FIREFOX__.lista_offsets = new Array();
// Quito spans marcados
var num = gBrowser.mPanelContainer.childNodes.length;
for (var i = 0; i < num; i++) {
var doc = gBrowser.getBrowserAtIndex(i);
__SW_FIREMARKER_FIREFOX__.limpiarSpan(doc.contentDocument);
}
},
// Limpio el texto seleccionado de la página actual
"limpiarPrefsPagina" : function() {
// Recupero el documento actual
var doc = content.document;
// Borro los arrays para la url actual
__SW_FIREMARKER_FIREFOX__.lista_textos[doc.location] = new Array();
__SW_FIREMARKER_FIREFOX__.lista_nodos[doc.location] = new Array();
__SW_FIREMARKER_FIREFOX__.lista_offsets[doc.location] = new Array();
// Quito spans marcados
__SW_FIREMARKER_FIREFOX__.limpiarSpan(doc);
// Guardo todos los datos, con lo que borro la url actual
__SW_FIREMARKER_FIREFOX__.guardarDatos();
},
// Quito los span que representan el texto marcado y dejo el texto limpio
"limpiarSpan" : function(doc) {
if (doc) {
var spans = doc.getElementsByTagName("SPAN");
for (var i=spans.length-1; i>=0; i--) {
if (spans[i].rel == "SW_FIREMARKER") {
var txt = doc.createTextNode(spans[i].firstChild.nodeValue);
spans[i].parentNode.replaceChild(txt, spans[i]);
}
}
}
},
// Copia al portapapeles el contenido de todos los textos seleccionados de la página actual
"copiarTextoPlano" : function() {
var copytext="";
var textos = __SW_FIREMARKER_FIREFOX__.lista_textos[content.document.location];
// Recupero los te
if (textos) {
for (var i=0; i



Cómo decir a Google que vuelva por nuestra página más tarde
displaynone — Wed, 28 Feb 2007 23:11:00 +0000
Cuando tenemos nuestra página en mantenimiento y el motor de Google (Googlebot) u otro motor de búsqueda, se pasa por nuestra página para indexarla, no es correcto que obtenga una página no encontrada (404) o un error del servidor (500).
Según dicen en Google Webmaster Central lo correcto es mandar un código de red no disponible (503), pero el autor de este post recomienda también enviar un Retry-After para que vuelva a pasarse más tarde. También recomienda que a los motores de búsqueda se les envie a una página 503 y a los visitantes (menos a él) a una página 404 (página no encontrada).
Instruct Search Engines to come back to site after you finish working on it



Instala cualquier cosa en Ubuntu
displaynone — Wed, 24 Jan 2007 18:30:00 +0000
Para los que no somos usuarios habituales de Linux, en este caso de Ubuntu, la siguiente guía nos puede ser de mucha utilidad para saber cómo instalar aplicaciones en esta distribución.
Parece más enfocada a aquellos que van a pasar de Windows a Ubuntu, por lo que gracias a sus pantallazos y animaciones (¡dios mio, son GIFs animados) nos explica paso a paso lo necesario para realizar estas acciones y no perdernos.
Empieza a explicarnos el package manager y sobre todo las diferencias con Windows, lo cual es algo muy importante si nuestro caso es el de pasarnos de un sistema a otro. Después se centra en la instalación mediante Synaptic, después mediante el terminal y por último manualmente.
How to install ANYTHING in Ubuntu
Vía / Digg



Convirtiendo XML a JSON con PHP5 DOM y XSL
displaynone — Thu, 18 Jan 2007 01:22:07 +0000
JSON es un formato de datos de intercambio de Javascript que el auge de AJAX ha hecho muy popular. En javascript es mucho más cómodo trabajar con JSON frente a XML ya que podemos analizarlo rápidamente utilizando eval(). 

Cuando queremos trabajar con API´s como las de Amazon, Technorati, del.icio.us o Ficrk vía REST nos encontramos con que todas ellas devuelven los datos en XML. Gracias a PHP5 y utilizando sus extensiones DOM y XSL podemos transformar un documento XML en JSON de forma muy sencilla.
Veamos un ejemplo de cómo hacer esto con una consulta a la API de Technorati:
En primer lugar vamos a componer la URL con la que haremos nuestra consulta:

$technoratiApiKey = "introduceTuAPIdeTechnorati";
$url = "http://api.technorati.com/tag";
$tag = "usabilidad";
$request=$url."?key=".$technoratiApiKey."&tag=".urlencode($tag);

Y ahora creamos un nuevo objeto DOM y cargamos nuestro el fichero XML que nos devuelve la consulta:

$inputdom = new DomDocument();
$inputdom->load($request);

Para transformar los datos utilizaremos un xml2json.xsl, un fichero XSLT que tiene las instrucciones para transformar XML en JSON. Lo cargamos en un nuevo objeto DOM:

$xslt = "xml2json.xsl";
$xsl = new DomDocument();
$xsl->load($xslt);

¿Qué nos falta? pues: crear un procesador de XSLT en PHP, cargar nuestra xslt, realizar la transformación y generar el documento:

$proc = new XsltProcessor();
$xsl = $proc->importStylesheet($xsl);
$newdom = $proc->transformToDoc($inputdom);
print $newdom->saveHTML();

Próximamente veremos cómo utilizar esta técnica para procesar información de diversas API´s REST mediante AJAX.



Cómo destacar en el menú de navegación el acceso en que nos encontramos
displaynone — Wed, 20 Dec 2006 00:00:00 +0000
Imaginemos que tenemos un menú de navegación y queremos diferenciar la opción de Home, el About, el Contacto… ya que en esos momentos estamos en uno de ellos. 
¿Cómo hacerlo? En Babblative nos enlazan algunos métodos para hacerlo:

Method 1 – WordPress: WordPress actually has this feature built-in. WP-List-Pages
Method 2 – PHP: Jem’s Trendy Active CSS Tabs or Matt’s Intelligent Menu’s. I’ve personally had middling success with PHP on a manually maintained site and little success with it on Textpattern.
Method 3 – Textpattern: You can either muck around with multiple templates, which is bloated and unnecessary, or you can use this method. If you choose to use the multiple templates then you’ll need to read how do I use a different page layout for each section? 
Method 4 – Manually Maintained Sites: Use Hicksdesigns method to highlighting current page with CSS
Keep Reading: Keeping a ‘current state’ on navigation, Keeping Navigation Current With PHP, EasyNav, Setting the Current Menu State with CSS
Vía / Babblative



Incluye tus vídeos en tu web
displaynone — Wed, 29 Nov 2006 23:10:00 +0000
si ya hace tiempo explicábamos cómo subir un vídeo en formato FLV a tu web y verlo mediante un visor incluido en la página web, ahora se trata de un artículo donde explican cómo hacer, de forma muy detallada, para casi todos los formatos de vídeo más comerciales, mostrar el vídeo en formato Flash (FLV).
En este caso se centran en los formatos de QuickTime, Windows Media y Abode Flash (aunque usando herramientas comerciales y no opensource como indicamos en el artículo anterior). Primero nos indican que debemos obtener la información del vídeo, luego codificarla y por último mostrarla.
Yo me sigo quedando con la alternativa opensource, pero es indiscutible que la explicación que nos ofrecen es de lo más completa.
The Rise of Flash Video, Part 3: Tackle your own project with this step-by-step primer