|

Laboratorio: directorio con búsquedas

ByLuis

Los directorios suelen ser muy útiles para tener organizada la información, pero también puede ser un poco complicado encontrar lo que buscamos si es que existen muchas entradas en el directorio. Por eso, en esta entrada, vamos a explicar cómo añadirle un buscador para que solo nos muestre las entradas que coinciden con un texto (para ser más precisos, con una expresión regular).
listado.png

Esta vez quiero hacerlo usando JSON, normalmente lo hago usando Javascript sencillo porque como no sé si la gente que mira nuestras entradas es entendido o viene buscando a través de Google, pues cuanto más sencillo de entender, mejor, y si luego la persona quiere hacerlo mediante JSON, pues que sepa cómo se hace normalmente. Lo importante es entenderlo, luego si se quiere que se haga un copiar/pegar.

Read More “Laboratorio: directorio con búsquedas”

| | |

Detectar cambio de tamaño de letra en Javascript

ByLuis

La verdad es que lo sencillo es lo mejor, y para cuando estés en la necesidad de detectar si se produce un cambio en el tamaño de la letra, nada mejor que el script que nos ofrece la gente de A List Apart.
Te puedes preguntar por qué vas a querer detectar el cambio de tipo de letra. Si te interesa tener un sitio accesible a gente con discapacidades, pues es buena idea que pienses en ello, ya que suele ser algo que pueden hacer con frecuencia.
Además de detectar ese cambio, puede ser necesario realizar alguna acción. Por ejemplo, si usamos una imagen para un botón, si cambiamos el tamaño de la letra, la imagen no cambia, por lo que el botón quedará demasiado pequeño para el resto del texto, ¿solución?, si hay cambio de tamaño de letra, sustituimos la imagen por un elemento input botón.
Al principio decía que la solución es sencilla, lo cual la hace aún mejor. Se trata de crear una capa que contenga un espacio dentro y que esté oculta. Se guarda el tamaño de la capa y cada cierto tiempo se detecta si ha habido un cambio en este tamaño, si es así, se ha producido un cambio en el tamaño de la letra.
Text-Resize Detection
Demo
Código y ejemplos

Tutorial de DOM

ByLuis

Algo que considero necesario a la hora de programar en Javascript es conocer el DOM. Aunque hay gente que prefiere la creación de objetos mediante innerHTML, incluso hay estudios sobre cual es más eficiente, siempre viene bien saber utilizar el DOM para poder manejar elementos HTML.
Si no controlas el uso del DOM, aquí os dejo un tutorial bastante claro que os ayudará a meteros de lleno. De todas formas, tambien recomendaros una página XULPlanet, la cual es una de mis favoritas para buscar documentación sobre los objetos HTML.
W3C DOM
Vía / dzone

curvyCorners: esquinas redondeadas mediante Javascript

ByLuis

curvycorners.pngAhora que están tan de moda las esquinas redondeadas, vemos una librería javascript que nos ofrece esta posibilidad sin tener que usar imágenes.
Tan solo identificando las capas que queremos modificar y ejecutando un pequeño script, redondearemos las esquinas de nuestras capas, ya tengan borde o imagen de fondo, mostrando además efecto anti-aliasing.
curvycorners2.png
Me parece que nos va a facilitar la vida a muchos.
curvyCorners
Vía / Bitelia

|

Algo de Javascript avanzado

ByLuis

Algo malo de dedicarse a la informática es que te puedes quedar anticuado con facilidad, algo bueno de ser blogger (al menos para mí) es que al querer dar buenas noticias y buenos scripts, te hace estar al día.
Algún compañero me ha preguntado alguna vez por partes de Javascript que no entendía, incluso me decía si realmente es Javascript. Supongo que a todos nos ha sonado raro el código Javascript cuando incluye JSON.
Lo malo es que cuando buscas por ese tipo de código que desconoces, buscas por términos como “javascript function”, “javascript avanzado”, y otras cosas que no suelen dar los resultados que esperamos. En el caso de “javascript function” nos suele dar cómo crear funciones, pero solo lo más básico, sin embargo, si hubieramos buscado por “javascript funciones anónimas” si hubieramos obtenido resultados deseados. Si buscamos por “javascript avanzado” solemos obtener directorios de efectos hechos en javascript y no las novedades que trae Javascript en sus nuevas versiones.
Por eso, si quieres aprender conceptos más avanzados de Javascript, te va a venir bastante bien este tutorial:
Quick guide to somewhat advanced JavaScript

