Bien batido y revuelto

En el más reciente artículo de A List Apart, “12 Lessons for Those Afraid of CSS and Standards“, el autor nos da 12 consejos a tener en cuenta a la hora de iniciarse en el diseño web con estándares y CSS. La principal idea a tener en cuenta es que será muy duro, y el primer consejo casi lo define todo:

Lesson No. 1: Everything you know is wrong… sort of
Just so we’re on the same wavelength, I want to underscore the fact that if you’re starting to work with CSS, everything you’ve learned to this point probably feels useless, or worse than useless.

Una lectura interesante para aquellos que quieran pelear con (X)HTML.

A través de Microsiervos descubrí una interesante gráfica sobre el tiempo dedicado al diseño web.

Real como la vida misma.

Me topé con un par de enlaces, el primero sobre como editar plantillas de Wordpress con DreamWeaver. No es una de las herramientas que uso, pero me pareció interesante ya que algunas veces me planteo cómo deberían trabajar los diseñadores web en conjunción con los programadores (por experiencia juraría que gran parte del trabajo con el (X)HTML queda como trabajo del programador).

El segundo enlace es “Design Tips for Building Tag Clouds”, en el que se dan algunas sugerencias y consejos sobre como presentar las nubes de etiquetas, sin ninguna explicación técnica (nada de programación ni HTML), sólo es una breve discusión sobre cómo hacerlas más útiles.

Y ya puestos a dar enlaces quiero rescatar algunos que considero interesantes sobre diseño líquido. El primero, “Liquid layouts the easy way” en el que se da una introducción a los diseños líquidos en HTML (distribuciones de páginas que no tienen un tamaño prefijado y que se adaptan al navegador y/o al dispositivo). El segundo artículo “Liquid CSS Layouts - Design Alternative to Table Based Websites” es algo más extenso y entra en más detalle sobre las implementaciones. Son técnicas antiguas y seguramente muchos las conoceréis, pero no está de más intentar adoptar esa nueva forma de diseñar para hacer una web más usable y accesible ¿no créeis?

Como aquella escena de Tron en la que los protagonistas abandonan el grid, en “A List Apart” se nos presenta un artículo que pretende darnos algunas ideas sobre cómo abandonar los diseños cuadriculados. Quizás pueda ser una reflexión interesante, habrá que tenerla en cuenta.

En el artículo “In search of the One True Layout” se presenta una especie de framework CSS para generar layouts. Habrá que echarle un vistazo, pero la idea parece buena.

Hace un tiempo Rasmus Lerdorf, escribió un correo explicando sobre AJAX, aquí va una traducción al vuelo.

Creo que mucho de todo eso de AJAX es un poco exagerado. Mucha gente ha estado utilizando cosas parecidas
desde mucho antes que se llamase “AJAX“, y realmente tampoco es tan complicado como mucha gente lo hace parecer.

Aquí hay un pequeño ejemplo de una de mis aplicaciones. Primero el JavaScript:

function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}

var HTTP = createRequestObject(); function sndReq(action) {
HTTP.open(’get’, ‘RPC.php?action=’+action);
HTTP.onreadystatechange = handleResponse;
HTTP.send(null);
} function handleResponse() {
if(HTTP.readyState == 4){
var response = HTTP.responseText;
var update = new Array();

if(response.indexOf(’|’ != -1)) {
update = response.split(’|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
} Con este código creamos un objecto Request además de una petición de envío y una función que gestione
la respuesta. Si quieres usarlo añades este JavaScript a tu página. Después para usarlo tan sólo necesitas
enlazarlo a algo, como por ejemplo a un evento onclick o directamente en un href como este: [foo] Así cuando alguien haga click en ese enlace lo que realmente pasará es que se generará una petición a
RPC.php?action=foo que se ejecutará en el servidor. En RPC.php puedes tener algo como esto: switch($_REQUEST['action']) {
case 'foo':
/* do something */
echo "foo|foo done";
break;
...
}


Ahora, miremos a la función handleResponse. Analiza la cadena “foo|foo done” y la separa a partir del carácter
‘|’. Entonces utiliza lo que va antes de ‘|’ como el identificador del elemento DOM de la página y lo que va después
será el nuevo innerHTML del elemento que hemos referenciado. Esto significa que si tenemos una etiqueta div como esta:

Typetester es una aplicación web que permite comprobar las distintas fuentes y efectos que pueden aplicarse mediante CSS. El uso de fuentes en documentos HTML a veces puede ser complicado, depende mucho de la plataforma salvo que se usen las tipografías genéricas definidas en CSS.

Seguramente no sea más cómodo que utilizar otras herramientas más especializadas como EditCSS para Mozilla o incluso un editor completo como NVU, o incluso algún editor de CSS JavaScript (no tengo URL a mano, pero probé alguno en su momento).

Pues Slashdot ya ha actualizado a HTML + CSS. Si queremos empezar a jugar podemos descargar la página y utilizar NVU para jugar con los CSS, que no lo hace del todo mal.

Breaking onload limits, como conseguir superar las limitaiones del evento onload.

He encontrado un interesante artículo sobre como usar DHTML y JavaScript para añadir anotaciones a las IMágenes. Se aportan varios enlaces a otros métodos, y me parecen interesantes los que no usan JavaScript y recurren a CSS.

Hace tiempo hice un editor para añadir situaciones en un mapa, funcionaba con JS y JavaScript y grababa las posiciones con RemoteScripting (ahora sería AJAX) pero no funcionaba correctamente en todos los navegadores y en la actualidad tengo alguna aplicación que usa CSS para colocar iconos sobre un mapa, pero sin un editor visual para modificarlo y creo que esa sería la parte más interesante, quizás vaya siendo hora de probar.