Archivo de la categoría: Recursos

Fuente de recursos para maquetadores Web.

jPlayer reproductor MP3 personalizable por CSS

Publicado el por
1

jPlayer es un plugin para jQuery que te permite:

  • El juego y el control de archivos de audio en su página web
  • Crear y modificar estilo de un reproductor de audio utilizando sólo HTML y CSS
  • Añadir efectos de sonido a nuestros proyectos de jQuery
  • Flujo más rápido usando HTML5 y alternativas de apoyo en formato ogg

Reproductor de jPlayer

Todo ello con HTML5 usando la etiqueta audio soportado en navegadores compatibles que permitan formato mp3 u ogg, mientras que soporta a otros navegadores utilizando formato mp3 con Flash no visible.

Ya podemos olvidarnos de insertar reproductor de otro tipo que sobrecargan nuestra página Web, con este plugin podremosimplementarlo en nuestra Web de forma sencilla, y modificarlo a nuestro gusto mediante HTML y CSS

Descargar jPlayer

50 Técnicas y Tutoriales de jQuery

Publicado el por
3

La sencillez, características avanzadas y un fuerte apoyo, son los argumentos más comunes para los desarrolladores que prefieren jQuery contra otros frameworks de JavaScript. Definiendo jQuery podemos decir, que consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX.

De hecho, jQuery es uno de los frameworks de JavaScript más populares, con potentes herramientas que pueden mejorar significativamente la interacción del usuario con las aplicaciones Web. jQuery tiene una ventaja adicional, ya que permite a los desarrolladores seleccionar elementos en una página usando CSS como sintaxis.

jQuery

Características de jQuery

  • Selección de elementos DOM.
  • Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
  • Eventos.
  • Manipulación de la hoja de estilos CSS.
  • Efectos y animaciones.
  • AJAX.
  • Soporta extensiones.
  • Utilidades varias como obtener información del navegador, operar con Objetos y Arrays, (elimina los espacios en blanco del principio y final de una cadena de caracteres), etc.
  • Compatible con los navegadores Firefox 2.0+, Internet Explorer 6+, Safari 2.0.2+ y Opera 9+.

Para ayudarte a mejorar tus habilidades, en este artículo podras acceder a 50 nuevas técnicas útiles de jQuery y tutoriales que se han creado recientemente y que podría hacer que el desarrollo de tu sitio web sea una experiencia más fácil y más interesante que la anterior.

Ver 50 técnicas útiles con jQuery

Fuente: SmashingMagazine

Usabilidad Web: Test y Herramientas

Publicado el por
4

Los no iniciados a la usabilidad se habrán preguntado como funciona esto de la Usabilidad, que pautas o reglas sigue, en que se basan para saber si es una web Usable o no. Esta fase cada vez se usa más en los grandes proyectos Web orientados mayormente a los usuarios.

La usabilidad mide qué tan intuitiva y fácil de usar es una página web para el usuario común. Mide los siguientes 3 aspectos más relevantes:

Eficacia, eficiencia y satisfacción

Y para ello principalmente sigue unos principios básicos de usabilidad:

Principios de la usabilidad

  • Visibilidad del estado del sistema
  • Concordancia entre el sistema y el mundo real
  • Control y libertad del usuario
  • Consistencia y estándares
  • Prevención de errores
  • Reconocimiento antes que llamadas
  • Flexibilidad y eficiencia de uso
  • Diseño estético y minimalista
  • Ayude a los usuarios a reconocer, diagnosticar y recuperarse de los errores
  • Ayuda y documentación

Usabilidad Web: Experiencia del Usuario

Pero luego hay que realizar unos Test de Usabilidad de nuestra Web. Para ello cuando se crean los proyectos y se considera el apartado de la Usabilidad Web, se usa un checklist o unas pautas para evaluar la Usabilidad del sitio con los usuarios. También siguiendo unas directrices para evaluar la usabilidad de un sitio web, separadas en diversas categorías; Navegabilidad y Arquitectura de la Información, Formularios y entradas de datos, Confianza y Credibilidad.

