Outbook

Cambio de ubicación: Outbook se renueva

2009-12-05T21:33:00.000+01:00

Llevaba tres años sin lavarle la cara al blog, y ya era hora. Lo he cambiado a una nueva ubicación (http://blog.outbook.es, también accesible mediante http://outbook.es) y lo he migrado a Wordpress.

El feed de Outbook también cambia de ubicación, a http://blog.outbook.es/feed.

CSS hacks: filter by selectors

2009-12-02T14:38:00.001+01:00

All selectors provided here are valid for CSS 2.1 unless otherwise stated.

Internet Explorer 6, Internet Explorer 7 (Non standard mode), Internet Explorer 8 (Non standard mode):

* html {}

Internet Explorer 7, Internet Explorer 8 (IE7 standard mode):

*:first-child+html {}
 * + html/*/ * /**/ body {}

Internet Explorer 8 (Ids are examples):

#ie_80 {} /* IE8 */
 #ie_80, #ie8#fix {} /* other browsers */

It's not Internet Explorer 6:

html>body {}

It's not Internet Explorer 6, It's not Internet Explorer 7:

html>/**/body {}

It's not Internet Explorer (only valid for CSS3):

:root {}

Safari 3, other Webkit browsers (only valid for CSS3):

body:not(:root:root)

It's not Internet Explorer, It's not Opera 9.2x or earlier:

head~body {}

It's not Internet Explorer, It's not Opera 9.2x or earlier (only valid for CSS3):

body:only-of-type {}

Opera between 7.2x-9.2x:

html:first-child {}

Apache: proteger directorios con contraseña mediante htpasswd

2009-11-18T17:17:00.005+01:00

Con el siguiente comando:

htpasswd -nb usuario contraseña

Nos devolverá:

Automatically using MD5 format.
usuario:$apr1$v55Iklr1$K8xj83k6NxMPXeHXfdnRu/

La segunda línea es la que habrá que copiar.

En Windows será htpasswd.exe, precedido de la ruta en la que esté ubicado.

La contraseña va convertida a un MD5 especial de Apache. Habrá que hacer esto por cada usuario que se quiera insertar, y cada uno de esos usuarios irá en una línea del archivo .htpasswd.

Al archivo con los usuarios y contraseñas se le llamará desde el .htaccess:

AuthUserFile /ruta/a/.htpasswd
AuthType Basic
AuthName "Frase que saldrá en el cuadro de diálogo"
Require valid-user

Ver más en Proteger carpetas con .htaccess y .htpasswd.

Topónimos: lo que los progresistas no quieren que sepas

2009-11-12T00:25:00.002+01:00

¿Por que esa manía progresista de utilizar topónimos en idiomas distintos del español cuando existen traducciones?

He aquí una tabla con algunos ejemplos de topónimos de España situados en regiones con idioma propio y, que en lugar de utilizar la forma en español cuando se habla o escribe español, se empeñan en que se use la forma en el idioma regional. Los he mezclado con topónimos de otros países, para resaltar un poco más el absurdo de la situación:

Forma incorrecta	Sería correcta usando idioma...	Forma correcta usando Español
A Coruña	Gallego	La Coruña
Ourense	Gallego	Orense
Lleida	Catalán	Lérida
Girona	Catalán	Gerona
Illes Balears	Catalán	Islas Baleares
Eivissa	Catalán	Ibiza
Euskadi	Vascuence	Vasconia (o País Vasco, aunque no sea un páis)
Strasbourg	Francés	Estrasburgo
Bordeaux	Francés	Burdeos
Aachen	Alemán	Aquisgrán
Köln	Alemán	Colonia
München	Alemán	Munich
London	Inglés	Londres
København	Danés	Copenhague
Torino	Italiano	Turín

Yo le digo a aquellas personas que hablando en español usan el topónimo en catalán, gallego, vascuence o el idioma regional que corresponda, que en lugar de decir Londres digan London, en lugar de decir Aquisgrán digan Aachen, para que sean coherentes en su forma de usar el lenguaje. ¿A que ahora les empieza a resultar raro?

Que hacer cuando el elemento OBJECT tapa una capa posicionada

2009-11-11T12:19:00.004+01:00

Suele pasar que cuando hay capas emergentes y animaciones flash la capa se queda por debajo del Flash.

Basta con añadir esto dentro del elemento OBJECT:

<param name="wmode" value="transparent" />

Un ejemplo completo:

<object type="application/x-shockwave-flash" data="fichero.swf">
 <param name="wmode" value="transparent" />
 <param name="movie" value="fichero.swf" />
 <param name="quality" value="high" />
 <p>No dispone del plugin Flash Player, si lo desea puede <a href="http://www.adobe.com/go/getflashplayer">descargar el plugin</a>. [Resto de contenido alternativo].</p>
</object>

Este método tiene una pega: no funciona en sistemas Linux.

Javascript: Click fuera de un elemento

2009-11-05T12:48:00.001+01:00

Una sencilla función para detectar si se clica fuera de un elemento:

document.onclick = function (e) {
 e = e || event
 var target = e.target || e.srcElement
 var elemento = document.getElementById('id_elemento');
 do {
  if (elemento == target) {
   // El click se ha producido dentro del elemento, no se hace nada.
   return;
  }
  target = target.parentNode;
 } while (target)
 // Se ha clicado fuera del elemento, se realiza una acción.
 elemento.style.display = 'none';
}

Visto en Closing a floating div layer Webdeveloper.com.

Javascript: Click outside element

2009-11-05T12:47:00.000+01:00

Simply function to detect click event outside desired element:

document.onclick = function (e) {
 e = e || event
 var target = e.target || e.srcElement
 var element = document.getElementById('id_element');
 do {
  if (element == target) {
   // When clicked inside element, does nothing
   return;
  }
  target = target.parentNode;
 } while (target)
 // When clicked outside element, makes an action.
 element.style.display = 'none';
}

Read at Closing a floating div layer Webdeveloper.com.

Accesibilidad: Cuidado con los colores en textos e imágenes de fondo

2009-10-20T13:09:00.003+02:00

Un problema que se presenta en algunas ocasiones y que suele olvidarse bastante es la utilización de imágenes de fondo CSS en áreas de texto, y cuando se desactivan las imágenes no se ve el texto.

Hoy he visto un ejemplo en la web de Vodafone. En las páginas de productos tienen un enlace con un fondo que simula un botón. El fondo del área de contenido es blanco. El fondo del botón es una imagen de color rojo y el texto de dicho botón es blanco.

Así sale con imágenes:

Así sale con las imágenes desactivadas, no se ve el texto de Ver más de los botones rojos:

Y aquí se ve en Firebug que es texto dentro de un SPAN a su vez dentro de un A (enlace):

Habría bastado con darle al SPAN que contiene el texto un fondo de color rojo para que el texto se siguiese viendo aun con las imágenes desactivadas. Y por cierto, esta web ha sido certificada como doble A (AA).

Jquery 1.3: Guía rápida

2009-10-03T01:57:00.002+02:00

Cheatsheet de Jquery 1.3 con lo esencial.

Gobierno de España: manirrotos desbocados

2009-09-27T02:15:00.001+02:00

La fiesta ha empezado. A ver si los votantes fijos lo ven de una vez. Se sube el IVA del 16% al 18%. Se supone que son productos prescindibles a los que se aplica esta subida. Y también se sube el IVA reducido al 8%.

A ver. En una época en la que hay menos poder adquisitivo, o menos ganas de gastar debido a que la previsión de futuro no es la mejor, es obvio que el gasto se reduce, y las empresas, sobre todo las pequeñas (el 90% de la generación de riqueza) lo pasan mal: tienen que bajar precios y reducir margen de beneficios. Al subir el IVA y seguir en la situación de poca predisposición al consumo, no van a poder subir los precios: menos margen de beneficio, o si este andaba cercano a cero, pues mal asunto. Y si los precios suben pues habrá quien reduzca aun más el consumo.

Los productos esenciales (comida) les suben el IVA un 1%. La gente que no haga gastos superfluos y aun así tenga que hacer malabarismos con su presupuesto estarán dando palmas de alegría con las orejas.

Parece que quieren tapar algún agujerillo, que debe haber algún ligero déficit.

Pues es muy sencillo, antes de subir los impuestos hay otras medidas más interesantes:

Aumentar la tributación de las SICAV ¿Que pasa? ¿Que le molan las SICAV a los políticos y meten allí su dinero?
Anular el Ministerio de la Vivienda (¿Tiene alguna competencia de verdad o están todas transferidas a las autonomías?).
Anular el Ministerio de Igualdad: la igualdad ya está garantizada en la Constitución de forma gratuita.
Quitar las subvenciones a los sindicatos
Quitar las subvenciones a las ONG (así dejarían de ser Organizaciones Gubernamentales), que la solidaridad pase a ser algo de cada persona.
Nada de ayudas internacionales ni de condonación de deudas: si no lo pueden pagar que no lo hubieran comprado.
Quitar las subvenciones al cine: si el cine español fuese bueno (no quiero decir que no haya excepciones, alguna película buena hay) tendría espectadores.
Quitar las subvenciones a las religiones
Quitar subvenciones a sectores económicos.
Quitar subvenciones a los partidos políticos.
Privatizar las Cajas de Ahorros, y mientras no lo hayan sido que no se les permita prestar dinero a partidos políticos: deben ser neutrales.
Que una empresa grande caiga es impactante (se van al paro de golpe muchas personas), pero no es motivo para darle ayudas: si cae es por que no vende suficiente, el mercado ya no necesita de sus servicios.
No darle dinero a los bancos y banqueros. Y a las cajas de ahorros menos aun, que hay algunas que meten mucha pasta en las Obras Sociales: ¿como lo hacen si están en situaciones económicas desfavorables? ¡Por que hay dinero! No les hacen falta las ayudas.
Quitar el PER.
Recuperar las competencias transferidas a las Comunidades Autónomas y quitarle a éstas el parlamento (quitarles el poder legislativo): dejar que gestionen ciertas áreas como centros de salud de atención primaria, carreteras locales que no estén en la red del estado, etc.
El Ministerio de Cultura debería quedar como gestor del Patrimonio Histórico, dejando en manos privadas todo lo que se pueda. Eliminar del presupuesto todo lo que suponga mantenimiento de arte moderno (digo arte por poder llamarlo de algún modo).
No poner dinero en un solo acto cultural.
Que los políticos coticen a la Seguridad Social como cualquier otro trabajador (con esto no quiero decir que los políticos sean trabajadores), y que cuando dejen el cargo no tengan ninguna pensión, que esperen a jubilarse.
Quitar subvenciones variadas: dejar lo imprescindible para casos extremos (minusvalías graves y similares). Cero subvenciones a empresas.
Desincentivar la entrada y permanencia de inmigrantes, sobre todo de los que tienen baja cualificación: cobrarán poco y por lo tanto aportarán poco.
Erradicar las viviendas de protección oficial: quitan viviendas del mercado libre, haciendo que los precios suban. Si hay dos personas que cumplen de igual forma los requisitos para una de estas viviendas, ¿por que no se hacen dos viviendas en lugar de una? Se hace un sorteo a ver quien se la queda: es injusto. A una de esas personas le dan una vivienda a precio muy ventajoso: tiene la posibilidad de cierto desahogo económico. La otra persona tendrá que comprar en el mercado libre (si es que puede) y no tendrá ese desahogo. Es un sistema injusto.
Eliminar los liberados sindicales en el sector público: si tanto interés tienen en los trabajadores y trabajadoras seguro que pueden dedicarles parte de su tiempo libre (y ese tiempo que se lo paguen los sindicatos). En la empresa privada, que decida la empresa si los hay o no (que va a ser que no).
Quitar universidades: hay demasiadas, y hay titulaciones, como Documentación, en las que hay un exceso de gente. Mucha gente que acaba la universidad no trabaja despues en cosas relacionadas con lo que estudiaron: una parte importante de lo que aprendieron no ha servido de nada, pero costó dinero al contribuyente.
Eliminar la gratuidad de los servicios básicos como sanidad y educación para los inmigrantes (sin cobrar grandes cantidades) que no provengan de la Unión Europea. ¿Como puede ser que en un centro de salud el 50% de la gente que está en la sala de espera sean inmigrantes, y que en la zona a la que atiende dicho centro el porcentaje de inmigrantes sea muy inferior? Parece que hay un ligero abuso de la gratuidad: si se paga una pequeña cantidad, se piensa antes de usar el servicio.
Quitar todo tipo de impuestos a la educación privada y sanidad privada y fomentar que supongan una alternativa real a las opciones públicas (sobre todo en lo referido a sanidad): son recursos que la administración ahorraría.
O ponemos un transporte público de calidad (que no vaya totalmente atestado de gente en la hora punta y que no obligue a pasarse tres horas diarias en él) y rentable o quitamos impuestos de hidrocarburos e impuesto de matriculación: mucha gente se ve obligada a coger el coche para no desperdiciar su vida en el transporte público, o directamente por que donde vive no hay transporte público.
Esta va para la Unión Europea: quitar las subvenciones a la agricultura y dejar de fijar cuotas de producción o precios. Cada uno que produzca lo que quiera o pueda vender a un precio que le interese.
Los coche oficiales de los políticos: si quieren un Audi A8 blindado y con un motor potente por mi no hay problema. Pero que lo encarguen con interiores más sencillitos y mas económicos. Elegancia por fuera, que es lo que se ve, y por dentro austeridad.
Reducir el número de funcionarios, y que éstos tengan un horario comercial: si yo tengo que comprar a las ocho de la tarde encuentro muchas tiendas abiertas. Si la administración está al servicio del ciudadano, debe esforzarse por adaptarse a sus necesidades. Pero esto sin subidas de sueldo. Y al que no le guste, que busque trabajo en el sector privado.
Privatizar las televisiones y radios públicas.
Quitar la publicidad de las administraciones en los medios de comunicación: son subvenciones encubiertas (y cuestan dinero al Contribuyente). Si un medio de comunicación habla mal del gobierno seguro que no le compran espacios publicitarios para campañas institucionales.
Vigilar los fraudes con el paro, que hay gente que lo cobra y al mismo tiempo trabaja en negro.
No dar los 420 euros: desincentivan en muchos casos la búsqueda de empleo.
Y lo más importante: no gastar el dinero que no se tiene. Cuando se contrae deuda hay que devolverla con intereses, y eso son más gastos para el futuro.

Hay muchas, pero muchas cosas, y las que pongo son solo algunos ejemplos, que se pueden hacer no solo para evitar una subida de impuestos, sino para reducir de forma muy importante la presión fiscal, y que la gente decida libremente que hacer con el dinero que obtiene con su trabajo, y que no lo decida un burócrata vago e improductivo (o manos muertas).

Al estado no le interesa la resolución de problemas: le interesa que haya problemas, y decir: Aquí estoy para salvarte, ciudadano, si yo no te salvo nadie lo hará ¡Dame más poder (y dinero) para poder ayudarte!. Y el problema en España es que hay muchas personas con poco raciocinio y se creen esas cosas.

A seguir votando PSOE.

XHTML: Nube de etiquetas accesible

2009-09-18T14:29:00.000+02:00

Las nubes de tags suelen estar conformadas por un grupo de palabras que aparecen en distintos tamaños según la importancia que tengan. Pueden ir en un solo párrafo o bien en elementos de lista.

Para darles los tamaños es necesario darles una clase (no vale el atributo style, ya que supone mezclar presentación y contenido) o utilizar etiquetas EM y STRONG anidadas. En el segundo caso, en cuanto haya unas cuantos niveles de importancia habrá un montón de etiquetas anidadas dentro de otras, y el usuario no podrá distinguir adecuadamente cual tiene mayor importancia salvo por su aspecto visual.

Si la etiqueta más grande es la más importante, ¿por que no ponerla la primera?

En conclusión:

Da lo mismo utilizar un párrafo o una lista.
Se deben utilizar clases para definir los tamaños.
Las etiquetas deben ir en orden de mayor a menor importancia

Un ejemplo:

<p>
 <strong>Etiquetas<span class="oculto"> (de mayor a menor importancia)</span>:</strong>
 <a href="#" class="s5">Etiqueta 1</a>,
 <a href="#" class="s4">Etiqueta 2</a>,
 <a href="#" class="s3">Etiqueta 3</a>,
 <a href="#" class="s2">Etiqueta 4</a>,
 <a href="#" class="s1">Etiqueta 5</a>,
 <a href="#">Etiqueta 6</a>,
</p>

Enlace relacionado: Marking Up a Tag Cloud (24 Ways).

Sitel: cuidado con lo que hablas por el teléfono móvil

2009-09-09T22:06:00.004+02:00

El Gobierno de España, cuando estaba presidido por José María Aznar compró Sitel, un software para espiar las conversaciones de móviles. El Gobierno del PP no se atrevió a usarlo, parece que por su difícil encaje con la ley, pero ZP que no tiene escrúpulos si que lo usa:

El Gobierno de José Luis Rodríguez Zapatero utiliza desde 2004 un software fabricado por Ericsson capaz de pinchar todos los teléfonos de España al mismo tiempo. El programa permite a la Policía rastrear a una velocidad inédita hasta ahora todo tipo de llamadas. Los agentes tienen acceso a las conversaciones en tiempo real, pero también a datos tan sensibles como la identidad de los comunicantes, el lugar desde donde llaman, la operadora que utiliza e incluso el tipo de contrato que tienen.

De ahí viene la obligatoriedad de que las tarjetas prepago estén asociadas a personas. Pero es una medida inútil: el que quiera hablar sin que le identifiquen robará un móvil y ya está.

Esto es el progresismo cuando se quita la careta: la cruel dictadura de 1984.

Por cierto, ¿necesitarán documentalistas para indizar la información de las conversaciones?

Ver la noticia. Visto a través de Elentir.

DVB-T USB en Mandriva 2009

2009-08-26T21:47:00.002+02:00

Parece que hay dispositivos de TDT que parecen no funcionar en Mandriva 2009.1, que curiosamente en Ubuntu 8.04 si que funcionaban sin tener que hacer nada. La solución está en bajarse e instalar el firmware.

Y si se usa Kaffeine, habrá que instalar phono-xine para que termine de funcionar.

Mandriva 2009.1 Spring: password en MySQL

2009-08-17T23:34:00.003+02:00

Antes de utilizar el servidor MySQL parece que hay que crear el password. Ejecutar como superusuario:

mysqladmin -u root password sqladmin

Donde sqladmin sería el password.

Javascript: Slideshow con Jquery

2009-08-13T11:29:00.007+02:00

Actualizado 2009-10-02: Se le añade botón de pausa (vaya fallo el no haberlo puesto anteriormete) y comentarios útiles sobre el funcionamiento de cada parte del código.

He creado un slideshow sencillo con Jquery (probado en versión 1.3.2):

jQuery.noConflict(); // Así podemos convivir con otras librerías JS como Prototype o Motools (y las que utilicen $) sin ningún conflicto

jQuery(document).ready(function(){
 var slides1 = new Slides();
  slides1.inicia();
  
 /*
 // Ejemplo de uso
 var slides1 = new Slides();
 slides1.inicia();
 slides1.caja = '#slides'; // id del contenedor de los destacados
 slides1.numero = 1; // Número de destacados que se muestran
 slides1.tiempo = 2.5; // Segundos entre cambio de destacado
 slides1.velocidadMostrar = 'fast';
 */
});

function Slides () {
 this.caja = '#slides'; // id del contenedor de los destacados
 this.slide = '.slide'; // destacado
 this.numero = 1; // Número de destacados que se muestran
 this.tiempo = 2.5; // Segundos entre cambio de destacado
 this.milisegundos = this.tiempo*1000; // No editar
 this.velocidadMostrar = 'fast';
 
 this.inicia = function () {
  
  numDestacados = jQuery(this.caja+' '+this.slide).length; // Número de destacados
  i=this.numero;
  k=0;
  
  // Se activa la primera tanda de destacados
  while (k<this.numero) {
   jQuery(this.caja+' '+this.slide).eq(k).addClass('activo');
   k++;
  }
  while (i<numDestacados) {
   jQuery(this.caja+' '+this.slide).eq(i).hide();
   i++;
  }
  
  // Se da ID a los destacados
  j=0;
  while (j<numDestacados) {
   jQuery(this.caja+' '+this.slide).eq(j).attr('id','slide-'+(j+1));
   j++;
  }
  
  this.paginacion(); // Se generan los controles de pausa y paginación
  
  // Se inicia el slideshow
  var that = this;
  this.intervalo = setInterval(function(){that.cambiar();}, this.milisegundos);
  
  // Al clicar una página se detiene el proceso y se va a la página
  jQuery('#paginadorSlide li a').click(function () {
   clearInterval(that.intervalo);
   that.controlPausar();
   that.irPagina(parseInt(jQuery(this).parent().attr('id').split('-')[1]));
   jQuery('#paginadorSlide li').removeClass('activo');
   jQuery(this).parent().addClass('activo');
   return false;
  });
  
  // Al clicar el botón de pausar/continuar se alterna detener/continuar el proceso
  jQuery('#pausarContinuar a').eq(0).click(function () {
   if (jQuery(this).hasClass('moviendo')) {
    that.controlPausar();
   } else {
    that.intervalo = setInterval(function(){that.cambiar();}, that.milisegundos);
    that.controlContinuar();
   }
   return false;
  });
  
 }
 
 // Modificar botón de pausar/reanudar
 this.controlPausar = function () {
  clearInterval(this.intervalo);
  jQuery('#pausarContinuar a').eq(0).html('Reanudar');
  jQuery('#pausarContinuar a').eq(0).removeClass('moviendo');
 }
 this.controlContinuar = function () {
  jQuery('#pausarContinuar a').eq(0).html('Pausar');
  jQuery('#pausarContinuar a').eq(0).addClass('moviendo');
 }
 
 // Cambiar de slide
 this.irPagina = function (pagina) {
  elUltimo = pagina*this.numero;
  el = (elUltimo)-this.numero;
  jQuery(this.caja+' '+this.slide).removeClass('activo');
  while (el<elUltimo) {
   jQuery(this.caja+' '+this.slide).eq(el).addClass('activo');
   jQuery(this.caja+' '+this.slide).eq(el).addClass('activo activoPausa');
   el++;
  }
  
  jQuery(this.caja+' '+this.slide+':not(.activo)').hide();
  jQuery(this.caja+' '+this.slide+'.activo').fadeIn(this.velocidadMostrar);
  
 }
 
 // Cambio automático de slide
 this.cambiar = function () {
  activos = jQuery(this.caja+' '+this.slide+'.activo').length-1;
  ultimoActivo = jQuery(this.caja+' '+this.slide+'.activo').eq(activos);
  numeroUltimoActivo = parseInt(jQuery(this.caja+' '+this.slide+'.activo').eq(activos).attr('id').split('-')[1])+this.numero;
  proximaPagina = (numeroUltimoActivo/this.numero)-1;
  numDestacados = jQuery(this.caja+' '+this.slide).length;
  
  if (numeroUltimoActivo>numDestacados) {proximoActivo=jQuery(this.caja+' '+this.slide).eq(0);proximaPagina=0;} else {proximoActivo = ultimoActivo.next(this.slide);}
  jQuery(this.caja+' '+this.slide+'.activo').removeClass('activo');
  i=0;
  while (i<this.numero) {
   proximoActivo.addClass('activo');
   proximoActivo = proximoActivo.next();
   i++;
  }
  jQuery(this.caja+' '+this.slide+':not(.activo)').hide();
  jQuery('#paginadorSlide li').removeClass('activo');
  jQuery('#paginadorSlide li').eq(proximaPagina).addClass('activo');
  jQuery(this.caja+' '+this.slide+'.activo').fadeIn(this.velocidadMostrar);
 }
 
 
 this.paginacion = function () {
  numPaginas = Math.ceil((jQuery(this.caja+' '+this.slide).length)/this.numero);
  jQuery(this.caja).after('<div id="controlesSlide"><ul class="paginadorSlide" id="paginadorSlide"></ul></div>'); // Se crea el contenedor de paginación
  jQuery('#paginadorSlide').before('<p id="pausarContinuar"><a href="#" class="moviendo">Pausar</a></p>'); // Se crea el párrafo para el botón de detener/continuar en su estado predeterminado (Pausar)
  
  i=0;j=1;
  while (i<numPaginas) {
   jQuery('#paginadorSlide').append('<li id="paginaSlide-'+j+'"><a href="#">'+j+'</a></li>');
   i++; j++;
  }
  jQuery('#paginadorSlide li').eq(0).addClass('activo');
 }
 
}

Para iniciarlo con los id y clases predeterminados:

var slides1 = new Slides();
 slides1.inicia();

En ese caso el HTML podría ser:

<div id="slides">
 <div class="slide">
  [Contenido del slide]
 </div>
 <div class="slide">
  [Contenido del slide]
 </div>
</div>

Un contenedor que lleve el id slide y elementos dentro del mismo con la clase slides.

Ver demostración o descargar el ejemplo.

Abandonemos de una vez el soporte a IE6

2009-07-15T12:45:00.004+02:00

Ya hay sitios importantes que dejan de lado navegadores obsoletos, como Youtube.

La maquetación adaptada a IE6 es un quebradero de cabeza y una fuente de gastos. En algunas ocasiones el tiempo dedicado a IE6 en una maquetación puede acercarse al 80%, y las decisiones de incluir determinados elementos en un diseño quedan vinculadas al potencial (decepcionante) de IE6.

Lo de IE6 es el pez que se muerde la cola. Lo soportamos porque hay usuarios, y hay usuarios porque lo soportamos. Yo personalmente insisto en que hay que dejar de soportarlo, dejando una advertencia a los usuarios que lo utilicen para que se actualicen a un navegador mejor.

Pero no se debe dejar de soportar de golpe, al principio debe cuidarse de que el sitio mas o menos se vea bien y que funcione adecuadamente, solo se dejarían los pequeños detalles sin importancia. Posteriormente se podría abandonar el soporte de IE6 por completo. Al ser progresivo se da tiempo a los usuarios habituale del sitio a actualizar y no los perderiamos.

¿Que significaría el fin generalizado del soporte a IE6 en las empresas grandes adictas al IE6? Pues que los usuarios que acceden desde su trabajo con el IE6 verían mal (o no podrían utilizar) muchos sitios que visiten. Probablemente los visitan no por motivos de trabajo, sino como ocio. ¿Y cuando los visitan por razones de trabajo? Pues esa empresa tiene un Problema que debió solucionar allá por finales de 2006 (cuando salió IE7).

Lo patético son las empresas que compran una maquetación y lo que más les preocupa es que se vea bien en IE6, de forma que los peces gordos de la organización la vean perfecta. Lo más importante es que la vean bien los clientes y los potenciales clientes que es de donde la empresa va a sacar beneficios. Y si es para la típica aplicación interna, maquetando solo para IE6 se ahorra dinero, pero, ¿no es mejor maquetar bien y que cuando se cambie de navegador que nadie tenga que ponerse histérico por que la aplicación no funciona?

Creo que los maquetadores no deben dedicarse a resolver bugs de Internet Explorer (ni de ninguna otra aplicación), de eso se debe encargar Microsoft.

Enmascaramiento de contraseñas en los formularios

2009-06-25T23:30:00.004+02:00

Actualizado 2009-06-30.

Según Jakob Nielsen Ocultar los caracteres de un campo de contraseña (mediante <input type="password" id="ejemplo" name="ejemplo" />) puede ocasionar algunos problemas. Considero que se pasa un poco, de modo que expongo los que creo que son más importantes:

El usuario no ve lo que está escribiendo, lo que facilita que se equivoque.
Utilización de contraseñas más sencillas a la vez que inseguras o uso del copiar-pegar para introducir la contraseña.
En dispositivos móviles, en los que la escritura es más incómoda e imprecisa el usuario puede desesperarse, pensando si habrá tecleado bien.

He de aclarar que en bastantes dispositivos móviles en los campos de contraseña el caracter introducido está visible durante un breve espacio de tiempo, pero puede que no sea suficiente.

Nielsen también menciona que ocultar los caracteres de contraseña puede hacer que los usuarios se desanimen a entrar en un sitio web. Esto me parece un poco exagerado.

Puede que sea interesante dejar visibles los caracteres de los campos de contraseña, pero, si nos decantamos por esa opción habrá usuarios que no se sientan seguros, ya que la contraseña será visible por otras personas (imaginemos punto de acceso a Internet en un lugar público). Aquí Nielsen sugiere el uso de un checkbox para activar o desactivar la ocultación de los caracteres.

Ejemplo en Winzip

Capturas de la pantalla de encriptación de WinZip 12, en las que se puede apreciar la casilla que alterna la contraseña visible u oculta:

Enlaces relacionados

Opera Mobile 9.7 beta

2009-06-17T17:45:00.003+02:00

Opera ha lanzado la beta de la versión 9.7 para Windows Mobile.

Trae novedades como Opera Turbo, aceleración por Open GL y mejor renderizado de las páginas.

Yo lo he instalado en un HTC Diamond, en el que como ya traía una versión integrada en el sistema no la sobreescribe, y los accesos directos siguen apuntando a dicha versión. Para ejecutar la 9.7 habría que ir con el explorador al directorio donde se haya instalado y ejecutar OperaL.exe. En este dispositivo, la nueva versión tiene un rendimiento notablemente superior al de la 9.5.

Unión Europea: la nueva URSS

2009-06-01T14:52:00.000+02:00

Ya está otra vez la Unión Europea con que Microsoft no incluya el Internet Explorer en Windows.

Es que es absurdo. Internet Explorer viene con Windows igual que Firefox viene con Ubuntu o Konqueror con Kubuntu (y a los Linux nadie les está diciendo que no dejan elegir al usuario).

Microsoft ha cedido en lo que debía, en la posibilidad de desactivar Internet Explorer (en Windows 7). ¿Pero por que no puede incluir lo que le de la gana en su sitema operativo?

Yo le sugiero a ese nido de ratas burócratas-intervencionistas que es la Unión Europea que vaya un pasito más allá: creen ustedes un navegador de la Unión Europea, cobren a los usuarios un impuesto por usarlo (a todos los ciudadanos, lo usen o no lo uses, que así sería más injusto, tal como a ustedes les gusta) y que el navegador descargue desde un servidor central de la UE una lista de sitios prohibidos (ya saben, todos aquellos que sean contrarios a la Unión Europea, el intervencionismo el islam, el progresismo, el ecologismo o la masonería, grupos con el que ustedes se identifican plenamente).

La UE cada vez se parece más a la URSS:

Planificación de la economía al más puro estilo soviético (¡Muérete de envidia Stalin!)
Ausencia de democracia en el poder ejecutivo. ¿Quien elige al gobierno de la UE?
Si en un referendum la población dice NO, volvemos a convocar una y otra vez hasta que digan SI (véase Irlanda y el Tratado de Lisboa). Y si vemos que van a seguir diciendo NO, pues les amenazamos y ya está.
Un parlamento elegido en elecciones democráticas pero que solo sirve como fachada democrática (pura apariencia).

La caída del muro de Berlín no fue la derrota del comunismo. El comunismo dejó el cuerpo muerto e inerte que era la URSS y se reencarnó en la que por entonces erá la Comunidad Económica Europea.

El muro de Berlín no protegía a la URSS del mundo libre, sino que protegía al mundo libre de la URSS. Y hoy lo vemos demostrado.

La UE huele muy mal.

Decálogo de maquetación web

2009-05-11T16:35:00.003+02:00

Diez consejos útiles que mejorarán ostensiblemente la accesibilidad de un sitio web:

Utilización de encabezados (H1-H6) para estructurar el documento y utilizar adecuadamente los párrafos y listas. En los encabezados no se saltan niveles. Cuando una lista tiene un solo elemento no es una lista: es un párrafo.
Los textos de los enlaces habrán de ser descriptivos de la acción que realizan, y deberán avisar si se abren en ventana nueva.
Maquetar con capas (elementos DIV), en lugar de con tablas.
Utilizar Javascript no intrusivo y que su presencia no sea obligatoria: todo el contenido y la funcionalidad del sitio deberá estar disponible sin necesidad de Javascript. No utilizar atributos HTML (onclick, onmouseover, etc.) para eventos de Javascript.
Utilizar colores de fondo y de texto que hagan un buen contraste.
No utilizar imágenes con texto, salvo en logotipos. Utilizar fuentes de sistema para evitar ese mal uso de las imágenes.
Toda imagen que tenga contenido informativo deberá llevar texto alternativo (atributo alt). El atributo irá vacío en caso contrario. Si es una imagen que se repite en diversas páginas, no es informativa, y no es publicable, debería ir como fondo mediante CSS.
Estructurar bien los formularios: grupos de campos dentro de elementos FIELDSET con sus correspondientes LEGEND, elementos INPUT, SELECT y TEXTAREA contenidos dentro del elemento LABEL (asociación implícita), y atributo for en el LABEL y atributo id en el elemento de campo con el mismo valor (asociación explícita).
Uso del elemento OBJECT para añadir contenido en Flash o en Java, incluyendo el contenido alternativo correspondiente para aquellos usuarios que no dispongan del plugin.
Separación de contenido (HTML), presentación (CSS) y comportamiento (Javascript). En el documento HTML solo se mete HTML, y no se utilizan atributos para controlar la presentación. No se mete código Javascript en el elemento SCRIPT (que solo ha de incluirse dentro del elemento HEAD y nunca fuera de él), ni código CSS en el elemento STYLE (de hecho a la CSS se la llama con el elemento LINK).

CSS: problema de doble margen en IE6

2009-04-02T12:43:00.000+02:00

Cuando un elemento está flotado dentro de un contenedor y tiene definido un margen, nos podemos encontrar con la desagradable sorpresa de ver como Internet Explorer 6 duplica dicho margen.

Supongamos que tenemos esta regla CSS:

div.capa p.parrafo {float:left; margin-left:10px;}

Internet Explorer 6 sacará un margen de 20px.

Se puede solucionar con un hack CSS, que valida pero es un poco chapuza:

div.capa p.parrafo {float:left; margin-left:10px;}
* html div.capa p.parrafo {margin-left:5px;}

O como dicen en Position is Everything añadir un display:inline; a la regla CSS:

div.capa p.parrafo {display:inline; float:left; margin-left:10px;}

De esta forma el elemento sigue siendo bloque, ya que tiene el float, y sale con el margen definido en Internet Explorer.

Saber más

The IE5/6 Doubled Float-Margin Bug (Position is Everything)

Versión portable de IE

2009-03-23T12:21:00.001+01:00

Están disponibles para descargar varias versiones portables de Internet Explorer y otros navegadores en Xenocode.

IE8 funcionando como IE7

2009-03-23T12:04:00.003+01:00

Hace poco que salió IE8 (el 19 de marzo), y parece que ahora soporta CSS (¡Ya era hora!). Y como las versiones anteriores necesitaban muchos hacks CSS y otras cosas, para que las páginas se vieran bien, e IE8 los pilla, a veces hará falta que funcione como IE7.

Para que IE8 renderice la página como si de IE7 se tratase:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Así, cualquier sitio que se veía bien en IE7, se verá bien en IE8, sin necesidad de adaptarlo (aunque esto es una chapuza).

Google Chrome en Debian/Ubuntu

2009-03-22T20:50:00.003+01:00

Codeweavers ha creado un paquete de instalación del navegador Chrome preparado para instalarse y ejecutarse en sistemas Debian, utilizando Wine (con instalar el paquete es suficiente, no hay que instalar Wine).

De esta forma, si maquetas en sistemas Linux, podrás probar lo que hagas en un navegador con Webkit.

Instalar Intel 3945 en Ubuntu 8.04

2009-03-12T20:19:00.001+01:00

Tan sencillo como seguir los siguientes pasos:

sudo modprobe -r iwl3945
Crear un archivo de texto llamado iwl3945 en /etc/modprobe.d
En ese archivo introducir las siguientes dos líneas:
alias wlan0 iwl3945
options iwl3945 disable_hw_scan=1
sudo modprobe iwl3945
sudo ifconfig wlan0 up

Accesibilidad: Analizador de nivel de contraste

2009-02-25T00:37:00.002+01:00

Como hace no mucho salió la versión 2 de las WCAG, me dispuse a crear una serie de herramientas útiles para análisis de accesibilidad, y por fin he terminado una de ellas, la referida a los niveles de contraste.

Espero que sea de utilidad: Analizador de nivel de contraste

Generación de fecha y hora en scripts BAT

2009-02-09T11:23:00.000+01:00

Es muy sencillo introducir fechas y horas en los scripts bat. Ejemplos:

@ECHO.%date:~0,10% (fecha entera)
@ECHO.%time:~0,8% (hora entera)
@ECHO.%date:~6,4%-%date:~3,2%-%date:~0,2% %time:~0,8% (fecha y hora en ISO 8601)

Se ponen los términos date o time entre símbolos de porcentajes y se le dice en que caracter de la fecha o de la hora debe empezar a mostrar y cuantos caracteres mostrar.

Descargar vídeos de TVE a la Carta

2009-02-03T20:22:00.005+01:00

TVE tiene los programas que produce disponibles durante 15 días para verlos en su sitio web (TVE a la CARTA). Pero no deja descargarlos. Todas las administraciones públicas y empresas públicas en España suelen ser así de egoistas: generan información y después no la ponen a plena disposición del Ciudadano, a quien deben lealtad.

Pero vamos a ver como se puede enmendar el fallo de TVE siguiendo los pasos que se exponen a continuación:

Abrir el enlace al vídeo en pestaña nueva
Una vez abierta ver el código fuente.
Buscar la línea con el valor so.addVariable("file","/alacarta/player/111111.xml");
Donde pone 111111.xml puede haber cualquier combinación de números. Añadir ese nombre de archivo XML a "http://www.rtve.es/alacarta/player/"
Eso abrirá un XML, en el que hay una ruta a un archivo FLV, por ejemplo: /resources/flv/1/1/1111111111111.flv
Añadirle a "http://www.rtve.es" lo del paso anterior, y a descargar.

Visto en Descargar vídeos de rtve.es (Solo GNU y otras cosas).

Web móvil: el protocolo WTAI

2009-01-30T12:10:00.001+01:00

El protocolo WTAI sirve para insertar enlaces en páginas y que al activarlos el dispositivo móvil ofrzca realiza una llamada al número de teléfono especificado en el enlace o guardarlo en la lista de contactos.

El valor del atributo href del enlace tiene el siguiente formato:

wtai://wp/mc;##########

Ejemplo de enlace para realizar llamada:

<a href="wtai://wp/mc;911234567">Llamar al número 91 123 45 67</a>

Ejemplo de guardar en contactos:

<a href="wtai://wp/ap;911234567;Nombre Contacto">Guardar en contactos el número 91 123 45 67</a>

Saber más

Pocket HPH: Servidor con PHP para Windows Mobile

2009-01-22T11:22:00.002+01:00

Tras mucho tiempo buscando lo he encontrado: un servidor que tenga PHP para Windows Mobile.

Funciona bien en Windows Mobile 6.1, pero está un poco limitado.

Neutralidad en la Red: Telefónica, Keteke y tarifas de internet móvil

2009-01-19T17:46:00.003+01:00

Estaba leyendo un artículo acerca de los errores en el lanzamiento de Keteke por parte de Telefónica (los normales en organizaciones enormes y burocratizadas hasta el tuétano, en las que hay que mostrar constantemente nuevas ideas con una fachada sorprendente pero huecas por dentro para sorprender a los superiores), y hay un párrafo que me ha llamado la atención:

Lo que más miedo me da es que Telefónica ha declarado que planean sacar tarifas de datos especiales y permanentes para los usuarios de Keteke. Eso sí sería un valor añadido bastante importante, ya que usar Keteke en el móvil costaría menos que usar otras redes sociales o servicios (sí, hasta Google sería más caro). En el dudoso caso de que triunfe, sería a costa de perder la neutralidad en la red. Bienvenidos a la Telefónica del siglo XXI.

Todo un torpedo en la línea de flotación de la neutralidad de la red (con muchos granitos de arena se hace la montaña, y este es uno, ni el primero ni el último): Telefónica te va a cobrar más por la conexión si accedes a Facebook o Tuenti que si accedes a Keteke.

¿Donde está la binomio del intervencionismo (Gobierno de España^® y Unión Europea)? ¿A que esperan para proteger a los ciudadanos que les sostienen económicamente de la ruptura de la neutralidad de la Red?

Ah, no recordaba que quitando la neutralidad de la red nos quitamos de encima contenidos perniciosos que hablan de la corrupción del binomio anteriormente mencionado, se deja de hablar de la intromisión inmoral de los gobiernos en la vida de los ciudadanos (EpC, imposición hostil de las lenguas autonómicas, nuevos estatutos de autonomía), de la islamización de Europa (asunto que, desafortunadamente, ya solo puede solucionarse mediante la violencia), de los gastos supérfluos e inútiles de las Administraciones Públicas (como la famosa cúpula de Barceló, de valor incalculable) que nos quitan el 50% de nuestros ingresos y otros asuntos igual de jugosos.

Os doy gracias, burócratas, por protegernos de los contenidos perniciosos de la Red, por darnos la felicidad de la ignorancia. ¡Vivan las cadenas!

CSS: propiedades a evitar en dispositivos móviles

2009-01-19T16:15:00.001+01:00

Algunas propiedades CSS que deben evitarse o utilizarse con cuidado al crear una hoja de estilo para dispositivos móviles:

float y display: estas propiedades se utilizan para crear presentar la página en varias columnas, algo que no se va a hacer (y que no se debe), en dispositivos móviles.
padding y margin: dependiendo de la función que cumplan habrá que retirarlas o disminuir el área que ocupan.
background-image: es recomendable evitar su utilización, y si se mantiene asegurarse que se adapta bien al dispositivo móvil.

Mas en A List Apart: Return of the Mobile stylesheet.

Estadísticas de uso de navegadores web: evolución en 2008

2009-01-13T09:39:00.003+01:00

Según W3Schools está es la forma en que se reparten los usuarios los diferentes navegadores en diciembre de 2008, y la evolución desde diciembre de 2007:

Navegadores web: evolución en 2008
Fechas	IE 6/7	IE7	IE6	FF	CHR	SAF	OP	MZ
12/2007	54,2%	21%	33,2%	36,3%	0%	1,7%	1,4%	1,4%
12/2008	45,7%	26,1%	19,6%	44,4%	3,6%	2,7%	2,4%	0,4%
Evolución	-8,5%	+5,1%	-13,6%	+8,1%	+3,6%	+1%	+1%	-1%

Instalación de Firebug 1.3 en Firefox 3.0 y Windows Vista 64

2009-01-09T22:54:00.002+01:00

Hace poco instalé Windows Vista 64, en el que, entre otras cosas, instalé Firefox. Y una extensión absolutamente indispensable es Firebug.

La instalación de Firebug se realizaba correctamente. Pero tras reiniciar Firefox no aparecía por ninguna parte.

Tras mirar en el directorio en el que se almacena el perfil de Firefox observé que no habia ningún directorio para Firebug, mientras que cada extensión tenía el suyo.

La solución fue sencilla: dar con el botón derecho al acceso directo de Firefox y ejecutarlo como administrador. Se abre Firefox, se instala la extensión y al reiniciar ya aparece Firebug.

WCAG 2.0: Accesibilidad de títulos de páginas

2008-12-30T10:41:00.001+01:00

El punto 2.4.2 de la WCAG 2.0 define que los títulos de las páginas deben describir su tema o propósito:

2.4.2 Page Titled: Web pages have titles that describe topic or purpose. (Level A)

Este punto se refiere al elemento TITLE.

El contenido del elemento TITLE no debe limitarse al título del sitio, sino que además debe describir de forma breve el contenido de la página a la que pertenece

La W3C propone el siguiente ejemplo:

The title of Web Content Accessibility Guidelines 2.0 is "Web Content Accessibility Guidelines 2.0.

The introduction has the title "Introduction to Web Content Accessibility Guidelines 2.0."

The main body has the title "WCAG 2.0 Guidelines."

Appendix A has the title "Glossary to Web Content Accessibility Guidelines 2.0."

Appendix B has the title "Checklist for Web Content Accessibility Guidelines 2.0."

Appendix C has the title "Acknowledgements for Web Content Accessibility Guidelines 2.0."

Appendix D has the title "References for Web Content Accessibility Guidelines 2.0."

Beneficios

Algunos de los beneficios de la aplicación de este punto serían:

El usuario podrá identificar con mayor rapidez si la información de la página le es relevante a sus necesidades.
Los usuario con deficiencias visuales podrán diferenciar las páginas de un mismo sitio cuando tenga varias abiertas simultaneamente.
Mejor indexación y visibilidad en buscadores.

HTML y Accesibilidad: el atributo longdesc en imágenes

2008-12-15T15:40:00.003+01:00

Cuando se utilizan imágenes en una web la práctica habitual es darles un texto alternativo mediante el atributo alt, o dejar vacío dicho atributo en el caso de que la función de la imagen sea meramente decorativa.

Pero nos podemos encontrar con el caso de tener una imagen a la que haya que asociarle un texto alternativo, pero dicho texto sea excesivamente largo. Para esas ocasiones está el atributo longdesc.

Ejemplo de imagenes con texto largo

El atributo longdesc ha de ser siempre una URL que lleve a una descripción de la imagen, en la misma o en otra página:

longdesc = uri [CT]
This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute. When the image has an associated image map, this attribute should provide information about the image map's contents. This is particularly important for server-side image maps. Since an IMG element may be within the content of an A element, the user agent's mechanism in the user interface for accessing the "longdesc" resource of the former must be different than the mechanism for accessing the href resource of the latter.

Se puede dar una URL externa o, como en el ejemplo expuesto más adelante, un marcador de página. En ese caso bastaría con dar un atributo id que haga de marcador al párrafo con la descripción. Ejemplo de como podría quedar el código HTML

<p><img src="imagen1.jpg" alt="Promoción" longdesc="#descripcion1" /></p>
<p id="descripcion1">Descripción de la primera imagen.</p>

<p><img src="imagen2.jpg" alt="Promoción" longdesc="#descripcion2" /></p>
<p id="descripcion2">Descripción de la segunda imagen.</p>

Lectores de pantalla

Se supone que el longdesc es para lectores de pantalla, pero resulta que los hay que no dejan elegir al usuario si quieren ir o no a la descripción, y les llevan directamente.

Una solución podría ser un enlace oculto (pero no mediante display:none;, que si no los lectores de pantalla no lo pillan) que llevase a la URL de la descripción.

Enlaces relacionados

Maquetador Web versus Arquitecto de semántica y cognitividad de interfaces web

2008-12-02T16:23:00.000+01:00

Maquetador web

Individuo/a que se dedica a transformar diseños de sitios web a HTML. Para ello hará lo que sea necesario:

Mezclar presentación y contenido
Maquetación con tablas (y si se pueden anidar unas dentro de otras, mejor). Y si las tablas son para datos tabulares no espere encontrar elementos TH, THEAD y otro marcado semántico para tablas.
Utilizar elementos HTML desaconsejados (FONT, B, U, etc.)
Javascript intrusivo, desde atributos onclick, onmouseover, a enlaces que solo funcionan con Javascript activado.
Accesibilidad, ¿para qué? ¿qué es?
Semántica del marcado HTML, ¿para qué? ¿qué es?
Recomendaciones de la W3C, ¿para qué? ¿qué son?
En muchas ocasiones no ve más allá de Internet Explorer
Dispositivos móviles, ¿para qué? ¿qué son?
Etc.

Arquitecto de semántica y cognitividad de interfaces web

Profesional que se dedica a transformar diseños para sitios web a (X)HTML+CSS con Javascript no intrusivo.

Características:

Las tablas no se usan para maquetar: solo se usan para presentación de datos tabulares.
Genera un marcado HTML todo lo semántico que le sea posible: secuencias de encabezados, listados, etc. Se usa cada elemento en el cometido para el que fue ideado. De esta forma la página se entiende aunque se prescinda de CSS y Javascript.
Sigue escrupulosamente las recomendaciones de la W3C
Ve a Internet Explorer (sobre todo al 6) como su peor enemigo, pero aun así su actitud es noble y le tiende la mano en cada maquetación realizada.
Genera sitios web accesibles, de modo que personas con discapacidades o que accedan desde dispositivos móviles puedan disfrutar de los contenidos con las menores limitaciones posibles.
Separación impecable de la presentación y el contenido.
El Javascript no es intrusivo, y sus páginas no pierden la funcionalidad a pesar de que Javascript esté desactivado.

PHP: función para crear calendario accesible y semántico

2008-12-02T00:41:00.010+01:00

He aquí una función en PHP para generar un calendario con XHTML semántico y accesible, y con clases e identificadores adecuados para aplicarle rápidamente el CSS.

La función lleva cuatro parámetros, todos ellos opcionales, en el siguiente orden:

Año ($year): Define el año que se va a mostrar, siendo un valor de 4 dígitos. Se predetermina al año actual.
Mes ($mes): Define el mes a mostrar, con valores de 1 a 12. Se predetermina al mes actual.
Estado fines de semana ($finDeSemana=1): Define si los días de los fines de semana llevan o no enlace. Se le da valor 1 para mostrarlos con enlace, o valor 0 para quitar el enlace. Se predetermina a 1.
Estado de días nulos ($mostrarDiasNulos=1): Define si se muestran los días de la primera semana que pertenecen al mes anterior y los días de la última semana que pertenecen al mes posterior. Se le da valor 1 para mostrarlos, o valor 0 para ocultarlos. Se predetermina a 1.
Nivel de encabezado ($nivelH=2): Nivel del encabezado del bloque de calendario. Ha de terner un valor de entre 1 y 6. Se predetermina en 2.

Ejemplo de llamada a la función con el mes de febrero de 2009, los fines de semana desactivados, los días nulos activados y un encabezado de nivel 3:

calendario(2009,2,0,1,3);

Descargar archivo con ejemplo funcional o verlo en acción (abre en ventana nueva).

Funciones para generar el calendario (para mayor seguridad, utilizar el código del ejemplo descargable):

function calendario ($year,$mes,$finDeSemana=1,$mostrarDiasNulos=1,$nivelH=2) {
 
 if (strlen($year)!=4) {$year=date('Y');}
 if (($mes<1 or $mes>12) or (strlen($mes)<1 or strlen($mes)>2)) {$year=date('n');}
 
 // Listados: días de la semana, letra inicial de los días de la semana, y meses
 $dias = array('Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo');
 $diasAbbr = array('L','M','M','J','V','S','D');
 $meses = array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiempre','Octubre','Noviembre','Diciembre');
 
 // Se sacan valores que se utilizarán más adelante
 $diaInicial = gmmktime(0,0,0,$mes,1,$year);  // Primer día del mes dado
 $diasNulos = (date("N",$diaInicial))-1; // Con 'N' la semana empieza en Lunes. Con 'w', en domingo
  if($diasNulos<0){$diasNulos = 7-abs($diasNulos);}
 $diasEnMes = date("t",$diaInicial); // Número de días del mes dado
 
 // Se abre la capa contenedora y se genera el encabezado del bloque de calendario
 $html .= '<div id="calendario">';
 $html .= '<h'.$nivelH.' class="encabezadoCalendario">Calendario</h'.$nivelH.'>';
 
 // Párrafos con la fecha actual y la fecha seleccionada
 $html .= '<p>Fecha actual: '.date('j').' de '.$meses[(intval(date('n'))-1)].' de '.date('Y').'</p>';
 $html .= '<p>Fecha seleccionada: ';
 if (isset($_GET['dia'])) {$html .= ''.$_GET['dia'].' de ';} // El día solo sale si se ha definido previamente en el parámetro 'dia' de la URL
 $html .= ''.$meses[($mes-1)].' de '.$year.'</p>';
 $html .= '<div class="tabla">';
 
 
 // Enlaces al mes anterior y al siguiente
 $html .= '<p>Navegación por meses:</p>';
 $html .= '<ul id="calNavMeses">';
 $enlaceAnterior1 = gmmktime(0,0,0,($mes-1),1,$year);
 $mesAnterior = date('n',$enlaceAnterior1);
 $yearMesAnterior = date('Y',$enlaceAnterior1);
 $enlaceSiguiente1 = gmmktime(0,0,0,($mes+1),1,$year);
 $mesSiguiente = date('n',$enlaceSiguiente1);
 $yearMesSiguiente = date('Y',$enlaceSiguiente1);
 $html .= '<li class="anterior"><a href="?mes='.$mesAnterior.'&ano='.$yearMesAnterior.'"><span>Mes anterior ('.$meses[($mesAnterior-1)].')</span></a></li>';
 $html .= '<li class="siguiente"><a href="?mes='.$mesSiguiente.'&ano='.$yearMesSiguiente.'"><span>Mes siguiente ('.$meses[($mesSiguiente-1)].')</span></a></li>';
 $html .= '</ul>';
 
 // Enlaces al año anterior y al siguiente
 $html .= '<p>Navegación por años:</p>';
 $html .= '<ul id="calNavYears">';
 $enlaceAnterior2 = gmmktime(0,0,0,$mes,1,($year-1));
 $yearAnterior = date('Y',$enlaceAnterior2);
 $enlaceSiguiente2 = gmmktime(0,0,0,$mes,1,($year+1));
 $yearSiguiente = date('Y',$enlaceSiguiente2);
 $html .= '<li class="anterior"><a href="?mes='.$mes.'&ano='.$yearAnterior.'"><span>Año anterior (</span>'.$yearAnterior.'<span>)</span></a></li>';
 $html .= '<li class="siguiente"><a href="?mes='.$mes.'&ano='.$yearSiguiente.'"><span>Año siguiente (</span>'.$yearSiguiente.'<span>)</span></a></li>';
 $html .= '</ul>';
 
 // Se abre la tabla que contiene el calendario
 $html .= '<table>';
 
 // Título mes-año (elemento CAPTION)
 $mesLista = $mes-1;
 $html .= '<caption>'.$meses[$mesLista].'<span> de</span> '.$year.'</caption>';
 
 // Se definen anchuras en elementos COL
 $cl=0; $anchoCol=100/7; while ($cl<7) {$html .= '<col width="'.$anchoCol.'%" />'; $cl++;}
 
 // Fila de los días de la semana (elemento THEAD)
 $html .= '<thead><tr>';$d=0;
 while ($d<7) {$html .= '<th scope="col" abbr="'.$dias[$d].'">'.$diasAbbr[$d].'</th>';$d++;}
 $html .= '</tr></thead>';
 
 // Se generan los días nulos (días del mes anterior o posterior) iniciales, el TBODY y su primer TR
 $html .= '<tbody>';
 if ($diasNulos>0) {$html .= '<tr>';} // Se abre el TR solo si hay días nulos
 if ($diasNulos>0 and $mostrarDiasNulos==0) {$html .= '<td class="nulo" colspan="'.$diasNulos.'"></td>';} // Se hace un TD en blanco con el ancho según los día nulos que haya
 if ($mostrarDiasNulos==1) { // Generación de los TD con días nulos si está activado que se muestren
  $dni=$diasNulos;$i=0;
  while ($i<$diasNulos) {
   $enSegundosNulo = gmmktime(0,0,0,$mes,(1-$dni),$year);
   $dmNulo = date('j',$enSegundosNulo);
   $idFechaNulo = 'cal-'.date('Y-m-d',$enSegundosNulo);
   $html .= '<td id="'.$idFechaNulo.'" class="diaNulo"><span class="dia"><span class="enlace">'.$dmNulo.'</span></span></td>';
   $dni--;
   $i++;
  }
 }
 
 
 
 // Se generan los TD con los días del mes
 $dm=1;$x=0;$ds=$diasNulos+1;
 while ($dm<=$diasEnMes) {
  if(($x+$diasNulos)%7==0 and $x!=0) {$html .= '</tr>';} // Se evita el cierre del TR si no hay días nulos iniciales
  if(($x+$diasNulos)%7==0) {$html .= '<tr>';$ds=1;}
  $enSegundosCalendario = gmmktime(0,0,0,$mes,$dm,$year); // Fecha del día generado en segundos
  $enSegundosActual = gmmktime(0,0,0,date('n'),date('j'),date('Y')); // Fecha actual en segundos
  $enSegundosSeleccionada = gmmktime(0,0,0,$_GET['mes'],$_GET['dia'],$_GET['ano']); // Fecha seleccionada, en segundos
  $idFecha = 'cal-'.date('Y-m-d',$enSegundosCalendario);
  
  // Se generan los parámetros de la URL para el enlace del día
  $link_dia = date('j',$enSegundosCalendario);
  $link_mes = date('n',$enSegundosCalendario);
  $link_year = date('Y',$enSegundosCalendario);
  
  // Clases y etiquetado general para los días, para día actual y para día seleccionado
  $claseActual='';$tagDia='span';
  if ($enSegundosCalendario==$enSegundosActual) {$claseActual=' fechaHoy';$tagDia='strong';}
  if ($enSegundosCalendario==$enSegundosSeleccionada and isset($_GET['dia'])) {$claseActual=' fechaSeleccionada';$tagDia='em';}
  if ($enSegundosCalendario==$enSegundosActual and $enSegundosCalendario==$enSegundosSeleccionada and isset($_GET['dia'])) {$claseActual=' fechaHoy fechaSeleccionada';$tagDia='strong';}
  
  // Desactivación de los días del fin de semana
  if (($ds<6 and $finDeSemana==0) or $finDeSemana!=0) { // Si el fin de semana está activado, o el día es de lunes a viernes
   $tagEnlace='a';
   $atribEnlace='href="?dia='.$link_dia.'&mes='.$link_mes.'&ano='.$link_year.'"';
  } if ($ds>5 and $finDeSemana==0) { // Si el fin de semana está desactivado y el día es sábado o domingo
   $tagEnlace='span';
   $atribEnlace='';
   $paramFinde='0';
  }
  
  // Con las variables ya definidas, se crea el HTML del TD
  $html .= '<td id="'.$idFecha.'" class="'.calendarioClaseDia($ds).$claseActual.'"><'.$tagDia.' class="dia"><'.$tagEnlace.' class="enlace" '.$atribEnlace.'>'.$dm.'</'.$tagEnlace.'></'.$tagDia.'></td>';
  
  $dm++;$x++;$ds++;
 }
 
 // Se generan los días nulos finales
 $diasNulosFinales = 0;
 while((($diasEnMes+$diasNulos)%7)!=0){$diasEnMes++;$diasNulosFinales++;}
 if ($diasNulosFinales>0 and $mostrarDiasNulos==0) {$html .= '<td class="nulo" colspan="'.$diasNulosFinales.'"></td>';} // Se hace un TD en blanco con el ancho según los día nulos que haya (si no se activa mostrar los días nulos)
 if ($mostrarDiasNulos==1) { // Generación de días nulos (si se activa mostrar los días nulos)
  $dnf=0;
  while ($dnf<$diasNulosFinales) {
   $enSegundosNulo = gmmktime(0,0,0,($mes+1),($dnf+1),$year);
   $dmNulo = date('j',$enSegundosNulo);
   $idFechaNulo = 'cal-'.date('Y-m-d',$enSegundosNulo);
   $html .= '<td id="'.$idFechaNulo.'" class="diaNulo"><span class="dia"><span class="enlace">'.$dmNulo.'</span></span></td>';
   $dnf++;
  }
 }
 
 // Se cierra el último TR y el TBODY
 $html .= '</tr></tbody>';
 
 // Se cierra la tabla
 $html .= '</table>';
 
 // Se cierran la capa de la tabla y la capa contenedora
 $html .= '</div>';
 $html .= '</div>';
 
 // Se devuelve la variable que contiene el HTML del calendario
 return $html;
}

function calendarioClaseDia ($dia) {
 switch ($dia) {
  case 1: $clase = 'lunes semana'; break;
  case 2: $clase = 'martes semana'; break;
  case 3: $clase = 'miercoles semana'; break;
  case 4: $clase = 'jueves semana'; break;
  case 5: $clase = 'viernes semana'; break;
  case 6: $clase = 'sabado finDeSemana'; break;
  case 7: $clase = 'domingo finDeSemana'; break;
 }
 return $clase;
}

Actualizaciones

Actualizado 2008-12-03: Se añade la posibilidad de desactivar los fines de semana.

Actualizado 2008-12-04: Se añade la posibilidad de desactivar o activar los días de la primera semana que son del mes anterior y los de la última que son del mes siguiente (denominados como días nulos). Se explican los parámetros a introducir al llamar a la función.

Actualizado 2008-12-05: Mejoras de accesibilidad.

Actualizado 2009-02-01: Corregido el fragmento de código expuesto en la página.

Licencia

A diferencia de otros contenidos la licencia para este artículo y el ejemplo adjunto es Reconocimiento-Compartir bajo la misma licencia 3.0 España.

PHP: Partir una variable en varias líneas

2008-12-01T16:18:00.000+01:00

En ocasiones al escribir el contenido de una variable PHP se emplean líneas distintas que pueden no ser consecutivas, por ejemplo:

$html = $html.'<p>Primer elemento</p>';
$html = $html.'<p>Segundo elemento</p>';
$html = $html.'<p>Tercer elemento</p>';

Cuando sería más correcto:

$html .= '<p>Primer elemento</p>';
$html .= '<p>Segundo elemento</p>';
$html .= '<p>Tercer elemento</p>';

En el segundo ejemplo se ha sustituido la variable después del símbolo "igual" por un punto justo antes de dicho símbolo.

PHP: Crear una paginación de resultados para una consulta MySQL

2008-11-30T01:26:00.000+01:00

No es necesario copiar todos estos fragmentos de código: al final del artículo se muestra completo.

El primer paso es definir cuantos registros se quieren mostrar en cada página, en este caso se deja en 10:

// Registros a mostrar en cada página
$regVistos = 10;

Se define una consulta que recupere todos los registros que se vayan a mostrar, con los parámetros mínimos imprescindibles:

// Consulta que devuelve todos los registros
$lista0 = mysql_query(" SELECT * FROM registros");

Se cuentan los registros recuperados por la consulta MySQL:

// Se cuentan los registros devueltos por la consulta SQL $lista0
$totalSql = mysql_num_rows($lista0);

Con los registros que salen divididos por los que se quiere que se vean por cada página, se obtienen las páginas en las que se dividirá el listado de resultados. Se redondea siempre hacia arriba con ceil, ya que si, por ejemplo, salen 3,4 páginas, ese 0,4 que queda suelto, debe ocupar una página entera:

// Páginas que van a aparecer, redondeando los decimales siempre hacia arriba
$pagTotal = ceil($totalSql/$regVistos);

Son también necesarios los datos de la página actual, la anterior y la siguiente. En este ejemplo la página actual se recoge del parámetro de la URL pag. Si ese parámetro no está definido, se predetermina en 1. Las páginas anterior y siguiente se obtienen restando o sumando 1 según sea necesario:

// Se definen la página actual (desde el parámetro 'pag' de la URL) y las páginas anterior y siguiente
if (!isset($_GET['pag'])) {$pagActual=1;} else {$pagActual=$_GET['pag'];}
$pagAnterior = $pagActual-1;
$pagSiguiente = $pagActual+1;

Es el momento de realizar la consulta MySQL para mostrar los registros. En este caso la consulta devolverá los mismos registros que en la anterior, pero se le ha añadido ordenación descendente (es opcional) y el parámetro LIMIT. El parámetro LIMIT contiene dos números separados por comas: el primero es que el registro por el que se empieza el listado (la página actual menos 1 por los registros a mostrar en cada página), y el segundo el número de registros a mostrar. Ejemplo:

// Consulta SQL con la que se sacará el listado de registros
$lista1 = mysql_query(" SELECT * FROM registros ORDER BY campo DESC LIMIT ".(($pagActual-1)*$regVistos).",".$regVistos."");
// Bucle para generar el listado de registros
while($fila = mysql_fetch_assoc($lista1)) {
 // Aquí irá el código PHP que escriba los registros
}

Finalmente se genera el listado de páginas mediante una lista desordenada (UL).

El primer elemento de la lista será el enlace a la página anterior, mostrándose con la condición de que la página actual no sea la primera.

Se mostrarán los números de página mediante un bucle, destacando la página actual mediante un elemento strong.

Y el último elemento de la lista será el enlace a la página siguiente.

Ejemplo:

// Se inicia el listado de páginas
echo '<ul>';

// Si la página actual no es la primera, se muestra el enlace a la página anterior
if ($pagAnterior>0) {echo '<li class="anterior"><a href="lista.php?pag='.$pagAnterior.'"><span class="oculto">Página </span>Anterior</a></li>';}

// Se saca el listado de páginas mediante un bucle
$pgIntervalo = 3; // Páginas que aparecen antes y después de la actual
$pgMaximo = ($pgIntervalo*2) 1; // Máximo de páginas en el listado
$pg=$pagActual-$pgIntervalo;$i=0;
while ($i<$pgMaximo) {
 if ($pg==$pagActual) {$strong=array('<strong>','</strong>');} else {$strong=array('','');}
 if ($pg>0 and $pg<=$pagTotal) {
  echo '<li>'.$strong[0].'<a href="admin.php?p='.$_GET['p'].'&amp;pag='.$pg.'"><span class="oculto">Página </span>'.$pg.'</a>'.$strong[1].'</li>';
  $i  ;
 }
 if ($pg>$pagTotal) {$i=$pgMaximo;} // Si la página que se va a mostrar se pasa de la cantidad de páginas definidas en $pagTotal se para la generación de elementos de lista
 $pg  ;
}

// Si la página actual no es la última, se muestra el enlace a la página siguiente
if ($pagSiguiente<=$pagTotal) {echo '<li class="siguiente"><a href="admin.php?p='.$_GET['p'].'&amp;pag='.$pagSiguiente.'"><span class="oculto">Página </span>Siguiente</a></li>';}

// Se finaliza el listado de páginas
echo '</ul>';

Y de esta forma se obtiene una paginación en PHP.

Ejemplo completo

<?

// Registros a mostrar en cada página
$regVistos = 10;

// Consulta que devuelve todos los registros
$lista0 = mysql_query(" SELECT * FROM registros");

// Se cuentan los registros devueltos por la consulta SQL $lista0
$totalSql = mysql_num_rows($lista0);

// Páginas que van a aparecer, redondeando los decimales siempre hacia arriba
$pagTotal = ceil($totalSql/$regVistos);

// Se definen la página actual (desde el parámetro 'pag' de la URL) y las páginas anterior y siguiente
if (!isset($_GET['pag'])) {$pagActual=1;} else {$pagActual=$_GET['pag'];}
$pagAnterior = $pagActual-1;
$pagSiguiente = $pagActual 1;

// Consulta SQL con la que se sacará el listado de registros
$lista1 = mysql_query(" SELECT * FROM registros ORDER BY campo DESC LIMIT ".(($pagActual-1)*$regVistos).",".$regVistos."");
// Bucle para generar el listado de registros
while($fila = mysql_fetch_assoc($lista1)) {
 // Aquí irá el código PHP que escriba los registros
}

// Se inicia el listado de páginas
echo '<ul>';

// Si la página actual no es la primera, se muestra el enlace a la página anterior
if ($pagAnterior>0) {echo '<li class="anterior"><a href="lista.php?pag='.$pagAnterior.'"><span class="oculto">Página </span>Anterior</a></li>';}

// Se saca el listado de páginas mediante un bucle
$pgIntervalo = 3; // Páginas que aparecen antes y después de la actual
$pgMaximo = ($pgIntervalo*2) 1; // Máximo de páginas en el listado
$pg=$pagActual-$pgIntervalo;$i=0;
while ($i<$pgMaximo) {
 if ($pg==$pagActual) {$strong=array('<strong>','</strong>');} else {$strong=array('','');}
 if ($pg>0 and $pg<=$pagTotal) {
  echo '<li>'.$strong[0].'<a href="admin.php?p='.$_GET['p'].'&amp;pag='.$pg.'"><span class="oculto">Página </span>'.$pg.'</a>'.$strong[1].'</li>';
  $i  ;
 }
 if ($pg>$pagTotal) {$i=$pgMaximo;} // Si la página que se va a mostrar se pasa de la cantidad de páginas definidas en $pagTotal se para la generación de elementos de lista
 $pg  ;
}

// Si la página actual no es la última, se muestra el enlace a la página siguiente
if ($pagSiguiente<=$pagTotal) {echo '<li class="siguiente"><a href="admin.php?p='.$_GET['p'].'&amp;pag='.$pagSiguiente.'"><span class="oculto">Página </span>Siguiente</a></li>';}

// Se finaliza el listado de páginas
echo '</ul>';
?>

PHP: redondeo de números decimales hacia abajo (floor)

2008-11-30T00:16:00.003+01:00

La función PHP floor permite eliminar la parte decimal de un número redondeándolo hacia abajo. Por ejemplo, 11.22 se redondearía a 11, 11.9999 se redondearía a 11:

echo floor(11.22); // 11
echo floor(11.9999); // 11

Para realizar el redondeo hacia arriba se usa ceil.

Saber más sobre floor.

Web del Congreso de los Diputados: calamitosa

2008-10-26T16:53:00.002+01:00

Hace más de un año saltó el escándalo del aberrante sitio web del Congreso de los Diputados (no por el aspecto, sino por el código y la accesibilidad).

En aquel momento se podían ver varias declaraciones de DTD a lo largo del código fuente, varias aperturas del elemento BODY y aberraciones similares.

En este momento parece que han solucionado algunos problemas. Pero está maquetada en tablas y tiene Javascript intrusivo. En el HEAD tiene elementos STYLE llenitos de reglas CSS (todo eso es mejor meterlo en un documento externo CSS y vincularlo al HTML con el elemento LINK). El sitio dispone de una página de accesibilidad, y al menos tienen la decencia de no colgarse medallas y decir que están en ello.

Han pasado 16 meses desde que se vio el asunto: ¿no es suficiente tiempo para arreglar un problema de maquetación?

Documento RTF (se abre con cualquier procesador de textos) con el HTML de la página de inicio del Congreso en el 26 de octubre de 2008 (este documento puede herir su sensibilidad y/o dañarle la vista: lo abre bajo su propia responsabilidad).

Otro detalle. Parece que el engendro ha sido puesto en marcha por Indra y por Telefónica. Son empresas mas o menos poderosas. ¿No tienen en sus filas ni un solo maquetador cualificado? Si no lo tienen, ¿no pueden subcontratarlo? ¿No hay nadie del Congreso supervisando la calidad del sitio web que han montado (y viendo si han tirado el dinero)?

Pagadores de impuestos, como bien dijo CCCP diputada en el Congreso:

Estamos manejando dinero público, y el dinero público no es de nadie.

Personal dedicado a la gestión de contenidos: ¿Qué deben saber?

2008-10-20T13:04:00.003+02:00

Un aspecto que debe cuidar una empresa cuando dispone de un sitio web es el del mantenimiento y creación de contenidos. Se suelen utilizar gestores de contenido, lo que facilita dicha tarea.

Y es ahí donde pueden surgir problemas. ¿Quién se dedica a introducir y modificar los contenidos? Hay ocasiones, incluso en compañías enormes que son la cabeza visible de su sector, que esa tarea se encarga a personas sin el más mínimo conocimiento de HTML.

Esto ocasiona que a veces un portal que se ha elaborado respetando estándares y accesibilidad acabe perdiendo dichas características, de modo que la inversión extra realizada para ello resulta un desperdicio.

Las personas que se dediquen a realizar estas funciones no tienen por que saber de maquetación HTML-CSS, pero si deben tener unos conocimientos básico de HTML que no es muy complicado de aprender:

Concepto de etiqueta HTML.
Etiquetas y atributos básicos:
- DIV, SPAN.
- H1-H6, P, BR, STRONG, EM.
- BR.
- DL, UL, OL, DL: las etiquetas para listados.
- TABLE, CAPTION, COL, COLGROUP, THEAD, TBODY, TFOOT, TR, TH, TD etiquetas para tablas. Debe también saber hacer uso del atributo scope.
- IMG: debe conocer al menos el atributo alt.
- Los atributos id y class.

Además deben saber en que momento utilizar cada etiqueta y como hacer que el contenido que están generando sea mínimamente accesible.

HTC Diamond: Características

2008-10-18T01:00:00.001+02:00

Listado de características del HTC Diamond:

Sistema operativo Windows Mobile 6.1.
Procesador de 512Mhz, 192MB de RAM y 4GB de almacenamiento. Tiene la pega de no tener ranura para tarjetas de memoria.
Solo un conector para carga, movimiento de datos y auriculares: ExtUSB. Para poner unos auriculares normaleshay que utilizar un adaptador. Es compatible con cables Mini-USB.
Pantalla táctil: puede utilizarse con o sin puntero, ya que los menús se pueden manejar bien directamente con los dedos. En cuanto al teclado (el que aparece en pantalla, evidentemente), trae uno de HTC más adecuado para los dedos que el predeterminado de Windows Mobile, para el que hay que usar el puntero.
Acelerómetro que detecta la posición del móvil. Sirve para que determinadas aplicaciones gieren al cambiar la orientación de la pantalla. Existe una aplicación llamada GSEN que permite el cambio de orientación de pantalla en todas las aplicaciones que se quiera.
Conectividad: Wi-Fi, GPRS/WCDMA/HSDPA (HSDPA hasta 7,2Mb), Bluetooth y ActiveSync (que utiliza la conexión del PC al que se le enchufe). Además se puede usar como modem en un ordenador, aunque la forma de realizar la conexión puede resultar un poco engorrosa, ya que hay que abrir una aplicación de conexión compartida en el móvil.
Navegación web: Internet Explorer y Opera 9.5. El Opera 9.5 es una maravilla, tiene pestañas y detecta la orientación de pantalla. Parec que el Internet Explorer va a ser actualizado.
Windows Media Player: escaso de formatos (le faltan OGG Vorbis, DivX, XVid). Se puede utilizar en su lugar el Core Player, que está en la sección de descargas de HTC Mania (requiere registro).
GPS: funciona bastante bien, aunque algunas veces parece que le cuesta pillar los satélites. Trae una aplicación Google Maps que puede usarse conjuntamente con el GPS, con la desventaja de que tiene que descargar los mapas, lo que supone un desembolso de dinero si no se tiene una buena tarifa de datos. Yo le he instalado el TomTom 7 y va muy bien: se puede encontrar en Vagos, y hay que fijarse bien que sea la versión para resolución VGA.
Aplicaciones Java, como en cualquier otro móvil.
Outlook para Windows Mobile: muy fácil de configurar las cuentas de Gmail.
Cámara de 3.2Mpx. Saca bastante bien las fotos, aunque tiene la pega de no tener flash, lo que hace que cuando hay poca luz la calidad se resienta un poco.
TouchFlo 3D: reune diversas funciones en unas pestañas en mi opinión bastante útiles:
- Mensajes SMS
- Correo electrónico
- Internet: Acceso directo a Opera y a los favoritos almacenados en dicho navegador.
- Imagen y vídeo: accesos directos a la camara y vista previa de las fotos y vídeos realizados.
- Música: reproductor de música muy cómodo. Adolece del mismo problema de formatos que el Windows Media Player.
- Predicción meteorológica: temperatura y estado climatológico actual y para los próximos cinco días. Solo para grandes ciudades.
- Configuración: fondo de pantalla, interfaces de comunicación, etc.
- Listado de accesos directos de aplicaciones configurable.
- TF3D Config: para configurar algunos aspectos del TF3D.
En Linux solo funciona adecuadamente el modo de memoria USB. Para que funcione el ActiveSync hay que seguir un procedimiento muy engorroso.
Si se compra libre cuesta una pasta, pero se evitan las pesadas permanencias con operadores de móvil y tener que reflashear para quitar las "mejoras" introducidas por dichos operadores.

PHP: recuperar la URL completa de la página actual

2008-10-07T12:24:00.000+02:00

Se puede realizar mediante esta sencilla función:

function averiguaUrl() {
 $protocolo = $_SERVER['HTTPS'] == 'on' ? 'https' : 'http'; // Se extrae el protocolo (http o https)
 return $protocolo.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; // Se devuelve la URL completa
}

Visto en PHP Tutorials Examples: Get Full URL.

Evitar el uso de la etiqueta NOSCRIPT

2008-10-06T11:49:00.001+02:00

En algunas ocasiones al crear un comportamiento Javascript se necesita, por accesibilidad, que haya un contenido alternativo en el caso de tener Javascript deshabilitado.

Esto puede conseguirse mediante la etiqueta NOSCRIPT. Aunque tiene un inconveniente. Supongamos un navegador que tiene Javascript activado pero no soporta el Javascript que se ha creado. No obtendrá ni el contenido resultante de ejecutar el Javascript ni el contenido de la etiqueta NOSCRIPT.

¿No sería mejor que el HTML tenga de inicio el contenido que va en NOSCRIPT y que mediante Javascript ese contenido se elimine al cargar la página en el caso de que el navegador sea compatible con el Javascript realizado?

Idea sacada de Replacing <noscript> with accessible, unobtrusive DOM/JavaScript

Nuevo Internet Explorer para Windows Mobile

2008-10-02T16:02:00.001+02:00

Parece que proximamente va a aparecer una nueva versión de Internet Explorer para Windows Mobile 6.1, incluyendo como principal novedad el poder mostrar las páginas como si se estuviesen viendo en una pantalla grande con un navegador normal, y hacer zoom en la parte que se quiera visualizar (Igual que Safari para Iphone, Opera 9.5 para Windows Mobile o la última versión de Opera Mini).

La pega es que ese nuevo navegador está basado en el exitoso Internet Explorer 6 (si, ese que soporta tan maravillosamente los estándares web). Aun así es un avance, ya que la versión actual está basada en Internet Explorer 4.

Dicen que soportará Flash. Solo así podrá superar en algo a Opera 9.5 Mobile.

Más información y capturas de pantalla en the::unwired.

Secciones "Acerca de": como distribuir bien el contenido

2008-09-30T14:02:00.000+02:00

Jakob Nielsen nos da unas cuantas pistas en su Alertbox de 29 de septiembre de 2008 para distribuir los contenidos del Acerca de en un sitio web de forma útil para el usuario:

Tagline on the homepage: A few words or a brief sentence summarizing what the organization does.

Summary: 1-2 paragraphs at the top of the main About Us page that offer a bit more detail about the organization's goal and main accomplishments.

Fact sheet: A section following the summary that elaborates on its key points and other essential facts about the organization.

Detailed information: Subsidiary pages with more depth for people who want to learn more about the organization.

No hay que crear una sola página específica para el Acerca de, sino que hay que distribuir el contenido en determinadas partes del sitio:

Una breve descripcion (no más de una línea) del cometido del sitio organización en la página de inicio.
Ya en la página del Acerca de uno o dos párrafos que detallen un poco más lo del punto anterior: algo así como un resumen.
Una tabla con los puntos que describan la actividad del sitio u organización justo después del resumen.
Si fuese necesario crear páginas de detalle jerárquicamente por debajo de la del Acerca de.

Apache SSL con certificado en Ubuntu/Kubuntu

2008-09-30T13:12:00.001+02:00

Parece que en el Apache de Ubuntu es un poco más complicado crear un certificado para el SSL (falta el script apache2-ssl-certificate).

En Launchpad han abierto una página para este bug, en la que hay un comentario que ayuda bastante a crear el certificado y activar el SSL. Reproduzco a continuación dicho comentario:

maraja wrote on 2008-04-30: (permalink)

setup

   1. sudo apt-get install apache2
   2. sudo apt-get install openssl
   3. sudo apt-get install ssl-cert

create ssl certificate:
sudo make-ssl-cert /usr/share/ssl-cert/ssleay.cnf /etc/ssl/private/localhost.pem

switch to apache sites configuration:
cd /etc/apache2/sites-available/

bakup the default configuration:
sudo cp default default.backup.date

be sure to listen the port 80 for the default:
sudo sed -i '1,2s/\*/*:80/' default

create the ssl configuration:
sudo cp default ssl

set the ssl port:
sudo sed -i '1,2s/\*:80/*:443/' ssl
sudo sed -i "3a\\\tSSLEngine On\n\tSSLCertificateFile /etc/ssl/private/localhost.pem" ssl

enable ssl:
sudo a2ensite ssl
sudo a2enmod ssl

restart apache2:
sudo /etc/init.d/apache2 restart

=)

