Alejandro Arco Alejandro Arco

Target blank accesible con javascript

accesibilidad, javascript, usabilidad 2 Comentarios »

javascript - Target blank accesible con javascriptEn muchas ocasiones durante un desarrollo web accesible, necesitamos usar el atributo target=”_blank” para abrir mediante un enlace externo una ventana nueva.

En este caso, haremos uso de la librería desarrollada en javascript para abrir los enlaces externos en pestañas nuevas de nuestro navegador, cumpliendo los estándares web del W3C y las pautas de accesibilidad web correspondientes.

Características target=”_blank” accesible con javascript

ExternalLinks es una pequeña librería en javascript que nos permite incluir el atributo target=”_blank” de forma accesible y usable, permitiendo agregar enlaces externos de forma no intrusiva, aunque el navegador no tenga javascript habilitado.

  • Todos los enlaces externos de abren en pestañas nuevas.
  • Y también, los enlaces que hagan uso del atributo rel=”external”.
  • Cumple los estándares web del W3C y las pautas de accesibilidad web.
  • El código fuente de nuestro desarollo web queda más limpio y legible.

Descargar ExternalLinks JS

ExternalLinks JS (749 bytes)

Código target=”_blank” accesible con javascript

A continuación, adjunto el código de la librería ExternalLinks para ejecutar el atributo target=”_blank” de forma no intrusiva:

/**
 * Enlaces Externos Accesibles
 * (c) 2009 Alejandro Arco - http://www.alejandroarco.es
 * MIT-style license
 */
setExternalLinks=function() {
	if(!document.getElementsByTagName) { return null; }

	var anchors = document.getElementsByTagName('a');
	for(var i=0;i<anchors.length;i++) {
		var anchor = anchors[i];
		if((anchor.getAttribute('href').substr(0,7)=='http://' && anchor.getAttribute('href').lastIndexOf(document.domain)==-1) || anchor.getAttribute('rel')=='external') { anchor.setAttribute('target','_blank'); }
	}
}

if(document.all&&window.attachEvent) { window.attachEvent("onload",setExternalLinks); } // IE-Win
else if(window.addEventListener) { window.addEventListener("load",setExternalLinks,false); } // Otros

FancyUpload para flash player 10

ajax, open source 24 Comentarios »

Hace algunos meses publiqué un artículo sobre la extensión de Mootools FancyUpload para la subida múltiple de ficheros, tras la aparición del nuevo flash player 10 por parte de Adobe fancy upload dejó de funcionar correctamente en todos los navegadores que incluyeran el flash player 10.

De este modo y dada la demanda de todos vosotros he decidido explicar detalladamente el funcionamiento de fancyupload para flash player 10 con una demostración, ya que el error fancyupload se debe a un cambio en los métodos usados por flash player 10 en el browser.

Demo fancyupload para flash player 10

A continuación os adjunto una demo de fancyupload compatible con flash player 10:
[ Demo ] [ Descargar Ejemplo FancyUpload Flash 10 ]

Características fancyupload para flash player 10

  • Formulario alternativo y accesible en HTML.
  • En primer lugar añadiremos el código en PHP necesario para el desarrollo web de nuestra aplicación y así permitir la subida de ficheros con fancyupload.
  • Posteriormente añadiremos todos los ficheros en javascript necesarios para la ejecución de Fancy Upload como FancyUpload2.js, Fx.ProgressBar.js, Swiff.Uploader.js, mootools-1.2-core-nc.js y example_fancyupload_flash_10.js.
  • Finalmente añadiremos la hoja de estilos necesaria para estructurar la interfaz visual de fancy upload, en este caso el fichero se denomina estilos.css.

Espero que este artículo os sea de utilidad, ya que la demostración de FancyUpload para flash player 10 la he programado de forma estructurada y con comentarios para que sea de fácil compresión.

En cualquier caso, si tenéis alguna duda no dudéis en dejarme un comentario.

Rollover CSS en imágenes sin javascript

css 9 Comentarios »

css - Rollover CSS en imágenes sin javascriptEn el desarrollo web de aplicaciones es muy común usar rollover en las imágenes, por este mismo motivo detallaré posteriormente una forma de realizar rollover CSS en imágenes sin usar javascript.

Para que funcione en Internet Explorer 6 el rollover CSS es necesario que la imagen esté dentro de un enlace, ya que la única etiqueta compatible con este navegador es a:hover.

Actualmente muchos desarrolladores web siguen usando funciones javascript y etiquetas HTML como onload, onmouseover y onmouseout para realizar rollover en imágenes… siendo este método poco accesible, ya que es necesario que el usuario web tenga javascript habilitado.

Ventajas rollover CSS en imágenes

  • Compatible con Internet Explorer 6 y 7, y derivados de Mozilla como Firefox.
  • Código CSS y HTML más reducido y limpio.
  • No es necesario tener javascript habilitado.
  • Se cumplen los estándares web de la W3C.
  • Se cumplen las pautas de accesibilidad web.

Ejemplo rollover CSS en imágenes

Descarga el ejemplo Rollover CSS en imágenes.

En primer lugar debemos crear un gif transparente y los estados over y out de la imagen que deseamos enlazar para poder realizar el rollover CSS en imágenes.

Posteriormente definimos el estilo CSS del contenedor de la imagen con la imagen de fondo out definiendo además en el las dimensiones de la imagen.

