|

Resaltar filas en tablas mediante Javascript

ByLuis

A la hora de mostrar tablas, un modo de presentación muy recomendable es resaltar las filas alternas como por ejemplo hace la lista de actualizaciones de Bitacoras.com consiguiendo así una mayor facilidad a la hora de leer los datos. Para ello, se suelen usar un estilo para las filas pares.

tr.par {
background: [color];
}
...
<tr class="par">
...
</tr>
...

Si la tabla se genera de forma dinámica, ya sea mediante Javascript o con PHP, JSP, … esto puede ser una acción bastante sencilla, tan solo tendremos que mirar en el bucle si el contador es par y colocar el class=”par”. Pero si la tabla es estática, puede suponer un trabajo un poco pesado, ir buscando todos los <tr> y escribir la clase. Siguiendo la Ley del Mínimo Esfuerzo, escribiremos la tabla sin modificar y luego ejecutaremos un script que modifique las filas pares automáticamente.

  function transformar() {
var tablas = document.getElementsByTagName("TABLE");
for (var i=0; i<tablas.length; i++) {
for (var j=0; j<tablas[i].rows.length; j++) {
if (j%2 == 0) {
tablas[i].rows[j].className = "par";
}
}
}
}

Ejemplo

Similar Posts

| |

Laboratorio: calcular fondo de imagen con PHP

ByLuis

Hace tiempo contábamos como rotar imágenes aleatoriamente, algo que se puede utilizar para la cabecera del blog (como hace mucha gente). El problema es cuando las imágenes son completamente distintas y hay que buscar un fondo que le convenga. Para ello nada mejor que un script PHP que te calcule el fondo según los colores de la imagen, ya sea calculando la media o la mediana (el que más aparece). Como veréis en el ejemplo, la media (arriba) y la mediana (abajo) devuelven valores distintos.
backgrounds.png

Read More “Laboratorio: calcular fondo de imagen con PHP”

|

Instala cualquier cosa en Ubuntu

ByLuis

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

HTML5 Web Workers

ByLuis

HTML5 a parte de añadir nuevas etiquetas, también incluye otras posibilidades javascript, como los Web Workers, los cuales permiten ejecutar scripts en paralelo (background). Por ejemplo, tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un Worker y evitar que el navegador se nos colapse.

Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el javascript y el Worker se comuniquen mandándose mensajes.

El script que instancia el Worker sería así:

// Crea el Web Worker
var worker = new Worker("worker.js");

// Envía un mensaje al worker
worker.postMessage(0);

// Recibe los mensajes del Worker
worker.onmessage = function (evt) {
	// evt.data es el valor devuelto por el Worker
	alert(evt.data);
}

// Trata los errores
worker.onerror = function (evt) {
	alert(evt.data);
}

Y el worker.js sería el siguiente:

// Ejemplo de Worker
onmessage = function (evt) {
    // evt.data es el valor enviado desde el javascript
    for (var i=evt.data, il=1000001; i

Los Workers también admiten el evento onconnect, aunque tan sólo he visto que funcione en Webkit:

onconnect = function(evt) {
  postMessage('Hola, acabas de conectarte al Worker');
}

Using HTML5 Web Workers to have background computational power

| |

W3C: fallos de accesibilidad (II)

ByLuis

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

Mostrar imágenes con información importante mediante estilos

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

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

h1 {
background: url(titulo.png);
width: 200px;
height: 100px;
text-indent: -10000px;
}
<h1>Título</h1>

Usar el estilo blink sin el mecanismo para parar el parpadeo

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

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

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

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

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

Más información