Enlace permanente al comentario

Linux: hacer ejecutable un fichero mediante chmod

2008-09-25T09:46:00.000+02:00

Tan solo hay que añadir el parámetro +x. En el siguiente ejemplo se hace al archivo escribible por cualquiera y ejecutable:

chmod 777 +x /home/usuario/carpeta/archivo.sh

Javascript: hallar el número de caracteres de una cadena

2008-09-22T09:24:00.000+02:00

Sencillo:

cadena = 'texto de la cadena';
longitud = cadena.length;

Como si se tratase de un array.

Banda sonora de Final Fantasy VII

2008-09-06T16:50:00.003+02:00

Sacada de Youtube

Tour de Japon - Main Theme of Final Fantasy VII

Tour de Japon - Aerith's Theme

Final Fantasy VII One Winged Angel (Eminence Symphony)

Google Chrome

2008-09-02T23:20:00.003+02:00

Tras un día entero de rumores y tras conocer el comic del navegador de Google, ya está disponible para Windows, no así para Linux (de momento), Google Chrome.

Tras la descarga de un ligero ejecutable que descargará los archivos de la Red, comienza la instalación:

Y una vez instalado, ya en acción:

A primera vista parece simplón, pero es rápido, sencillo y cómodo, al tiempo que tiene una interfaz agradable a la vista.