|

Javascript 1.7 en Firefox 2

ByLuis

Una de las nuevas características que nos trae Firefox 2 es el soporte para Javascript 1.7. Entre las novedades que nos encontramos está:

  • Generadores: una forma de ejecutar procesos iterativos, usando yield para “congelar” el valor de una variable y usando next() para realizar la llamada al siguiente estado.
  • Iterators: en vez de usar for…in y for each…in, nos podemos crear un iterador, mediante Iterator(), para realizarlo de una forma más sencilla.
  • Comprensión de arrays: una forma sencilla de inicializar el valor de arrays.
  • Sentencia let: para modificar el alcance de variables para un bloque de código.
  • Devolver varios valores: la posibilidad de que una función devuelva varios valores.

Más información

New in JavaScript 1.7

Javascript 1.7 en Firefox 2

Vía / SitePoint

| |

Laboratorio: control input selector para HTML

ByLuis

Uno de los controles que he visto en alguna aplicación (sobre todo de tipo editor gráfico), es aquella en la que el valor numérico de una caja de texto se puede modificar mediante botones y mediante una barra de progreso.
input-selector.png
La versión que he realizado modifica los input type=”text” que haya en la página que tengan el atributo rel el valor selector[min,max], siendo min y max los valores mínimos y máximos que permite el controlador.

Entre otras cosas, el controlador permite modificar el valor mediante la forma tradicional (usando la caja de texto), usando las flechas, pinchando en la barra de progreso o haciendo drag en la misma barra.

Read More “Laboratorio: control input selector para HTML”

Javascript debuggers

ByLuis

Todos nos hemos encontrado con errores de javascript y normalmente la única información que obtenemos es el número de línea en el que se da el error, y a veces ni es esa línea (por ejemplo el famoso error en la línea 1 de IE). Por eso no nos viene mal tener una aplicación que nos ayude a limpiar nuestro código de errores:

  • Microsoft Script Debugger: Para IE, permite controlar el flujo de la ejecución del script y modificar el valor de variables entre otras cosas. No lo he usado, pero creo que es el que tienen algunos compañeros míos instalado, y te sustituye el icono amarillo de error y te salta cada vez que hay un error de Javascript, lo cual puede ser muy molesto.
  • SplineTech JavaScript HTML Debugger: Para IE y comercial, parece bastante completo, salvo que debes ejecutar la página web en la aplicación, no se integra con el explorador, lo cual suele ser una ayuda.
  • Venkman JavaScript Debugger: Para Mozilla y Firefox, uno de los primeros que aparecieron.
  • Firebug: Para Firefox, sin duda para mí el mejor de todos, lo que más me llega a gustar es su consola y la posibilidad de poder lanzar trazas en ella.
  • JSLint: Para IE, Mozilla y Firefox.
  • InspectThis: Para Firefox.
  • Drosera: Para Safari, el único problema es que está escrito el 90% en HTML y Javascript.

Javascript debuggers overview

Vía / dzone

| |

Laboratorio: listas con descripción en HTML

ByLuis

Muchas veces el diseño que creamos nos hace usar listas no ordenadas, las cuales queremos que tengan descripción, pero por la falta de espacio, queremos que esta ocupe poco espacio.

lista-descripcion.png

Para crear este efecto, usaremos una lista y una capa por cada descripción que queremos mostrar, a parte de un script que mostrará la descripción cuando pasamos el ratón sobre el elemento de la lista.

Read More “Laboratorio: listas con descripción en HTML”