Similar Posts
Laboratorio: filtrado de tablas
Leyendo una de las entradas de Usolab, en la que habla de colocar filtros en las tablas: Icono para el control “filtrar”, no he podido resistirme a llevar a cabo tan buena idea.
En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.
Lo primero que debemos hacer es seleccionar la tabla en cuestión y tratarla, modificando la cabecera (th) incluyendo un enlace para poder ejecutar la acción de ordenar, un icono que indica qué columna está ordenada y en qué sentido y una caja de texto para indicar el filtrado.
La caja de texto tiene la particularidad de mostrar un icono que indica el estado del filtro, cuanto más lleno esté de “lÃquido”, más mostrará. Para lo cual usamos una imagen como fondo de la caja de texto e iremos moviendo verticalmente para mostrar los distintos estados.
ExtJS: librería Javascript, Ajax y componentes GUI
ExtJS es una librerÃa Javascript que hace de puente a las librerÃas de Yahoo!, jQuery y Prototype+Scriptaculous para ofrecernos de forma sencilla componentes GUI en nuestras aplicaciones cliente.
Entre los componentes que nos ofrece encontramos diálogos, menús, tablas, layouts, paneles, pestañas y mucho más.
ExtJS
VÃa / dzone
Gráficas mediante CSS
Una buena colección de herramientas para generar gráficas (de barras, progreso, de tarta, …):
- Ajax MGraph: desarrollado en XHTML u CSS, es una gráfica interactiva que funciona en Firefox, IE y Opera. Incluye integración PHP y de la base de datos.
- PlotKit: gráfica de tarta y de puntos, soporta Canvas y SVG y soporte de navegador.
- CSS Javascript Bar Charts: gráfica de barras sencillo.
- Vertical Bar Graphs with CSS and PHP: gráfica de barras con CSS y PHP.
- CSS For Bar Graphs: gráfica de barras usando los tanto por ciento que ofrece CSS.
- CSS Vertical Bar Graphs: gráfica de barras de forma sencilla.
- Displaying Percentages with CSS: barra de progreso mediante CSS.
- Dynamic Pie Chart with CSS: gráfica de tarta dinámica.
VÃa / Intenta
Laboratorio: shortcuts en formularios
Algo a lo que suelo estar acostumbrado es a usar el teclado para realizar ciertas acciones (shortcuts), cuando estás 8 horas diarias delante de un ordenador, si no haces uso de los shortcuts, perderás mucho tiempo moviendo el ratón de un lado para otro.
Antes el uso estaba más restringido a las aplicaciones de escritorio (CTRL + S para guardar el documento, ALT + F4 para cerrar la ventana, …), pero ahora que cada vez se usa con más frecuencia aplicaciones web, se echan en falta estas facilidades. Aunque hay que decir que últimamente se ven con más frecuencia: TAB + INTRO para enviar un correo en GMail (claro que esta no se programa), CONTROL + S para guardar una entrada en Blogger, …
CSS dinámicos
Un interesante artÃculo que nos explica cómo realizar hojas de estilo dinámicas, aunque la verdad yo no le veo mucho uso, incluso el ejemplo que pone no me vale demasiado. Supongo que se podrÃa evitar el uso dinámico de CSS diseñando mejor las CSS, pero claro, tambien puede que me equivoque. De todas formas, el artÃculo me ha gustado bastante, porque a parte de explicarte cómo hacerlo, te muestra que lo que siempre pensamos como estático (CSS, Javascript) puede ser un script PHP y no necesariamente un texto plano. A parte te dice con qué problemas nos podemos encontrar, en este caso el tiempo de ejecución del script frente al tiempo de carga de un fichero plano, algo que creo que a veces se suele olvidar.
Usar una hoja de estilos dinámica puede ser útil en el caso de que nuestra aplicación deba mostrar distintos estilos dependiendo de la página desde la que se le pida. Como ejemplo pone una aplicación que use módulos (ventanas tipo gadgets) y que dependiendo del módulo tenga que mostrar un estilo u otro.
Lo único diferente a la hora de crear el script PHP que nos devuelve el script es que se debe devolver el tipo de contenido del archivo (Content-Type), ya que el resto no se deberÃa diferenciar de mostrar un HTML:
header('Content-Type: text/css');
if (condicion) {
echo '#estilo { display: inline; }';
} else {
echo '#estilo { display: inline; }';
}
El problema con el que nos encontramos es que cada vez que se visita la CSS se tiene que ejecutar y no se guarda en caché. Para que cachee el script, durante un tiempo prudencial, debemos indicarlo en la cabecera:
header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');
Ahora el único problema que nos queda es no tener que procesar siempre los mismos estilos, para ello nada mejor que usar @import, asà seleccionamos unos estilos u otros, pero no los generamos:
header('Content-Type: text/css');
header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');
if (condicion) {
echo '@import "estilo1.css";';
} else {
echo '@import "estilo2.css";';
}
Tutorial básico de HTML storage
Una de las características más interesantes de HTML5 es el browser storage, el cual nos permite almacenar datos en el navegador del cliente.
A parte de su uso básico:
localStorage.setItem('name', 'arman');
var value = localStorage.getItem('name');
localStorage.removeItem('name');
Me gustaría destacar dos puntos importantes: detectar si el navegador lo soporta y añadir eventos:
var webStorageSupported = ('localStorage' in window) && window['localStorage'] !== null;
if (window.addEventListener) {
window.addEventListener("storage", handleStorageChange, false);
} else {
window.attachEvent("onstorage", handleStorageChange);
}
function handleStorageChange(event) {
alert("Algo esta cambiando en el almacenamiento");
}
El resto del tutorial explica todo paso a paso