Está basado en Webkit, igual que Safari, por lo que será otro navegador que trata de respetar los estándares. Estuve navegando un buen rato y no observé que ninguno de los sitios que visité se viera mal.

Un detalle curioso es la Ventana de navegación de incógnito. Todo lo que se abra en esa ventana no será registrado en el historial, ni se dejarán rastros de cookies:

Descargar Google Chrome.

HTC Diamond: características, impresiones y pegas

2008-09-01T18:15:00.002+02:00

Actualización: lo he reescrito.

Hace unos días sustituí mi viejo móvil (un NEC e242) por un HTC Diamond. La diferencia entre ambos, como puede suponerse, es abismal.

El HTC Diamond tiene características muy interesantes:

Pantalla táctil y Windows Mobile (a pesar que que no me guste mucho Windows)
Navegación web: incluye Opera 9.5 para Windows Mobile (es maravilloso). También lleva Internet Explorer, pero teniendo Opera...
Conectividad de red: Wi-fi, GPRS/WCDMA/HSDPA (hasta 7,2Mb!!) y ActiveSync (que utiliza la conexión del PC al que se le enchufe). Además se puede usar como modem en un ordenador, aunque la forma de realizar la conexión puede resultar un poco engorrosa, ya que hay que abrir una aplicación de conexión compartida en el móvil.
Capacidad multimedia: MP3/WMA (le falta Ogg Vorbis), cámara fotográfica y de vídeo (calidad aceptable), reproducción de vídeo (no soporta Divx, aunque hay una aplicación que lo solventa).
GPS: se supone, según el vendedor, que incluía una versión de prueba de TomTom, pero en el que yo compré no había nada de eso. Me lo he bajado del Rapidshare y le he puesto un mapa de la península Ibérica. Va bastante bién, aunque se merienda una batería totalmente cargada en dos horas y media. También se puede utilizar el GPS con la aplicación que trae para Google Maps, aunque sin voz.
Trae una aplicación para ver vídeos de YouTube y otra para RSS.
Aplicaciones Java: aun no lo he probado, pero parece que se le pueden meter aplicaciones Java como las de los móviles normales.
Correo: gran facilidad para configurar Gmail.
TouchFlo 3D: le da un toque alegre a la interfaz del móvil.
Capacidad de memoria: 4GB, suficientes, aunque podrían haber incluido una ranura de memoria.
Teclado: no lleva, pero da igual, por que aparece uno en la pantalla táctil, que se puede configurar como el de un móvil normal, QWERTY abreviado (como en la Blackberry Pearl) y QWERTY sin abreviar. A pesar de lo que pueda parecer se maneja bastante bien.
Lleva acelerómetro (creo que se llama así), de forma que al ver imágenes (en el TouchFlo) o al visitar un sitio web en Opera, si se cambia la orientación de la pantalla a horizontal, cambia también la orientación de la aplicación (aunque en Opera no parece que vaya demasiado bien).
Incluye un puntero, que proporciona mayor precisión que los dedos en la pantalla táctil.
En cuanto a lo que es hablar por teléfono resulta cómodo y la calidad del sonido es mejor que en el móvil que tenía antes.
Se puede comprar libre, pero a un precio que deja el bolsillo un poco dolorido.