Herramientas para la Usabilidad Web

Test de Usabilidad (plantilla)

Os dejamos con una plantilla de un Test de Usabilidad en formato excel, desarrollado por UserFocus y la traducción de mano de InterGraphics Designs. Con estas pautas podemos empezar a evaluar nuestros sitios Webs con un grupo de usuarios:

Descargar Test de Usabilidad

DejaClick y ClickHeat

También podemos usar de forma complementaria una extensión de Firefox conocida como DejaClick para realizar test de uso de nuestra web. Permite grabar las actividades de los usuarios de un sitio Web y generar informes de esas actividades.

Y una segunda herramienta llamada ClickHeat, con ella obtenemos un “mapa de calor” de las zonas donde hacen clic los usuarios de un sitio Web.

MORAE

Por último les hablaré de una aplicación llamada MORAE: es un paquete de software compuesto por 4 herramientas, destinadas a analizar y compartir la experiencia de uso de una web, estas herramientas son: Morae Manager, Morae Observer, Morae Recorder y Morae Player. Es una herramienta muy recomendable para quienes se encargar de realizar test de usabilidad Web con usuarios.

Bueno, espero que todas estas herramientas relacionadas con la usabilidad web nos sirvan de ayuda para nuestros proyectos Web.

Guía de Referencia CSS3 (css3 reference guide)

Publicado el por
1

Chris Hanscom ha desarrollado una nueva guía rápida de referencia CSS3 con las últimas especificaciones.

La guía de referencia CSS 3 dispone de una de las más completas y actualizadas hojas de cheats con la nueva especificación de CSS 3. Veremos las nuevas propiedades, selectores y que valores se pueden introducir según el estándar CSS3.

Descargar Guía de Referencia CSS3

Carga Optimizada de Javascript

Publicado el por
2

El mayor problema que nos encontramos al cargar Javascript es que el navegador deja de renderizar la página mientras carga el fichero Javascript.

En cambio, si cargamos los ficheros dinámicamente mediante Javascript, evitamos el problema y podemos cargar ficheros Javascript de forma asíncrona sin afectar al renderizado de la página.

Nicholas C. Zakas ha desarrollado 3 principales puntos para optimizar la carga de JavaScript para nuesra Web:

  • Creamos dos ficheros Javascript. En el primero poner lo necesario para cargar dinámicamente otro ficheros javascript y el segundo con el código necesario para nuestra aplicación.
  • Introducimos el primer Javascript el final de la página, justo antes de cerrar la etiqueta <body>.
  • Justo después creamos un segundo tag <script> en donde llamaremos al/los fichero/s necesarios.

HTML

loadScript

loadScript() es la función encargada de cargar el fichero Javascript de forma dinámica y encargada de ejecutar el código que indiquemos como segundo parámetro en cuando este esté cargado correctamente.

function loadScript(url, callback){

 var script = document.createElement("script")
 script.type = "text/javascript";

 if (script.readyState){  //IE
    script.onreadystatechange = function(){
     if (script.readyState == "loaded" ||
         script.readyState == "complete"){
           script.onreadystatechange = null;
           callback();
        }
     };
 } else {  //Others
   script.onload = function(){
     callback();
   };
 }

 script.src = url;
 document.getElementsByTagName("head")[0].appendChild(script);
}

Con esta optimización mejoramos la carga de las Webs con Javascript. Ya no solo sirve para una carga más rapida de la página ,sino para realizar algunas funciones en el cuerpo de la página una vez cargada dicha página.

Fuente: anieto2k

Herramienta de selección de color (Color Picker)

Publicado el por
2

Muchas veces queremos usar un determinado grupo de colores, con la siguiente herramienta podremos seleccionar uan gama de colores adecuada para nuestra Web. Además podemos “jugar” con diferentes colores ayudandonos del cono 3D de colores. Lo idea es el grupo de colores o gama de colores que desarrolla a partir de un color principal.

