Martes ~ Abril 8, 2008

Easy Scroll, Scroll accesible para tu contenido

4 Comentarios

Easy Scroll es una script desarollado en Javascript, que nos permite convertir un elemento contenedor de nuestro contenido en otro en el que podamos gestionar mediante botones el movimiento sobre el texto.

Además se trata de un sistema accesible, en el que al no detectar Javascript, no nos imposibilita el poder leer el contenido.

Instalación

Insertamos en el <head> de nuestra aplicación la llamada oportuna al script.

<script type="text/javascript" src="easyscroll/easyscroll.js"></script>

Una vez asegurados de que está debidamente cargada, podremos proceder a editar la estructura de nuestro contenido. Únicamente tendremos que englobar al contenido con un elemento al que le indicaremos un identificador único.

<div id=”easy_scroll”>
<!–  AQUI EL CONTENIDO –>
</div>

El siguiente paso, afectará directamente al fichero easyscroll.js, ya que tendremos que editarlo y modificar los parámetros siguientes:

var id = "myContent"; // Pondremos easy_scroll (o el id usado en el HTML)
var nav = ["Scroll Up", "Scroll Down", "Reset"]; //Nombres de los botones de navegación
var navId = ["btnUp", "btnDown", "btnReset"]; // ID’s de los botones (para cambiarles el aspecto mediante CSS)
var speed = 5; //Velocidad de movimiento del scroll. (1 = lento, 10 = rápido).
var height = 200; //Tamaño del elemento visible.

[Descargar] [Demo]

Jueves ~ Marzo 13, 2008

Los 10 peores captchas

2 Comentarios

Desde Isopixel veo los 10 peores captchas de Internet, y aunque son bastante rebuscados, demuestran el problema con el que se encuentran los usuarios. Imaginemos los que usuarios que únicamente usan el PC esporádicamente y se encuentran con eso…

#

Martes ~ Marzo 4, 2008

Espectaculares gráficas con CSS puro y duro

2 Comentarios

Pure CSS data Chart, son unas gráficas creadas únicamente con CSS que no le tienen nada que envidiar a las sobrecargadas con Javascript.[Demo][Descargarc]

#

Miércoles ~ Enero 16, 2008

Añade un icono webclip para el iPod Touch a tu web

7 Comentarios

Ayer, en la keynote de Apple, además de presentar el Macbook Air, Apple presentó la nueva actualización de pago para el iPod Touch. Esta actualización, permite disponer de las aplicaciones que tiene por defecto el iPhone y “Home Screen”.

ipod-touch-features1.png

Home Screen te permite organizar los iconos de la pantalla, cambiar los elementos del dock y añadir hasta 8 páginas de inicio llamadas WebClip, simplemente son enlaces directos a tus páginas preferidas desde el menú principal de dispositivo.

Entre las demás mejoras, Safari sufre una modificación y se le incorpora la posibilidad de añadir al menú principal directamente desde el menú de inferior. Lo que facilita la insercción de nuestros WebClip en nuestro iTouch.

add_to_home_ipod_touch_1.jpgadd_to_home_ipod_touch_2.jpg

Para hacer que nuestro sitio esté preparado para esta nueva funcionalidad, tendremos que añadir el siguiente código y cargar una imagen que será importada como icono para lanzar nuestra aplicación.

<head>
    <title>aNieto2k</title>
    <link rel="apple-touch-icon" href="/anieto2k-webclip.png"/>
</head>

La imaden que crearemos tendrá que ser un PNG de 57×57 pixeles (si el tamaño es diferente, se cortará o expandirá lo que haga falta), y tendrá el nombre indicado en el href="" de nuestro <link />.

Martes ~ Enero 8, 2008

Nuevos tipos de enlaces para el HTML5

9 Comentarios

El gran pegamento que une esta red llamada Internet son los enlaces, con ellos podemos pasar horas frente al ordenador simplemente siguiendolos. Los robots encargados de obtener datos para los buscadores hacen exactamente lo mismo y se recorren las webs y todos sus enlaces para catalogar estratégicamente todo el contenido que se vaya encontrado por el camino y siguiendo los enlaces que haya dentro de él.

Por ese motivo, el nuevo HTML tendrá que ser un poco más descriptivo a la hora de definir el tipo de enlace que estamos enlazando. Para ello usaremos el atributo rel="" de nuestros enlaces que como hasta ahora veníamos haciendo para definir tags, alternate,…

La nueva especificación, aporta una serie de tipos definidos que nos ayudarán a marcar con un tipo definido al enlace que estamos marcando. De esta forma los robots encargados de catalogar la información tendrán algo más de información sobre los enlaces, perfeccionando las futuras busquedas y mejorando los futuros resultados.

Tipos de enlaces HTML5

