Similar Posts
5 efectos CSS accesibles
El tema de la accesibilidad es algo que a veces se deja de lado cuando se quiere conseguir un diseño más dinámico. Pero si se busca bien, se podrá encontrar ejemplos de diseños CSS que sean accesibles.
Estos son 5 muy buenos ejemplos de ello:
- Enlaces externos: modificas el texto “(enlace externo)” incluyéndolo en un span y después lo que haces es modificar el estilo para que muestre un icono (diferente dependiendo de si es linked, visited o hover) y el texto lo haces desaparecer de la parte visible de la pantalla.
- Sigue leyendo: el texto “Sigue leyendo sobre …” se modifica, haciendo que solo aparezca “Sigue leyendo” y el resto del texto aparece como un popup mediante posición absoluta y jugando con el hover.
- Texto variable: al igual que ya contamos en Sentido Web, usando distintas hojas de estilo y accediendo a ellas mediante Javascript.
- Pestañas con imágenes: se crea un menú de pestañas con listas no ordenadas y se cambia el estilo para que no tengan formato de bloque, los enlaces están formados por imágenes y estas cambian según el hover.
- Formularios: dos buenos ejemplos de formularios, uno de ellos muy bien tabulado y otro en tres columnas.
5 Accessible and pretty CSS tips
VÃa / dzone
Heatmap en tiempo real con Javascript y Canvas
Los heatmaps son muy útiles para ver qué zonas de nuestras webs atraen la atención de los usuarios. Esta función de Javascript permite mostrar en tiempo real el heatmap que se va produciendo gracias a Javascript y el elemento HTML de Canvas.
AJAX | Estándares | Firefox | Javascript
FireBug: extensión de Firefox para depurar
Una extensión que nos va a ser muy útil ya que nos permite depurar nuestras aplicaciones web. Entre las opciones que nos ofrece se encuentra la posibilidad de crear trazas en nuestras páginas web, olvidándonos así de los mensajes con alert para ver qué es lo que hace el código; nos avisa de los errores visualmente, algo que siempre he echado en falta en Firefox; inspector del DOM, CSS y eventos; línea de comandos para Javascript, se acabó el escribir el javascript: para ejecutar pruebas aisladas; monitoriza las peticiones AJAX, así como las respuestas; editor de elementos del DOM.
Completa e imprescindible
FireBug
Vía / Genbeta
Javascript Color Picker: selección de color estilo PhotoShop
Javascript Color Picker es un string que nos permite añadir un selector de color estilo Photoshop. Esta herramienta nos puede ser útil cuando queremos que el usuario seleccione un color, claro, que las ocasiones en las que lo podemos necesitar son bastante escasas.
A parte de las componentes HSV, también se puede utilizar las componentes RGB. Ha sido comprobado en IE5.5, IE6, IE7, FF2, Opera 9 y Safari 2.
Javascript Color Picker
VÃa / dzone
Librería Javascript para hacer zoom en imágenes
FancyZoom es un script que nos permite realizar zoom de nuestras imágenes mediante Javascript. Hace aparecer la imagen mediante un zoom progresivo y transparencia. Además muestra el title del enlace en un recuadro.
Las imágenes ser precargan automáticamente cuando el ratón pasa por encima de la imagen, por lo que se reduce la demora en la persentación. El único fallo que encuentro es que hay que añadir un onload en el body, pero bueno, podemos cambiar la librería para que se haga automáticamente.
FancyZoom