<style type="text/css">
img { border:0; }
#rollover { width:175px; height:27px; background:url(/wp-content/uploads/2009/03/desarrollo-web-off.gif) top left no-repeat; }
#rollover img, #rollover a:hover { width:175px; height:27px; }
#rollover a:hover { position:absolute; background:url(/wp-content/uploads/2009/03/desarrollo-web-on.gif) top left no-repeat; }
</style>

Después agregamos las dimensiones de la imagen a enlazar mediante CSS a la etiqueta img y al propio a:hover para asegurarnos la compatibilidad con algunos navegadores y que el enlace abarque todo el contenedor.

<h1>Ejemplo Rollover CSS en imágenes</h1>
<div id="rollover"><a href="http://www.alejandroarco.es" title="desarrollo web" accesskey="1"><img src="/wp-content/uploads/2009/03/pixel.gif" alt="desarrollo web" /></a></div>

Finalmente, definimos al estilo a:hover que se posicione de forma absoluta respecto al contenedor y le asignamos la imagen de fondo over correspondiente.

Si tenéis alguna duda sobre el funcionamiento del rollover CSS en imágenes sin javascript, no dudéis en dejarme un comentario al respecto.

MySQL, backup con mysqldump

bases de datos 2 Comentarios »

mysql - MySQL, backup con mysqldumpMySQL es un sistema gestor de bases de datos relacionales muy extendido y desarrollado como software libre con licencia GNU GPL.

El sistema gestor de bases de datos mysql es muy popular en el desarrollo web de aplicaciones bajo entornos Linux y Windows, por lo que es necesario en la administración de sistemas realizar políticas de copias de seguridad de nuestras bases de datos mysql con mysqldump.

MySQL, backup con mysqldump

Para realizar la copia de seguridad con mysqldump nuestro usuario tiene que tener los permisos necesarios para poder realizarla. Posteriormente la consola nos pedirá que introduzcamos el password del usuario gracias al atributo -p del comando mysqldump:

  • Ejemplo de backup mysql de una base de datos y todas sus tablas:
    mysqldump --opt -u nombre_usuario -p base_datos > copia_seguridad.sql
  • Ejemplo de un backup con mysqldump con compresión gzip (entornos Linux):
    mysqldump --opt -u nombre_usuario -p base_datos nombre_tabla1 | gzip > copia_seguridad.sql.gz
  • Ejemplo de copia de seguridad mysql de una tabla de una base de datos:
    mysqldump --opt -u nombre_usuario -p base_datos nombre_tabla1 > copia_seguridad.sql

Si deseamos comprimir y descomprimir ficheros posteriormente a la realización del backup con mysqldump, recomiendo visitar el enlace adjuntado (entornos Linux).

MySQL, restaurar base de datos con mysql

  • Para restaurar un backup mysql de una base de datos, nuestro usuario tiene que tener los permisos de escritura necesarios asignados a la base de datos que deseamos importar:
    mysql -u nombre_usuario -p base_datos < copia_seguridad.sql

Si queremos exportar o importar bases de datos mysql con características más concretas, recomiendo ver la ayuda del comando mysqldump y mysql respectivamente.

Las dudas respecto a la realización de copias de seguridad en mysql las responderé en los comentarios.

Principios de usabilidad web

usabilidad Escribir un comentario »

usabilidad - Principios de usabilidad webLa usabilidad web se refiere a la facilidad o dificultad de uso de una aplicación web, es decir, al nivel en el que el diseño de una interfaz web facilita o dificulta su uso. De este modo, la experiencia del usuario se basa en estos tres principios de usabilidad web: facilidad de uso, flexibilidad en el intercambio de información y la robustez de la web.

Todo sitio web usable debe responder a las necesidades del usuario, de este modo detallaré a continuación algunas de las pautas de usabilidad web comunes a cualquier interfaz web.

Pautas de usabilidad web

  • Cumplir con los estándares web de la W3C.
    Validar XHTML y CSS
  • Hacer que nuestro sitio web sea accesible.
    Validar accesibilidad web
  • Realizar mapa web, distribución racional y consistente.
  • Tiempos de carga reducidos, captar la atención del usuario.
  • Logotipo enlazado con la sección de inicio.
  • Eslogan que describa la temática del sitio web.
    Usabilidad web: administracion de sistemas y desarrollo web de aplicaciones.
  • Lo más importante, siempre debe aparecer al principio de la web.
  • Existencia de un buscador que funcione correctamente.
  • Texto claramente legible y formateado, incluso en las imágenes.
  • Botones de acción llamativos.
    Usabilidad web: botón llamativo de comprar ó enviar formulario.
  • Enlaces para acción alternativa, aunque menos deseables.
    Usabilidad web: botón adicional de reestablecer formulario menos llamativo.
  • Diseño web inteligente con facilidad de navegación.
    Usabilidad web: menú en la cabecera y en el pie de página redundante.
  • No debe haber momento de fin de proceso.
    Usabilidad web: una vez finalizado un proceso de compra se mostrarían artículos adicionales destacados.
  • Control de errores 404.
    Usabilidad web: página 404 personalizada con información relevante del sitio.
  • Hacer uso de atajos de teclado “accesskey”.
    Usabilidad web: asignar atajos de teclado a las secciones estáticas relevantes.

¿Podemos hablar por tanto de los parámetros de usabilidad web como algo que va más allá de una guía de estilo realizada por el diseñador web? La respuesta es sí.

Publicado por Alejandro Arco.Gracias WordPress & N.Design Studio.