inXpiración por Sebastián Villalba

Descubriendo los nuevos servicios de Google, como Google Analytics o Google Sitemaps, uno puede encontrarse que han puesto capturas como la siguiente:

Imagen que muestra Google Sitemaps para ver el funcionamiento de su nuevo servicio.

Acabo de comprobar que en castellano sigue apareciendo la misma imagen, en inglés aparece otra políticamente correcta. En el contexto de la imagen (¿de dónde habrán sacado los datos?), la publicidad contextual podría ser muy “divertida”: madames, juguetes sexuales y tangas, por ejemplo :D

El lejano futuro de 2006, todos los navegadores excepto el que usaba la mayoría de las víctimas de un dios menor, tenían pestañas. Pero los libertadores de las masas, llamados desarrolladores, no tenían herramientas fiables para poder abrir enlaces en nuevas pestañas para los usuarios de sus blogs y aplicaciones de la Web 2.0. ¿Realmente era la 2.0 o el físico informático que le puso el nombre se olvidó de contar las versiones anteriores?

Nadie, ni la nueva ONU, llamada “La Fundación W3C” y formada por los principales grupos empresariales del universo, había contemplado esa posibilidad. Un día, J.F. Sebastian se despertó de una pesadilla en la que durante su jornada laboral le exigían que un enlace se abriera por las buenas en una nueva pestaña, en todos los navegadores que las tuvieran, sin usar Javascript ni elementos considerados pecado por los arcanos de la usabilidad.

Y no había manera de hacerlo, o al menos ningún científico ni laboratorio genético había dado con la solución, porque hasta ese momento nadie había tenido ese problema.

Nadie, en esa época de pestañas por doquier, había contemplado que en algún momento un desarrollador querría obligar a que el enlace sobre el que pulsaba el usuario se abriera en una nueva pestaña, sin tener que obligarle a realizar sofisticados movimientos para pulsar teclas extrañas mientras pulsaba el botón del ratón de un solo botón pero con dos clics, uno a la derecha y otro a la izquierda, designed by Apple in California y made in China; ni tener que utilizar complejos sistemas de programación cuántica basados en Javascript o ese potente detergente exterminador de accesibilidad llamado AJAX.

Nadie había pensado que sería tan fácil como añadir un nuevo valor al atributo target de los enlaces, el valor ”_tab”. Aunque se rumoreaba que una nueva homologación del Command Sexy Saver(*) tenía contemplada esta posibilidad:

If a user wanted to have new windows open in new tabs instead, she could use the following user style sheet to do so:
* { target-new: tab ! important }
http://www.w3.org/TR/css3-hyperlinks/#the-target-new

(*) Más conocido como CSS3, un estándar para todos excepto para ese navegador mayoritario que era el terror de los maquetadores.

Todo esto para decir en el máximo número de palabras lo que se puede decir en cuatro: ¡quiero un target=’_tab’ hoy!

Lo siento, me he quedado sin Coca-Cola fría y sin cubitos, y tomándola a temperatura ambiente pasa lo que pasa.

LAMP son las siglas de una plataforma de desarrollo web muy extendida: Linux como sistema operativo, Apache como servidor web, MySQL como base de datos y PHP como lenguaje de scripting. Plataforma: Intel, AMD, Solaris, Mac…

Como novedad, MAMP son las siglas de lo mismo pero cambiando las pesadillas que puede provocar Linux a nivel de usuario por el sistema operativo más amistoso y que menos informa de sus errores: Mac OS X. Plataforma: solo Mac, pero compatible con el resto. MAMP es una forma sencilla de instalar todo esto en Mac OS sin tocar para nada del sistema operativo, que ya de serie trae su propio Apache. Curiosamente, el logotipo de MAMP es un elefante, que también es el símbolo de PostgreSQL, esa con la que todos hubiéramos tenido que empezar en su momento ;)

Desde el lado oscuro de la fuerza, WISA, es la amalgama de Windows como sistema operativo, Internet Information Server como servidor web, SQL Server como base de datos y ASP (.net) como lenguaje de scripting. Solo compatible consigo mismo hasta que MS jubile al ASP y fuera de juego con .Net si tus aplicaciones antiguas funcionan sobre ASP 3.0.