alternate
Informamos de una forma alternativa de ver el contenido
archives
Enlace a una colección de articulos, documentos o otro tipo de material histórico
author
Enlace al autor del documento
bookmark
Enlace que se relaciona con la sección anterior más cercana.
contact
Enlace hacia una forma de contacto sobre el documento actual.
external
Indica que el enlace referencia una documento externo a nuestro servidor.
feed
Enlace del feed de sindicación del documento
first
Indica el primer documento de una serie de ellos.
help
Enlace hacia un sistema de ayuda sobre el documento.
icon
Importa un icono para representar el documento actual
index
Enlace que nos lleva a la tabla de contenidos o un listado de páginas de nuestro documento
last
Indica el último documento de una serie de ellos.
license
Enlace hacia la descripción de la licencia usada en nuestro documento.
next
Indica el siguiente document de una serie de ellos.
nofollow
Indica que el documento enlazado no es relevante referente al documento actual.
noreferrer
Requiere que el agente de usuario no envie una petición HTTP Referer si el usuario sigue el enlace.
pingback
Enlace de un pingback
prefetch
Indica que el destino debería ser cacheado previamente.(Gracias Martin por la traducción)
prev
Indica el documento anterior de una serie de ellos.
search
Indica que el enlace permite realizar una busqueda.
stylesheet
Importa una hoja de estilos
sidebar
Especifica que el documento enlace está previsto ser mostrado en sidebar del navegador (si este lo tiene)
tag
Indica que se trata de una palabra clave del documento
up
Indica el padre del documento actual.

Jueves ~ Noviembre 29, 2007

Crea un slide accesible

0 Comentarios

Si necesitas un slide para tu aplicación, no dudes en echarle un vistazo a este desarrollado de forma no obstructiva. Algo más que necesario para conseguir un aplicación accesible.[Demo][Descargar]

#

Martes ~ Noviembre 27, 2007

Cómo evitar causar ataques fotosensitivos de epilepsia.

4 Comentarios

Muchas veces cuando hablamos de accesibilidad, lo asociamos a personas con visibilidad limitada o nula, con problemas motrices o incluso con problemas tecnológicos como móviles, equipos antíguos y desfasados. Pero rara vez nos paramos a pensar que hay un gran abanico de posibilidades entre los usuarios de Internet.

Y como premisa indispensable, debemos nunca olvidar que

“TODO EL MUNDO TIENE DERECHO A INTERNET Y SUS CONTENTIDOS”.

Olga Carreras muy al estilo que wnos tiene acostumbrados, nos deleíta hoy con un tirón de orejas a las página “jodeojos” [Ojo, que puede causar nauseas], esas páginas parpadeantes que al usuario normal parece cuanto más repulsiva, provoca en una minoría combulsiones y otros problemas. Tenemos que sensibilizarnos con el mundo que nos rodea y vivir pensando un poco más en los demás, que al fin y al cabo son los que van a ver nuestros contenidos.

Aprovecho para hacer un llamamiento a los desarrolladores a engordar la lista de los inscritos en la campaña Crea, una campaña centrada en crear webs accesibles de una forma bastánte peculiar.

Crea Webs accesible

(Esta tarde subo una foto mía con el logo :D) 

Martes ~ Noviembre 27, 2007

Experiencias de usuario futuras

2 Comentarios

Los chicos de SmashingMagazine, se han levantado “TorresBurrielizados” y han pensado en las personas. Nos deleítan con un post recopilación de los nuevos interfaces de usuario que podemos ver en un futuro más o menos lejano.

#

Jueves ~ Noviembre 22, 2007

Buenas prácticas en la implementación de formularios

2 Comentarios

Los formularios, detrás de los enlaces son los elementos que hacen posible la web. Gracias a ellos podemos comunicarnos con otras páginas, en las que podemos comentar, subir archivos e interactuar con el servidor desde nuestro navegador. 

Por eso debemos darle una especial importancia a la hora de implementarlos. Para ello seguiremos unas buenas prácticas que nos asegurarán que funcionen de la forma más óptima y correcta.

  1. Formularios de una sola página.
  2. Si hace falta pagina
  3. Minimiza los datos solocitados
  4. Usa ajax para mejorar el formulario, no lo hagas dependiente de él.
  5. No seas muy agresivo con la validación javascript, guía al usuario.
  6. Usa elementos <label />
  7. Si puedes, mejora la estética de los <input type=”file” />

Lunes ~ Noviembre 19, 2007

Nace Faz, la revista de diseños de interacción

1 Comentario

Via Yusef (HCNet) y Cadius descubro que la Revista Faz nº1 ha sido publicada. Faz es una nueva revista centrada en el diseño de interacción, un término algo desconocido por la comunidad de webmasters pero realmente interesante y sobretodo importantísimo para conseguir una internet para seres humanos.

revistafaz.JPG

Primer número de Faz

Quizas te pueda interesar

Esta web se encuentra sobre la licencia Creative Commons (Reconocimiento - Compartir igual) / Politicas de uso