Algunas pegas:

Falta de compatibilidad con Linux. En modo de almacenamiento masivo si es reconocido sin problemas, pero en modo ActiveSync parece que hay dificultades (pero es reconocido).
El enchufe para cargador/cable de datos y auriculares no es estándar (aunque hay un cable que adapta dicho enchufe a conectores estándar).
La cámara no tiene flash, y no destaca mucho su calidad en ambientes oscuros.
Trae un plástico para proteger la pantalla, pero si se coloca mal y se despega para colocarlo bien, van a quedar zonas despegadas. Es complicado hacerse con esos plásticos (aunque no es imposible).

Internet Explorer 8 Beta 2

2008-08-28T09:53:00.000+02:00

Ya está disponible la segunda beta de la octava versión de Internet Explorer.

En esta ocasión parece que se aceran más a la versión final, ya que incluye nuevas opciones de privacidad, el autocompletado de direcciones como en Firefox 3 y Opera 9.5, etc.

Lo más interesante es el cambio del botón de emulación de Explorer 7 por un botón Compatibility view para ver bien sitios diseñados para navegadores antiguos (Explorer 6-7):

Descargar la beta 2 de Internet Explorer 8.

Javascript: Detectar la versión de Firefox (y otros navegadores equivalentes)

2008-08-27T09:39:00.001+02:00