La ventaja de usar MySQL, Apache y PHP es que las aplicaciones pueden funcionar en cualquier sistema operativo y plataforma, del presente y del futuro. Los del lado oscuro son víctimas de un dios menor, están más desprotegidos frente al futuro. Como alternativa, existe WAMP que es Apache, MySQL y PHP preparado para funcionar en Windows. Es un buen sistema para prepararse a dar el salto a lo_que_sea_menos_windows.

Post escrito vampirizando la noticia de MAMP de Proletarium.org, Minid.net y Alt1040 (los leí en este orden ;)

Desde que se ha actualizado la base de datos en la que trabajo a la última versión, me da la impresión de que se ha vuelto alcóholica al Svedka Vodka, Imported Swedish Vodka. Todas las tablas que ya existían, y por defecto todas las nuevas, pasan a tener automáticamente la intercalacion (collation) latin1_swedish_ci. No es grave y es sencillo pasarlo al spanish.

Siempre he sido partidario de realizar todos los procesos de un sitio web en el servidor, con PHP o ASP, aunque poco a poco voy aceptando el Javascript como “animal de compañía”.

Agustí García comenta su proyecto de base de datos en Javascript
“Comencé este proyecto, porque en más de una ocasión había necesitado tener un minimotor de bases de datos para poder ejecutar de una forma pseudo-dinámica unos contenidos estáticos.”

No se trata de tener el catálogo de productos de una empresa usando un array en JS en el navegador del usuario, sino de poder cargar, por ejemplo, 200 registros, y con instrucciones SELECT, de las de toda la vida, filtrar resultados sin necesidad de volver a conectar al servidor y volver a descargar la página con el contenido actualizado. Puede verse la demostración, consultando el código fuente de la página es más sencillo comprender el funcionamiento.

Una idea interesante, pero todavía no se me ha ocurrido un ejemplo práctico para mis cosas.
Visto en /. hace algunos días.

Leyendo más que código he descubierto un sitio que tiene tarjetas de referencia rápida de diferentes lenguajes: The Quick Reference Site

Enseguida me he bajado las de PHP y MySQL. Me estoy haciendo un archivo de texto en el que he pegado todas mis chuletas para programar en PHP: un IF, un LOOP, un SELECT, un DELETE, un UPDATE, como se recogen variables vía POST o GET, una paginación de registros, ordenación por columnas, validación de fecha, de hora…

Ha llegando un momento en que me paso más tiempo copiando o pegando código que escribiendo nuevo código, incluso me estoy planteando usar un weblog para almacenar y consultar los diferentes códigos o chuletas.

Llevo unos dÃas en los que cualquier gestión que pudiera realizar por Internet ha terminado como el rosario de la aurora:

• En Alsa es imposible reserver un billete de autobus si no tienes Internet Explorer, no sirve un agent switcher ni nada parecido; o entras con MSIE o no puedes ver los contenidos del área de la aplicación de reservas.

• En la web de Renfe existe un área llamada Tiknet que permite comprar los billetes y recogerlos 10 minutos antes de subir al tren, pero el sistema está mal diseñado ya que te permite seleccionar trenes en los que ya no quedan plazas. Una vez que has introducido todos los datos es cuando te da un error crÃptico, si vuelves atrás no funciona, si usas su enlace de volver atrás, vuelves al principio, como en el juego de la oca.

• En la estación de Barcelona Sants hay unos terminales para comprar los billetes insitu, pero… si hay 9, solo suelen estan encendidos 6, y en 3 de ellos hay errores de todos los colores: 404 de página no encontrada o una petada de NT 4.0. En los 3 que funcionan, la primera vez que haces una selección acojona, piensas “si esto funciona es la leche”, leche que te da el terminal al final de proceso, porque aunque solo te permita elegir los trenes en los que quedan plazas, te da la sorpresa de decirte que tu selección no es posible y vuelta a empezar, u otros más raros como que tu reserva la tiene otro terminal, o meter la tarjeta, teclear el número y que te diga que no se lo has tecleado.

• En el Store de Apple he intentando unas 6 veces comprar la mochila que se merece mi Mac. En todas ocasiones, al final de todo el proceso (nº de tarjeta includo) un error de sesión. Menos mal que usaba un PB, un PowerMac, Safari y Mozilla.