ColoRotate es un nuevo e interesante sitio Web que recoge un enfoque novedoso para el selector de colores del diseño tradicional. En lugar de los círculos 2D o deslizadores, ColoRotate cuenta con un cono 3D. En el centro del cono está el espectro de colores. En la intersección, se encuentra el tinte que se encuentra en el eje z. Puedes manipular cada uno por separado para ayudar a llegar a su color. También puedes combinar dos colores juntos.

Una vez que haya elegido unos colores de la paleta, puede usar controles adicionales para modificar toda la paleta a la vez. Además, el sitio tiene mucha información sobre el color y la teoría del color.

Color Rotate

Si estás buscando una nueva herramienta que te ayudará a generar paletas de colores, ColoRotate vale la pena.

Herramientas de Accesibilidad Web

Publicado el por
2

Os dejo una lista de herramientas que nos servirá a los maquetadores o desarrolladores web a conseguir Web más accesibles. Con estas herramientas sabremos mucho mejor como se comporta nuestras páginas Web cuando interactúan en ellas diferentes tipos de usuarios.

La mayoría de ellas son muy interesantes y útiles para hacer pruebas y mejoras de accesibilidad web en el desarrollo de nuestros proyectos.

Simuladores de personas con discapacidades cognitivas

Simuladores de personas con problemas de visión

Sistema de votos con CSS (CSS Rating Star)

Publicado el por
1

Más de uno de nosotros nos hemos encontrado con crear un sistema de votos factible y práctico. Como vemos en Youtube o en Amazon. La mayoría de ejemplos que encontramos por la Web, estan desarrollados con JavaScript que funcionan correctamente bien, pero ya sabemos que si lo tenemos desactivado ya no nos sirve de mucho.

A continuación vemos como crear un sistema de votos o Rating Star únicamente con CSS, de esta manera evitaremos usar Scripts para conseguir el efecto deseado.

En el ejemplo solo se usa una imagen con 2 estrellas, una para el estado inicial y otra con el hover. De esta forma prescindimos de crear varias imágenes para cada valor de cada estrella. Debajo vemos el ejemplo ya funcionando.

Ejemplo del Sistema de votos:

HTML

CSS

.star-rating {
	list-style:none;
	margin: 0px;
	padding:0px;
	width: 100px;
	height: 20px;
	position: relative;
	background: url(star_rating.gif) top left repeat-x;
}
.star-rating li {
	padding:0px;
	margin:0px;
	float: left;
}
.star-rating li a {
	display:block;
	width:20px;
	height: 20px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
}
.star-rating li a:hover {
	background: url(star_rating.gif) left bottom;
	z-index: 1;
	left: 0px;
}
.star-rating a.one-star {
	left: 0px;
}
.star-rating a.one-star:hover {
	width:20px;
}
.star-rating a.two-stars {
	left:20px;
}
.star-rating a.two-stars:hover {
	width: 40px;
}
.star-rating a.three-stars:hover {
	width: 60px;
}
.star-rating a.three-stars {
	left: 40px;
}
.star-rating a.four-stars {
	left: 60px;
}
.star-rating a.four-stars:hover {
	width: 80px;
}
.star-rating a.five-stars {
	left: 80px;
}
.star-rating a.five-stars:hover {
	width: 100px;
}

XMind: Desarrollar mapas de la web

Publicado el por
3

Para desarrollar una buena arquitectura de la información en la Web. Debemos seguir unos principios fundamentales, y una de las partes más importantes es crear un Mapa de la Web:

  • Rápido desarrollo
  • Que se pueda enseñar algo lo antes posible
  • Facilidad para la modificación
  • Escalabilidad
  • Distribución sencilla en formatos estándar

XMind cumple con todos estos requisitos y es la aplicación más apropiada para ello. No confundamos Mapa de la Web con site map. Con XMind podemos crear de manera muy sencilla un mapa de la arquitectura de nuestra página. Que normalmente se desarrolla en la primera fase de los grandes proyectos Web, con el objetivo de organizar el contenido y las tecnologías de la Web.

Ventana con la herrramienta XMind