display: NONE

Gracias, pero dejad de quererme tanto

2008-01-18T11:30:00.000+01:00

No suelo contar nada que no sean cosas técnicas, pero esto que me ha pasado ya me tiene un poco mosqueado. En una semana me han llamado 3 veces para regalarme un libro de cocina, dos relojes (señor y señora) y una magnifica plancha, eso sí, todo gratuito. Lo más curioso es que ha sido de tres empresas distintas, lo cual me hace sospechar sobre eso de la Ley de Protección de Datos.

El libro me interesaba, dije que sí, pero nunca llegó a mi casa. Los relojes dije que no y eso que solo me cobraban 12 euros de gastos de envío, ni que el mensajero viniera en taxi, compro cosas por internet y los gastos de envío no llegan a esa cantidad ni de lejos. Y de la plancha, pues paso, tengo un centro de planchado muy majo y que ya forma parte de la familia, sería despreciable de mi parte deshacerme de él después de todo lo que hemos vivido juntos.

Lo que más pena me da son las teleoperadoras, víctimas de contratos de @%&# y que tienen que hacer frente a campañas imposibles. Al menos en mí está el tratarlas con toda la educación del mundo aunque tenga ganas de mandarlas a paseo por el latazo que me dan, culpa suya no es.

A ver si en la próxima llamada me regalan un Tom Tom o el MacBook Air para poder ir a un StarBucks y flipar de friqui-intelectual, que parece que es lo que está de moda, porque para otra cosa al Air no le veo utilidad.

No me gusta Gallery

2008-01-11T19:08:00.000+01:00

No me gusta nada Gallery, uno de los mejores gestores de imágenes, galería de fotos, etc... que hay. Me recuerda un foro, y tampoco me gustan los foros.

Por ello creo que me voy a poner a hacer una aplicación de galería de fotos cuando tenga un rato, lo cual está difícil, porque tiempo, lo que se dice tiempo... pues no me sobra mucho.

Lo voy a hacer con Code Igniter que es un framework de PHP que me encanta. Y si me queda bien y no me avergüenzo mucho de mi trabajo, pues lo pondré open source, que ya es hora que otros se aprovechen de mi trabajo, como yo lo hago a diario con el trabajo de otros.

Linux 3 - Yo 2

2007-11-04T19:46:00.000+01:00

Me ha dado por instalar Linux en un portatil, compartiendolo con Vista, total nada. Siempre he tocado Linux de lejos, algunos proyectos lo usaban, algún Live CD y una instalación en el VMWare.

Ahora voy en serio, quiero meterme en Linux y pasar más de Windows, aunque siendo sincero, me está costando. Empezando por hacer el dual boot entre Vista y Kubuntu, que ni sé que he hecho porque inicialmente arranco con la partición de Vista, me aparece Kubuntu gracias al EasyBCD, pero cuando accedo al Kubuntu me aparece otra vez Vista debido al Grub, vamos, que me puedo saltar de una a otra durante horas sin realmente acceder a ningún sistema operativo.

¿Por qué Kubuntu? porque Ubuntu es más sencillito para los novatos y porque me han recomendado KDE. El primer problema que me encontré eran los drivers del wifi, pero pude instalarlo, después de unas cuantas peleas entre Linux, la otra conexión y la poca capacidad innata que tengo. Una vez superada esta prueba, parecía que iba a ser coser y cantar, ya que gracias a ello me enteré de cómo se instalaban las cosas en Kubuntu (punto a favor de kubuntu porque me gusta mucho mas que en Windows, y que ni contar que en Vista, con el latazo que da la autorización para instalar cosas).

El motivo por el 3-2 es porque el wifi se me desconfigura a todas horas, a ver si le dedico un poco más de tiempo y remonto el partido.

Sobre caché y otras historias

2007-10-05T19:22:00.000+02:00

He estado leyendo un artículo de Ricardo Galli sobre Twitter, escalabilidad y otras cosas varias, y espero que no moleste lo que voy a decir, lo único que me ha interesado son los comentarios.

En estos, Galli, demimismo, rvr y álvaro han mantenido un intercambio de ideas sobre si es mejor PHP o RoR, que si el caché por aquí o las bases de datos master-slave por allá y más cosas.

Yo no soy un experto en esas cosas y menos aún me las daría de tal, pero me entran algunas dudas sobre algunas cosas que comentan.

Galli dice que menéame solo usa un servidor y que no necesita caché... eehhhh... oyee... pues quizás sea cierto. Espero que lo de un único servidor se refiera para web, porque no creo que sea uno para la web y la BD todo junto. Yo no he visto el código de menéame, pero un amiguete que sí que le ha dado por eso (creo que por penitencia de algo), me comentó que es un poco caótico, y caos suele ser poco amigo del señor rendimiento, pero bueno, no dudemos del código.

Lo que más me impresiona es que dice que antes de usar caché pues le mete servidores de no sé qué y mil líos de BD (ahora no me acuerdo y paso de leerme otra vez todo eso para buscarlo). A mí el comentario me parece impresionante, es como decir que si te va mal con tu mujer, pues te buscas una amante para que los ratos malos los pases con ella. No, tío, vete a un terapeuta y que arregle tu matrimonio... Pues lo mismo, en vez de meterle una máquina más, mejora el código, que seguro que el código se puede optimizar y añádele caché para que no tire tanto del PHP, RoR o lo que sea que uses para programar. Por cierto, a la BD ni se te ocurra meterle índices o mejorar las queries, total, le metes una bd master-slave, master-master, active-active o un taller ilegal con esclavos que busquen los datos y los envíen a pelo.

Otra cosa que me ha dejado un poco mosca es el afán de algunos por relacionar código óptimo con pocas líneas de código. El número de líneas de código no tiene mucho que ver con lo bueno que sea el código, sobre todo porque seguro que en esas 10 líneas de código llaman a alguna función suya que puede estar fatalmente implementada (no digo que lo esté, sino que se puede dar el caso). Me acuerdo una vez que salió la noticia de que alguien había sido capaz de crackear un DVD con 7 líneas de código, el tema es que jamás comentaron que el desarrollador tenía rota la tecla INTRO.

Siguiendo con la conversación, otra cosa que no entiendo es el tema del uso de frameworks. Usar un framework no tiene nada malo, lo malo es usar un framework poco óptimo. Está claro que o el framework es muy bueno, o si quiere hacer muchas cosas puede que la aplicación no sea todo lo óptima del mundo. Pero seamos sinceros, todos usamos un "framework", ya sea nuestra capa de BD o la que nos ofrece CodeIgniter (me gusta este framework), pero al final todos usamos librerías para hacer cosas. El que se desarrolle desde cero no implica nada de nada, a no ser que el que lo haya desarrollado sea un buen programador.

Después de leer este post me he puesto a leer una presentación sobre la arquitectura de la coctelera que es bastante interesante, pero hay una cosa que no comprendo, dicen: "si el usuario está loggeado: el lighttpd sirve la página estática, y con Ajax rellenamos el contenido no cacheable (petición mucho más ligera que un dispatch sirviendo una página entera, aunque sea de caché)". Mi duda es la siguiente, si una página que es dinámica tiene varias zonas que se cargan con Ajax, eso implica que se realizarán varias peticiones http y que se harán varias consultas a BD. ¿De verdad esto es más optimo que tener una página dividida en parte cacheable y parte dinámica y que se junten los dos tipos de contenido en una página?, pues no tengo ni idea, pero a primera vista a mi me parece más óptimo usar caché para partes cacheables y añadirle la parte dinámica, además de poder optimizar las consultas a BD si se hace en una única ejecución.

Emprendedores en Evento Blog España 2007

2007-08-25T00:47:00.000+02:00

La gente de Evento Blog España avisan sobre una mesa de emprendedores para EBE07, esto no es algo que suela contar en este blog, pero merece la pena por el trabajo que realizan los organizadores

El sábado 24 de noviembre en EBE 07, las empresas y emprendedores tendrán nuevamente un escaparate en el que exponer sus nuevos proyectos relacionados de una u otra forma con la blogosfera y la web participativa.

Descargar Bases

Bases para la mesa de emprendedores en EBE 07 (PDF)

EBE 07 da la bienvenida a los amigos sevillanos de Networking Activo, sin duda, la empresa que mejor está fomentando las sinergias entre los emprendedores de la red hispana, que colaborará con nosotros en la gestión y devenir de la mesa, teniendo, entre otras responsabilidades, la de maestro de ceremonias en la persona de Emilio Márquez.

Plazo para la recepción de proyectos

Desde hoy, 26 de julio de 2007 hasta el viernes 26 de octubre a las 23:59H, es el plazo para que los emprendedores nos envíen un resumen ejecutivo de su proyecto que deben cumplir 2 requisitos imprescindibles:

haberse lanzado públicamente o que al menos se pueda acceder previa invitación y
que permita la interactividad a través de la publicación de contenidos de los usuarios

Resumen ejecutivo

El resumen no tendrá una extensión superior a una página en tamaño DINA A-4 y debe incluir 4 secciones:

Descripción del proyecto,
Valor añadido
Mercado al que va dirigido e
Iniciativas similares o Competencia.

El resumen se enviará a los siguientes emails: info (arroba) eventoblog.com | info (arroba) networkingactivo.com

Seleccionaremos a un total de 15 semifinalistas, los cuales deberán rellenar un cuestionario económico-financiero que deberán enviar antes del 31 de octubre, a los emails mencionados. El 1 de noviembre se publicará en nuestra web y en el blog de Networking Activo los 10 proyectos (como máximo) finalistas que se presentarán durante la mañana del sábado 24 de noviembre en EBE 07. A partir del 1 de noviembre, los emprendedores tendrán un plazo de 10 días naturales para el envío de las presentaciones en formato .pp o .ppt

Para más información puedes descargarte las bases completas o dejad tus dudas a través de los comentarios o en nuestro formulario de contacto.

Fushioko

2007-07-19T15:45:00.000+02:00

Fushioko es una cadena de tiendas que ofrece productos artesanales traídos directamente de Japón, Vietnam, China y otras zonas de Asia. Allí nos podemos encontrar desde decoración hasta ropa. Jarrones, juegos de té y "kimonos" vietnamitas resaltan nada más entrar en cualquiera de las tiendas, pero con un segundo vistazo podemos ver más productos que nos llamarán la atención: cuadros, flores de papel y mucho más.

¿Por qué hablar de una tienda de productos asiáticos en un blog enfocado en la web?, principalmente porque Fushioko pertenece a unos amigos míos, y por algo bueno que conozco, merece la pena hablar de ello. A parte, porque me gusta la página web que desarrollo mi amigo, que a además de empresario, es informático.

Fushioko.com está desarrollada en Flash, es multiidioma, y aunque aún está en fase de desarrollo, tiene una gran presentación, con modelos 3D diseñados y desarrollados por ellos mismos. El control de sonido está implementado desde cero (en el cual participé en el testing) y el cambio de imágenes hace que todo parezca muy sencillo y suave.

El otro día leía en Loogic que cambiaba publicidad por diseño, yo en este caso voy a poner publicidad de los sitios que creo merecen la pena.

Para quien le interese, las tiendas se encuentra en Madrid:

C.C. Príncipe Pío, Local G4
Pso. De la Florida, 2
Madrid

C.C. H2Ocio
Parque Empresarial Rivas Futura, Local LB24
C/ Marie Curie, 4
Rivas Vaciamadrid (Madrid)

Blogegos

2007-07-11T15:52:00.000+02:00

Hoy he leído un post de Federico de 5.1.1 en el que dice que aunque ya no escribe demasiado, no ha dejado su gran blog de lado, sino que ha estado una época cansado "del ombliguismo de la blogosfera, persiguiendo la última noticia o buscando mostrarse más inteligentes que otros".

Con Federico no tengo ningún trato, a parte de leer su blog y de recibir algún comentario en Sentido Web que siempre ha aportado algo nuevo, corregido alguna cosilla o algo igualmente interesante. Aunque no le conozco, no puedo estar más de acuerdo con él.

Muchas veces he comentado con JL que lo menos que me gusta de esta blogosfera son los blogegos que tienen muchos blogeros. Cuando un blog formado por una o varias personas empiezan a ~~ser~~ creerse estrellas del mundo mundial, yo les quito del Google Reader, cosa que seguro que les trae sin cuidado, pero mira tú por donde, yo me libro de post del tipo soy-guay-molo-mogollón-y-estoy-aquí-para-solucionaros-vuestra-existencia.

Al igual que le dije a JL, si algúna vez en display: NONE o en Sentido Web empieza a notarse una falta de humildad, doy permiso a quien quiera a ponerme a parir despiadadamente, y si eso no es suficiente le digo dónde vivo para que me parta las piernas.

¿Qué es lo que me ha hecho escribir esto hoy? pues un simpático email ~~exigiéndonos~~ pidiéndonos en Sentido Web que borremos un artículo que hemos copiado. No voy a decir el post en cuestión porque no me parece correcto decirlo, pero si lo leyerais, veríais que no se trata de DUPLICAR, sino de REFERENCIAR, a parte de que el blog en cuestión tiene licencia Creative Commons y si mal no creo no la incumplimos. Como dato, creo que las 105 palabras del post de Sentido Web, no son un duplicado de las 825 de su artículo.

Paso del iPhone

2007-07-04T21:19:00.000+02:00

Hoy leo en El Pais que el iPhone cuesta el doble de lo que vale, lo cual hace confirmar lo que ya opinaba antes: muy bonito, ¿y?.

Me encanta la tecnología, pero una cosa es esa y otra cosa es gastarse 600$ en algo que no vas a usar ni la mitad de las cosas. Tampoco es que esté demasiado enterado, pero que yo sepa no hay radio... ¡¿y como pretenden que oiga Gomaespuma?!, bueno, tampoco es que quede mucho de ese programa. Tampoco hay GPS (repito, que yo sepa), pero sin embargo si se encargan de poner un mapa de un callejero para que la gente se haga una idea falsa, ese mismo mapa es como acceder a Google Maps y ver por donde voy, y los satélites del GPS se sustituyen por los tres viejos sentados en el parque a los que pregunto cómo ir a la calle tal y pascual.

De todas formas, si eres friqui cómpratelo, y tira o revende el iPod que también te compraste por friqui, ¿por qué para que quieres el iPod si ya tienes el iPhone?.

La gente ahora desea ver su página web en el iPod, la verdad es que me parece una tontería, cambias el tamaño de tu navegador a 320x480 y lo vas a ver más o menos parecido. Yo sin embargo estoy deseando ver Pownce en el iPod, lo mas cool de lo más friqui.

Actualización: hay que ser gilip..., pero bueno, viendo la cara de friqui que tiene el primero que compró, se entiende.

Muchas ideas, poco tiempo

2007-05-14T10:07:00.000+02:00

El otro día hablando con Christian me comentaba que en First Tuesday (que curiosamente se hizo un jueves) o en el Iniciador, no recuerdo en cual me dijo, había mucha gente que necesitaba nosecuantos cientos de miles euros para poder iniciar su proyecto web.

Quiero sumarme a esa iniciativa. Por favor, alguien a quien le sobre la pasta que invierta en mí, tengo muchas ideas y poco tiempo. ¿Por qué necesito una buena cantidad de dinero?, porque para tener tiempo para desarrollar alguna idea tengo que dejar mi trabajo, dedicarme a ello a tiempo casi completo y tener un buen nivel de vida. Digo casi porque por supuesto no pienso dejar de lado Sentido Web, ya que, entre otras cosas, le estoy muy agradecido a la gente de Blogs Media y Sentido Web es algo que forma parte de mí; y tampoco voy a dejar de lado la cosilla en la que estoy metido ahora con otra gente.

Eso sí, una condición, ni se molesten en pedirme cuentas, si hay beneficios yo encantado de repartirlos, pero si no hay, mala suerte, ¿no sería inversión de riesgo?, pues eso tiene el riesgo, que la puedes pifiar.

Es más, mientras escribía esto se me ha ocurrido otra idea... ¡dios! no puedo pararlo.

Actualización: si él lo consigue, habrá esperanzas para alguien como yo. Y porque no quiero dejar mal a ***, que si no, me apunto a formar parte de los desarrolladores, está bien eso de que no quiera mileuristas, no como en todas las consultoras de todo a 100 (aunque tengan 5000 empleados) que cuanto menos cobres mejor para ellos. Eso sí, yo ni idea de negocios, pero si pide 400.000 euros, ¿va a obtener beneficios suficientes para devolverlos y que los inversores ganen su dinerillo?

Lo bueno de ser blogger

2007-03-27T14:43:00.000+02:00

Ya hace más de un año que soy blogger. En enero pasado me dio por crear display: NONE con dos intenciones: enseñar lo poco que sé y ganar dinero. Está claro que ni lo uno ni lo otro, sobre todo lo de ganar dinero, porque los 6$ que debe tener la cuenta de Adsense no pagan mis vicios, y eso que son pocos. A ver si un día quito lo de Adsense de aquí, pero con la pereza que me da tocar la plantilla, creo que se va a quedar así una temporada larga.

Aunque mi labor didáctica ha sido escasa y el dinero ha sido más escaso aún, al menos he conseguido otras cosas que hacen que ser blogger sea algo positivo. Gracias a display: NONE, JL me propuso colaborar en Sentido Web, lo cual ha sido una de las cosas más positivas que me ha pasado últimamente (quitando asuntos personales, claro). Con JL aprendes mucho y de todo, aprendes sobre cómo funciona el mundo de Internet, sobre publicidad, sobre metodología bloggeril y muchas más cosas.

JL y Gabriel son la parte visible para mí de Blogs Media, a parte de unos tíos muy majos, da gusto tratar con ellos, son lo más honrados del mundo, lo cual hace creerte que todo el mundo es así en este mundillo y cuando te encuentras con algún personaje, te llevas una sorpresa gorda.

Debido a un artículo de Sentido Web se presentó en mi correo un día Chris, el cual también ha sido una gran sorpresa en esto de la blogosfera o internet a secas. Más de lo mismo, te crees que todo el mundo tiene su calidad y te llevas un chasco al comprobar que no siempre es así. Lo único que puedo decir en contra de Chris es que se niega a que haga de maletero en alguno de sus viajes, que son pocos.