Volviendo a la realidad, he terminado llamando por teléfono para comprar la mochila a Apple (llamada gratuita) y llamando al 902 de Renfe, donde no ha habido ningún problema para hacer la reserva (qué curioso). Cuando me han dicho el número de reserva no tenÃa papel en el que anotarlo y como llevaba un rotulador permanente he terminado escribiendo el número en un pilar metálico de una de las pérgolas que hay en la plaza, delante de la estación.

Un tipo me ha visto escribir en el pilar metálico y quizás ha pensado que yo le estaba dejando mi número, primero se ha ido a mirar el número y luego ¡parecÃa que querÃa seguirme! Darling, ¿cuántos móviles empiezan por 30 y tienen un guión en medio? :D

En la web de PHP.net he encontrado un enlace a una base de datos que relaciona IP con países. Es posible descargar el listado de rangos de IPs y sus correspondientes países. La lista de IPs se proporciona en este formato:

"1347502080","1347503103","ES","ESP","SPAIN"

También explican cómo transformar una IP en formato A.B.C.D a su formato numérico.

Y para consultas rápidas, tienen un formulario para hacer consultas de IP

Hace más de 31 dÃas que no he reiniciado mi servidor casero.

Netcraft es una especie de chivato que permite conocer el S.O. y el servidor que usa un dominio, y accediendo a menudo se genera la gráfica de cuándo se ha reiniciado ese servidor.

Estas son las anotaciones que he tomado durante las pasadas Jornadas de formación e intercambio de mejores prácticas en accesibilidad Web. Algunas cuestiones pueden parecer evidentes o demasiado básicas, pero he creído importante volver a recordarlas.

“Con la comprensión se llega antes a la aceptación.”

Seguir leyendo…

Llevaba tiempo queriendo hacer triangulitos como estos <> pero rellenos y sin usar ninguna imagen. Recordaba que en algún sitio los había visto, pero… gracias a Google ya sé que > también puede ser ▶ (en HTML ▶) y < puede ser también ◀ (en HTML ◀).
Lo bueno es que es 100% HTML, en esta página (de pésimo contraste) tienen una guía completa de todos los caracteres latinos en HTML 4.01.

Actualización: ya he recordado donde he “visto” antes el símbolo, que se escribe pulsando Alt+1040. Como dijo don Quijote, con la iglesia hemos topado: Alt1040 ;)

Desde hace unos dÃas he tenido la suerte de topar con una mala práctica en varios sitios web: enlaces a documentos PDF sin ninguna indicación. Al pulsar en el enlace el navegador se bloquea mientras carga en un segundo plano el plugin y el programa de PDF, y en equipos poco potentes y lentos la situación es irritante. Además tengo la manÃa de “Guardar como…” todos los PDF que me encuentro en mi camino en el escritorio, y abrirlos posteriormente con Adobe Reader sin involucrar al plugin del navegador. Posteriormente decido si los archivo o se van a la papelera.

La forma correcta de enlazar a un PDF (o un documento DOC, Powerpoint, etc.) es indicarlo poniendo el formato, el peso en KB y opcionalmente el número de páginas. Por ejemplo: “enlace”:# (formato PDF, 34 KB, 23 páginas), o tal vez el formato deberÃa ir antes, puesto que se leerÃa la advertencia antes de ver el enlace, algo asà como: PDF “enlace”:# (34 KB, 23 páginas). Creo que Google sigue este esquema cuando presenta un PDF.

Si (todavía ;) programas en ASP y VBScript, existe un interesante sitio que recopila sus funciones, además de las de Javascript, XSLT, WML, CSS, HTML, XML, sintaxis SQL y otros lenguajes a través de su buscador: Devguru. No es una guía profunda, pero como referencia rápida es muy útil.

En SloopyCode también tienen muy buenas recopilaciones, con montones de ejemplo preparados para copiar/pegar/adaptar, sobre:

• ASP
• VBScript
• FSO

La barra de utilidades de Google permite hacer un autocompletar en los formularios. Esta opción ya está disponible en los navegadores:

• En Firefox 0.8: Tools > Options > Privacy > Saved Form Information y Saved Passwords.