Es tan sencillo como esto:

if (/rv[\:\s](\d \.\d )/.test(navigator.userAgent)){
 ffversion=new Number(RegExp.$1);
 if (ffversion>=1.9) {var ffVer = 3;}
 else if (ffversion>=1.8) {var ffVer = 2;}
 else if (ffversion>=1.7) {var ffVer = 1;}
} else {var ffVer = 0;}

Se utiliza una expresión regular para extraer la versión de Gecko y después, con las condiciones, se sacan las equivalencias a versiones de Firefox.

Visto en Using the navigator object to detect client's browser.

Ejecución de funciones Javascript a la carga del DOM (DOM Ready)

2008-08-25T10:40:00.001+02:00

Para activar los comportamientos Javascript cuando se haya cargado el DOM es más sencillo utilizar algún framework, como Prototype o Jquery.

En estos ejemplos se pretende lanzar la función prueba.

Prototype

Primera variante:

document.observe("dom:loaded", prueba);

Segunda variante:

document.observe("dom:loaded", function() {
 prueba();
});

Prototype: document.observe

Jquery

$(document).ready(function(){
 prueba();
});

Jquery: evento ready

Javascript: deshabilitar scroll vertical de la ventana del navegador

2008-07-12T14:24:00.001+02:00

Tan sencillo como aplicar la propiedad CSS overflow al elemento html:

document.getElementsByTagName("html")[0].style.overflow = "hidden";
document.getElementsByTagName("html")[0].style.overflow = "auto";

Resulta bastante útil cuando tienen que aparecer ventanas modales.

PHP: number_format (formateo de numeros)

2008-07-11T22:29:00.000+02:00

Cuando se hacen operaciones aritméticas en PHP pueden salir números con un montón de decimales, no llevan el punto (o la coma si se está escribiendo en inglés) para separar los miles, ni la coma para los decimales.

Pero la gente del PHP ha pensado en ello y nos proporcionan una función para solventar con facilidad estos ligeros inconvenientes: number_format()

Su uso es muy sencillo, solo han de introducirse los párametros en el siguiente orden:

Variable que represente al número.
Número de decimales.
Lo que se quiera que aparezca para separar los decimales (punto o coma).
Lo que se quiera que aparezca para separar los miles (punto o coma).

Un ejemplo de uso:

$numero = 7219091.429939281617
number_format($numero, 2, ",",".");
/* Devuelve: 7.219.091,43 */

Enlaces relacionados

Firefox 2 y Firefox 3 abiertos al mismo tiempo

2008-06-18T23:11:00.002+02:00

Si hay que maquetar un HTML y hay que probarlo en ambas versiones de Firefox puede ser un engorro tener que andar abriendo y cerrando una y otra.

La solución sería tener instalado Firefox 3 y otro navegador distinto que sea totalmente equivalente a Firefox 2. La última versión del difunto Netscape (la 9) es Firefox 2 con unos pocos retoques, compatible con todas las extensiones y temas que había para Firefox 2. Y puede estar abierto al mismo tiempo que Firefox 3.

Sitio de descarga de Netscape.

Firefox 3

2008-06-17T21:20:00.002+02:00

Y una semana después que Opera 9.5, aparece Firefox 3.

Firefox 3 en Windows XP

PHP: clase para recortar imágenes

2008-06-13T00:44:00.003+02:00

Hoy me he encontrado con una clase PHP para recortar imágenes.

He aquí el código para la clase (solo le he añadido un pequeño detalle para poder elegir el tamaño de la imagen resultante):

class cropImage {
 var $imgSrc,$myImage,$cropHeight,$cropWidth,$x,$y,$thumb;

 function setImage($image) {

  //Your Image
  $this->imgSrc = $image;

  //getting the image dimensions
  list($width, $height) = getimagesize($this->imgSrc);

  //create image from the jpeg
  $this->myImage = imagecreatefromjpeg($this->imgSrc) or die("Error: Cannot find image!");
  if($width > $height) $biggestSide = $width; //find biggest length
  else $biggestSide = $height;

  //The crop size will be half that of the largest side
  $cropPercent = .5; // This will zoom in to 50% zoom (crop)
  $this->cropWidth   = $biggestSide*$cropPercent;
  $this->cropHeight  = $biggestSide*$cropPercent;

  //getting the top left coordinate
  $this->x = ($width-$this->cropWidth)/2;
  $this->y = ($height-$this->cropHeight)/2;
}

 function createThumb($size) {
  $thumbSize = $size; // will create a 250 x 250 thumb
  $this->thumb = imagecreatetruecolor($thumbSize, $thumbSize);
  imagecopyresampled($this->thumb, $this->myImage, 0, 0,$this->x, $this->y, $thumbSize, $thumbSize, $this->cropWidth, $this->cropHeight);
 }

 function renderImage() {
  header('Content-type: image/jpeg');
  imagejpeg($this->thumb);
  imagedestroy($this->thumb);
 }

}

Y se utiliza con el siguiente código:

$image = new cropImage;
$image->setImage($img);
$image->createThumb($size);
$image->renderImage();

La variable $img es la url de la imagen original, y la variable $size es el tamaño de imagen (sale con forma de cuadrado), tanto de anchura como de altura (ha de ser un número entero).

Opera 9.5

2008-06-12T21:47:00.005+02:00

Por fin ha salido Opera 9.5, navegador ligero, con soporte de estándares y multiplataforma (Windows, Linux, Mac, Solaris).

Opera 9.5 en Fedora 8 con KDE 3.5.9

Aparte de las novedades en soporte de estándares, la versión de Linux añade compatibilidad con la versión 9 de Adobe Flash Player.

Puede ser descargado en el sitio web de Opera.

Y la semana que viene (17 de junio de 2008) Firefox 3.

Javascript: Reemplazo de varios caracteres en una cadena

2008-06-12T11:10:00.002+02:00

Se utilizará un sistema parecido al de reemplazo de fragmentos de una cadena, añadiendo un par de arrays con los caracteres que hay que quitar y los que los van a sustituir, un método toLowerCase para sustituir mayúsculas por minúsculas y un while para hacer los reemplazos uno a uno:

function convierteAlias (nuevoAlias) {

 especiales = new Array('á','é','í','ó','ú','ñ',' ','´',':',',',';','.');
 normales = new Array('a','e','i','o','u','n','_','_','_','_','_','_');
 
 nuevoAlias = nuevoAlias.toLowerCase();
 
 i=0;
 while (i<especiales.length) {
  //nuevoAlias = nuevoAlias.replace(especiales[i], normales[i]);
  nuevoAlias = nuevoAlias.split(especiales[i]).join(normales[i]);
  i++
 }

 return nuevoAlias;

}

Javascript: reemplazo de fragmentos en una cadena

2008-06-10T23:12:00.000+02:00

Cuando se quiere cambiar caracteres o fragmentos de una cadena se recurre al método replace:

cadenaInicial = 'Texto de la cadena inicial';
cadenaResultante = cadenaInicial.replace('inicial','resultante');
// De forma que obtenemos "Texto de la cadena resultante"

Pero esto tiene el inconveniente de reemplazar solo la primera "inicial" que aparezca:

cadenaInicial = 'Texto inicial de la cadena inicial';
cadenaResultante = cadenaInicial.replace('inicial','resultante');
// De forma que obtenemos "Texto resultante de la cadena inicial"

Esto puede resultar inconveniente.

Pero hay solución, utilizando los métodos split y join:

cadenaInicial = 'Texto inicial de la cadena inicial';
cadenaResultante = cadenaInicial.split('inicial').join('resultante');
// De forma que obtenemos "Texto inicial de la cadena inicial"

Lo que se ha hecho es partir la cadena por el fragmento "inicial" y volver a unirlas, metiendo entre cada parte el fragmento "resultante".

Javascript: convertir cadena a mayúsculas o a minúsculas

2008-06-10T23:10:00.000+02:00

Para convertir una cadena a mayúsculas:

cadena = 'Texto De Prueba';
cadena = cadena.toUpperCase();
//Devolvería "TEXTO DE PRUEBA"

Y para convertir una cadena a minúsculas:

cadena = 'Texto De Prueba';
cadena = cadena.toLowerCase();
//Devolvería "texto de prueba"

PHP: manejo de sesiones

2008-06-05T11:54:00.000+02:00

Siempre que se vaya a hecer algo con sesiones debe añadirse este fragmento en el código (antes de cualquier otra cosa que envíe datos al navegador):

session_start();

Posteriormente se pueden definir (o redefinir) variables de sesión, en este caso si el usuario está registrado y el idioma de preferencia:

$_SESSION['logado'] = 'si';
$_SESSION['idioma'] = 'ingles';

O destruir las variables de sesión anteriormente definidas:

$_SESSION = array();
session_destroy();

Se puede definir el tiempo que durará la sesión (hay que ponerlo antes del session_start();), en este caso 1 hora (3600 segundos):

session_set_cookie_params(3600);

Saber más sobre sesiones en PHP

Joomla: modificación de la salida HTML en listados de navegación

2008-05-23T22:46:00.000+02:00

Para Joomla 1.0.15

En ocasiones hay listados de navegación en los que uno o más elementos tienen un aspecto diferente al predeterminado, y necesitan una clase o identificador para poder llamarlos en un slector CSS, o se quiere introducir cualquier otra modificación en la salida de HTML.

Para modificar el listado hay que modificar el archivo modules/mod_mainmenu.php. En la línea 347 (aproximadamente) encontramos el siguiente código:

echo '<ul id="'. $menuclass .'">';
foreach ($links as $link) {
 echo '<li class="lista">' . $link . '</li>';
}
echo '</ul>';

Y sustituirlo el foreach por un while:

$numl=0;
while ($numl < count( $links )) {
echo '<li class="lista-'.$numl.'">' . $links[$numl] . '</li>';
 $numl  ;
}
echo '</ul>';

¿Ha ganado OpenDocument la batalla contra OOXML?

2008-05-22T12:59:00.000+02:00

Pues parece que por ahí va la cosa, ya que Microsoft dice que Office 2007 soportará de forma nativa OpenDocument en detrimento de su propio estándar con la salida del SP2 en 2009.

Pero, ¿será un soporte adecuado? ¿Los documentos OpenDocument creados en MS Office se podrán abrir, por ejemplo, en OpenOffice?

Más en:

uxtheme.dll en Windows XP Service Pack 3

2008-05-08T12:39:00.001+02:00

Tras la instalación del Service Pack 3 de Windows XP el archivo uxtheme.dll es sustituido por uno nuevo. Si lo teniamos parcheado para poder aplicar temas no aprobados por Microsoft ese parche se pierde y no aparecen esos temas.

Pero, afortunadamente, ya hay solución: SP3 UxTheme Patcher 1.1.

Persuabilidad

2008-05-07T18:03:00.001+02:00

Actualizado: 2008-05-08 14:00.

La persuabilidad es algo así como un complemento a la usabilidad de un sitio web. Se trata de crear un sitio que además de ser usable atraiga usuarios: la usabilidad no es el único factor que atraerá la atención de los usuarios.

La persuabilidad consiste en insertar contenidos y servicios útiles y acordes con las necesidades de los usuarios, que tengan credibilidad, que conviertan al usuario en cliente.

Saber más

Tabla para generar expresiones regulares

2008-04-22T16:16:00.003+02:00

Expresión	Descripción
.	Cualquier caracter
\	Indica que el caracter que le sigue ha de ser interpretado como tal, y no como parte de la sintaxis de la expresión regular. Por ejemplo, "\." indica que debe interpretarse como punto.
()	Para agrupar operadores
{n}	Busca la cadena especificada n veces. Por ejemplo, a{2} devuuelve 'aa'.
{n,m}	Busca la cadena especificada entre n y m veces. Por ejemplo: a{2,4} devuelve 'aa', 'aaa', or 'aaaa'.
{n,}	Busca la cadena especificada n o más veces.
*	Devuelve 0 o más veces la cadena especificada.
+	Devuelve 1 o más veces la cadena especificada.
?	Devuelve 0 o 1 vez la cadena especificada.
\|	Devuelve o bien la cadena que haya a la izquierda o la que haya a la derecha (como un operador booleano OR).
[aeiou]	Devuelve la cadena que contenga caracteres entre los especificados.
[a-z]	Similar al anterior, pero ahora se especifica un intervalo (de la "a" a la "z")
[^aeiou]	Excluye las cadenas con caracteres entre los especificados.
$	Se pone al final, señalando el final de la línea. De esta forma se busca línea por línea, y ninguna de las cadenas que devuelve estará en más de una línea.

Saber más sobre las expresiones regulares en MSDN y saber más en Regular-Expressions.info.

PHP: redondeo de números decimales hacia arriba (ceil)

2008-04-21T11:10:00.003+02:00

Actualizado: 2008-11-30

La función PHP ceil permite eliminar la parte decimal de un número redondeándolo hacia arriba. Por ejemplo, 11.22 se redondearía a 12, 11.9999 se redondearía a 12:

echo ceil(11.22); // 12
echo ceil(11.9999); // 12

Para realizar el redondeo hacia abajo se usa floor.

Saber más sobre ceil.

Redimensionar imagenes con Batch Picture Resize

2008-04-16T10:17:00.000+02:00

Batch Picture Resize es una sencilla aplicación para realizar cambios de tamaño de imágenes.

Tan solo hay que arrastrar la imagen o las imágenes que se desee redimensionar sobre el icono de la aplicación (inicialmente con el nombre "PhotoResize400.exe") y automáticamente se creará una copia redimensionada de las imágenes en el directorio donde se encuentren las originales.

Además se puede seleccionar el nuevo tamaño de las imágenes simplemente renombrando a la aplicación:

PhotoResize[maximo].exe cambiará el tamaño de la imagen de forma que la altura o la anchura máxima sea el número que se defina. Por ejemplo, para una imagen con una dimensión máxima en altura o anchura de 400px se renombraría la aplicación a PhotoResize400.exe. Se conservan las proporciones de la imagen.
PhotoResize[ancho por alto].exe establece tanto la anchura como la altura. Por ejemplo, para una imagen con una anchura de 400px y una altura de 300px se renombraría la aplicación a PhotoResize400x300.exe. Podría no conservar la proporción original.
PhotoResizeW[ancho].exe establecerá el ancho a las dimensiones dadas conservando la proporción. Por ejemplo para conseguir una imagen de 360px de ancho se renombraría la aplicación a PhotoResizeW360.exe.
PhotoResizeH[alto].exe establecerá el alto a las dimensiones dadas conservando la proporción. Por ejemplo para conseguir una imagen de 160px de alto se renombraría la aplicación a PhotoResizeW160.exe.
PhotoResizeK[tamaño en KB].exe cambia el tamaño de la imagen para que su tamaño en KB coincida con el valor dado. Por ejemplo, para conseguir una imagen de 100KB habría que renombrar la aplicación a PhotoResizeK100.exe.
PhotoResizeP[porcentaje].exe redimensionará la imagen a un porcentaje dado. Por ejemplo, para redimensionar la imagen al 50% habría que renombrar la aplicación a PhotoResizeP50.exe. El valor de porcentaje puede ir de 1 a 1000.

Tiene soporte multiprocesador y versión 64 bits.

Descargar Batch Picture Resize.

HTML: Comentarios condicionales en Internet Explorer

2008-04-11T14:55:00.001+02:00

Los comentarios condicionales solo funcionan en Internet Explorer de Windows (el basado en Trident), y sirven para insertar fragmentos de HTML que solo funcionarán en la versión que se indique, de forma que se excluya al resto de versiones y a otros navegadores.

Se puede acotar la versión de Internet Explorer de las siguientes formas:

Escogiendo una sola versión.
Escogiendo una versión y las superiores
Escogiendo versiones superiores a la versión dada.
Escogiendo una versión y las inferiores
Escogiendo versiones inferiores a la versión dada.

Escoger una sola versión

Se escogerá solamente la versión especificada:

<!--[if IE 5.5]>Para internet explorer 5.5<![endif]-->
<!--[if IE 6]>Para internet explorer 6<![endif]-->
<!--[if IE 7]>Para internet explorer 7<![endif]-->
<!--[if IE 8]>Para internet explorer 8<![endif]-->

Escoger una versión y las superiores

Se escoge la versión especificada y las que sean superiores:

<!--[if gte IE 5.5]>Para internet explorer 5.5 y superiores<![endif]-->
<!--[if gte IE 6]>Para internet explorer 6 y superiores<![endif]-->
<!--[if gte IE 7]>Para internet explorer 7 y superiores<![endif]-->
<!--[if gte IE 8]>Para internet explorer 8 y superiores<![endif]-->

Escoger las versiones superiores

Se escogen las versiones que sean superiores a la especificada:

<!--[if gt IE 5.5]>Para versiones superiores a internet explorer 5.5<![endif]-->
<!--[if gt IE 6]>Para versiones superiores a internet explorer 6<![endif]-->
<!--[if gt IE 7]>Para versiones superiores a internet explorer 7<![endif]-->
<!--[if gt IE 8]>Para versiones superiores a internet explorer 8<![endif]-->

Escoger una versión y las inferiores

Se escoge la versión especificada y las que sean inferiores:

<!--[if lte IE 5.5]>Para internet explorer 5.5 e inferiores<![endif]-->
<!--[if lte IE 6]>Para internet explorer 6 e inferiores<![endif]-->
<!--[if lte IE 7]>Para internet explorer 7 e inferiores<![endif]-->
<!--[if lte IE 8]>Para internet explorer 8 e inferiores<![endif]-->

Escoger las versiones inferiores

Se escogen las versiones que sean inferiores a la especificada:

<!--[if lt IE 5.5]>Para versiones inferiores a internet explorer 5.5<![endif]-->
<!--[if lt IE 6]>Para versiones inferiores a internet explorer 6<![endif]-->
<!--[if lt IE 7]>Para versiones inferiores a internet explorer 7<![endif]-->
<!--[if lt IE 8]>Para versiones inferiores a internet explorer 8<![endif]-->

Aclaración final

gt: greater than (mayor que).
gte: greater than equal (igual o mayor que).
lt: lower than (menor que).
lte: lower than equal (igual o menor que).

Actualizado 2009-02-02: Corregido error en la selección de versiones inferiores.

Accesibilidad en los rastros de migas

2008-04-02T00:36:00.003+02:00

Es algo habitual ver rastros de migas creados mediante listas ordenadas:

<div id="migas">
 <p>Estás en:</p>
 <ol>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Sección A</a></li>
  <li><a href="#">Sección B</a></li>
  <li><a href="#">Sección C</a></li>
 </ol>
</div>

O parecido, como lista desordenada (cambiamos solo el OL por el UL):

<div id="migas">
 <p>Estás en:</p>
 <ul>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Sección A</a></li>
  <li><a href="#">Sección B</a></li>
  <li><a href="#">Sección C</a></li>
 </ul>
</div>

Pero estos dos ejemplos no expresan la jerarquia de una forma semántica. Este otro si:

<div id="migas">
 <p>Estás en:</p>
 <ul>
  <li><a href="#">Inicio</a>
   <ul>
    <li><a href="#">Sección A</a>
     <ul>
      <li><a href="#">Sección B</a>
       <ul>
        <li><a href="#">Sección C</a></li>
       </ul>
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Listas anidadas que si reflejan la jerarquía de la navegación. Para una máquina (un buscador que indexe el sitio) está muy bien, pero para un humano puede no estar tan bien. Una persona que vea bien le va a dar igual como esté hecho para entenderlo (solo le influye como esté presentado visualmente). Alguien que use un lector de pantalla, con cualquiera de los tres ejemplos puede que no se entere muy bien de la jerarquía que hay.

Pero veamos ahora un ejemplo que en principio no parece accesible:

<div id="migas">
 <p>Estás en: <a href="#">Inicio</a> <img src="#" alt="que engloba a" /> <a href="#">Sección A</a> <img src="#" alt="que engloba a" /> <a href="#">Sección B</a> <img src="#" alt="que engloba a" /> <a href="#">Sección C</a></p>
</div>

Es un párrafo. Los símbolos "mayor que" en este caso no son fondo, sino imagen, con un texto alternativo que encadena los enlaces. Este párrafo nos explica con mayor detalle que los anteriores ejemplos en que parte de la estructura del sitio nos encontramos.

A un usuario que necesite un lector de pantalla probablemente le sirva mejor esta última forma de hacer un rastro de migas.

Entonces, ¿cual de estas formas de crear un rastro de migas es más accesible?

Actualización: Lo pregunté en AccesoWeb.

Saber más

PHP: recoger fragmentos de una cadena mediante preg_match_all

2008-03-26T16:06:00.000+01:00

Supongamos que tenemos un texto largo en HTML que forma una cadena de texto:

<p>Listado de elementos</p>
<ul>
 <li><a href="#">Elemento 1</a></li>
 <li class="elegido"><a href="#">Elemento 2</a></li>
 <li><a href="#">Elemento 3</a></li>
 <li><a href="#">Elemento 4</a></li>
 <li class="elegido"><a href="#">Elemento 5</a></li>
 <li><a href="#">Elemento 6</a></li>
</ul>

Y queremos sacar únicamente los elementos LI con class="elegido".

Esto es posible con la funcion PHP preg_match_all, que nos devolverá un array con los fragmentos que haya encontrado:

<?
$htmlOriginal = '<p>Listado de elementos</p>
<ul>
 <li><a href="#">Elemento 1</a></li>
 <li class="elegido"><a href="#">Elemento 2</a></li>
 <li><a href="#">Elemento 3</a></li>
 <li><a href="#">Elemento 4</a></li>
 <li class="elegido"><a href="#">Elemento 5</a></li>
 <li><a href="#">Elemento 6</a></li>
</ul>';

$htmlABuscar = '/<li class=\"elegido\".*li>/';

preg_match_all($htmlABuscar, $htmlOriginal, $htmlFinal);

echo $htmlFinal[0]; // <li class="elegido"><a href="#">Elemento 2</a></li>
echo $htmlFinal[1]; // <li class="elegido"><a href="#">Elemento 5</a></li>
?>

Saber más sobre preg_match_all.

CSS: bug de Internet Explorer 6 y 7 en imágenes de fondo para listas

2008-03-25T14:08:00.000+01:00

En algunas ocasiones al crear un estilo con imagen de fondo para un elemento HTML destinado a listas (DL, UL, LI, etc.) nos podemos encontrar con que esa imagen no se muestra en Internet Explorer, tanto en la versión 6 como en la 7.

Para solucionar este inconveniente hay un par de apaños:

Darle posición relativa a los elementos afectados por el problema (position: relative;).
Si el anterior no funciona, darles también anchura (propiedad width).

Visto en The IE/Win Disappearing List-Background Bug (Position is Everything).

PHP: convertir cadena de texto a mayúsculas o a minúsculas

2008-03-24T15:49:00.000+01:00

Para pasar a minúsculas:

$resultado = strtolower($origen)

Para pasar a mayúsculas:

$resultado = strtoupper($origen)

Para pasar a mayúsculas solo la primera letra de cada palabra:

$resultado = ucwords($origen)

Para pasar a mayúsculas solo la primera letra de la cadena de texto (como la anterior pero solo para la primera palabra):

$resultado = ucfirst($origen)

Saber más

PHP: Hallar múltiplos para las iteraciones de un bucle

2008-03-24T13:48:00.002+01:00

Hay ocasiones en las que al hacer un bucle en PHP es necesario que la salida de una de las iteraciones tenga alguna peculiaridad, como que por ejemplo cada tres elementos de lista haya un atributo class.

Supongamos que tenemos el siguiente bucle:

$i=0;
while ($valor < $numero) {
 echo '<li>'.$elemento[$i].'</li>'
 $i  ;
}

Supongamos que queremos que aparezca una clase cada tres elementos de lista, tendremos que meter esa clase en los elementos en los que la variable $i sea múltiplo de tres:

$i=0;
while ($valor < $numero) {
 $k = $i-1; //Para corregir el problema de que se empieza a contar de 0 
 if ($k % 3 == 0) {$clase = ' class="tercero"';}
 echo '<li'.$clase.'>'.$elemento[$i].'</li>'
 $i  ;
}

De esta forma el elemento de lista que sea múltiplo de 3 llevará la clase tercero.

Saber más en Programación en PHP/Bucles (Wikilibros).

Internet Explorer 8 Beta 1

2008-03-06T01:24:00.000+01:00

Esta vez Microsoft parece que se está dando más prisa en sacar nueva versión de su navegador, y ya está disponible para descargar la primera beta de la versión 8 de Internet Explorer.

No me ha dado tiempo a probarlo en profundidad, pero dejo unas cuantas capturas de pantalla y algunos enlaces.

Capturas de pantalla/Screenshots de Internet Explorer 8

Un par de capturas de la instalación:

No deja utilizar la IE Developer Toolbar:

Página de inicio por defecto, y Outbook:

Por supuesto, no me he arriesgado y lo he instalado en una máquina virtual:

Emulación de Internet Explorer 7

Una característica muy interesante es la capacidad de emular el comportamiento de IE7 (si se activa requiere reiniciar el navegador), de forma que es como tener dos versiones de Internet Explorer en la misma máquina, aunque no puedan ejecutarse al mismo tiempo.

Enlaces relacionados

PHP: codificación UTF-8 de una cadena mediante utf8_encode

2008-02-28T13:24:00.000+01:00