Y la cosa no queda aquí, gracias a JL conozco a otro JL (¿estaba de moda ese nombre en la época de nuestros padres?), llevamos poco juntos, pero mira tú por dónde cumple las dos características anteriores, majo y honrado (tengo ganas de encontrarme con un verdadero @#%$, porque me voy a volver un pardillo a este ritmo.

¿Qué conclusiones saco de todo esto?, que me ha servido para conocer gente muy interesante y que me están ayudando a mejorar en esto. ¿Es suficiente?, sí, merece la pena leer tantos feeds a cambio de esto. Y eso que no voy a blogs&beers y eventos varios, soy un tanto asocial cibernético y no me van esos "tinglaos", sino, seguro que esta lista aumentaría considerablemente, aunque seguro que la otra lista dedicada a la chusmilla pasaría del cero actual a un N poco deseado.

Pero esto no es todo, bueno, si es que hay algún masoca que le ha dado por seguir leyendo. Una de las cosas más importantes que he sacado de todo esto ha sido estar al día del mundo de la informática. Yo, aunque me pese reconocerlo, usaba tablas, sí, lo sé, me avergüenzo de ello, pero ya me he quitado y no las uso, soy un desarrollador nuevo. Tampoco sabía de Ajax, y ahora aunque sigo igual, al menos hice un par de entradas en Sentido Web que intentaban demostrar lo contrario. Tampoco sabía de WordPress y me dio por hacer una extensión (que al menos tuvieron la decencia de mejorarla), e incluso me dio por hacer una extensión de Firefox. E incluso las entradas tipo Vía / ... que tanto se suelen criticar en la blogosfera me sirven para aprender, porque si las pongo es porque a mi me resultan interesantes y espero que lo sean para otros. Total, y resumiendo, que si no fuera por Sentido Web seguiría con mis tablas y sus similares.

Dentro de otro año, otro artículo en el que diga que al menos sé un poco de lo que hablo.

(JL, esta vez no he dicho quien eras directamente, que luego se te suben los colores)

Problemas con JSON y this

2007-02-21T12:03:00.000+01:00

El otro día comentaba con Máximo algo que a los dos nos pasaba y no entendemos por qué. Se trata de cuando se usa JSON y se hacen referencias al objeto dentro de sí mismo.

var obj = {
  valor : "",
  funcion : function() {
    this.valor = ... ;
  }
}

Cuando usamos this para hacer referencia a algo del objeto a veces no parece funcionar y para que tenga el comportamiento que queremos, es necesario usar el nombre del objeto (obj) para que funcione correctamente.

Mi pregunta: ¿por qué?

Señores desarrolladores de extensiones de Firefox

2007-01-25T14:24:00.000+01:00

Yo soy el primero que comete errores programando, puede que no programe todo lo limpio que debería. Con esto quiero dejar claro que no me las quiero dar de super-desarrollador con capa y ropa interior por encima de los pantalones, pero eso sí, quiero hacer un llamamiento (que no va a oir nadie) para que los que realicen extensiones para Firefox corrijan sus errores de Javascript, ya que en mi Firebug me salen errores suyos a cada rato.

¿Alguien sabe a dónde ha ido a parar la opción de Firebug que hacía que no se te mostrasen los errores de Chrome? en la nueva versión no encuentro esta opción. Y aunque la encontrara, la necesito activa para una extensión que estoy haciendo (que por cierto, intentaré que no muestre los errores que critico). Estoy cansado del "toolbar.js" y de otro que ahora no recuerdo.

Problemillas con JSON

2007-01-11T16:12:00.000+01:00

Ahora que aparece por todas partes el debate entre JSON y XML, a mi me ha dado un pequeño problema, que me ha vuelto loco ya que es de esas cosas que no ves a simple vista, bueno, a mi corta simple vista.

Se trata de cuando creas un array de propiedades:

var objeto = {
"param1" : valor1,
"param2" : valor2,
...
"paramn" : valorn,
}

Si no se ve claramente, en el paramn al final hay una coma, cuando supuestamente no debería haberla. El Firefox se la traga pero no crea un elemento extra, el IE tambié se la traga pero crea un elemento extra undefined.

¿Cuál de los dos está mal?, pues yo creo que ambos, no deberían aceptar que hubiera una coma (o al menos eso es lo que se indica en JSON.org, Firefox no crea elemento cuando encuentra la coma, pero lo lógico es que creara un elemento, eso sí, no lo crea para que no nos de error de Javascript. IE se lo crea y crea un elemento undefined que tiene cierta lógica, pero al igual que Firefox, no tiene lógica que cree algún elemento.

Pues eso, que la tontería hace que me vuelva loco buscando por qué no se comporta un script igual en Firefox o en IE.

AmigoInvisible.php

2006-12-14T14:17:00.000+01:00

Bueno, este no es el gran post de desarrollo web, pero quizás a alguien le pueda ser de utilidad. Se trata de un script en PHP que hace el sorteo del amigo invisible, cada persona tiene que seleccionarse y así le sale la persona a quien le toca regalar.

Cuando digo que no es la gran cosa, pues es que no lo es. Ha surgido por una amiga que me pidió el favor para hacerlo ella para la familia. Consta del script, y de dos ficheros de texto, que deben ser iguales y que tienen que tener a las personas que participan en el amigo invisible (familia.txt y afortunados.txt). Según se va usando, se va creando un dichero llamado relaciones.txt, que guarda las relaciones por si luego se necesitan comprobar.

Os dejo el script.

Suerte para EBE06

2006-11-16T12:38:00.000+01:00

Mañana viernes empieza EBE06 y me gustaría desear suerte a lo organizadores por todo el curro que sé que están haciendo (bueno, al menos uno de ellos que es al que conozco).

Una pena no poder estar allí, espero que esté muy bien y que los que no podamos acudir, nos enteremos de todo lo que pasa por allí.

XHTML: presentación y contenido... ¿separados?

2006-11-03T15:40:00.000+01:00

Hoy me voy a poner un poco filosófico, o quizás no voy a decir más que tonterías, pero bueno, sea lo que sea, quizás sirva para algo.

Cuando empecé en esto del desarrollo web, creo que el IE acababa de salir y estaba el Netscape como amo absoluto, cuando realizabas una página web, poco podías hacer por la presentación, se abusaba de los backgrounds y de los gifs animados y la etiqueta font era lo mejor del mundo porque te permitía cambiar el color de la letra.

De ese pasado remoto, hemos llegado al hecho de que la complejidad de las CSS son superiores al contenido del HTML, si antes hacíamos tablas rebuscadas para presentar la página según el diseño que habíamos ideado, ahora el HTML es de lo más "sencillo", mientras que las CSS son lo más tiempo nos puede llevar (ejemplos increibles se pueden ver en CSSPlay), todo esto abanderado por la idea de separar la capa de presentación (CSS) y la de contenido (HTML). Así, si queremos cambiar el aspecto de nuestra página solo deberemos modificar el CSS, como hace por ejemplo Dizque en su blog.

Hasta aquí todo perfecto, la verdad es que da gusto trabajar siguiendo esta filosofía, pero... ¿es exacta esta teoría?. A mi entender, no. Si lo puede ser en la mayoría de los casos, o al menos en bastante de ellos, pero con todo esto de la web 2.0, cada vez esta teoría falla más amenudo. Me explico, ¿cuantas veces has incluido un div o un span cuando su única utilidad es ayudarnos a cuadrar todo el estilo?. Al menos a mí me ha pasado, por ejemplo cuando he creado pestañas para un menú, a la hora de que cuando se quede seleccionada no sea un enlace, he necesitado una etiqueta cuya utilidad dentro del contenido ha sido totalmente nula.

Un ejemplo de lo que digo se puede ver en CSSPlay, se trata de uno de sus impresionantes ejemplos, A snazzy border menu, si vemos el código de cómo lo ha hecho (solo verlo, no tocarlo, que tiene copyright), observamos que cada una de las opciones tiene las siguientes etiquetas:

<li>
<a class="xmenu2" href="#nogo"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b><span class="xboxcontent">
Paul<br />Cezanne</span>
</b></a>
</li>

No estoy muy seguro, pero creo que hay exceso de etiquetas b, y si le quitamos el estilo a la página, pues no se va a ver nada de nada, entre otras cosas porque estas etiquetas no tienen contenido.

Si el autor no usara este número de etiquetas, sería imposible hacer lo que ha hecho. Pero claro, esto realmente no es separación de capas, es más, si usaramos las etiquetas justas para el contenido, nos ahorraríamos unos cuantos megas en el uso de ancho de bando al día.

Conclusión: veo muchas veces a algún extremista en este tipo de teorías, pero siendo puristas, quizás la gente solo se fija en si aparece el atributo style y no si realmente se ha separado totalmente la capa de presentación de la capa de contenido.

Conclusión 2: me da igual si no existe esta separación, está claro que el trabajo de CSSPlay es digno de admiración, y si tengo que añadir un style para no complicarme la vida durante 1 semana para conseguir la susodicha separación de capas, no me cortaré lo más mínimo e incluiré la etiqueta (es más, la escribiré en mayúsculas para que no valide el XTHML).

IE7, me esperaba de todo menos esto

2006-10-25T16:21:00.000+02:00

Hoy me ha dado por instalar IE7 en el ordenador del trabajo (que no se enteren que seguro que no les hace mucha gracia), pero he instalado la versión que no machaca a la versión 6.

Lo primero que he hecho ha sido mirar si la página que estoy desarrollando daba errores en IE7, ya que en IE6 estaba teniendo mis quebraderos de cabeza, como ya he contado.

Me esperaba lo peor, y lo que me he encontrado es lo más curioso, la virgulilla de la Ñ no sale si escribo la entidad &sim;. No sé si no sale porque algo falla o porque como me he instalado algo no oficial, tiene sus fallos. Aún así, es algo muy raro, sobre todo cuando las entidades HTML es algo definico por la W3C y que además sale en IE6.

Total, que si alguien usa IE7 y ve este caracter bien (∼), que me lo diga por no preocuparme (como si me preocupara que no saliera en IE7).

Me estresa el IE

2006-10-23T16:02:00.000+02:00

Estoy desarrollando una aplicación y como siempre uso Firefox, y luego compruebo que salga igual en Opera y en IE. Opera sin problemas, para variar. IE no da más que problemas, para variar.

Me ha pasado de todo, solo faltaba que me salieran las caras de Bélmez, primero un recuardo que se pintaba parte si parte no, y si movía el scroll se desdibujaba lo que estaba oculto, solucionado usando un "position: relative", claro, que ni idea de por qué se soluciona así, pero siguiendo la máxima de la programación, si funciona, no lo toques.

Luego unas leyendas de unos thumbnails salían desplazados unos 200px a la derecha, y ni idea de la causa, ni había posicionamiento, ni márgenes, ni desplazamientos, ni nada de nada. Lo único que había era un "float: left" en el padre... pero ¡narices! es el padre, ¿por que el resto de los elementos contenidos en el padre no se iban de paseo como el párrafo de la leyenda?. ¿Solución?, ni me acuerdo, pero creo que puse otro "position: relative".

Luego aparecieron los problemas con el posicionamiento absoluto, que en FF y en Opera lo hacían como se suponía y en IE hacía lo que le venía en gana. ¿Solución?, pues buscarse la vida, porque aquí no podía usar "position: relative".

Bueno, ya lo decía Einstein (o cualquiero otro), que todo es "relativo". Menos mal que no tengo instalado el IE7, porque entonces sí que me corto las venas. Bueno, como encuentre "como puedo instalar IE7", pues entraré en crisis.

Actualización: Otra más, ahora un enlace con "border: 1px solid #000000" que está en un span con "float: left", no me muestra los border superior e inferior. Peeeeeeero, si le pongo al span "padding: 10px", entonces se ven los bordes a la perfección. Si queréis una explicación detallada escribir un email al Servicio Técnico de IE.

RudeWorks

2006-10-20T23:31:00.000+02:00

Una de las cosas que más me gusta es conocer nuevos sitios gracias a los comentarios y a la gente que referencia tanto display: NONE como Sentido Web. Por ello he conocido un blogger con un trabajo gráfico que me ha gustado mucho (¡quién pudiera!).

Pues nada, si alguno me hace el honor de escribirme un comentario, por favor que ponga su sitio web, yo encantado de visitarlo.

RudeWorks

J2EE y web services no es lo mismo

2006-10-05T21:21:00.000+02:00

Lo que hay que aguantar.

Hoy me viene el jefe del cliente y me pregunta que si se algo de J2EE y le contesto que sí, que llevo 6 años trabajando en eso. Es más, le tendría que haber dicho que el trabajo que hago para él es todo con J2EE, pero bueno, me pilló de sorpresa y solo me dio por bromear y decir que si no sabía nada de J2EE después de 6 años, era para cortarme las venas.

Total, que el hombre insiste en informarse sobre mis conocimientos y ya al rato me dice que le había dicho a un interno (que se cree el más listo), que me pasara una cosa que implicaba hacer un web service, y el colega le dice que no, porque yo no sé J2EE.

¿Cómo?, ¿que yo no sé J2EE?, ¿pero que tiene que ver el J2EE con los web services?, vale, el J2EE tiene un API para los web services, pero también el .NET y muchos otros. Yo sí he dicho que nunca he hecho un web service, pero tampoco sabía nada de Oracle Workflow, de PHP, de AJAX y muchas otras cosas que he aprendido solito y que las uso a diario. Pero que no pasa nada, que busco en Google y se hace un web service en tres patadas.

Lo peor de todo es que la persona que dice que no sé J2EE es la que me preguntó como podía coger un array de chars y dividirlo en trozos de 100 en 100... eehhhh, uffff, puessss... ¿con un for?.

Vamos, que lo que tengo que aguantar.

Evento Blog España

2006-10-02T16:09:00.000+02:00

Mis blogo-familia de BlogsMedia y en especial Jose Luis Antunez, el "alma" de Sentido Web, se han metido en la organización de un evento muy importante para la blogosfera española: Evento Blog. Junto a otras personalidades y grandes conferenciantes, en especial Matt Mullenweg (total, na').

Evento Blog España (EBE06), será la primera cita de alcance nacional en la que se analizará, desde distintos puntos de vista, la evolución del fenómeno blog en nuestro país, aunque sin perder de vista lo que ocurre en la blogosfera en general y en el mundo hispano, en particular.

Suerte a los organizadores.

Viva el autobombo en Menéame

2006-09-11T11:35:00.000+02:00

Supongo que habrá muchos que no estén de acuerdo con mi opinión, pero bueno, cada cual es cada cual y 6 media docena. Suelo mirar una vez al día Menéame para buscar noticias interesantes que poner en Sentido Web y ya de paso ver algunas cosas curiosas que pone la gente.

Muchas de estas veces encuentro artículos que me gustan, aunque no los ponga en Sentido Web y que al ver los comentarios de la gente (que si me permitís la critica, hay un poquillo de mafia), leo que muchas veces la gente lo define como spam, autobombo, etc, etc.

Una de las cosas que más me gusta de cuando alguien me escribe un comentario, es poder meterme en su blog y echarle un vistazo. Por ejemplo así descubrí a ktzar, si mal no recuerdo escribió un comentario suyo o aquí o en Sentido Web (juraría que aquí) y la verdad es que gracias a ello disfruto de su blog.

Yo cuando empecé con display: NONE, me meneé a mi mismo (llamalo spam o como te de la gana), entre otras cosas para darme a conocer y porque no tenía muy claro que no gustaba mucho el autobombo por allí.

Pues que queréis que os diga, me gusta el autobombo, gracias a ello me entero de muy buenas noticias y no solo de cosas sobre el canon, ZP, el PP o Ramoncín.

Supongo que el problema se encuentra en el mismo FAQ:

Lo que no debes hacer es autobombo o spam, es decir enviar demasiados enlaces con el objetivo de promocionar tu propio blog (o el de tus amigos), envía historias que puedan ser interesantes para muchos.

Vamos, que está claro que si una persona se pasa poniendo todo el tiempo sus entradas, pues puede resultar cansino, pero si la entrada (aunque haya puesto mil suyas), es interesante, ¿por que decir que es autobombo?, pues aunque lo sea, me parece perfecto que lo haya hecho. Mi meneo para anodino.

¡Ah! y otra cosa que no me parece muy bien, es que llegue alguien y en los comentarios ponga la URL original de la noticia. Pues me parece un poco feo, porque si no llega a ser por la persona que ha estado buscando y ha encontrado la noticia que nos ha interesado, quizás no nos hubieramos enterado de su existencia. Hay que darle mérito al blogger que ha referenciado la noticia. ¿Por qué no se pone la URL original si se trata de Microsiervos, GenBeta o de algún otro famoso?.

Multilenguaje mediante XHTML

2006-09-01T18:39:00.000+02:00

Esto realmente es una pregunta al aire (¿hay alguien que aún me lea?, jeje). Pensando en aplicaciones multilenguaje en las que he trabajado, siempre se nos presenta la duda de cómo hacer el multilenguaje. Hay gente que prefiere los ficheros de properties, los hay que prefieren la base de datos, incluso quienes prefieren variables estaticas (¡dios mio!).

A mí se me ha ocurrido lo siguiente, lo he intentado varias veces, pero por la falta de tiempo no he podido sacarlo o saber si se puede hacer o realmente es un imposible. XHTML es un XML, un XML está definido por una DTD, en la cabecera del XHTML se define cual es la DTD que valida el documento (xhtml1-transitional.dtd). Ahora bien, si yo me creo una DTD que incluya la DTD del XHTML, podré definirme mis propias entidades y usarlas en un XHTML, por ejemplo, si tengo una palabra en castellano "Inicio" y quiero que si se elige el idioma en inglés se escriba "Home", me podré definir una entidad "&INICIO;" que la traduzca por una u otra según el idioma que se ha seleccionado.

Problemas, tan solo uno: no soy capaz de hacerlo. Mis conocimientos de XML creo que son los de la mayoría, en todas las aplicaciones que he necesitado usar XML no ha sido necesario hacer grandes alardes de conocimiento, con lo justo bastaba. Pero aún así sé que se puede hacer lo que pretendo, porque por ejemplo la DTD MathML creo que incluye la de XHTML.

Otro problema que se me plantearía, cuando resolviera lo de que me sacara las entidades, sería lo de mostrar un valor u otro según un idioma seleccionado. No sé si se puede elegir una DTD u otra dependiendo de un parámetro. De todas formas, se podría hacer mediante PHP, claro, que sería mucho más elegante usar unicamente XHTML.

Mientras escrito todo esto, caigo en la cuenta de que creo que no he probado que me muestre las entidades haciendo que el navegador trate el documento como un XHTML y no simplemente crearlo como XHTML y que luego lo trate como HTML.

Si alguien consigue sacarlo, por favor, que me lo diga. A partir de ese momento le consideraré la máquina de la güeb, si es que no lo hago ya ahora, claro.

Mi amigo el IE

2006-08-29T15:53:00.000+02:00

Acabo de leer esta entrada de aNiego2K sobre los cambios que trae la nueva versión de Internet Explorer y me he ha venido a la mente que ayer mismo tuve malos pensamientos sobre la familia de Bill Gates (no, no hay mente sucia en esto).

El hecho es que ayer en un página en la que estoy trabajando, tenía que modificar el contenido de una capa que contenía el típico calendario popup, y cuando pulsaba para ir al siguiente mes usaba la propiedad innerHTML para modificar su contenido. La capa contenedora, estaba creada mediante DOM (supongo que por aquí venía el problema) y luego su contenido lo actualizaba mediante innerHTML (pasaba de estar creando objetos como un loco mediante DOM). La primera vez que actualizaba el contenido me lo hacía a la perfección, la siguiente vez me daba un precioso mensaje de error ("no está permitida esa operación" o algo así) justo cuando modificaba el valor de innerHTML. ¿Por? ni idea, supongo que podría ser por crear el objeto usando DOM, pero no tenía tiempo para investigar, ni hacer un estudio, ni nada de nada, tenía cosas más importantes que hacer (hacer la cena y ver la tele). Por lo que después de muchos intentos, lo único que me funcionó fue lo siguiente:

function modificaCalendario(fecha1, fecha2, id) { /* INCREIBLE EL IE ME OBLIGA A ESCRIBIR ESTO */ document.getElementById(id).removeChild(document.getElementById(id).firstChild); var capa = document.createElement("DIV"); capa.innerHTML = creaCalendario(fecha1, fecha2, id); /* FIN DE MI ODIO A IE */ document.getElementById(id).appendChild(capa); }

Gracias Bill por hacerme pasar horas delante del ordenador comiendome la cabeza y así evitando que la tele tonta me fría el cerebro.

¿Spam en Technorati?

2006-07-17T14:16:00.000+02:00

Supongo que como la mayoría de los bloggers, me gusta mirar de vez en cuando Technorati por si hay alguien que nos enlaza (en este caso a Sentido Web, y cual es mi sorpresa cuando veo que aparece que nos enlaza una compañía de seguros (en inglés), ¿¿¿como???.

Bueno, os dejo la captura, porque o soy muy nuevo en esto, o a mi me suena a spam (bueno, no es spam, spam, que digamos, pero si en vez de Technorati hubiera sido GMail, ya lo estaría mandando a la papelera).

Actualización: Ya no aparece, son rápidos estos de Technorati.

Nueva versión de Inkscape

2006-06-26T07:43:00.000+02:00

Ha salido la versión 0.44 de Inkscape, un editor SVG gratuito, el cual yo uso para mis diseños, y que aunque no está a la altura de otros comerciales, la verdad es que le falta poco. En esta nueva versión tenemos como novedades: un diálogo de capas, exportar a PDF (que para mi gusto no lo hace muy bien, si le metes TTF creo que lo pasa a vectores y no lo deja muy bien, al menos la prueba que yo he hecho), clipping y máscaras, configuración de shortcuts, node sculping (que lo que permite es moldear varios nodos, pero solo moviendo uno, el resto se desplazan de forma proporcional) y varios cambios más.

Inkscape

Manuales con licencia Creative Commons

2006-05-05T15:26:00.000+02:00

Debido a un problema que he tenido con Oracle y el que no implementen ON UPDATE CASCADE, he conocido un sitio con varios manuales realizados por el autor con licencia Creative Commons (gracias Belcha): Oracle, MySQL, Javascript, HTML, CSS1, ... muy buenos para aquellos que vayan empezando en todo esto (y para el resto). Manuales Creative Commons de Jorge Sánchez

Trabajando con Netscape 4.7

2006-04-20T15:58:00.000+02:00

En un mundo en el que la gente habla de AJAX, de Web 2.0, de Firefox, de la nueva versión de Internet Explorer, a mí me toca hablar de Netscape 4.7. Para aquellos que lo desconozcan, Netscape fué uno de los pioneros en el desarrollo de navegadores... vale, si, todo el mundo conoce el Netscape, pero que levanten el ratón aquellos que han llegado a usar el Netscape 4.7, y ahora que levanten el ratón aquellos que usan el Netscape 4.7 AHORA. Vaya, parece que me quedo solo (bueno, y mis dos compañeros).

Hay algunos que se quejan de que el cliente les obliga a crear código HTML que no valida XHTML o que simplemente no es código limpio. Que se sientan afortunados, a mí me obligan a usar Netscape 4.7 en el proyecto en el que estoy metido, y es algo imposible de cambiar, el cliente (mejor no digo cual para que no se rian de él) sigue usando Netscape 4.7 y pagaron mucho dinero para que apareciera el logo de la empresa en el Netscape 4.7, y, claro, no pueden ahora decir que no se usa el Netscape 4.7. ¡Dios mío!, ¿pero esto hasta cuando?.

Cierto, lo antiguo se pone de moda, pero yo siempre creí que se refería a los pantalones campana, las gafas de sol enormes, las patillas y la serie "Cuéntame", pero por favor, usar Netscape 4.7 no es tan "cool" como las patillas.

Por cierto, si algún friki patológico aún guarda algún manual de Javascript para Netscape 4.7, por favor, que me lo envie, cada día te llevas una sorpresa nueva al comprobar que comandos de Javascript que para tí son de uso normal no existen para Netscape 4.7.

Technorati, ¿y cuándo no?

2006-04-20T15:47:00.000+02:00

Hace mucho que no escribo, pero hoy he podido sacar un poco de tiempo para quejarme, pues esto. Technorati, ¿y cuándo no?:

Sorry, we couldn't complete your search because we're experiencing a high volume of requests right now. Please try again in a minute or add this search to your watchlist to track conversation.

Estaría bien que Google soltara un mensaje parecido:

Ahora tenemos mucha gente buscando cosas, te aconsejemos que uses Yahoo!, MSN o lo que te plazca. Venga, bonito, deja de molestar y no le des al F5 que no vas a conseguir nada.

Generador de castigos para Bart

2006-04-06T20:55:00.000+02:00

Leyendo la entrada sobre el Generador de Portadas: For Dummies, se me ha ocurrido hacer la mía propia y lógicamente explicar cómo funciona.

Mostrar resto >>

<< Ocultar resto
Tan solo necesitamos 4 cosas: una imagen de fondo, una imagen que se pondrá encima del la anterior y del texto (para evitar en este caso que se escriba encima de la cabeza de Bart), una fuente True Type y un script PHP, que abrirá la imagen de fondo, escribirá encima, colocará sobre el texto la otra imagen y devolverá la imagen final.

Como ya hemos dicho, necesitamos dos imagenes, en este caso tienen que ser dos, porque nos podemos encontrar en el caso de que se escriba sobre la cabeza de Bart. Por eso, una de las imagenes es en la que se escribe y la otra es la que se usa para "proteger" la imagen (tiene que ser igual que la imagen del fondo, salvo que la zona de la pizarra tiene que ser una zona transparente).

El script PHP debe abrir ambas imágenes, escribir el texto en la pizarra (calculando cuantas líneas admite y cuantas frases entran en una línea) y luego devolver la imagen.

<?php // Obtengo el texto $texto = isset($_GET["texto"])? $_GET["texto"]: "Visitaré display: NONE a diario."; $texto .= " "; $ancho_caja = 395; $alto_caja = 180; // Establecer el tipo de contenido header("Content-type: image/png"); // Abro las imagenes $im = imagecreatefrompng('bart1.png'); $im2 = imagecreatefrompng('bart2.png'); // Creo el color del texto $blanco = imagecolorallocate($im, 255, 255, 255); // Obtengo la fuente $fuente = './ALPHMA__.TTF'; // Calculo el numero de lineas que entran $caja_texto = imagettfbbox(18, 0, $fuente , $texto); $alto_linea = abs($caja_texto[7]-$caja_texto[1]); $num_lineas = intval($alto_caja / $alto_linea); // Calculo cuantas frases entran en el ancho de la pizarra $texto_linea = ""; $caja_texto = imagettfbbox(18, 0, $fuente , $texto_linea.substr($texto, $pos, 1)); while (abs($caja_texto[2]-$caja_texto[0]) < $ancho_caja) { $texto_linea .= substr($texto, $pos, 1); $caja_texto = imagettfbbox(18, 0, $fuente , $texto_linea.substr($texto, $pos, 1)); $pos = ($pos+1) % strlen($texto); } $texto_linea = str_repeat($texto, intval(strlen($texto_linea)/strlen($texto))); // Escribo las lineas $pos = 0; for ($i = 0; $i<$num_lineas; $i++) { imagettftext($im, 18, 0, 20, 33+$alto_linea*$i, $blanco, $fuente , $texto_linea); } // Dibujo la imagen imagealphablending($im, 1); imagealphablending($im2, 1); imagecopy($im, $im2, 0, 0, 0, 0, imagesx($im), imagesy($im)); imagepng($im); imagedestroy($im); imagedestroy($im2); ?>

Scrolling usando thumbnail

2006-04-02T00:48:00.000+02:00

Uno de los mayores problemas a los que me enfrento ahora es decidir dónde publico, si aquí o en Sentido Web. Y esto mismo me pasó con un script que realicé, hacer scrolling de un texto usando una miniatura de este. Al final ganó la "competencia" y lo publiqué en Sentido Web. Quizás sea por la cantidad de post que hemos publicado, lo que ha hecho que la gente pase de verse todos, pero lo que si es cierto que creo que no mucha gente ha visto este script, y me da un poco de pena, porque a mi me pareció interesante.

Vía / Sentido Web

Sentido Web, nuevo blog para desarrolladores web

2006-03-30T09:51:00.000+02:00

Uno de los motivos por los que no he podido actualizar display: NONE con tanta frecuencia como me gustaría, a parte del desarrollo de una extensión para Firefox, es que me han invitado a formar parte del nuevo blog Sentido Web, un nuevo blog de la gente de Blogs Media.

Como se indica en la entrada de presentación:

Sentido Web es la nueva publicación creada por Blogs Media dirigida a los desarrolladores web e internautas apasionados por la programación, diseño, negocios y todo lo que ocurre en Internet.

Considéranos la revista que siempre has deseado comprar en el kiosko con la diferencia de que somos gratuitos y de publicación diaria.

Mi intención es seguir con ambos blogs, espero poder con ello.

Convertir PDF a SVG

2006-03-27T14:35:00.000+02:00

Leo en SVG.org que han sacado una nueva versión de PDF2SVG, un programa que se ejecuta mediante línea de comandos, que convierte un PDF a SVG. Entre las características que ofrece se encuentra:

Gran cualidad al convertir los PDF, mantiene el diseño de capas, enlaces, colores, ...
Compresión y optimización de los archivos SVG
Ficheros SVG independientes
Miniaturas
Uso de Unicode
Incrustación de las fuentes y posibilidad de sustitución
...

Es curioso que siendo un programa de evaluación, lo que te haga sea incluir un texto que ocupa casi todo el espacio diciendo que estás usando el programa en cuestión. El SVG es editable, solo es necesario borrar el nodo en cuestión y ya está. En Firefox se ve bastante mal, en IE con el pluggin de Adobe se ve correctamente.

Presentación de imágenes mediante scrolling

2006-03-21T15:05:00.000+01:00

Las posibles formas de presentar un grupo de imágenes son numerosas, algunas sencillas, otras más complejas. Podría estar todos los días (o al menos unos cuantos) realizando distintas presentaciones, aunque no quiero ser pesado ya que hice una en una de las primeras entradas.

En este caso, se van a mostrar las imágenes dentro de un contenedor que solo mostrará un espacio, no la totalidad, y se irán desplazando hacia la izquierda o derecha, según la posición del ratón dentro del contenedor. Cuando una imagen desaparece del contenedor irá a la parte final de la lista de imágenes.

Actualización Me he dado cuenta de que al subirlo el scroll se vuelve loco, esto sería fácil de solucionar si el scrolling lo meto en un iframe con overflow: hidden y las acciones realizarlas en el documento parent. No veo otra solución porque al tener las imágenes position: absolute, da igual si se le hace clipping al contenedor, porque a la hora del scroll cuenta como si las imágenes estuvieran visibles. Perdonad que no lo cambie, pero con esto de ir de barato (o sea Blogger), me quita mucho tiempo estar haciendo cambios y subiendo archivos a los servidores (baratos, también).

Mostrar resto >>

<< Ocultar resto
La estructura del HTML consta de tres espacios, una capa contenedora, una capa que se encarga del scrolling y una capa para cada imagen.

div.contenedor { position: relative; left: 50%; width: 402px; height: 156px; margin-left: -200px; border: 1px solid #315C7C; padding: 0px; color: #315C7C; font-family: Arial; font-weight: bold; cursor: hand; cursor: pointer; } div.scrolling { position: absolute; width: 400px; height: 150px; clip: rect(0px 400px auto 0px); } div.foto { position: absolute; width: 150px; height: 150px; top: 0px; margin: 2px; border: 1px solid #000000; } div.dif { z-index: 100; position: absolute; top: 0px; width: 1px; height: 100%; } div.pantalla { background: url(sp.gif); width: 100%; height: 100%; z-index: 1000; position: absolute; top: 0px; left: 0px; }

Las variables globales son las siguientes:

var _IE_ = navigator.userAgent.indexOf("MSIE") != -1 && navigator.userAgent.indexOf("Opera") == -1; // Si es IE var velocidad = 100; var incremento = 20; var ultima = null; // posicion de la ultima imagen var primera = null; // posicion de la primera imagen var anchoImagen = 150; var anchoContenedor = 400; var id = 0; // El indice del primero que muevo var bloqueo = false; // Para bloquear el método

Los métodos necesarios para este efecto son cinco:

Obtener valores de los estilos de un objeto, es un método de apoyo.
Dibujar las capas necesarias para contener las imágenes.
Controlar el movimiento de las imágenes, para ello primero desplaza las imagenes que ya no se ven en el contenedor al final de la cola y luego las desplaza hacia la izquierda o derecha, según sea.
Controlar el sentido y la velocidad del desplazamiento según sea la posición del ratón en la capa contenedora.
Mostrar la imagen seleccionada según el evento onclick en el contendor.

// El vector de imagenes contiene: // La imagen en miniatura // La imagen real // La explicacion de la imagen, en este caso el copyright var imagenes = new Array(); imagenes[0] = new Array(new Image(), new Image(), '[descripción]'); imagenes[0][0].src = '[url imagen miniatura]'; imagenes[0][1].src = '[url imagen original]'; // Devuelve el valor numerico de una propiedad de los estilos (elimina el px) function valorCSS(obj, tipo) { var aux = eval("parseFloat(obj.style."+tipo+".substring(0,obj.style."+tipo+".length-2))"); return aux; } // Crea las capas necesarias que contienen las imagenes function escribeFotos() { var cont = document.getElementById("scrolling"); // Incluyo las imagenes var html = ""; for (var i=0; i<imagenes.length; i++) { html += '<div id="foto'+i+'" class="foto"><img src="'+imagenes[i][0].src+'" id="img'+i+'" /></div>'; } cont.innerHTML = html; var cont = document.getElementById("contenedor"); html = ''; // Incluyo el degradado if (!_IE_) { html += '<div class="dif" style="left: 0px;"><img src="difizq.png" /></div>'; html += '<div class="dif" style="left: '+(anchoContenedor-20)+'px;"><img src="difder.png" /></div>'; cont.innerHTML += html; } // Posicionamiento de las capas de las imagenes for (var i=0; i<imagenes.length; i++) { var div = document.getElementById("foto"+i); div.style.left = ((anchoImagen+4)*i)+"px"; if (i==0) primera = div; ultima = div; } movimiento(); } // Se encarga del movimiento de las imágenes function movimiento() { if (!bloqueo) { bloqueo = true; var cont = document.getElementById("scrolling"); var _id = id; // Primero se desplazan las imagenes que están fuera del contenedor // al principio de la cola. Se hace si el movimiento es hacia la izquierda // y despues si el movimiento es hacia la derecha // Si se mueve hacia la izquierda if (incremento > 0) { for (var i=0; i<imagenes.length; i++) { // Se cogen las imagenes segun el orden por el que se mueven var foto = document.getElementById("foto"+((i+id) % imagenes.length)); if ((valorCSS(foto, "left")-incremento) < -(anchoImagen+4)) { // Si la imagen está fuera por la izquierda y el // movimiento es hacia la izquierda, la muevo al final foto.style.left = (valorCSS(ultima, "left")+(anchoImagen+4))+"px"; ultima = foto; primera = document.getElementById("foto"+((i+id+1) % imagenes.length)); _id = (i+id+1) % imagenes.length; } } } if (incremento < 0) { for (var i=imagenes.length-1; i>=0; i--) { // Empiezo a mover el que se encuentra primero var foto = document.getElementById("foto"+((i+id) % imagenes.length)); if (valorCSS(foto, "left") > (anchoContenedor+20)) { // Si la imagen esta fuera por la derecha y el // movimiento es hacia la derecha, la muevo al principio foto.style.left = (valorCSS(primera, "left")-((anchoImagen+4)))+"px"; primera = foto; ultima = document.getElementById("foto"+(((i+id) % imagenes.length)==0? imagenes.length-1: ((i+id) % imagenes.length)-1)); _id = (((i+id) % imagenes.length)==0? imagenes.length-1: ((i+id) % imagenes.length)-1); } } } id = _id; // Movimiento de las imagenes for (var i=0; i<imagenes.length; i++) { // Empiezo a mover el que se encuentra primero var foto = document.getElementById("foto"+((i+id) % imagenes.length)); // Muevo las capas try { foto.style.left = (valorCSS(foto, "left")-incremento)+"px"; } catch (e) {} } setTimeout("movimiento()", velocidad); bloqueo = false; } } // Controla la velocidad del movimiento segun // la posicion del ratón en la capa function controlarMovimiento(e) { var x = parseInt(e.offsetX? e.offsetX : e.layerX); var porc = x-(anchoContenedor/2); incremento = parseInt(-porc * 20 / (anchoContenedor/2)); } // Muestra la imagen en pantalla function verImagen(e) { // Como hay una capa por encima, no se puede hacer click en las imagenes // Por eso se calcula que imagen está en la zona donde se hace click var x = parseInt(e.offsetX? e.offsetX : e.layerX); for (var i=0; i<imagenes.length; i++) { var foto = document.getElementById("foto"+i); if (x > valorCSS(foto, "left") && x < valorCSS(foto, "left")+anchoImagen) { var obj = document.getElementById("imagen"); var html = '<br>'+imagenes[i][2]+'<br><br><img src="'+imagenes[i][1].src+'">'; obj.innerHTML = html; } } }

Problemas con WordPress

2006-03-19T15:00:00.000+01:00

display: NONE ha estado unos días caidos (o no sé cuanto porque no he tenido acceso al ordenador) debido a que me instalé WordPress en mi ordenador y cuando quise importar este blog desde la herramienta que ofrece WP, pues le dio por modificarme la página de inicio de Blogger.

Está genial, yo le digo importar y el hace lo que le da la gana, cuando se importa algo, no se debe modificar el original.

Según la RAE:

importar.
(Del lat. importāre, traer).
1. tr. Dicho de una mercancía: Valer o llegar a cierta cantidad.
2. tr. Introducir en un país géneros, artículos o costumbres extranjeros.
3. tr. Llevar consigo. Importar necesidad, violencia.

estropear.
(Del it. stroppiare).
1. tr. Maltratar a alguien, dejándolo lisiado. U. t. c. prnl.
2. tr. Maltratar, deteriorar o afear algo. Esas casas tan altas estropean el paisaje. U. t. c. prnl.
3. tr. Echar a perder, malograr cualquier asunto o proyecto.

Espero que WordPress comprenda la diferencia.

Firefox 2.0 con problemillas con el SVG

2006-03-17T11:51:00.000+01:00

Mientras me pego con un script, el XUL y otras cosas varias, no he podido perder la oportunidad de mencionar que Firefox está teniendo problemas para integrar la etiqueta <svg:textPath>, la cual se usa para escribir texto siguiendo un recorrido. Esperemos que la gente de Firefox vuelva a sorprendernos.

Cosas sobre CSS

2006-03-13T16:13:00.000+01:00

Al menos en Firefox, me encuentro:

Si en una capa con position: relative escribo dentro unicamente una capa con position: absolute, el alto de la capa contenedora es cero. Para mí no tiene mucha lógica, porque lo que estás haciendo es "posicionar" la capa dentro de la otra, vale, está posicionada, pero sigue dentro de ella, y ¿cómo puede estar dentro de ella si la capa contenedora tiene tamaño cero?. Es como si me meto el monedero en el bolsillo, no puedo "posicionarlo" fuera del bolsillo. Aquí dentro va una capa, sí, la que está fuera.
¿Por qué esta capa está fuera de la contenedora si realmente está dentro?

<span style="border: 1px solid #315C7C; position: relative;"> Aquí dentro va una capa, sí, la que está fuera. <div style="position: absolute; top: 20px; border: 1px solid #315C7C"> ¿Por qué esta capa está fuera de la contenedora si realmente está dentro? </div> </span>
Si una capa tiene un width y un height fijos, si yo modifico el valor del padding, la capa aumenta el valor del padding en su tamaño. No tiene lógica, porque el padding es la distancia entre el borde y el contenido. Pues si el tamaño de la caja es 100px y el padding izquierdo es de 10px, quiere decir que empiezo a escribir en el pixel 10, pero no que el tamaño tiene que ser de 110px.

Bueno, quizás son cosas erróneas las que escribo, yo creo que a mí me ocurren. ¿Alguien sabe si esto tiene que ocurrir así? Actualización Federico me comenta que es debido a que al posicionarlo como absolute se sale del "normal flow", podéis ver su explicación en los comentarios.

Buscando blogs afines en del.icio.us

2006-03-13T15:52:00.000+01:00

Una forma de aprender es leer y para ellos los blogs son para mí una gran fuente de sabiduría (o de copy/paste, según quieras verlo). Algunas veces me meto en Technorati, que es dónde normalmente la gente se pone a buscar blogs, pero no siempre encuentro lo que quiero. ¿Y dónde lo encuentro? en del.icio.us. Todo empezó por curiosdad, algo de ego, ilusión por ver que tu blog va funcionando... y otras mil cosas más. El hecho es que me dió por buscar quienes tenían a display: NONE dentro de sus favoritos, y digo yo, si les interesa lo que escribo, lo más seguro es que me interese lo que ellos escriben. Muy pocas personas tienen blog o lo han puesto dentro de su perfil de del.icio.us, pero dentro de esos pocos he encontrado cosas muy interesantes.

Cómo incluir SVG en tus aplicaciones Java

2006-03-13T09:17:00.000+01:00

Aunque las librerías más populares de SVG en Java son las de Batik, mirando en SVG.org he visto que hay otras librerías para incluir Tiny SVG llamadas TinyLine, las cuales tienen muy buena pinta. Ejemplos: retro4.svg bass2.svg

Mis primeros usos en las expresiones regulares

2006-03-12T21:24:00.000+01:00

Leyendo la entrada de alidhaey sobre expresiones regulares, me ha hecho recordar que la primera vez que me pegué con ellas fue porque teníamos que filtrar un fichero de logs en UNIX y mi compañero, que es una máquina en UNIX me dijo que usara el grep. Si eres de los que no usas UNIX o Linux, no te quedes sin probarlo, ya que cuando tu aplicación suelta gran cantidad de trazas, lo mejor son las herramientas que hay en UNIX: GNU utilities for Win32

Pasar de fotografía a dibujo mediante Inkscape

2006-03-10T15:58:00.000+01:00

Ya he hablado de las cosas que se pueden hacer con SVG y quizás otro ejemplo de su uso pueda hacer que os enganchéis un poco más. En varios sitios he visto como hacer pseudo-caricaturas mediante Photoshop, lo que voy a explicar es similar, pero en vez de crear una imágen, será creando un gráfico vectorial. Una ventaja sobre el Photoshop es que al hacerlo vectorial, se puede crear del tamaño que se quiera sin perder resolución.
Inkscape es un editor de gráficos vectoriales (SVG) de código abierto. Yo es el que siempre uso cuando diseño algo en SVG, que es como suelo diseñar. Es un programa sencillo y que tiene bastante funcionalidades.
Para realizar esta transformación tenemos que pasar de un mapa de bits a un gráfico vectorial (raster). Lo primero es importar la imágen (ARCHIVO > IMPORTAR...), despues la seleccionaremos y después convertiremos la imagen en vectores (TRAZO > VECTORIZAR UN MAPA DE BITS).
De todas las opciones usaremos la Luminosidad de la imagen, aunque podéis probar con las otras. Esta opción nos crea una imagen de dos colores según sea el grado de luminosidad de la imagen, cuanto esté cerca de 0 mostrará los colores mas oscuros y cuanto esté cerca de 1 mostrará a partir de los mas claros.
Lo realizaremos en dos fases, primero con un valor cercano a 0.5 y le daremos un color negro y luego con un valor cercano a 0.6 y le daremos un color gris. Con el primer valor conseguimos obtener la silueta y con el segundo color obtenemos también parte de las sombras. Las superponemos y obtenemos la imagen final.
Por último podemos exportar el gráfico a una imagen PNG para poder usarla.

XUL: el mundo de Firefox

2006-03-09T10:39:00.000+01:00

Me ha dado por intentar enterarme de cómo se crean las extensiones para Firefox, quizás por ello últimamente no escribo tanto como me gustaría. Lo poco que he visto me gusta, no hay demasiada información al respecto, pero se pueden ir averiguando las cosas poco a poco y pegándote con ellas.
Lo más importante es conocer XUL (XML-based User-interface Language), que es el lenguaje para crear interfaces de usuario de Mozilla, permite incluir hojas de estilo, javascript, ...
Crear extensiones simples es fácil, no tiene mucha dificultad, lo que sí es más complejo es realizar las acciones que más nos interesan: acceso a ficheros, eventos, listeners, ... Hay poca información en internet, si comparamos con otros lenguajes (PHP, Java, ...), debido a ello, una de las formas que estoy usando para enterarme de como hacer las cosas es destripando las extensiones de otra gente. No, no es un copy/paste en plan salvaje, es más bien ingeniería inversa. Para ello en vez de instalar una extensión, te la bajas a tu disco duro, la renombras como zip y la descomprimes, podrás ver toda la estructura de archivos y cómo funciona.
Estoy haciendo una extensión, a ver que tal, y cuando la acabe iré escribiendo como la realicé. Si te quieres meter en este mundillo, te recomiendo estos enlaces:

http://es.wikibooks.org/wiki/XUL, es poco, pero está en español y no está mal para ir empezando.
http://www.mozilla.org/xpfe/xulref, la refencia para programadores de Mozilla.
http://www.xulplanet.com, todo sobre XUL.
http://mundogeek.net/etiqueta/xul, Raúl de Mundo geek ya se ha pegado con ello y creo que va ganando el asalto, ;-).

Ejemplos de diseños con estilos

2006-03-07T11:56:00.000+01:00

El método correcto de realizar un diseño web es mediante estilos (CSS) y no usando tablas (aunque reconozco que a veces las uso en ejemplos por vagancia). Claro, que a veces no es sencillo saber utilizarlos. He encontrado una página que tiene gran variedad de ellos, y más que usarlos simplemente, yo recomendaría que se les echara un vistazo por dentro para saber cómo funcionan:
Layout Gala
Visto en del.icio.us

Animaciones en SVG

2006-03-06T12:28:00.000+01:00

SVG tiene una serie de etiquetas para realizar animaciones, las cuales son admitidas por el visor de Adobe, pero que no están implementadas por el visor nativo de Firefox. Ahora viene el problema, si queremos que nuestra animación se vea en ambos navegadores IE (con el pluggin de Adobe) y Firefox, tendremos que realizar la animación de forma dinámica. Existen dos formas de realizar la animación, mediante Javascript en la página que contiene el SVG o mediante ECMAScript.

Javascript

ECMAScript

En IE tiene que estar instalado la versión 6 del Adobe SVG Viewer

Mostrar resto >>

<< Ocultar resto
En ambos casos el funcionamiento es el mismo, tenemos un SVG, que contiene un elemento texto, accedemos a este mediante el id y modificamos el atributo transform (la rotación se hace mediante rotate).
El SVG será el mismo (salvo el código ECMAScript que se añade en uno de los ejemplos):

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg version="1.1" width="100%" height="100%" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg" > <g id="grafica">  <circle cx="62" cy="62" r="55" style="stroke:#315C7C; fill: #FFF3C9"/> <text style="font-size:10pt;fill:#315C7C; font-family:Arial;text-anchor: middle" x = "52" y = "62" id="texto">display: NONE</text> </g> </svg>

La animación mediante Javascript se hará con el siguiente código:

var svgns = "http://www.w3.org/2000/svg"; var ang = 0; var velocidad = 140; var grado = 15; // Anima el texto function animar() { // Obtenemos el documento SVG var svgDocument = document.getElementById('svg').getSVGDocument(); // Obtenemos el elemento de texto var texto = svgDocument.getElementById("texto"); // Modificamos la rotacion texto.setAttribute("transform", "rotate("+ang+" 62 62)"); ang = (ang+grado)%360; // Animamos la rotacion setTimeout("animar()", velocidad); }

Habrá que incluir este código si se quiere realizar mediante ECMAScript. Fíjate que hay una cosa un tanto extraña, en el setTimeout se llama a window.Animar(), cuando window.Animar = animar, esto es debido a que es necesario para que el pluggin de Adobe reconzca la función animar() dentro del setTimeout.

Autenticación en iframes

2006-03-03T12:22:00.000+01:00

Normalmente suelo visitar una página para hacer copias de seguridad de las peliculas que tengo y así no preocuparme de si las extravio, se degradan, etc... El tema es que a esta páginas solo tenemos acceso una serie de privilegiados (todo aquel que se registre, vamos) y para bajarnos la copia de seguridad tenemos que autenticarnos. Ahora me encuentro con una página que quiero visitar y que me va a mostrar información capada cuando acceda a ella por no estar "logueado". Necesito meter mi usuario y contraseña en el formulario y darle a enviar. Por ahora todo está bien, el problema viene en que se me recarga toda la página y que va a la página principal, en vez de a la página en la que me encontraba, por lo que me toca volver a la página que yo quería. ¿Cómo se puede solucionar?, pues se me ocurren dos formas, o bien una vez "logueado" me vuelve a la página en la que me encontraba, o bien el formulario lo pongo en un iframe para así no tocar la página.
¿Cuál de las dos soluciones es la mejor?, no sabría decirlo. La primera solución me permite que si la página que estaba visitando tenía contenidos capados, al actualizarse la página estos contenidos se me muestren, pero también tiene la desventaja de que recargar la página puede llevar tiempo, cosa que no puede apetecer mucho (está página a la que me refiero suele estar un poco colapsada debido a la cantidad de gente preocupada por las copias de seguridad de su colección de películas). La segunda opción a mi es la que más me gusta, porque te autenticas y la información se guarda en la sesión sin tener que cargar pesadas páginas, claro que no se actualiza los datos de la página actual.

Tablas con cabecera estática

2006-03-02T15:31:00.000+01:00

Algo que considero bastante importante a la hora de mostrar datos, es que las tablas no ocupen toda la página. Normalmente cuando se consulta la información, a no ser que sea un estudio profundo, no se suelen ver más que las primeras filas. Entonces, ¿por qué mostrar todos los datos?, no se trata de solo mostrar los primeros registros (que se podría hacer mediante paginación), sino de usar el scroll para poder ver el resto de los datos si es que nos interesan.

Por supuesto que la mejor forma que he visto para realizar esto es en: Pure CSS Scrollable Table with Fixed Header, pero debido a las diferencias entre navegadores, la CSS no está muy clara. Como no todo el mundo (y yo el primero) tiene la facilidad para hacer la tabla cuando quiera sin tener que ver como lo hacen en la página anterior, voy a intentar explicar una forma un poco más sencilla (aunque menos limpia) de hacerlo.

Mostrar resto >>

Problemas resueltos, más o menos

2006-03-01T15:19:00.000+01:00

Ya he solucionado el tema del servidor donde subía los archivos que usaba para los ejemplos. Después de usar unos cuantos, todos me daban problemas, o no me bajaba los archivos directamente (era necesario una página intermedia) o los archivos HTML no me los devolvía correctamente y salía la ventana de "Guardar como..." u otras mil cosas más. Total, que me he olvidado de los supersitios con Ajax, capacidad infinita, ancho de banda inmenso y demás gaitas y me he ido a la típica pagina personal que te ofrece un portal (si, un portal no es muy Web 2.0 pero siguen existiendo) y con los miseros 50Mb que me ofrencen estoy muy contento, ¿que me quedo corto? pues me creo otra cuenta.
Ahora solo me falta ir corrigiendo todas las entradas, eso me llevará un poco de tiempo.
La verdad es que display: NONE se parece a Madrid (afortunados los que no vivís allí).

Autómata para expresiones regulares

2006-03-01T10:38:00.000+01:00

Aunque estoy bastante liado cambiando los archivos de un lado a otro debido al problemilla con los archivos para los ejemplos, no puedo pasar la oportunidad de poneros un enlace a una página que realiza autómatas para expresiones regulares que me ha enviado Gerardo: reAnimator: Regular Expression FSA Visualizer.
Yo miraría estos ejemplos (no escribáis la barra inicial y final en la página):

Comprobar si es fecha (DD/MM/YYYY): /\d\d\/\d\d\/\d\d\d\d/, ya que no admite /\d{2}\/\d{2}\/\d{4}/
La búsquedas necesarias para hacer un trim: /(^\s*)|(\s*$)/

Problemillas con el servidor de almacenamiento gratuito

2006-03-01T09:58:00.000+01:00

Claro, si es que es gratuito y no se le puede pedir mucho. Espero poder pasarlos todos a otro sitio y que vuelva a estar funcionando en breve.

Más sobre SVG

2006-02-28T10:32:00.000+01:00

Uno de los problemas que le veo al SVG es que se desconoce, normalmente no es algo de lo que se suela hablar, y menos aún que se suela usar. Buscando más sobre este formato gráfico vectorial, he encontrado tres cosas, que aunque puedan ser antiguas, me han gustado (no tengo demasiado tiempo para dedicarle al SVG y hoy ha sido bastante fructífero para mí). Allá van:

Una lista de teléfonos móviles (o celulares, para quien los llame así) que admiten SVG Tiny 1.1, sacada de SVG.org: Nokia (7370, 6282), Sony Ericsson (K610, M600, W950 ), NEC (V703N), ...
Un pluggin para Eclipse que sirve para mostrar y trabajar con SVG, basado en Batik
Un filtro para importar SVG en documentos dentro de la suite OpenOffice (yo es el que uso en casa, ¡me libré del MS Office!)

Espero que vayáis cogiéndole el gusto al SVG.

Zoom automático para imágenes

2006-02-27T15:04:00.000+01:00

Realizar un zoom en las imágenes es algo que puede sernos de utilidad, ya sea porque no tenemos demasiado espacio en la página y aún así queremos ponerla a gran resolución, o simplemente para poder apreciar mejor los detalles de la foto. Lo que vamos a hacer es modificar todas las imágenes que queramos (distinguiéndolas por un parámetro) para que aparezca un icono de una lupa, que al pulsarlo hará que la imagen se vea más grande y permitiendo movernos por ella según el movimiento del ratón.

Mostrar resto >>

<< Ocultar resto
Hay dos formas de realizar la ampliación de la imágen: la primera es mostrar la misma imágen duplicando su tamaño mediante estilos. La segunda forma es usando otra imagen que tenga el doble de tamaño y mejor resolución. Para ver como funciona una u otra forma hay que seleccionar el checkbox y pinchar en la lupa.
Sea el método que se usa, la forma de ampliarlo es la siguiente: cuando se cargue la página, obtenemos todas los elementos imágenes del documento, comprobamos que es una de las que queremos y la modificamos. La modificación es sencilla, se crea una capa, la añadimos antes del elemento previo a la imagen (usando nextSibling), dentro de esta capa incluimos un botón con la lupa y una capa que estará oculta y que tiene como imagen de fondo un gif transparente (así podemos actuar sobre ella y no se ve) y por último se incluye la misma imagen.
Cuando se pulsa en la lupa, o bien se duplica el tamaño de la imagen o bien se cambia por otra imagen (tambien se podría usar una imagen con mejor resolución y mostrarla inicialmente a la mitad del tamaño, pero no creo que sea correcto, porque en el caso de que el usuario no quiera hacer zoom sobre la imagen, tendrá que esperar de todas formas a que cargue la imagen con mayor solución y mayor tamaño). También se mostrará la capa transparente, la cual tiene capturado el evento onmousemove para realizar el movimiento de la imagen.
El movimiento de la imagen ampliada se hace mediante clipping y desplazamiento. El clipping recorta la zona visible de la imagen a un recuadro, pero si movemos la imagen hacia un lado, el clipping también se movería, por ello hay que mover la zona visible en sentido contrario al movimiento de la imagen. Así se obtiene el efecto deseado.
El codigo es el siguiente:

Diseño con ventanas de una página web

2006-02-24T12:09:00.000+01:00

Muchas veces el diseño de una página web suele regirse por una serie de modelos prefijados que no siempre suele ser lo que más le conviene a nuestro desarrollo. En esta entrada voy a proponer un modelo con ventanas que puede ser apropiado en algunos casos (por ejemplo, en la promoción de un negocio que contiene poca información), pero que puede ser incorrecto usarlo en otras situaciones (por ejemplo, un blog).
La página principal muestra una zona de tamaño fijo que contendrá las ventanas (cuatro en este caso) que serán las que muestren la información. El número de ventanas debe estar limitado y deben ser pocas para que no sobrecarguen la página, por eso he comentado al principio que este modelo puede ser válido para sitios con poco contenido. Las ventanas van a disponer de alguna funcionalidad, lo que da dinamismo y cierta espectacularidad (espero que guste) al diseño, se podrán mover, maximizar y minimizar (creando un efecto thumbnails), efecto imán entre ventanas, etc... No he intentado ver si funciona en Opera debido a que los iframes no admiten el estilo z-index.
Me gustaría poder poner la página directamente, pero me da problemas el sitio donde alojo los archivos y no quiero que cause mala impresión, lo malo es que no se puede apreciar del todo en la imagen, por lo que te recomiendo que te bajes el zip y lo pruebes en tu máquina.

Mostrar resto >>

<< Ocultar resto
Vamos a ir paso a paso explicando todas las características, pero esta vez daré una explicación más funcional, si pongo el código se hará una entrada muy larga. De todas formas, el código se puede ver en el zip y guiarse por los comentarios y si hay dudas, mandadme un email.

Contenedor: Es la capa dónde se van a incluir las ventanas. Es la que controla el movimiento de las ventanas, se captura el evento de movimiento del ratón (onmousemove) y mueve la ventana seleccionada (cuando se pincha en la ventana onmousedown) mientras se mueve el ratón por su superficie. A parte, contendrá cuatro capas que simulan la aparición de las ventanas, esto es solo adorno y se ejecutan al principio nada más.
Ventanas: Se crea un objeto mediante Javascript que representará la ventana, almacenando las características (posición, tamaño, ...) y los métodos (dibujar, maximizar, minimizar, ...). No he creado funciones para acceder a las propiedades por vagancia y porque en Javascript se puede acceder a ellas de todas formas. La capa que se dibuja cuando se crea la ventana contiene una barra con el título (que al pulsarla se activa el movimiento y al soltarla se desactiva el movimiento) y una botonera, que permite cerrar (realmente ocultar) y maximizar/minimizar la ventana. También habrá un iframe que muestra la página web correspondiente, hay que controlar cuando se carga la página para poder mostrarla, si se mostrara antes, como las ventanas empiezan estando minimizadas, se vería como están en tamaño grande y luego pequeño, algo que no es muy agradable visualmente. Habrá una capa que ocupa toda la ventana, y que tiene una imagen transparente, que estará visible cuando la ventana está minimizada para así evitar que se acceda al contenido de la página.
Movimiento: Como ya he dicho anteriormente, el movimiento lo controla el evento onmousemove de la capa contenedora, este evento mueve la ventana que se haye seleccionada según el movimiento del ratón. Una ventana se selecciona cuando se pincha sobre su barra con el ratón (onmousedown) y se deselecciona cuando se suelta el botón del ratón (onmouseup). Se controla que la ventana no se salga del contenedor y el efecto imán entre ventanas.
Efecto imán: Es pegar una ventana a la otra cuando se hayan a una cierta distancia. Para ello se comprueba si la ventana que se está moviendo está cerca por arriba, abajo, izquierda o derecha de alguna de las otras ventanas, en ese caso, se mueve la ventana hasta la posición más cercana, dejando un margen de un pixel por estética.
Minimizar: A parte de cambiar progresivamente el tamaño de la ventana, de lo que se trata realmente es de transformar la ventana en un thumbnail de si misma. Para ello transformaremos todos los elementos HTML de la página, teniendo en cuenta que según el tipo de elemento, se realizará una acción: los elementos que contengan texto se les modificará el estilo (className) por otro con el mismo nombre pero seguido de "_min", la diferencia entre ambos estilos será el tamaño de la letra (font-size) que deberá ser más pequeño, los márgenes (margin) y los espacio de relleno (padding) que deberán ser cero. Los elementos que tengan un tamaño (imágenes, cajas de texto, ...) deberán ser reducidas mediante estilos, para ello el width y el height deberá ser especificado en cada elemento. A las tablas se les debe quitar el cellpadding y el cellspacing. Y también se podrá hacer desaparecer ciertos elementos sobre los que no podremos actuar, por ejemplo un DIV que contenga la publicidad de AdSense, ya que no podemos modificar los estilos de la publicidad al no tener acceso. En cada elemento que se modifica hay que incluir un atributo con el valor modificado para que cuando se tenga que maximizar se pueda recuperar.
Maximizar: Es recuperar la apariencia normal de la ventana. Todos los cambios que hemos realizado en el proceso de minimización deberán ser deshechos. Una cosa curiosa que me ha ocurrido es que el IE (¡viva él!) no redimensionaba al tamaño inicial las imágenes, si escribía un alert cuando recuperaba el tamaño, si me lo hacía correctamente, o si lo hacía normalmente y luego miraba las propiedades de la imagen, me cambiaba el tamaño cuando salía de la ventana de propiedades, total, que vete a saber por qué, el IE no hacía lo que tenía que hacer, la solución una chapuza, me clono el elemento HTML y lo sustituyo por sí mismo.
Botones: Son las imágenes que se encuentran debajo del contenedor de ventanas, cada botón representa a una ventana y efectúa acciones sobre ella: si la ventana está cerrada la muestra maximizada, si está maximizada la minimiza y si está minimizada la maximiza.
Otras cosas a tener en cuenta son: hay un array con índice el id de la ventana (para poder acceder a ellas fácilmente), hay otro array con índice un número consecutivo (para poder acceder a todas las ventanas), cuando se maximiza una ventana, se minimiza la que estaba maximizada anteriormente, etc...

Espero que os guste y que os sea útil. Se pueden ir haciendo mejoras y ampliando funcionalidades, aunque tampoco hay que pasarse para evitar que sea un código muy complejo.
Te puedes bajar el código aquí: ARCHIVO

Críticas a los navegadores

2006-02-22T14:38:00.000+01:00

No soy un gurú de los navegadores, y no creo que mi opinión vaya a causar una depresión a los responsables del desarrollo de estas aplicaciones, aún así voy a dar mi modesta opinión, eso sí, solo las cosas que no me gustan. Una opinión creada por su utilización, no sacada de lo que he leido sobre ellos, es más, es posible que en algunas cosas esté muy equivocado (si es así ponedme un comentario).
Solo voy a hablar de Opera, Firefox, Internet Explorer (todos bajo Windows), que son los que uso.
Empecemos por Opera. Sólo lo uso para comprobar que lo que desarrollo funciona, para navegar uso el Firefox y cuando no queda más remedio el IE, por eso estos comentarios pueden ser un poco inexactos.

El SVG va fatal, pero... ¿a quien le importa?, pues a unos pocos como yo a los que nos gusta el SVG, es una pena. El pluggin de Adobe no funciona a las mil maravillas y el SVG nativo solo soporta SVG Tiny. Eso sí, al menos soporta SVG, cosa que el IE ni se molesta en hacer.
En el trabajo tenemos una URL para configuración automática de proxy (no sé si pasa lo mismo con una dirección proxy normal) y cuando pongo el Opera intenta conectarse a internet (supongo que por el tema de actualizaciones) y hasta que no sale la ventanita de autenticación no puedo hacer nada de nada, ni ver páginas locales, y puede llegar a tardar dos minutos en aparecer la ventanita (en los otros navegadores es automático).
Se identifica por defecto como si fuera el Internet Explorer, lo cual está bien si el proxy al que te conectas capa el acceso según el programa que se conecta, aunque creo que eso está un poco anticuado y ya no lo suelen hacer. De todas formas, cuando tienes que detectar el navegador mediante Javascript es un poco lio.
appCodeName: Mozilla appName: Microsoft Internet Explorer appVersion: 4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) userAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 8.51
Como me hizo ver un lector de display: NONE, fallaba el scrolling de las capas cuando se modificaba la propiedad scrollTop, moviendo todo el documento y no unicamente la capa.
Los iframes permanecen siempre encima de los demás objetos del HTML, aunque se modifique el z-index (esto me fastidia un script que estoy haciendo para incluir en display: NONE).
Cuando un objeto tiene el estilo display = "none", no puedo realizar ciertas operaciones sobre él.

El siguiente es el Firefox, la verdad es que tengo pocas quejas de él, es el que siempre uso y cada vez me gusta más, pero si que hay alguna cosilla que no me gusta del todo.

Cuando quiero duplicar una pestaña, tengo que crearme una nueva y luego copiar la dirección. Esto creo que lo comentaba también el diseñador de IE y la verdad es que eso si me gusta de IE. No estoy seguro, pero creo que hay una extensión que te permite eso.
El firefox tiene la misma sesión para todas las pestañas/ventanas abiertas, lo cual está muy bien, pero por ejemplo, en mi caso, tengo una dirección de correo de GMail para uso personal y otra para el blog, y si quiero ver las dos a la vez no puedo, tengo que cerrar sesiones todo el tiempo, con el IE se puede hacer creando dos instancias de iexplorer.exe, pero con Firefox no, ya que si lo vuelvo a llamar me usa la misma instancia (si se puede hacer, no lo sé). Si me gustaría que en una pestaña pudiera decir, aquí una sesión distinta. El tema de las cuentas de GMail he sido capaz de resolverlo con la extensión IE Tab.

Y por último el IE.

Mostrar lista >>

Centrado de capas

2006-02-21T12:57:00.000+01:00

Una forma de presentar páginas que me gusta bastante, es crear una capa de un tamaño fijo y colocarla en medio de la pantalla y allí mostrar la información. Debo reconocer que lo copié descaradamente (él sabe quién es) y desde entonces lo uso alguna que otra vez. Para realizarlo se usa un div centrado horizontal y verticalmente, hay varias formas de hacerlo, la menos moderna y la que a veces uso por pereza (pero nunca en algo serio) es usar tablas con width 100% y height 100% y centrando el contenido de la única celda que tiene la tabla, vertical y horizontalmente.
La forma limpia es usando estilos, y para ser sinceros, la más rápida (entonces, ¿por qué me da por usar aún lo de las tablas?, supongo que por malas costumbres). Para ello tenemos que tener en cuenta que el ancho y el alto de la capa debe ser fijo. Lo primero que hacemos es colocar la esquina superior izquierda en el centro de la pantalla (top: 50%; left: 50%) y luego mover la capa la mitad del ancho de la capa en pixels hacia la izquierda y la mitad del alto de la capa en pixels hacia arriba (margin-left: -xpx; margin-top: -ypx). Y ya está, con esto tenemos la capa centrada perfectamente y seguirá igual cuando se modifique el tamaño de la ventana.

div.contenedor { width: 700px; height: 500px; position:absolute; left:50%; top:50%; margin-left:-350px; margin-top:-250px; }

Modificar el texto del botón de un input="file"

2006-02-20T10:57:00.000+01:00

Cuando he estado trabajando en proyectos multi-lenguaje, normalmente piden que el botón del input file tenga el texto que ellos quieren, normalmente traducido al idioma correspondiente y no en inglés. Mi respuesta sería que el texto del botón no se puede modificar y si te viene en inglés es porque quizás el resto del navegador también está en inglés. El tema es que te dicen que el mismo navegador puede ser usado por personas que usan distintos idiomas. ¿Mi respuesta?: "mala suerte, es lo que hay".
A parte de ser un tanto borde, el motivo real es no complicarse la vida. El texto no se puede cambiar y lo único que se puede hacer es simularlo. En Quirksmode se explica una forma de hacerlo que para mí es impresionante, como el resto de su página, que te recomiendo que leas.
El método que usa es el siguiente, escribe una caja de texto y al lado un botón (por ejemplo una imagen con el texto que queremos), y encima de ello, tapándolo, escribe el input="file". Por ahora no se consigue nada, porque se sigue viendo el input file y el texto sigue siendo el mismo. Lo que hace a continuación es volver transparente (opacity: 0) el input file, por lo que ya se vería el input file que nosotros hemos diseñado y no el original. ¿Por qué transparente?, porque si se hace invisible (visibility: hidden) o simplemente no se muestra (display: none), no se tiene acceso a él mediante el ratón, por lo que no se podría hacer click en el botón y que nos mostraría la ventana de selección del archivo (en IE si se puede abrir esa ventana con el evento click(), pero en Firefox no se puede por razones de seguridad). Cuando un objeto es transparente, podemos usarlo (hacer click, ...), mientras que en los otros dos casos no se puede.
El resultado final es que vemos un input file que nosotros hemos diseñado, y cuando pinchamos en él, lo que realmente hacemos es pinchar en el original que no vemos porque está transparente. La única pega que le veo es que la propiedad opacity no lo admiten todos los navegadores, e incluso hay que usar distintos estilos según sea el navegador.
Visto en: Quirksmode.

Crear gráficas mediante SVG y sin PHP

2006-02-18T22:46:00.000+01:00

Ya vimos como crear una gráfica con los datos que obteníamos mediante una consulta a la BD, mientras que la tabla si se reordenaba mediante Javascript, era necesario realizar llamadas al servidor para actualizar los datos. ¿Problemas?, que la llamada puede tardar en responder (dependiendo del servidor y muchas otras cosas) y que se pueden llegar a hacer muchas llamadas al servidor, lo cual tampoco puede llegar a ser muy bueno para el rendimiento de este.
Por ello vamos a realizar la gráfica SVG dinámicamente mediante Javascript, se ahorra uso del servidor, ya que la acción la realiza el navegador (si es Firefox, mejor que mejor), eso sí, sin saturarlo porque las acciones que hace no son muy complejas (dependiendo del tamaño de la tabla). Está claro que este modo de trabajo no se puede usar cuando los datos se actualizan con mucha frecuencia, casi contínuamente, porque entonces la creación de la tabla y de la gráfica debería ser siempre en el servidor (accediendo a los datos actualizados).

Mostrar resto >>

<< Ocultar resto
Ahora he cambiado el uso de un iframe para el SVG, por el de un objeto embed para poder acceder a él correctamente. Realmente accedía correctamente usando el iframe y el Firefox, pero cuando probé si funcionaba en IE, me daba fallos (para variar). En Opera tampoco funciona, creo que porque ellos soportan SVG Tiny, tendré que informarme más sobre ello.

Lo único destacable que hay que explicar es la parte que se encarga de la creación de las barras dentro de la imagen SVG (resaltado en negrita), también decir que el SVG solo debe tener los ejes de coordenadas y una etiqueta G que agrupe los resultados y que será el que se vacíe y rellene cada vez.

// Se encarga de dibujar la tabla // y la gráfica function dibujarTabla() { var html = "<table>"; // Obtenemos el documento SVG var svgDocument = document.getElementById( 'svg').getSVGDocument(); var contenedor = svgDocument.getElementById("contenedor"); // Cabecera // En cada celda de la cabecera // se le añade un evento para que // cuando se pulse en ella se cambien // el criterio de orden y tambien una // imagen que indica el orden de cada // columna html += '<tr><th onclick="cambiar(0)">'; html += 'Comunidad/Ciudad Autónoma <img src="'; html += ((orden == 0)? (ascendente? 'ord-asc.gif':'ord-des.gif'): 'ord-no.gif'); html += '"></th>'; html += '<th onclick="cambiar(1)">'; html += 'Habitantes (2000) <img src="'; html += ((orden == 1)? (ascendente? 'ord-asc.gif':'ord-des.gif'): 'ord-no.gif'); html += '"></th>'; html += '<th onclick="cambiar(2)">'; html += 'Habitantes (2005) <img src="'; html += ((orden == 2)? (ascendente? 'ord-asc.gif':'ord-des.gif'): 'ord-no.gif'); html += '"></th></tr>'; // Se ordena la tabla datos.sort(organizar); // Borramos los datos del contenedor while (contenedor.hasChildNodes()) { contenedor.removeChild( contenedor.firstChild); } // Por cada fila se escribe // el codigo HTML necesario for (var i=0; i<datos.length; i++) { // Parte HTML html += '<tr><td>'+datos[i][0]+ '</td><td>'+datos[i][1]+ '</td><td>'+datos[i][2]+ '</td></tr>'; // Parte SVG // Creamos las barras var shape = svgDocument.createElementNS( svgns, "rect"); shape.setAttributeNS( null, "x", 105+15*i); shape.setAttributeNS( null, "y", 15+190 - parseInt(190*parseInt( datos[i][2])/8000000)); shape.setAttributeNS( null, "width", 10); shape.setAttributeNS( null, "height", parseInt( 190*datos[i][2]/8000000)); shape.setAttributeNS( null, "height", parseInt( 190*datos[i][2]/8000000)); shape.setAttributeNS( null, "style", "fill:#fff3c9;stroke:#315c7c;"+ "stroke-width:1.5000000;"); contenedor.appendChild(shape); // Creamos el texto shape = svgDocument.createElementNS( svgns, "text"); shape.setAttributeNS( null, "x", -220); shape.setAttributeNS( null, "y", 115+15*i); shape.setAttributeNS( null, "width", 10); shape.setAttributeNS( null, "style", "font-size:7pt;fill:#000000;"+ "font-family:Arial;text-anchor: end;"); shape.setAttributeNS( null, "transform", "matrix(0,-1.000000,1.000000,"+ "0,0.000000,0.000000)"); shape.appendChild( svgDocument.createTextNode( datos[i][0])); contenedor.appendChild(shape); // Creamos la cifra shape = svgDocument.createElementNS( svgns, "text"); shape.setAttributeNS( null, "x", -195); shape.setAttributeNS( null, "y", 114+15*i); shape.setAttributeNS( null, "width", 10); shape.setAttributeNS( null, "style", "font-size:7pt;fill:#000000;"+ "font-family:Arial;"); shape.setAttributeNS( null, "transform", "matrix(0,-1.000000,1.000000,"+ "0,0.000000,0.000000)"); shape.appendChild( svgDocument.createTextNode( datos[i][1])); contenedor.appendChild(shape); } html += '</table>'; // Necesita un DIV con id=tabla document.getElementById("tabla").innerHTML = html; }

Te puedes bajar un ejemplo aquí: ARCHIVO

¿Usará Google Maps SVG?

2006-02-18T01:38:00.000+01:00

Bueno, tanto como usar, lo que se dice usar, no está muy claro, hay el rumor de que es posible que lo usen. Todo esto viene porque en un hilo de una discusión de los grupos de Google, se han metido en la API de Google Maps y han visto que hay dos variables que hacen referencia a SVG, aunque luego más tarde dicen que la versión que están investigando tiene fallos. Ya nos enteraremos de qué es lo que pasa realmente, y si Google Maps admite SVG o no. La verdad es que solo se me ocurriría que quisieran usarlo para cambiar algo de la funcionalidad, porque por lo poco que sé de cómo funciona Google Maps, a mí siempre me ha parecido que usan una BD de imágenes estáticas y no se calcula dinámicamente la imágen que se quiere mostrar como suelen hacer las aplicaciones GIS (como por ejemplo uno de los que ofrece Demis).
Visto en Something Witty Goes Here

Historial de Microsiervos [19/07/2001 a 17/02/2006]

2006-02-17T10:42:00.000+01:00

El otro día comentaba con un amigo, al que le estaba mostrando display: NONE y que no sabe nada de la blogosfera ni de lo que cuento en mis entradas, que era bastante importante aparecer enlazado en otro blog para que la gente te conozca. Le comentaba el caso de Microsiervos, Error 500 y Denken Über, que me habían enlazado y que en las estadísticas se veía bastante reflejado.
Esta conversación derivó en el tema de las expresiones regulares, qué eran, para qué servían, etc... El caso es que intentando explicárselo con un ejemplo, fuimos al buscador de Microsiervos... ¿resultado?, todas las entradas de Microsiervos desde su inicio (19 de julio de 2001) hasta la actualidad (17 de febrero de 2006).
Lógicamente, no voy a decir cómo lo hicimos, aunque tampoco es muy complicado. Eso sí, quisiera pedir perdón a Microsiervos por si he saturado un poco su servidor (aunque no parecía que diera muchos problemas), voy a ver si les aviso de alguna forma, y para los curiosos os pongo un ZIP con todo lo que me bajé. Como consejillo, perdón otra vez por la arrogancia ;-), les diría que limitaran el número de resultados o que pusieran paginación.
El historial de Microsiervos os lo podéis bajar aquí: ARCHIVO, no me seáis #@%;! y no hagáis nada que vaya en perjuicio de Microsiervos.

Crear gráficas mediante SVG

2006-02-16T19:26:00.000+01:00

Continuando con SVG, vamos a realizar un ejemplo que nos puede ser de utilidad y para que no todo se quede en teoría. Para ello vamos a usar la tabla ordenada mediante Javascript y le vamos a añadir un documento SVG que muestre los habitantes del 2005 en una gráfica de barras. Aunque se podría hacer todo de forma estática, ya que el SVG permite interactuar con la página, lo haremos mediante PHP para que se entienda con mayor claridad.

Mostrar resto >>

<< Ocultar resto
Antes de nada tengo que avisar de una pequeño detalle, el SVG es un poco caótico a la hora de ser usado, pero solo en lo referente a los navegadores. A diferencia del Flash, que pertenece a una empresa y que es esta la que se encarga de crear un visor de los archivos swf, el SVG no pertecene a ninguna empresa y por ello no hay un visor universal para los archivos svg. Adobe (ahora también propietaria del Flash) es una de las empresas más involucradas en el proyecto SVG y creó un pluggin para ver los archivos svg. Aunque para mí es el más completo, tiene el inconveniente de que está pensado para IE, y que en Firefox funciona peor, y en Opera peor aún. Afortunadamente, Firefox y Opera visualizan SVG de forma nativa, pero no tienen toda la funcionalidad del pluggin de Adobe (el ejemplo que voy a mostrar ahora no funciona correctamente con Opera porque no rota el texto).
Vamos a transformar la página estática que usamos para las tablas que se ordenan mediante Javascript, en una página PHP dinámica, aunque tan solo vamos a simular la obtención de datos (para que luego vosotros la modifiquéis si obtenéis los datos mediante una consulta a la BD). También le vamos a añadir un iframe que llama a la página PHP que crea el SVG, que también será llamado cuando se reordenan las columnas.

<? // Array con los datos $datos[0] = array('Andalucía ', 7340052, 7849799); $datos[1] = array('Aragón ', 1189909, 1269027); $datos[2] = array('Principado de Asturias ', 1076567, 1076635); ... ?> <html> <head> ... // Datos de la tabla var datos = new Array(); <? $cont=0; foreach ($datos as $dato) { ?> // Creamos el array javascript datos[<? echo $cont++; ?>] = new Array('<? echo $dato[0]; ?>', '<? echo $dato[1]; ?>', '<? echo $dato[2]; ?>'); <? } ?> ... function cambiar(ind) { ... // Llama al SVG document.getElementById("svg").src = "svg.php?orden=" + orden + "&ascendente=" + ascendente; } ... <body> ... <iframe id="svg" SRC="svg.php" width="500" height="400" frameborder="0"/> ... </body> </html>

Lo siguiente que viene puede parecer lo más complicado, la creación del archivo SVG, pero es realmente sencillo porque para ello vamos a usar el programa Inkscape, un editor de SVG que es sencillo de usar. En el Inkscape dibujaremos la estructura de lo que será la gráfica, los ejes de coordenadas y un ejemplo de barra. Limpiaremos un poco el xml de propiedades innecesarias (aunque no es necesario) y diferenciaremos cada parte, fijándonos en las que forman cada barra, para luego repetirla en el PHP.
El SVG que nos quedaría sería algo parecido a esto:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">  <g id="grafica">  <path style="fill: none;stroke:#000000;stroke-width:1.5000000" d="M 100,10 L 100,210 L 400,210" id="path1306" />  <path style="fill:none;stroke:#000000;stroke-width:1.5000000;" d="M 90,15 L 100,15" id="marca8mill" />  <path style="fill:none;stroke:#000000;stroke-width:1.5000000;" d="M 90,110 L 100,110" id="marca4mill" />  <text style="font-size:10pt;fill:#000000font-family:Arial;text-anchor: end" x="85" y="20" id="texto8mill">8 millones</text>  <text style="font-size:10pt;fill:#000000font-family:Arial;text-anchor: end" x="85" y="115" id="texto4mill">4 millones</text>  <text style="font-size:7pt;fill:#000000font-family:Arial;text-anchor:end" x="-220" y="115" id="text1" transform="matrix(0,-1.000000,1.000000,0,0.000000,0.000000)"> COMUNIDAD</text>  <rect style="fill:#fff3c9;stroke:#315c7c;stroke-width:1.5000000;" id="rect1" width="10" height="190" x="105" y="15"/>  <text style="font-size:10px;fill:#315c7c;stroke:none;font-family:Arial" x="-195" y="114" id="valor1" transform="matrix(0.000000,-1.000000,1.000000,0.000000,0.000000,0.000000)"> 8000000</text> </g> </svg>

Como vemos, las partes barra de coordenadas, marca de los 8 millones, marca de los 4 millones, texto de los 8 millones y texto de los 4 millones son fijos y no se deben tocar. Los otros tres que quedan son los que se deben crear dinámicamente según los valores obtenidos en el PHP. El código necesario sería el siguiente:

<? // El Content-type del SVG, para // que el navegador sepa de que tipo // de archivo se trata header("Content-type: image/svg+xml"); // Obtenemos el orden o lo ponemos // por defecto $orden = $_GET["orden"]; $orden = (!isset($orden)? 0 : $orden); // Obtenemos si es ascendente // o lo ponemos por defecto $ascendente = $_GET["ascendente"]; $ascendente = (!isset($ascendente)? true : $ascendente == "true"); $datos[0] = array('Andalucía ', 7340052, 7849799); $datos[1] = array('Aragón', 1189909, 1269027); $datos[2] = array('Asturias ', 1076567, 1076635); $datos[3] = array('Islas Baleares ', 845630, 983131); ... // Función que se encarga // de ordenar los datos // es igual que la de Javascript function ordenar($a, $b) { GLOBAL $ascendente, $orden; $signo = $ascendente? 1:-1; if (is_numeric($a[$orden])) { return ($a[$orden]+0 > $b[$orden]+0) ? $signo : -$signo; } else { return ($a[$orden] > $b[$orden]) ? $signo : -$signo; } } // Ordenamos los datos usort($datos, "ordenar"); // Cabecera SVG echo '<?xml version="1.0" encoding="utf-8" '+ 'standalone="no"?>'; echo '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" '+ "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">'; ?> <svg version="1.1" width="100%" height="100%" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg"> <g id="grafica">  <path style="fill:none;stroke:#000000;stroke-width:1.5000000" d="M 100,10 L 100,210 L 400,210" id="path1306" />  <path style="fill:none;stroke:#000000;stroke-width:1.5000000;" d="M 90,15 L 100,15" id="marca8mill" />  <path style="fill:none;stroke:#000000;stroke-width:1.5000000;" d="M 90,110 L 100,110" id="marca4mill" />  <text style="font-size:10pt;fill:#000000font-family:Arial;text-anchor:end" x="85" y="20" id="texto8mill">8 millones</text>  <text style="font-size:10pt;fill:#000000font-family:Arial;text-anchor:end" x="85" y="115" id="texto4mill">4 millones</text> <? $cont=0; // Por cada dato creamos una barra foreach($datos as $dato) { ?>  <text style="font-size:7pt;fill:#000000font-family:Arial;text-anchor: end" x="-220" y="<? echo 115+15*$cont; ?>" id="text<? echo $cont; ?>" transform="matrix(0,-1.000000,1.000000,0,0.000000,0.000000)"><? echo $dato[0]; ?></text>  <rect style="fill:#fff3c9;stroke:#315c7c;stroke-width:1.5000000;" id="rect<? echo $cont; ?>" width="10" height="<? echo round(190*$dato[2]/8000000); ?>" x="<? echo 105+15*$cont; ?>" y="<? echo 15+190-round(190*$dato[2]/8000000); ?>"/>  <text style="font-size:10px;fill:#315c7c;stroke:none;font-family:Arial" x="-195" y="<? echo 114+15*$cont; ?>" id="valor<? echo $cont; ?>" transform="matrix(0.000000,-1.000000,1.000000,0.000000,0.000000,0.000000)"><? echo $dato[2]; ?></text> <? $cont++; } ?> </g> </svg>

La posición y, la x y el alto de algunos elementos del SVG se calculan dinámicamente para una correcta situación en el documento SVG. Tambíén podrás apreciar que el x es negativo en el valor de la comunidad, esto es debido a que está girado 90 grados y las coordenadas x e y se intercambian.
Todos los archivos necesarios se encuentran aquí: ARCHIVO, si tenéis algún problema al ejecutarlo, yo uso Wamp Server para instalar PHP y MySQL con facilidad, copiando la carpeta que se descomprima en el directorio raiz, debería funcionar todo correctamente.

Ordenar tablas mediante Javascript

2006-02-15T12:48:00.000+01:00

A la hora de mostrar tablas, el orden por el cual está ordenada puede ayudarnos a ver con mayor facilidad la información que contiene, ordenada por distintas columnas pueder revelar diferentes aspectos sobre los datos que almacena.
En el caso de que la tabla se genere dinámicamente (consulta a una BD y mostrándola mediante una JSP o una página PHP), cuando se quiere volver a ordenar la tabla por otra columna, se vuelve a cargar la página para que la tabla se actualice. Cuando se trata de una página estática se debería cargar otra página distinta. Todo esto no es necesario si se realiza la ordenación mediante Javascript.

Mostrar resto >>

<< Ocultar resto
Antes de nada, hay que tener en cuenta que este tipo de ordenación de tablas solo se debe hacer cuando se muestran todos los registros, cuando no hay paginación de resultados, ya que cuando se reordena una tabla paginada, los datos que actualmente se muestran, pueden estar en páginas posteriores una vez se ha aplicado el orden.
El método que vamos a usar es sencillo, los datos de la tabla los vamos a meter en un array de arrays, luego dibujaremos la tabla dinámicamente (usando un DIV y el innerHTML) y luego mediante la capacidad que ofrece Javascript para ordenar arrays, mostraremos la tabla según el criterio que queramos.
Necesitamos tres variables globales: una de ella contendrá los datos de la tabla, otra el índice de la columna por la que se ordena y la última si el orden es ascendente o descendente:

var orden = 0; var ascendente = true; var datos = new Array(); datos[0] = new Array('Andalucía ', 7340052, 7849799); datos[1] = new Array('Aragón ', 1189909, 1269027);

Pasemos ahora a las funciones, la primera de ellas es la que se encarga de cmabiar el criterio de orden, según el índice que se pasa por parámetro, si es el mismo que el que ya estaba, se cambia el sentido (ascendente/descendente) y si no es así, se cambia el indice y se pone el sentido como ascendente.

// Cambia el criterio de orden // y vuelve a dibujar la tabla function cambiar(ind) { // Si es el mismo orden // que el que hay actualmente // se cambia el sentido. // En otro caso, se cambia el // criterio y se pone el sentido // como ascendente if (ind == orden) { ascendente = !ascendente; } else { orden = ind; ascendente = true; } // Se refresca la tabla dibujarTabla(); }

La siguiente función es la que se usa en el método de ordenación, se pasa como parámetro a la función sort y tiene como parámetros dos elementos del array que se ordena. Devuelve 1 para el elemento mayor y -1 para el menor.

// Es la función para ordenar el array // con los datos, tiene en cuenta la columna // y si es ascendente o no function organizar(a, b) { var signo = ascendente? 1:-1; return (a[orden] > b[orden]) ? signo : -signo; }

Por último la función que dibuja la tabla, simplemente crea el código HTML necesario y lo inserta usando innerHTML en un div que tiene el id=tabla.

// Se encarga de dibujar la tabla function dibujarTabla() { var html = "<table>"; // Cabecera // En cada celda de la cabecera // se le añade un evento para que // cuando se pulse en ella se cambien // el criterio de orden y tambien una // imagen que indica el orden de cada // columna html += '<tr><th onclick="cambiar(0)">'; html += 'Comunidad/Ciudad Autónoma <img src="'; html += ((orden == 0)? (ascendente? 'ord-asc.gif':'ord-des.gif'): 'ord-no.gif'); html += '"></th>'; html += '<th onclick="cambiar(1)">'; html += 'Habitantes (2000) <img src="'; html += ((orden == 1)? (ascendente? 'ord-asc.gif':'ord-des.gif'): 'ord-no.gif'); html += '"></th>'; html += '<th onclick="cambiar(2)">'; html += 'Habitantes (2005) <img src="'; html += ((orden == 2)? (ascendente? 'ord-asc.gif':'ord-des.gif'): 'ord-no.gif'); html += '"></th></tr>'; // Se ordena la tabla datos.sort(organizar); // Por cada fila se escribe // el codigo HTML necesario for (var i=0; i<datos.length; i++) { html += '<tr><td>'+datos[i][0]+ '</td><td>'+datos[i][1]+ '</td><td>'+datos[i][2]+ '</td></tr>'; } html += '</table>'; // Necesita un DIV con id=tabla document.getElementById("tabla").innerHTML = html; }

Podéis bajaros un ejemplo aquí: ARCHIVO

Miedo me da

2006-02-14T12:31:00.000+01:00

Acabo de ver en Genbeta la entrada ¿Que saben las webs que visitamos de nosotros? Con ProjectIp lo sabrás, y aunque conocía la información que se puede obtener, no había caido en la cuenta de que el IE puede leer lo que tienes en tu portapapeles, lo cual me parece bastante inapropiado. Sí, está muy bien tener esa utilidad y poder trabajar con ella, pueden conseguirse cosas interesantes con ello, pero también habrá quién obtenga cosas "interesantes" para ellos de nuestro portapaleles.
Me parece un fallo enorme que mediante el IE se pueda obtener información de nuestro ordenador, la gente normalmente no suele poner nada importante en el portapapeles, pero no todo el mundo tiene esa precaución, muchas veces se usa el copy/paste y no pensamos que pueda ser accesible desde una página web.
No sé, no me parece correcto que está información esté disponible para todo aquel que tenga malas intenciones. Afortunadamente, el Firefox, que es el navegador que uso, no permite esto.
Visto en: Genbeta
Enlace: Project IP

SVG, ese gran desconocido

2006-02-14T11:51:00.000+01:00

Soy un apasionado del SVG y me gustaría conocerlo aún más, pero supongo que la falta de tiempo me hace no poder meterme del todo. ¿Qué es el SVG? es un formato de gráficos vectoriales del World Wide Web Consortium (W3C) en formato XML, que si bien se piensa en él para el entorno web, puede ser usado en muchos entornos: diseño, iconos para escritorio, ...
Una definición mejor podría ser (y es) la que nos encontramos en la Wikipedia:

Scalable Vector Graphics (SVG) es un lenguaje para describir gráficos vectoriales bidimensionales, tanto estáticos como animados (estos últimos con ayuda de SMIL), en XML.

Suele haber una disputa entre si es mejor el SVG o el Flash, pero, para mí gusto, es como la discusión entre ciencia y religión, puedes ser científico y tener creencias religiosas y no va a pasar nada. En este caso es lo mismo, más que discutir sobre que es mejor o peor, etc... ¿por qué no aprovecharnos de lo que nos ofrecen los dos formatos?. Aunque no soy muy amante del Flash, sería estúpido negar que se pueden hacer cosas increibles y que con SVG puede ser bastante complicado de hacer, pero también es cierto que con SVG se pueden hacer muchas cosas y más fáciles que con Flash, ya que es texto, no un formato binario.
Le veo mucha utilidad al SVG cuando se quieren mostrar gráficas de estadísticas en nuestra aplicación, una consulta a la base de datos, y un script PHP (por ejemplo) para escribir un sencillo XML y ya tendríamos nuestra gráfica de estadísiticas. Aunque también le veo inconvenientes, como por ejemplo que en IE tengas que instalar un pluggin para poder visualizar el SVG (y la gente no suele estar muy dada a instalar pluggins), Opera y Firefox (a partir de la versión 2) soportarán SVG, pero eso tampoco es bueno, porque cada uno puede sacar distintos resultados (esperemos que no). También echo de menos que el grosor de las líneas en SVG no contemple como en Flash el hilo. Pero también es cierto que los filtros que se pueden efectuar sobre SVG son impresionantes.
Intentaré ir poniendo ejemplos de uso, pero mientras tanto os paso estos enlaces para que vayais cogiéndole el gusto:

Especificación de la W3C: http://www.w3.org/TR/SVG/
Página de Adobe: http://www.adobe.com/svg/
Un tutorial muy bueno de KeyLinDev: http://kevlindev.com/tutorials/basics/index.htm
Carto.net, una página con muchos recursos, centrados en la cartografía: http://www.carto.net/
Inkscape, un editor gratuito de SVG: http://www.inkscape.org/

Contar palabras usando expresiones regulares

2006-02-12T20:27:00.001+01:00

Gracias a que Microsiervos (en particular Nacho) ha puesto un enlace a mi blog en una de sus entradas, lo que cuento sobre las expresiones regulares ha sido de lo más leido en display: NONE. [Actualizado: según me cuenta Mario, él visitó la página gracias a Denker, cuando puse la entrada aún no había visto las estadísticas y la verdad es que también tengo que darle las gracias a Denker y a Error 500 por haberme puesto en sus blogs]. Supongo que debido a ello, Caso Patologico me pregunta en un comentario si sé de algún script que cuente palabras. Pues sin irnos del tema, voy a explicar como lo haría yo usando las expresiones regulares.
En el ejemplo que voy a mostrar, lo que hago es pasar a una función como parámetro un objeto HTML (en este caso un DIV), obtendré el código HTML usando la propiedad innerHTML, después quitaré las etiquetas HTML (<...>) y por último contaré las palabras.
Quizás fuera más sencillo pasar directamente el texto que quiero tratar, pero pasando el objeto también muestro como quitar etiquetas HTML usando las expresiones regulares.
El código sería el siguiente:

function contarPalabras(obj) { var txt = obj.innerHTML; // Borro todo aquello que esté // contenido entre < y > txt = txt.replace(/<(\/|\w|\s|=|"|\n)*>/g, ""); // Almaceno las coincidencias con palabras // Al hacer copy/paste debeis ponerlo todo en una línea var palabras = txt.match(/(\w|á|é|í|ó|ú|ü|ñ|Ñ|Á|É|Í|Ó|Ú)+ [\s\n\r\t,\.;:"'\{\}\[\]$]*/g); alert(palabras.length); }

Así, a simple vista, puede ser fácil no comprender mucho, pero si nos detenemos un poco a intentar entender el contenido de las expresiones regulares, veremos que no es tan difícil.

/<(\/|\w|\s|=|"|\n)*>/g

Esta expresión regular es la que se encarga de reconocer las etiquetas HTML:

Primero nos encontramos con un <, que es por lo que empieza cualquier etiqueta HTML
Después nos encontramos con un conjunto de caracteres entre paréntesis y separados por |, esto quiere decir que el carácter siguiente está dentro de esos posibles valores:
- \/ representa a /, es necesario escaparla porque tiene significado propio.
- \w representa cualquier valor alfanumérico
- \s representa cualquier el espacio en blanco
- \n representa el retorno de carro
- " y = se representan a ellos mismos
El conjunto anterior está seguido por *, que indica que puede o no aparecer, y en ese caso, aparecer tantas veces como quiera
Y por último encontramos un > que es el carácter final de las etiquetas HTML
La g al final indica que se hace una búsqueda global, no finaliza al encontrar el primer caso

Al final lo que tenemos es una expresión regular que detecta todo conjunto de palabras (con números), espacios, comillas, iguales y saltos de línea encerrados entre < y >.
La siguiente expresión regular es la que detecta las palabras y si que nos puede parecer complicada de entender, pero es más sencilla aún que la anterior. Vamos a usar la funcion match la cual nos devuelve una lista con las coincidencias de la expresión regular, y viendo el número de elementos que tiene la lista, sabremos cuantas palabras hay.

/(\w|á|é|í|ó|ú|ü|ñ|Ñ|Á|É|Í|Ó|Ú)+[\s\n\r\t,\.;:"'\{\}\[\]$]*/g

Esta expresión regular encuentra las palabras seguidas por caracteres que separan palabras (espacios, signos de puntuación, ...):

Primeramente hay un grupo de caracteres entre paréntesis, seguido de un + (que indica que se repite una vez o varias). Realmente solo debería aparecer el carácter \w que representa a cualquier carácter alfanumérico, pero no sé por qué (quizás solo en Firefox) no reconoce las vocales acentuadas, ...
Después hay un conjunto de caracteres separadores de palabras, incluido el final de cadena ($)

Por lo que reconocerá palabras seguidas de caracteres separadores, separando así las palabras.

Caja de texto con autocompletado

2006-02-10T20:00:00.000+01:00

Cada día son mayores las facilidades que ofrecen las páginas web para que el usuario se esfuerce lo menos posible. Una de ellas es el autocompletado de las cajas de texto, según se vaya escribiendo te aparece una lista con las posibles opciones o con sugerencias. Es lo que usa Google cuando te va mostrando lo más buscado.
A primera vista parece complicado, pero como se va a ver no lo es tanto, eso sí, quizás tiene varias cosas que hay que tener en cuenta, lo que lo convierte en un script un poco largo.

Mostrar resto >>

<< Ocultar resto
Primero vamos con el diseño, son necesarias tres partes, la caja de texto <INPUT type="text" ...>, una capa que irá debajo de la caja de texto que es la que mostrará las sugerencias y un botón, en este caso una imagen, que servirá para desplegar la lista con todos los valores.
Lo único destacable del diseño es que la lista debe ser una capa con estilo position: absolute y debe ir dentro de otra con estilo position: relative, para que "flote" por encima del texto que se encuentre debajo de la caja de texto.

Si nos fijamos tanto en la caja de texto como en la imagen, veremos que hay varios eventos que debemos tener en cuenta: en la caja de texto cuando se pulsa una tecla muestra la lista con las coincidencias y cuando se pierde el foco se debe escribir en la caja el texto seleccionado de la lista de coincidencias. En la imagen hay que desplegar la lista con todas las posibilidades. Una cosa a tener en cuenta es que la caja de texto debe tener el atributo autocomplete con valor off para que el navegador no actue sobre ella.
Las acciones que se deben tener en cuenta son las siguientes:

Se pulsa una tecla en la caja de texto (usamos el evento onkeyup para no tener problemas con los cursores) y dependiendo de la tecla:

si la tecla es el cursor hacia la izquierda o hacia la derecha, no hago nada y no dejo que se modifique el texto, volviendo a sobreescribirlo
si la tecla es el cursor hacia arriba, selecciono el inmediato superior al seleccionado en ese momento en la lista de coincidencias
si la tecla es el cursor hacia abajo, selecciono el inmediato inferior al seleccionado en ese momento en la lista de coincidencias
si la tecla es la de retroceso, dejamos que borre el texto seleccionado (hay que tener en cuenta tambien que dentro de la caja habrá una parte del texto que estará seleccionado, que coincidirá con la diferencia de la opción seleccionada y el texto escrito por el usuario)
si la tecla es la de retorno de carro, deseleccionamos en texto (quedará la opción seleccionado) y eliminamos la lista
en otro caso, escribimos la letra pulsada

después de tratar la tecla pulsada, calculamos la lista de opciones y la dibujamos dentro de una tabla
si pinchamos en una opción de la lista, la escribimos en la caja y ocultamos la lista

La lista de opciones se obtendrán de un array, claro que se podría obtener usando AJAX.
La función que trata la pulsación de las teclas y despliega la lista con las coincidencias es la siguiente, la cual recibe dos parámetros, el objeto event y el elemento que contiene la lista:

// Muestra las coincidencias en la lista function inputFilling(evt, obj) { var elems = datos; var fill = document.getElementById('lista'); var tecla = ""; var lista = new Array(); var res = obj.value; var borrar = false; // Almaceno la tecla pulsada if (!IE) { tecla = evt.which; } else { tecla = evt.keyCode; } var texto; // Si la tecla que pulso es una // letra o un espacio, o el intro // o la tecla borrar, almaceno lo // que debo buscar if (!String.fromCharCode(tecla).match(/(\w|\s)/) && tecla != 8 && tecla != 13) { texto = textoAnt; } else { texto = obj.value; } textoAnt = texto; // Si el texto es distinto de vacio // o se pulsa ARRIBA o ABAJO // creo una lista con las palabras // que coinciden con lo que hay // escrito en la caja if ((texto != null && texto != "") || (tecla == 40 || tecla == 38)) { for (var i=0; i<elems.length; i++) { if (elems[i].toUpperCase().indexOf( texto.toUpperCase()) == 0) { lista[lista.length] = elems[i]; } } } // Según la letra que se pulse if (tecla == 37) { // Izquierda // No hago nada } else if (tecla == 38) { // Arriba // Subo la posicion en la // lista desplegable una posición if (posicionListaFilling > 0) { posicionListaFilling--; } // Corrijo la posición del scroll fill.scrollTop = posicionListaFilling*14; } else if (tecla == 39) { // Derecha // No hago nada } else if (tecla == 40) { // Abajo if (obj.value != "") { // Si no es la última palabra // de la lista if (posicionListaFilling < lista.length-1) { // Corrijo el scroll fill.scrollTop = posicionListaFilling*14; // Bajo la posición de la lista posicionListaFilling++; } } } else if (tecla == 8) { // Borrar <- // Se sube la lista del todo posicionListaFilling = 0; // Se permite borrar borrar = true; } else if (tecla == 13) { // Intro // Deseleccionamos el texto if (obj.createTextRange) { var r = obj.createTextRange(); r.moveStart("character", obj.value.length+1); r.moveEnd("character", obj.value.length+1); r.select(); } else if (obj.setSelectionRange) { obj.setSelectionRange( obj.value.length+1, obj.value.length+1); } // Ocultamos la lista fill.style.display = "none"; // Ponemos el puntero de // la lista arriba del todo posicionListaFilling = 0; // Controlamos el scroll fill.scrollTop = 0; return true; } else { // En otro caso que siga // escribiendo posicionListaFilling = 0; fill.scrollTop = 0; } if (lista.length == 0) { // Si la lista es vacia no la mostramos fill.style.display = "none"; } else { // Creamos una tabla con // todos los elementos encontrados fill.style.display = "block"; var html='<table cellspacing="0" '+ 'cellpadding="0" border="0" width="100%">'; for (var i=0; i<lista.length; i++) { html += '<tr id="tr'+obj.id+i+ '" '+(posicionListaFilling == i? ' class="fill" ': '')+ ' onmouseover="seleccionaFilling(\'tr'+ obj.id+'\', '+i+ ')" onmousedown="seleccionaTextoFilling(\'tr'+ obj.id+'\', '+i+')">'; html += '<td>'+lista[i]+'</td></tr>'; } html += '</table>'; } // Escribimos la lista fill.innerHTML = html; // Si no se ha borrado if (!borrar) { if (lista.length != 0) { // Seleccionamos la parte del texto // que corresponde a lo que aparece // en la primera posición de la lista // menos el texto que realmente hemos // escrito obj.value = lista[posicionListaFilling]; if (obj.createTextRange) { var r = obj.createTextRange(); r.moveStart("character", texto.length); r.moveEnd("character", lista[posicionListaFilling].length); r.select(); } else if (obj.setSelectionRange) { obj.setSelectionRange( texto.length, lista[posicionListaFilling].length); } } } return true; }

Una función muy similar es la que se encarga de desplegar la lista cuando se pulsa el botón

// Despliega todos los elementos // en la lista function despliegaFilling(obj, elems, fill) { var lista = new Array(); var res = obj.value; var texto=""; // Creamos la lista for (var i=0; i<elems.length; i++) { if (elems[i].toUpperCase().indexOf( texto.toUpperCase()) == 0) { lista[lista.length] = elems[i]; } } textoAnt = ""; if (lista.length == 0) { // Si no hay datos no la mostramos fill.style.display = "none"; } else { // Creamos una tabla // con todos los elementos // de la lista fill.style.display = "block"; var html='<table cellspacing="0" '+ 'cellpadding="0" border="0" '+ 'width="100%">'; for (var i=0; i<lista.length; i++) { html += '<tr id="tr'+obj.id+i+ '" '+(posicionListaFilling == i? ' class="fill" ': '')+ 'onmouseover="seleccionaFilling(\'tr'+obj.id+ '\', '+i+')" onmousedown="seleccionaTextoFilling(\'tr'+ obj.id+'\', '+i+')">'; html += '<td>'+lista[i]+'</td></tr>'; } html += '</table>'; } // Escribimos la lista fill.innerHTML = html; // Seleccionamos el texto if (lista.length != 0) { obj.value = lista[posicionListaFilling]; if (obj.createTextRange) { var r = obj.createTextRange(); r.moveStart("character", texto.length); r.moveEnd("character", lista[posicionListaFilling].length); r.select(); } else if (obj.setSelectionRange) { obj.setSelectionRange( texto.length, lista[posicionListaFilling].length); } } obj.focus(); }

Y por último, necesitaremos otras funciones para ayudar en la funcionalidad

// Introduce el texto seleccionado function setInput(obj, fill) { obj.value = textoAnt; fill.style.display = "none"; posicionListaFilling = 0; } // Cambia el estilo de // la palabra seleccionada // de la lista function seleccionaFilling(id, n) { document.getElementById(id + n).className = "fill"; document.getElementById(id + posicionListaFilling).className = ""; posicionListaFilling = n; } // Pasa el texto del filling a la caja function seleccionaTextoFilling (id, n) { textoAnt = document.getElementById(id + n).firstChild.innerHTML; posicionListaFilling = 0; }

Si quieres intentar tú hacer algo parecido, te lo recomiendo, no es complicado, si te aconsejo que vayas introduciendo funcionalidades poco a poco, si no, si que podrá resultar bastante complicado.
Puedes bajarte aquí un ejemplo: ARCHIVO

Uso de iframes y scripts en una aplicación web

2006-02-09T12:47:00.000+01:00

Me sigo sorprenciendo cuando entro en un proyecto nuevo y veo que quién ha hecho el diseño ha usado frames, dividiendo la página en varias partes y estas a su vez también divididas en otras. Cuando estamos creando una aplicación web suele ser necesario dividir la pantalla en distintas zonas para separar las funcionalidades, pero las divisiones es mejor realizarlas mediante iframes, más que con frames.
Por ejemplo, para mostrar varias tablas con datos que se obtienen con consultas propias, es preferible crear una página para cada consulta, que muestran únicamente esa información, y no que sea una sola página que muestre todas las tablas. Haciendo lo primero podemos trabajar con cada tabla de forma independiente y no tendremos la necesidad de recargar todas las tablas para actualizar solo una.
Para mí la diferencia fundamental es que los frames dividen la pantalla, mientras que los iframes dividen el documento.

En el caso de los frames, supongamos que el menú ocupa de alto más que la ventana, haciendo aparecer un scroll (algo que de por sí no es muy estético), y si el frame con las tablas también ocupa de alto más que la ventana, aparecerá otro scroll, ya serían dos scrolls, que para mi gusto demasiados. En el caso de los iframes, solo habría un scroll, ya sea motivado por el menú o las tablas .
Otro aspecto importante es que con iframes puedes usar el diseño en la página contenedora y que los iframes se acomoden a este diseño (por ejemplo, si el iframe contiene únicamente una tabla, tan solo es necesario dibujarla y no necesitas preocuparte de la imagen del fondo de la página, si es que la usas). Sin embargo, con los frames, debes acoplarlos para que el diseño no se descuadre.
Por último decir que los scripts generales de la aplicación deberían estar contenidos en la página principal y desde los iframes hacer referencia a las funciones mediante parent.[nombre-funcion](), centrando así toda la ejecución de procesos en un único sitio. Los scripts específicos de cada iframe si se deben introducir en la propia página, no sobrecargando así la página principal.
Supongo que se podría profundizar más en el tema, indicando pros y contras, citando otros casos, ... esto es tan solo un comienzo que espero ir ampliando.

Efecto de fundido en los enlaces

2006-02-08T19:33:00.000+01:00

Anteriormente explicaba como se hacía un efecto de fundido en la página principal de blogger. Y hoy voy a decir como se hace el marco donde están los enlaces.

Mostrar resto >>

<< Ocultar resto
El efecto de fundido es el mismo que el explicado en la entrada anterior, salvo el hecho de que el color inicial y el final se pasan por parámetros y no mediante variables globales y que se incluye un parámetro para saber en que fase de la animación me encuentro y poder llevar un control.
Es necesario disponer de un DIV que funciona como contenedor de otros DIV que son los que contienen los enlaces y que son los que se moverán para arriba o para abajo. Vuelvo a recordar que el motivo de que exista una capa contenedora es porque se le pone el estilo position: relative para que luego las capas que se hayan dentro se puedan mover gracias al estilo position: absolute.

Contenedor

Enlace 1

Enlace 2

Enlace 3

Se van a repetir sucesivamente cuatro fases en la realización de este efecto:

Hacer fundido hasta el 30%
Mover el enlace superior a la parte inferior, mientras continúa el fundido y los otros dos enlaces se mueven hacia arriba
Cambiar el enlace inferior
Reiniciar los valores que se encuentran en el segundo enlace, este fue modificado cuando se creo y pasó del color de fondo al color de letra. Volver a empezar el proceso

Necesitaremos tres funciones nuevas, además de las ya creadas en el efecto de fundido:

para poder mover las capas de los enlaces, las cuales en este caso está separadas 24 pixels
// Mueve una capa hasta cierta posición // descendentemente o ascendentemente function mover(id, pos, ascendente) { if (pos >= 0) { var obj = document.getElementById(id); obj.style.zIndex = ascendente? '10':'5'; obj.style.top = (parseInt( obj.style.top.replace(/px/, "")) - (velocidadSubir*(ascendente? 1: -1))) + "px"; setTimeout("mover('"+id+"', "+ (pos-velocidadSubir)+ ", "+ascendente+")", velocidadMover); } }
para realizar las distintas fases de la animación
// Lleva a cabo la animacion de las // capas que contienen los enlaces // en 4 fases. Cada fase, menos la // primera, debe esperar hasta que // acaba la anterior function animarEnlaces(i) { if (i == 1) { // Fase 1: el div superior lo // difumino hasta un 30% fundido("enlace"+ divEnlaces[(indice+0) % divEnlaces.length] , 30, colorFondo, 1); // Lanzo la siguiente fase animarEnlaces(2); } else if (i == 2) { // No se ejecuta hasta que // la fase anterior no haya acabado if (!continuar[1]) { setTimeout("animarEnlaces(2)", 10); } else { // Muevo la capa superior hacia abajo // y las otras hacia arriba, mientras hago // un fundido de la capa que baja el // resto que no se realizó continuar[2] = false; mover("enlace"+ divEnlaces[(indice+0) % divEnlaces.length], 46, false); mover("enlace"+ divEnlaces[(indice+1) % divEnlaces.length], 23, true); mover("enlace"+ divEnlaces[(indice+2) % divEnlaces.length], 23, true); fundido("enlace"+divEnlaces[(indice+0)%divEnlaces.length], 70, colorFondo, 2); // Lanzo la siguiente fase animarEnlaces(3); } } else if (i == 3) { // No se ejecuta hasta que // la fase anterior no haya acabado if (!continuar[2]) { setTimeout("animarEnlaces(3)", 10); } else { continuar[3] = false; // Cambio el enlace de la última // capa para que aparezca el siguiente // de la lista y pongo valores por // defecto. // Hago que aparezca haciendo un // fundido del color de fondo al color // de la letra var obj = document.getElementById( "enlace"+ divEnlaces[(indice+0) % divEnlaces.length]); obj.innerHTML = '<a href="'+ enlaces[posEnlace][0]+ '" porc="30" style="color: '+ colorFondo + '">'+ enlaces[posEnlace][1]+ '</a>'; for (var i=0; i<obj.childNodes.length; i++) { obj.childNodes[i].setAttribute("color-texto", RGBdecimal(obj.childNodes[i].style.color)); obj.childNodes[i].setAttribute("porc", "100"); } posEnlace = (posEnlace+1) % enlaces.length; fundido("enlace"+ divEnlaces[(indice+0)%divEnlaces.length], 100, '#315C7C', 3); indice++; animarEnlaces(4); } } else if (i == 4) { // No se ejecuta hasta que // la fase anterior no haya acabado if (!continuar[2]) { setTimeout("animarEnlaces(3)", 10); } else { var obj = document.getElementById( "enlace"+ divEnlaces[(indice+1) % divEnlaces.length]); for (var i=0; i<obj.childNodes.length; i++) { obj.childNodes[i].setAttribute("porc", "100"); obj.childNodes[i].setAttribute("color-texto", RGBdecimal(color)); } setTimeout("animarEnlaces(1)", 1000); } } }
para la creación de los enlaces y su colocación
// Situa las tres capas en sus posiciones // iniciales y luego llama a inicio de la // animación function crearEnlaces() { document.getElementById("enlace1").innerHTML = '<a href="'+ enlaces[posEnlace][0]+ '" style="color: '+ color +'">'+ enlaces[posEnlace][1]+'</a>'; document.getElementById("enlace1").style.top = "1px"; posEnlace++; document.getElementById("enlace2").innerHTML = '<a href="'+ enlaces[posEnlace][0]+ '" style="color: '+ color +'">'+ enlaces[posEnlace][1]+'</a>'; document.getElementById("enlace2").style.top = "25px"; posEnlace++; document.getElementById("enlace3").innerHTML = '<a href="'+ enlaces[posEnlace][0]+ '" style="color: '+ color +'">'+ enlaces[posEnlace][1]+'</a>'; document.getElementById("enlace3").style.top = "49px"; posEnlace++; setTimeout("animarEnlaces(1)", 200); }

Puedes bajarte un ejemplo del código aquí: ARCHIVO

Armonía de los colores

2006-02-07T13:06:00.000+01:00

Gracias a mi amiga Belcha he conocido la teoría sobre la armonía de los colores, la cual nos puede ser de mucha ayuda a la hora de seleccionar los colores cuando diseñamos nuestra web.
Una defición de armonizar los colores puede ser la que se encuentra en Interacciones del color: Armonía y Contraste:

Significa coordinar los diferentes valores que el color adquiere en una composición, es decir, cuando en una composición todos los colores poseen una parte común al resto de los colores componentes.

Cuando empiezo con el diseño de una página web suelo pensar primeramente en el color predominante: azul, marron, gris, ... y luego intento encontrar otra serie de colores con los que jugar. A veces es complicado encontrar esos otros colores, por lo que me he visto en la situación de cambiar el color principal, o estar bastante tiempo hasta que logro dar con unos colores adecuados. La armonización de colores nos facilita esta labor, y para ello lo hace mediante agrupaciones de colores:

Monocromáticos
Contraste
Triadas
Análogos
...

Una página que encontré que explicaba muy bien toda esta teoría es Teoría del color. Propiedades de los colores, aunque yo me leería todo lo referente a los colores que explican. También debo decir que no hay que seguir esto al pie de la letra, porque si me ha ocurrido que el color que obtenía no era del todo bueno y tenía que modificarlo un poco para que me gustara (como me ha pasado cuando he diseñado display: NONE).
Hay varias aplicaciones (creo que todas de pago) que te facilitan la labor de "armonizar" tu web, dándote código HTML, capturando colores de imágenes, ... pero lo mejor que he encontrado es esta página web de wellstyled.com.

Efecto de fundido

2006-02-07T10:42:00.000+01:00

Un efecto que me ha gustado de Blogger, es ver como el texto se desvanece, hace un fundido al color del fondo. No me he puesto a mirar como lo hace, pero es algo sencillo, tan solo hay que cambiar tres colores progresivamente de un estado inicial a otro final:

el color de texto (color),
el color de fondo (background-color),
el color de los bordes (border-color)

Imagen simulación

Mostrar resto >>

<< Ocultar resto
Lo importante es calcular cuales son los colores intermedios entre el color inicial y el color final. Para ello trabajamos en RGB (como siempre se debería trabajar en HTML), pero no en hexadecimal, sino en decimal, para facilitar su uso.
Debemos tratar con cada componente (R, G, B) por separado porque cada cual es independiente. Para ello, primero calculamos la diferencia que hay en cada componente RGB entre el color final y el color inicial y se lo vamos añadiendo al color inicial. Por ejemplo, tenemos los dos colores predominantes de este blog: azul (#315C7C o rgb(49, 92, 124)) y el amarillo (#FFF3C9 o rgb(255, 243, 201)), la diferencia entre ambos será (206, 151, 77), esta diferencia la tendremos que dividir en varias partes iguales (por ejemplo 4), lo que nos daría (51.5, 37.75, 19.25) y se iremos sumando progresivamente al color inicial rgb(49, 92, 124).


rgb(49, 92, 124)	rgb(100, 128, 143)	rgb(152, 167, 162)	rgb(203, 205, 182)	rgb(255, 243, 201)

El resto que nos queda es sencillo, deberemos tratar de transformar los colores del objeto HTML que queremos (y de sus hijos, por si estos tienen distintos estilos). Para ello necesitaremos las siguientes funciones:

una función que nos devuelva el valor RGB en formato decimal [rgb(r, g, b)]
// Devuelve el valor rgb(n, n, n) de un // código RGB con formato #RRGGBB function RGBdecimal(rgb) { // Si es del tipo rgb(n, n, n) devuelve lo mismo, // en caso contrario lo transforma // Recuerda el uso de expresiones regulares if (rgb.match( /^.*rgb$\s*\d{1,3}\s*\,\s*\d{1,3}\s*\,\s*\d{1,3}$\s*$/ )) { return rgb; } else { var aux = rgb.substring(1); var valor = "rgb("; valor += parseInt(aux.substring(0,2), 16)+","; aux = aux.substring(2); valor += parseInt(aux.substring(0,2), 16)+","; aux = aux.substring(2); valor += parseInt(aux.substring(0,2), 16)+")"; rgb = valor; } return rgb; }
una función que transforma porcentualmente un color en otro
// Transforma el color de inicio al color de fin // en un porcentaje function transformaColor(_porc, colorIni, colorFin) { var porc = 100-parseInt(_porc); // Obtiene las componentes RGB del color de inicio var iniAux = colorIni.substring( colorIni.lastIndexOf("(")+1, colorIni.lastIndexOf(")")); var coloresIni = iniAux.split(','); // Obtiene las componentes RGB del color de fin var finAux = colorFin.substring( colorFin.lastIndexOf("(")+1, colorFin.lastIndexOf(")")); var coloresFin = finAux.split(','); // Calcula la diferencia entre // las componentes RGB del // color de inicio y el de fin var diferencias = new Array(); for (var i=0; i<coloresIni.length; i++) { diferencias[i] = parseInt(coloresFin[i]) - parseInt(coloresIni[i]); } // Añado el porcentaje al // color de inicio var rgb = "rgb("; for (var i=0; i<coloresIni.length; i++) { rgb += parseInt( parseInt(coloresIni[i])+ (diferencias[i]*porc/100))+ (i==coloresIni.length-1? ")":","); } return rgb; }
una función que trate todos los hijos recursivamente
// Por cada hijo, guardo el color original // por si luego se quiere recuperar el // estilo, y empiezo a reducir los colores function tratarHijos(hijos) { for (var i=0; i<hijos.length; i++) { // Si es un elemento HTML if (hijos[i].nodeType == 1) { // La primera vez almaceno los valores if (!hijos[i].getAttribute("porc")) { hijos[i].setAttribute("porc", "100"); if (hijos[i].style.backgroundColor) { hijos[i].setAttribute("color-fondo", RGBdecimal(hijos[i].style.backgroundColor)); } if (hijos[i].style.borderColor) { hijos[i].setAttribute("color-borde", RGBdecimal(hijos[i].style.borderColor)); } // Si no hay color de texto le // ponemos por defecto negro if (!hijos[i].style.color) { hijos[i].setAttribute("color-texto", RGBdecimal(colorDefectoTexto)); } else { hijos[i].setAttribute("color-texto", RGBdecimal(hijos[i].style.color)); } } // Obtengo el porcentaje anterior var porc = parseInt( hijos[i].getAttribute("porc")); if (porc > 0) { // Reducimos el porcentaje segun // el índice indicado porc -= indiceDifuminado; hijos[i].setAttribute("porc", porc); // Cambiamos el color de la letra hijos[i].style.color = transformaColor( porc, hijos[i].getAttribute("color-texto"), colorFinal); // Cambiamos el color de la letra if (hijos[i].style.backgroundColor) { hijos[i].style.backgroundColor = transformaColor( porc, hijos[i].getAttribute("color-fondo"), colorFinal); } if (hijos[i].style.borderColor) { hijos[i].style.borderColor = transformaColor( porc, hijos[i].getAttribute("color-borde"), colorFinal); } } tratarHijos(hijos[i].childNodes); } } }
la función principal
// Empieza la efecución del fundido function fundido(cont) { if (cont >= 0) { var obj = document.getElementById( "contenedor"); tratarHijos(obj.childNodes); setTimeout("fundido("+(cont-indiceDifuminado)+")", velocidad); } }

También será necesario incluir ciertas variables globales:

var colorFinal = RGBdecimal("#315C7C"); var indiceDifuminado = 10; var velocidad = 50; var colorDefectoTexto = "#000000";

Un ejemplo del código se puede bajar aquí: ARCHIVO

ColorZilla y MeasureIt para Firefox

2006-02-05T23:07:00.000+01:00

Tanto a nivel usuario como a nivel desarrollador soy partidario de usar Firefox. Uno de los motivos por lo que prefiero el Firefox frente al IE o el Opera es el uso de las extensiones que ofrece, son muchas y muy variadas y hacen que no solo la navegación, sino también desarrollar páginas web sea mejor.
En muchos otros blogs o incluso dentro de la página de Firefox, podrás encontrar cuales son las mejores o las más populares, pero gracias a mi amigo Carlos, he descubierto dos que son para mí imprescindibles: ColorZilla y MeasureIt.

ColorZilla tiene varias funcionalidades, pero la verdad es que yo solo uso una, y es la de capturar los colores de la pantalla para así poder usarlos luego en los estilos. Los colores te los pueden dar en varios formatos: hexadecimal, texto, ... incluso puedes una vez seleccionado el color, elegir un parecido mediante una paleta.
MeasureIt sirve para medir lo que ocupa en pixels la zona del documento que tu quieras. Imprescindible para cuando eres un metódico de las proporciones.

Efecto de transición para una intro

2006-02-05T01:23:00.000+01:00

Continuando con la batalla perdida contra el Flash, batalla amistosa, voy a explicar como hacer un efecto de transición que suele usarse en las intros de las web.
El efecto muestra una imagen dividida en mosaicos haciendo que estos emergen en la pantalla. Está claro que con Flash se pueden hacer mil cosas dentro de la misma animación, pero este efecto no ocupa casi nada y con cambiar ciertas variables, es aplicable a cualquier diseño que queráis.

Mostrar resto >>

<< Ocultar resto
La idea es sencilla, vamos a tener una capa que actúe como contenedor de otras capas. Esta capa tendrá como estilo imprescindible la posicion como relativa (position: relative), con esto conseguimos que esta capa quede "anclada" a la página. Las capas que se hayen dentro del contenedor deberán tener el estilo position: absolute para conseguir que todas las capas que se hayan dentro se superpongan unas a otras. El valor absolute es siempre relativo al bloque que la contenga, no al documento, solo será relativo al documento, cuando no esté dentro de otro bloque que tenga el valor relative en propiedad position.
Dentro del contenedor debe haber dos capas:

una que sea la imagen, que irá debajo (o bien incluyéndola antes en el documento HTML, o bien usando la propiedad z-index)
otra capa que contenga los mosaicos que son los que tapan inicialmente la imagen y que luego van desapareciendo para mostrar la imagen

Los mosaicos se mostrarán distribuidos sobre la imagen creando una cuadricula y cada mosaico estará formada por cuatro capas (unas encima de las otras). ¿Por qué cuatro capas?, pues para conseguir que vaya desapareciendo el mosaico desde el centro. Este efecto se debe hacer mediante clipping y no mediante el uso de máscaras (algo que no se puede hacer con estilos). Creo que la mejor forma de entender el por qué lo hago así es mediante esta simulación:
Ahora es fácil ver como una capa va desapareciendo de izquierda a derecha, la segunda de derecha a izquierda, la tercera de arriba a abajo y la última de abajo a arriba, con lo que se muestra el centro poco a poco.
Veamos lo que se necesita para crear este efecto.
Hemos hablado ya de las capas DIV, estas serían junto a sus estilos:

<STYLE> ... div#contenedor { position: relative; /* Debe tener el tamaño de la imagen */ width: 500px; height: 250px; border: 1px solid #315C7C; } div#imagen { position: absolute; top: 0px; left: 0px; } div#contImagen { position: absolute; top: 0px; left: 0px; } ... </STYLE> ... <BODY onload="creaDIVs(); empiezaAnimacion();"> ... <div id="contenedor"> <div id="contImagen"></div> <div id="imagen"></div> </div> ... </BODY>

Y ahora veamos el código Javascript que necesitamos, estará formado por unas variables globales que se usarán para que sea fácil de configurar, y también estará formado por una serie de funciones.
Las variables globales son las siguiente:

// El tamaño total de la imágen var anchoTotal = 500; var altoTotal = 250; // Longitud del lado del mosaico // (se supone que es cuadrado) var longLado = 50; // Cuánto se va a ir reduciendo el mosaico cada vez var indiceReduccion = 5; // Cada cuántos milisegundos se va a realizar // la reducción del mosaico var velocidadReduccion = 70; // Cada cuanto se empieza con un nuevo mosaico var velocidadGeneral = 40; // La URL de la imágen, // puede ser externa a nuestro servidor var urlImagen="lapiceros.jpg"; // Un array con todos los ids de los mosaicos var divIds = new Array();

// Crea la capa de mosaicos // Calcula cuantos mosaicos tiene que haber // vertical y horizontalmente y los crea // y va añadiendo a el contenedor de mosaicos function creaDIVs() { var contenedor = document.getElementById("contenedor"); // Dividimos en contenedor en mosaicos, //los creamos y los vamos añadiendo for (var i=0; i<altoTotal/longLado; i++) { for (var j=0; j<anchoTotal/longLado; j++) { // Creamos 4 capas por cada mosaico var div0 = dameDIV(i, j, 0); contenedor.appendChild(div0); var div1 = dameDIV(i, j, 1); contenedor.appendChild(div1); var div2 = dameDIV(i, j, 2); contenedor.appendChild(div2); var div3 = dameDIV(i, j, 3); contenedor.appendChild(div3); // Almacenamos el id del mosaico divIds[divIds.length] = div0.id.substring( 0, div0.id.length-2); } } // Ahora añadimos la imagen a su contenedor, // para evitar que primero se cargue la imagen y // luego aparezcan los mosaicos var img = document.createElement("IMG"); img.src=urlImagen; img.id = "imagen"; document.getElementById("contImagen").appendChild(img); } // Crea una nueva capa para un mosaico function dameDIV(i, j, n) { var div = document.createElement("DIV"); div.id = "div"+i+"-"+j+"_"+n; div.style.position = "absolute"; div.style.top = i*longLado+"px"; div.style.left = j*longLado+"px"; div.style.backgroundColor = "#315C7C"; div.style.width = longLado+"px"; div.style.height = longLado+"px"; div.style.clip = "rect( auto auto auto auto )"; div.setAttribute("porc", "100"); return div; } // Modifica un mosaico, la unión de las cuatro capas, // una cantidad para así ir dando el efecto de despliegue function despliega(id) { var porc = document.getElementById(id+ "_0").getAttribute("porc"); if (porc != "0") { var obj = document.getElementById(id+"_0"); var nuevoPorc = parseInt(porc)-indiceReduccion; // Se despliega de izq a der obj.style.clip = "rect(auto "+(nuevoPorc)+ "px auto auto)"; obj.setAttribute("porc", nuevoPorc); var obj = document.getElementById(id+"_1"); // Se despliega de der a izq var nuevoPorc = parseInt(porc)-10; obj.style.clip = "rect(auto auto auto " +(longLado-nuevoPorc)+"px)"; obj.setAttribute("porc", nuevoPorc); var obj = document.getElementById(id+"_2"); // Se despliega de arriba a abajo var nuevoPorc = parseInt(porc)-10; obj.style.clip = "rect("+(longLado-nuevoPorc)+ "px auto auto auto)"; obj.setAttribute("porc", nuevoPorc); var obj = document.getElementById(id+"_3"); // Se despliega de abajo a arriba var nuevoPorc = parseInt(porc)-10; obj.style.clip = "rect(auto auto "+ (nuevoPorc)+"px auto)"; obj.setAttribute("porc", nuevoPorc); // Continuamos con el proceso setTimeout("despliega('"+id+"')", velocidadReduccion); } } // Elije un mosaico al azar de los que quedan // sin desplegar y lo anima function animar() { if (divIds.length > 0) { // Elije uno al azar var pos = parseInt(divIds.length*Math.random()); despliega(divIds[pos]); // Borra de la lista el que se acaba de // desplegar para que no se repita var aux = new Array(); for (var i=0; i<divIds.length; i++) { if (pos != i) { aux[aux.length] = divIds[i]; } } divIds = aux; // Continuamos con el proceso setTimeout("animar()", velocidadGeneral); } } // Antes de que se empiece hay que // comprobar que la imagen se ha cargado function empiezaAnimacion() { var img = document.getElementById("imagen"); if (!img.complete) { setTimeout("empiezaAnimacion()", 100); } else { animar(); } }

Un ejemplo se puede encontrar aquí: ARCHIVO ZIP

Cargador de imágenes

2006-02-02T19:50:00.000+01:00

En la entrada anterior comentaba como hacer una barra de progreso y no hay nada mejor que un caso práctico para que se pueda entender mejor.
Ver la página en blanco mientras se carga, suele ser algo que no nos gusta nada, y, depende de la persona, anima a dar repetidas veces al botón de refrescar. En el caso de una precarga de imágenes ocurre lo mismo, por lo que nos gustaría mostrar al visitante que estamos cargando las imágenes y que debe esperar un poco hasta que finalice.

Mostrar resto >>

<< Ocultar resto
El procedimiento es sencillo, necesitaremos la barra de progreso y crearnos un atributo nuevo en las imagenes que vamos a precargar.
Tiene que haber una pequeña modificación en la función que se encarga de realizar el progreso, porque en este caso y no como en el simulador, obtenemos un tanto porciento de progreso que puede saltar de mucho en mucho. Por lo que tendremos que rellenar la barra de progreso en el cuadrado actual y en los anteriores:

A la hora de crearnos las imágenes tenemos que añadirle un atributo (precarga="si") para poder distinguir las imágenes que cuentan en la precarga y las que no tienen que ver en ella.

Solo nos falta crear un método que recupere todos los elementos IMG del documento, comprobar si son los que nos interesan (precarga="si") y mirar si se han contemplado (atributo complete). También tendremos que llevar la cuenta de cuantas imágenes hay en total y cuantas están ya completas para poder saber el porcentaje.

Finalmente será necesario incluir el siguiente script para que se llame al método de comprobación de la carga de imágenes.

Puede verse un ejemplo en el siguiente ARCHIVO

Barra de progreso

2006-02-02T11:40:00.000+01:00

En algunas circustancias es necesario indicar al usuario que la página está cargando datos y que debe esperar, normalmente se usa para ello un GIF animado con una ruedas girando, dando la sensación de que está trabajando, otras se pone el reloj de arena llenandose, esto va según gustos. Pero al usuario muchas veces lo que le interesa saber es si el aviso de espera está allí sin más o realmente está haciendo algo, ¿avanza o está colgado?. Por eso las presentaciones iniciales en Flash suelen tener una barra de progreso que indica que se está cargando la animación.
En HTML también se puede hacer, queda muy vistoso y puede ser fundamental para que el usuario o el visitante no se meta en Google y busque otra página.

Mostrar resto >>

<< Ocultar resto
Lo primero que se tiene que hacer es diseñar la barra de progreso, saber como va a actuar y dónde la vamos a usar. He creado un diseño sencillo, en el que aparece un texto, que podría ser modificable y un porcentaje que indica el progreso, debajo está la barra de progreso que se rellena mediante bloques y no de forma progresiva.

<div class="barra-progreso"> <div id="texto" class="texto-progreso">Cargando datos ...<br>0%</div> <div id="pos1" class="vacio"></div> <div id="pos2" class="vacio"></div> <div id="pos3" class="vacio"></div> <div id="pos4" class="vacio"></div> <div id="pos5" class="vacio"></div> <div id="pos6" class="vacio"></div> <div id="pos7" class="vacio"></div> <div id="pos8" class="vacio"></div> <div id="pos9" class="vacio"></div> <div id="pos10" class="vacio"></div> </div>

Está compuesto por dos partes, la primera es un DIV que contiene el texto y la segunda es un conjunto de DIVs que forma la barra de progreso, estos DIVs tiene estilo a nivel de class y a nivel de id. Mediante el class indicamos el formato, vacio o lleno, los colores, el borde, ... y mediante el id, a parte de poder referenciarlo, indicamos la posición horizontal.

div.barra-progreso { width: 300px; height: 170px; text-align: left; border: 1px solid #315C7C; } div.texto-progreso { width: 100%; font-family: Arial; font-size: 25px; height: 70px; text-align: center; padding-top: 55px; padding-bottom: 0px; margin-top: 5px; color: #315C7C; background: url(espera.gif) no-repeat center top; } div.vacio { position: absolute; width: 20px; height: 20px; border: 2px solid #315C7C; background: #FFF3C9; } div.lleno { position: absolute; width: 20px; height: 20px; border: 2px solid #315C7C; background: #315C7C; } div#pos1 { margin-left: 17px; } div#pos2 { margin-left: 44px; } div#pos3 { margin-left: 71px; } div#pos4 { margin-left: 98px; } div#pos5 { margin-left: 125px; } div#pos6 { margin-left: 152px; } div#pos7 { margin-left: 179px; } div#pos8 { margin-left: 206px; } div#pos9 { margin-left: 233px; } div#pos10 { margin-left: 260px; }

Una vez tenemos la barra de progreso, solo tenemos que hacerla funcionar. Se puede hacer de dos formas:

Cuando el proceso que se ejecuta es mediante Javascript (ej. un cálculo que dure mucho tiempo), se deberá incrementar el porcentaje durante la ejecución de ese proceso, llevando nosotros el control de qué cantidad debemos incrementar.
Cuando el proceso se ejecuta en el servidor y es costoso en tiempo, para avisar al usuario que se está cargando la página. Para ello es totalmente necesario que el código HTML de la barra de progreso se encuentre al principio del documento HTML, para así poder referenciar a sus objetos antes de que se cargue del todo la página. También se debe devolver código Javascript entre medias de la página que se está generando y que es el que incrementa el progreso, es fundamental que se vacie el flujo de salida para que el efecto de progreso sea el correcto, esto se puede hacer en PHP mediante la función flush o en Java mediante flushBuffer.

El código necesario para incrementar el progreso es el siguiente:

Un ejemplo del código lo podéis encontrar aquí (funciona en Firefox, IE y Opera para Windows): ARCHIVO ZIP

Mis amigas las expresiones regulares

2006-02-01T14:57:00.000+01:00

Son imprescindibles para mí, si puedo usarlas, las uso, y si no puedo usarlas, me desespero. Las uso cuando programo siempre que puedo, en Javascript y PHP sobre todo, porque Java las incluyó a partir de J2SE 1.4 y ¡oh, grandes misterios de la humanidad! no sé por qué se empeñan en mi trabajo en usar una versión anterior, con lo que me quedo sin poder hacer un simple replace en un String (que no sea a nivel de char, claro). Las uso en editores de texto: Programmers Notepad 2 las usa bastante bien, aunque el mejor es EditPlus 2 (lo siento, no me gusta el UltraEdit).
¿Qué son?, pues como dicen en la Wikipedia:

Una expresión regular es una forma de representar a los lenguajes regulares (finitos o infinitos) y se construye utilizando caracteres del alfabeto sobre el cual se define el lenguaje. [...] Una expresión regular es, a menudo llamada también patrón, es una expresión que describe un conjunto de cadenas sin enumerar sus elementos.

Esto es un tanto críptico, aunque es una gran definición, como toda la entrada en la Wikipedia. Pero para que se entienda mejor, yo preguntaría: ¿para qué se usan?, para trabajar con cadenas de texto.

Mostrar resto >>

<< Ocultar resto
Son agrupaciones de texto que representan varias cadenas de texto, suelen ir encerradas entre barras '/' en algunos lenguajes (Javascript, PHP, ...) y aunque a simple vista parece código encriptado, son fáciles de seguir. Se forman por la unión de texto normal (letras, numeros, signos, ...) y por operadores, que son cadenas de texto concretas que tienen un significado y una función.
Estos operadores son fijos y pueden modificar el significado, agrupar contenidos, dar altenativa a contenidos, ... Los más frecuentes son:

\		Escapa los caracteres especiales para tratarlos como texto normal
.		Representa a cualquier carácter
?		El elemento anterior es opcional
+		El elemento anterior se repite una o más veces
*		El elemento anterior no aparece, aparece o se repite varias veces
\|		Alternativa entre el carácter anterior y posterior
^		Representa el inicio de línea
$		Representa el fin de línea
\s		Representa un espacio en blanco
\S		Representa cualquier carácter menos un espacio en blanco
\d		Representa un dígito
\D		Representa cualquier carácter menos un dígito
\w		Representa un carácter alfanumérico
\W		Representa cualquier carácter menos uno alfanumérico
\n		Nueva línea
\r		Salto de línea
\t		Tabulador
{n}		Indica que el caracter anterior se debe repetir n veces
(..)		Agrupa elementos
[..]		Conjunto de caracteres admitidos
[^..]		Conjunto de caracteres no admitidos
-		Crea un rango de valores entre el carácter anterior y el posterior

Quizás con unos ejemplos se vea mejor:

Queremos representar las cadenas de texto amigos y amigo: /amigos?/
Queremos representar el formato de fecha DD/MM/AAAA: /[0-9]{2}\/\d{2}\/[0-9]{4}/
[0-9] representa un número del 0 al 9, {2} indica que tiene que haber dos números, \/ representa la barra '/', \d es lo mismo que [0-9]

Aplicaciones en el día a día:

Comprobar en una página web que el dato que se mete en un input es una fecha (DD/MM/YYYY) mediante Javascript:
function esFecha(texto) { var regexp = new RegExp("(([0-2][0-9])|(3[01]))\/((0[0-9])|(1[0-2]))\/\d{4}"); return texto.match(regexp); }
Dividir un texto en partes usando como separador un espacio en blanco, un guión o un punto y coma:
$lista = split("[\s-;]", texto);
Realizar un trim a una cadena de texto en Javascript:
texto.replace(/(^\s*)|(\s*$)/g, "");

Espero que si desconocías las expresiones regulares, te hayan enganchado, y si ya las conocías, que sigas con ellas.