• En Internet Explorer: Herramientas > Opciones de Internet > Contenido > Autocompletar.

En los navegadores el autocompletado funciona si en los diferentes sitios que visitamos el nombre de los campos y la información que introducimos en los campos coincide, en estos casos nos evitamos tener que teclear de nuevo nuestro nombre o dirección, a no ser que tengamos varias ciber-personalidades o pseudónimos.

En Google el autocompletado funciona de otra forma puesto que sigue un estándar para nombrar los campos de los formularios llamado ECML (Electronic Commerce Modeling Language).

Google dice: “Web publishers can use special field names to ensure that AutoFill works on their pages. These tags are defined in the ECML (Electronic Commerce Modeling Language) standard” (Google Toolbar FAQ). Entre los miembros de esta alianza figuran American Express, AOL, IBM, Mastercard, Microsoft, Novell, Sun y Visa.

Esto suena muy bien desde el punto de vista del usuario, pero el nombre de los campos a la hora de desarrollar un sitio es kafkiano. Por ejemplo, el campo Nombre se debería nombrar como Ecom_ShipTo_Postal_Name_First.

Parece ser que el validador de CSS del W3C no funciona correctamente, acabo de leerlo en la web de Jeffrey Zeldman. Si tu sitio ha dejado de validar, no te pongas a rediseñar como un loco por el momento ;)

CSS Validator is broken
“The service is simply broken. Presumably it will get fixed. Meanwhile, many valid CSS sites will be incorrectly labeled invalid. Don’t start redesigning just yet.”

Ya es oficial: inscripción y sitio para dormir confirmados :)
Voy a las jornadas de formación e intercambio de mejores prácticas en accesibilidad Web que organiza el W3C en Madrid los dÃas 9 y 10 de febrero, aprovecharé el fin de semana previo para deambular por Madrid.

Las jornadas de accesibilidad son en inglés, habrá traducción simultánea de las mismas, todo un detalle por parte del W3C. Les escribà para confirmar mi inscripción y también me contestaron en los dos idiomas.

Solo me queda una duda: ¿habrá que ir desayunado o por “continental breakfast” y “lunch” se entiende que ellos invitan? En la inscripción habÃa que elegir entre dieta vegana, vegetariana y normal. Todo un detalle, especialmente para los que no somos “normales” y somos especialitos.

Hace unos dÃas sacaron en las noticias granjafamiliar.com que ha puesto varias webcams para poder ver en cualquier momento a los animales.

Durante un “ligero y sabroso paréntesis” en el trabajo, decido entrar en el sitio usando Mozilla en Windows. Se carga la página y no sé donde ir. Me paseo por toda la spash window sin encontrar ningún enlace para saltarme esta presentación hasta que se me ocurre pasar por encima de un texto y veo en la lÃnea de estado que ese enlace es el que estoy buscando.

Pulso sobre la imagen y no pasa nada. Lo repito varias veces por si hay alguna interferencia con el antipopup de Mozilla o el de Google Toolbar. Como ya estoy sobre aviso, copio la URL y abro MSIE.

¡Funciona con MSIE! Ahora aparece un menú con las secciones de la web. Curiosamente se abre de abajo a arriba, seguramente es un nuevo estándar de menús.

Pulso sobre “webcams” y parece que no pasa nada. Vuelvo a pulsar por si es cosa del antipopup de la barra de Google y nada, hasta que me doy cuenta de que por debajo ha aparecido otro menú. Pulso sobre la webcam 1 y el disco duro empieza a rascar. Eso significa Java, eso es Java.

La webcam se abre en una nueva ventana, y decido mantenerla por si aparece alguna vaca o algún cerdo. En la ventana en la que estaba sigo navegando por otros sitios y ¡tachán!, se cierra la ventana de la webcam.

Resumen de problemas detectados:
Spash window, scripts que solo funcionan con MSIE, frames, navegación confusa, empleo de Java cuyo plugin pesa unos cuantos megas… demasiados problemas para una web realizada en el 2003-2004.

¿Cómo lo habrÃa hecho yo? Sin un solo javascript, sin frames, mostrando desde el inicio imágenes de cada webcam actualizadas cada hora, con una navegación clara y seguramente empleando Flash para la webcam en vez de Java. Y accesible para todos los navegadores.