A veces las páginas generadas por PHP con cofificación UTF-8 devuelven algunos caracteres (acentos, interrogaciones, eñes, etc) con mal aspecto, debido a que la codificación de algunos de los fragmentos del texto no coinciden con la del documento, y eso hace que el navegador no los interprete adecuadamente.

Pero PHP provee una solución a este inconveniente: utf8_encode.

$cadena = 'valor';
echo $cadena; //Sin pasar a UTF-8
echo utf8_encode($cadena); //pasada a UTF-8

Saber más sobre utf8_encode.

CSS: miniaturas de imágenes en gestores de contenido

2008-02-26T09:50:00.001+01:00

En algunos gestores de contenido existen módulos para gestión de galerías de imagen en los que no hay más que subir las imágenes, dar título y descripción y el gestor se encarga del resto, incluyendo el redimensionado de la imagen.

Pero a veces ese redimensionado no es el adecuado. Supongamos que solo se redimensiona por anchura , guuardando la proporcion de la imagen original, y que lo que queremos es, por ejemplo, una imagen con forma de cuadrado de 110x110 px.

En este caso concreto el gestor redimensiona la imagen, pero no la recorta, por lo que o le damos una imagen cuadrada o la miniatura no ocupará todo su espacio.

Hay dos soluciones. La primera y más rápida darle a la imagen las dimensiones por CSS, pero quedará deformada o incluso pixelada.

Y la segunda solución, más adecuada, utilizar la propiedad CSS overflow: hidden; en el contenedor de la imagen y que dicha imagen tenga siempre unas dimensiones superiores a 110px, tanto en altura como en anchura (sin pasarse mucho).

Supongamos que tenemos este código HTML (para dos miniaturas):

<div>
 <div class="e;thumb"e;>
  <a href="#"><img src="imagen1.jpg" /></a>
 </div>
 <div class="e;thumb"e;>
  <a href="#"><img src="imagen1.jpg" /></a>
 </div>
</div>

Se utilizaría el siguiente CSS:

div.thumb {width:110px;height:110px;}
div.thumb a {width:110px;height:110px;display:block;position:relative;overflow:hidden;}
div.thumb a img {display:block;position:absolute;top:0;left:0;}

Atención a las propiedades position: son para que esto funcione en Internet Explorer (versiones 6 y 7).

Javascript: evitar conflictos entre Jquery y otras librerías

2008-02-20T15:49:00.001+01:00

si en un sitio web se usan varias librerías Javascript (Prototype, Mootools) junto con Jquery podemos encontrarnos con incompatibilidades, ya que la función que Jquery utiliza para los selectores CSS se denomina igual que la que usa Prototype para seleccionar por identificador.

La solución es más sencilla de lo que parece:

var q = jQuery.noConflict();

La variable, en este caso la letra "q" será lo que se utilice en lugar del símbolo "$".

Sin aplicar la variable de eliminación de conflictos:

$("div p").hide();

Y aplicando la variable:

q("div p").hide();

Existen más formas de evitar conflictos explicadas con detalle en la documentación de Jquery.

Linux: cambiar el nombre de la máquina

2008-02-18T16:39:00.001+01:00

El nombre se puede cambiar de forma permanente editando el fichero /etc/hostname y ejecutando /etc/init.d/hostname.sh. En lugar de ejecutar esto último, se puede reiniciar el sistema.

También se puede hacer el cambio de forma temporal, hasta el siguiente inicio del sistema, habría que ejecutar /bin/hostname nuevo-nombre-de-la-maquina.

Supersencillo.

PHP: Averiguar cuando un número es impar

2008-02-13T12:43:00.006+01:00

Con esta sencilla función se podrá averiguar si un número es o no impar:

function is_odd($number)) {
 return $number & 1; // 0 = par, 1 = impar
}

Sencillo ejemplo de uso:

if(is_odd($numero) {
 echo 'El número '.$numero.' es impar';
} else {
 echo 'El número '.$numero.' es par';
}

Una de las aplicaciones más interesantes de esta función es la creación de tablas que alternen filas de dos colores (efecto conocido como pijama).

Encontrado en: Is number odd or even? (PHP-Scripts Blog)

Editado 13 de febrero de 2008 (16:44)

PHP: eliminar marcado HTML de una cadena de texto

2008-02-11T16:28:00.001+01:00

Eliminar las etiquuetas HTML junto con sus atributos en una cadena de texto en PHP es muy sencillo. Solo hay que utilizar la función strip_tags:

Tenemos este fragmento de HTML:

<p>Párrafo de <a href="#">prueba</a> al que se <strong>le van a quitar</strong> las etiquetas HTML.</p>

Y lo queremos convertir a texto plano

Párrafo de prueba al que se le van a quitar las etiquetas HTML.

Aquí está el código PHP:

$HTML = <p>Párrafo de <a href="#">prueba</a> al que se <strong>le van a quitar</strong> las etiquetas HTML.</p>

$txt = strip_tags($HTML); //Devuelve el texto sin etiquetas HTML

PHP.net: strip_tags

Inserción de elementos en Javascript: insertBefore y appendChild

2008-02-11T11:45:00.000+01:00

Método appendChild

El método appendChild permite insertar un elemento al final de otro.

Supongamos que tenemos este HTML:

<div>
 <p id="existente">Elemento existente</p>
</div>

Y queremos que pase a ser así:

<div id="contenedor">>
 <p id="existente">Elemento existente</p>
 <p id="nuevo">Elemento nuevo</p>
</div>

No habría más que utilizar el siguiente código Javascript:

elemento1 = document.createElement('p');
elemento1.appendChild(document.createTextNode('Elemento nuevo'));
elemento1.id = 'nuevo';
elemento2 = document.getElementById('contenedor');
elemento2.appendChild(elemento1);

Método insertBefore (o insert before)

El método insertBefore tiene una función similar a appendChild, solo que no inserta el elemento hijo justo al final del elemento padre, sino antes de un elemento concreto que hay que especificar.

Supongamos que tenemos este HTML:

<div>
 <p id="existente">Elemento existente</p>
</div>

Y queremos que pase a ser así:

<div>
 <p id="nuevo">Elemento nuevo</p>
 <p id="existente">Elemento existente</p>
</div>

No habría más que utilizar el siguiente código Javascript:

elemento1 = document.createElement('p');
elemento1.appendChild(document.createTextNode('Elemento nuevo'));
elemento1.id = 'nuevo';
elemento2 = document.getElementById('existente');
elemento2.parentNode.insertBefore(elemento1,elemento2);

Saber más

Duplicación de elementos de la interfaz en sitios web

2008-02-10T15:31:00.000+01:00

Enlace "Volver"

Una práctica muy habitual al diseñar un sitio web es la de introducir botones o enlaces con los textos "Atrás", "Volver" o cualquier otro cuyo significado sea el de volver a la página anterior.

Este tipo de enlace probablemente sea un poco redundante, ya que todos los navegadores web disponen en su interfaz de un botón para ir atrás, incluso los de los móviles.

Enlace o botón "Imprimir"

Más de lo mismo. Todos los navegadores disponen en su interfaz de un botón para imprimir.

Tiene más sentido si lo que hace es abrir una página optimizada para la impresión.

Enlace "Enviar esta página por email"

Y otra vez. Los navegadores también coinciden en incorporar esta opción.

Conclusión

Este tipo de enlaces y botones tiene como objetivo, consciente o inconsiente, sustituir a la interfaz del navegador para determinadas acciones, lo cual puede resultar redundante y ayuda a que los usuarios no se molesten en aprender a utilizar minimamente el navegador web que hayan (o les hayan) elegido.

Caracteres especiales en Javascript

2008-02-08T14:44:00.000+01:00

Si un archivo en el que hay código Javascript está en codificación ANSI podemos encontrarnos con que al poner acentos por ejemplo en un alert salga algo como esto:

El código del alert:

alert('prueba de ácéntós');

La solución que he encontrado es la siguiente: utilizar los códigos Unicode de esos caracteres acentuados:

alert('prueba de \u00E1c\u00E9nt\u00F3s');

De esta forma ahora saldría esto:

Tabla de equivalencias Unicode

En el Javascript habrá que añadir antes del código Unicode correspondiente el siguiente fragmento: \u.

Caracter especial	Código Unicode
Á	00C1
á	00E1
É	00C9
é	00E9
Í	00CD
í	00ED
Ó	00D3
ó	00F3
Ú	00DA
ú	00FA

Lista completa de equivalencias en formato PDF.

PHP: Limitar el número de caracteres de una cadena

2008-02-07T10:55:00.000+01:00

Se pueden limitar los caracteres a mostrar de una cadena (o string) mediante la función substr:

$cadena = 'abdefghijk'; //Esta es la cadena que se quiere acortar
echo substr($cadena, 0, 4); //con esto se cogen los 4 primeros caracteres
//Habría devuelto: abcd

Saber más sobre la función substr en PHP.

Javascript: establecer el valor de la propiedad float de CSS

2008-01-25T22:22:00.000+01:00

En Javascript es muy fácil establecer propiedades CSS, como en este ejemplo las propiedades de anchura, color y z-index:

elemento.style.width = '50%';
elemento.style.color = '#0c0';
elemento.style.zIndex = '1';

Pero con la propiedad float no es tan sencillo:

Because the word "float" is already reserved in JavaScript, it's not possible to access an object's floatCSS property using style.float. In fact, browsers use different terms for the float property: Internet Explorer uses style.styleFloat, while all other browsers use the W3C-specified style.cssFloat.

La palabra float es una palabra reservada en el lenguaje Javascript, por lo que no se puede usar para definir la propiedad float. Por ello hay que utilizar la siguiente alternativa especificada por la W3C:

elemento.style.cssFloat = 'left';

Pero aun queda un escollo. Internet Explorer (que es muy especial) no soporta esta alternativa, por lo que habrá que usar al mismo tiempo lo siguiente:

elemento.style.styleFloat = 'left';

Saber más

Inclusión de PHP en plantillas de CMS Made Simple

2008-01-23T12:03:00.000+01:00

Es muy sencillo, en lugar de <? se utilizaría {/php}:

{php} echo 'Texto en PHP'; {/php}

Saber más sobre la inclusión de PHP en plantillas de CMS Made Simple.

HTML: cuando se puede usar el atributo alt en el elemento input

2008-01-22T17:34:00.000+01:00

El atributo alt en el elemento input solo debe usarse si el atributo type contiene el valor image.

Saber más sobre el elemento input y sobre la obligatoriedad de la inclusión del atributo alt

¿Para que sirve Internet Explorer?

2008-01-18T00:01:00.000+01:00

Pues muy sencillo, según HacheMuda:

Internet Explorer sólo sirve para bajarse Firefox.

Aunque yo creo que también puede servir para bajarse Opera, al que considero bastante superior a Firefox.

Javascript: el método split()

2008-01-17T11:26:00.000+01:00

El método split() en Javascript permite dividir en varios bloques una cadena de texto, formando un array.

Ejemplo:

cadenaTexto = 'palabras-de-la-cadena-de-texto'
fragmentoTexto = cadenaTexto.split('-');

En el ejemplo las palabras en la cadena de texto (la variable cadenaTexto) están separadas por guiones. Al utilizar el método split() la separación viene dada por esos guiones.

Saldrían los siguientes fragmentos:

fragmentoTexto[0];// palabras
fragmentoTexto[1];// de
fragmentoTexto[2];// la
fragmentoTexto[3];// cadena
fragmentoTexto[4];// de
fragmentoTexto[5];// texto

Saber más

Reciclaje de un ordenador viejo

2008-01-13T18:05:00.000+01:00

Este fin de semana he dedicado un ratillo a terminar el reciclaje de un ordenador antiguo que tengo por casa (un Toshiba Equium 3200M):

PIII 450Mhz (Katmai)
256 MB SDRAM 100Mhz
Discos duros: 8,4GB y 20GB.
Lector DVD

Anteriormente ya le había instalado un Windows XP SP2 ocupando todo el disco de 8,4GB, optimizándolo para que consumiera el mínimo posible de memoria

A pesar de la optimización y de que la máquina cumple los requisitos recomendados para mover Windows XP, no es que vaya muy bien, sobre todo en lo referido a consumo de memoria.

En el disco duro de 20GB he creado una partición de 4GB en la que he instalado un Debian Etch 4.0r2 con KDE. Y la verdad es que va bastante mejor que Windows XP.

El consumo de memoria al iniciar el sistema es de 128 MB en Windows XP, y de 64 MB en Debian.

En cuanto a microprocesador se queda un poco corto en ambos sistemas, quizá un poco menos en Debian, pero la diferencia no es muy apreciable.

Debian 4.0 va mejor en esta máquina que Windows XP, a pesar de ser un sistema operativo bastante más reciente y con una interfaz (KDE) muchísimo más atractiva y personalizable.

He de decir que también probé con otros sistemas operativos:

Windows 98: Un rendimiento excepcional (es el sistema que venía preinstalado). En contra la falta de determinadas aplicaciones recientes y una ligera inestabilidad (explorer.exe peta mucho.).
Windows ME: Un rendimiento casi a la par que Windows 98. Muy inestable.
Windows 2000 SP4: un rendimiento similar a Windows XP. Carece de Internet Explorer 7.
Kubuntu Feisty 7.04: como ventajas que está basado en Debian y lleva KDE. Muy recargado, muy lento y un consumo excesivo de memoria (casi como XP).
Ubuntu Dapper 6.06: imposible de utilizar con un mínimo de soltura. Lento, recargado.
Debian Woody 3.0: tiene un rendimiento excelente, pero las aplicaciones suelen estar bastante anticuadas, aunque funcionan las últimas versiones de Firefox, Seamonkey, Opera y OpenOffice.org.
Slax 5: un rendimiento excepcional con KDE. El lado malo es que es unsistema operativo de juguete.

HTML y CSS: diferencias entre clases (class) e identificadores (id)

2008-01-02T23:00:00.000+01:00

El atributo id

El atributo id sirve para identificar de forma única a un elemento dentro de un documento HTML.

El valor del atributo id de un elemento no puede repetirse en ningún otro atributo id del mismo documento.

El id es la parte del selector CSS que más especificidad CSS da: un valor de 100.

El atributo class

El valor del atributo class puede repetirse cuantas veces sea necesario, incluso puede llevar más de una clase:

class=”claseUnica” -> atributo class con una sola clase
class=”clase1 clase2” -> atributo class con más de una clase

El valor del atributo class no tiene ningún valor identificativo del elemento que lo contiene, únicamente sirve para asociarle los estilos al elemento.

En cuanto a especificidad CSS tiene un valor de 10.

Saber más

Este documento está disponible en formato OpenDocument

Javascript: Secciones desplegables

2007-12-29T19:53:00.000+01:00

He montado un ejemplo de secciones de página desplegables.

Al cargar la página esas secciones se pliegan automáticamente, y el encabezado que las precede adquiere forma de enlace para poder desplegarlas y plegarlas. Si Javascript no está disponible, no habrá enlace en el encabezado ni se plegarán las secciones.

El bloque de secciones es precedido por un menú con dos enlaces: uno para plegar todas las secciones y otro para desplegarlas todas. Este menú se inserta mediante Javascript, por lo que en ausencia de Javascript no se mostrará.

Su funcionamiento se ha comprobado en Internet Explorer (versiones 5.5, 6 y 7), Firefox 2.0.0.11 (Windows XP), Iceweasel 2.0.0.8 (Debian 4.0), Opera 9.25 (Windows XP), Opera 9.24 (Debian 4.0), Konqueror 3.5.5 (Debian 4.0) y Safari 3.0.4 (Windows XP).

Ejemplos

Ver ejemplos de funcionamiento:

Descarga

Descargar ejemplos (archivo ZIP)

QTTabBar: añade pestañas a Windows Explorer

2007-12-24T12:21:00.001+01:00

QTTabBar añade funcionalidad de pestañas a Windows Explorer, algo habitual en navegadores pero no en aplicaciones de exploración de archivos. La única aplicación de ese tipo en la que lo había visto es Konqueror.

Parece que funciona para XP y Vista, necesitando en XP el .NET Framework 2.0.

Descargar QTTabBar.