La idea de este sitio web es interesante, pero en cuanto al desarrollo es una pifia. Tengo curiosidad por saber qué empresa ha realizado el diseño y desarrollo y cuánto han cobrado por este desastre tesnológico.

ALT se usa para describir
ALT es el texto alternativo que deben llevar todas las imágenes. Es decir, si en una imagen aparece el texto “Nuevo”, su texto ALT debe ser “Nuevo”, y un navegador gráfico que mostrara la imagen NO deberÃa mostrar ningún texto al pasar el cursor por encima. En el caso de una fotografÃa, deberÃa describirla.

TITLE se usa para informar
TITLE es el texto que queremos que aparezca al pasar el cursor sobre un enlace o imagen. En el caso de una imagen que mostrara el texto “Nuevo”, podrÃamos poner “desde el 1 de enero” como TITLE, sin dejar de poner “Nuevo” como ALT. Un navegador gráfico con la imagen cargada mostrarÃa el texto del TITLE al pasar el cursor por encima.

¿Adivinamos qué navegador incumple alguno de estos comportamientos?

Acabo de iniciar los trámites para apuntarme a unas jornadas sobre accesibilidad que organiza el W3C los días 9 y 10 de febrero de 2004 en Madrid (gracias al enlace a Urban Design que aparece enlazado en Dynamic Style).

Hace tiempo leí una frase de uno de los padres de Internet, Tim Berners-Lee: “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”. Me impactó por su rotundidad y me hizo tener en cuenta la accesibilidad en cada nuevo sitio web que desarrollo o mantengo.

Una manera sencilla de hacer un sitio accesible, además de echar mano de validadores como Taw, es tener en mente que el texto siempre se debe representar como texto, que todo elemento visual o de animación debe tener una versión alternativa, y cómo no, que se puede navegar a través de la página con Lynx. Esa es la teoría y se suponía que todo era correcto si validabas algunos de los niveles de accesibilidad del WAI. Hasta hace unos días no se me ocurrió intentar registrarme en uno de los sitios que he desarrollado, y pude hacerlo usando solo el teclado y en un navegador en modo solo texto.

En un sitio accesible salen ganando todos los usuarios, yo suelo notar especialmente la diferencia a la hora de rellenar formularios accesibles frente a otros que no lo son porque el orden de campos es el correcto (al saltar de uno a otro con el tabulador), cada elemento de formulario tiene un texto asociado empleando la etiqueta label y los radio button se pueden seleccionar pulsando en su círculo o en su texto, por ejemplo.

Usando un poco de tiempo (y dinero) más en hacer las cosas bien todas las personas podrán acceder a los contenidos de nuestro sitio web. Hace unos meses nos llegó al trabajo un e-mail de un usuario invidente felicitándonos porque podía navegar por nuestro sitio. No hizo falta hacer costosas pruebas de usuarios con discapacidades, sino seguir las pautas de accesibilidad. Al principio puede deprimir ver muchos errores en tu sitio, pero solucionándolos de uno en uno acabas aprendiendo y desarrollando sitios que de serie ya pueden llevar como mínimo la pegatina A, además de las pegatinas del HTML 4.01 o XHTML 1.0.

Migraciones y migrañas son dos palabras que suenan muy parecidas, y que además están Ãntimamente relacionadas. Si tu hosting te dice que va a hacer una migración transparente para ti, es posible que sea su intención, pero ten por seguro que ninguna migración es inocua. Ten cerca un bote de aspirinas o de Cod-Efferalgan, que es genérico y funciona igual de bien.

Basándome en mi experiencia, he desarrollado el principio de : “Las migraciones SIEMPRE provocan problemas, NUNCA son inocuas”.

No me refiero a los problemas que hayas previsto de antemano sino a los imprevistos que aparecen on the fly como champiñones. Por ejemplo: normalmente usas DSN less para conectarte a bases de datos, pero hay algún componente por ahà desperdigado que usa ODBC, y en el momento de hacer la migración, contactas con el soporte de tu ISP, que te dice que IIS 6 no permite usar ODBC. Vaya forma de columpiarse.