Elements of Design: showcase de elementos web

ByLuis

Elements of Design es una galería de elementos contenidos en páginas web que nos puede ayudar a diseñar partes de la página y añadirlas al diseño general. Es como CSSMania pero en vez de diseños completos, enfocado únicamente a elementos.
elementsofdesign.png
Podremos encontrar diseños de formularios para comentarios de blogs, comentarios de blogs, calendarios, código, iconos, texto entrecomillado, formularios de registro, cajas de búsqueda y tipología de cabeceras.
Elements of Design

Similar Posts

|

Clipping de vídeo usando HTML5 y SVG en Firefox4

ByLuis

La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).

El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:

SVG

Vídeo

Javascript

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
    play.style.display = 'none';
    pause.style.display = 'block';
    video.play();
  }, true);  
pause.addEventListener('click', function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);  
video.addEventListener("ended", function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);

El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer

jsMath: incluye fórmulas matemáticas en tu web

ByLuis

jsMath es una paquete basado en la capa de matemáticas TeX, que nos permite añadir ecuaciones y notaciones matemáticas en nuestras páginas web. Con soporte para muchos navegadores en diferentes sistemas operativos, lo cual nos ahorra un problema de compatibilidades.
jsmath.png
jsMath intenta usar fuentes TeX, y cuando no se disponga de ellas usará imágenes que son escalables y con fuentes Unicode, por lo que a la hora de imprimir no perdería resolución. No utiliza directamente MathML porque este no está pensado para ser escrito directamente y porque no hay demasiados navegadores que lo admitan.
jsMath
Vía / dzone

5 expresiones regulares útiles para desarrollo web

ByLuis

Aunque a algunos nos gustan bastante las expresiones regulares, no está mal ofrecer una lista de alguna de ellas que nos pueden ser útiles cuando desarrollamos aplicaciones web.

  • Usuario: está es sencilla, letras, dígitos y el subrayado, con una longitud entre 3 y 16 caracteres.
/^[a-zA-Z0-9_]{3,16}$/
  • Etiquetas XHTML: habrá que sustituir la palabra etiqueta por la correspondiente que queremos buscar.
/]*>(.*?)<\/etiqueta>/
  • Etiqueta con atributos: lo mismo que la anterior pero con atributos.
/]*atributo\s*=\s*(["'])valor\\1[^>]*>(.*?)<\/etiqueta>/
  • Direcciones de correo: según la especificación RFC 822:
function is_valid_email_address($email){
$qtext = '[^\x0d\x22\x5c\x80-\xff]';
$dtext = '[^\x0d\x5b-\x5d\x80-\xff]';
$atom = '[^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c'.
'\x3e\x40\x5b-\x5d\x7f-\xff]+';
$quoted_pair = '\x5c[\x00-\x7f]';
$domain_literal = "\x5b($dtext|$quoted_pair)*\x5d";
$quoted_string = "\x22($qtext|$quoted_pair)*\x22";
$domain_ref = $atom;
$sub_domain = "($domain_ref|$domain_literal)";
$word = "($atom|$quoted_string)";
$domain = "$sub_domain(\x2e$sub_domain)*";
$local_part = "$word(\x2e$word)*";
$addr_spec = "$local_part\x40$domain";
return preg_match("!^$addr_spec$!", $email) ? 1 : 0;
}
  • URL: para reconocer direcciones de internet:
{
\b
# Parte principal (protocolo://dominio, o solo dominio)
(
# http://, o https://
(https?)://[-\w]+(\.\w[-\w]*)+
|
# Nombre de dominio
(?i: [a-z0-9] (?:[-a-z0-9]*[a-z0-9])? \. )+ # subdominions
# .com, .net...
(?-i: com\b
| edu\b
| biz\b
| gov\b
| in(?:t|fo)\b # .int or .info
| mil\b
| net\b
| org\b
| [a-z][a-z]\.[a-z][a-z]\b # two-letter country code
)
)
# Puerto
( : \d+ )?
# El resto es opcional que empieza por /
(
/
[^.!,?;"\'<>()[]{}sx7F-\xFF]*
(
[.!,?]+ [^.!,?;”\’<>()\[\]{\}s\x7F-\xFF]+
)*
)?
}ix

5 Regular Expressions Every Web Programmer Should Know

Vía / dzone

Diferencias entre un buen diseñador y un gran diseñador

ByLuis

Estando a la espera de que nos cuenten las diferencias entre un mal diseñador y un buen diseñador, que sería algo que necesitamos algunos, nos quedamos con un buen artículo que nos explica las diferencias entre un buen diseñador y un gran diseñador.

Se trata del típico post que todo el mundo referencia y que uno se da cuenta que se entera de las cosas el último, por eso voy a referenciar donde lo he visto originalmente, donde lo he leido en español y por su puesto el original.

Entre las cosas que más me han gustado destaco lo siguiente:

Mientras un buen diseñador dispone de ciertos elementos y los organiza de manera estética, un gran diseñador se preocupa además porque el mensaje que expresa su diseño llegue a destino.

…los artistas crean problemas, los diseñadores los solucionan. Pero un gran diseñador se adelanta a un problema potencial, tiene visión.

La conclusión a estas ideas nos lleva nuevamente a la razón de ser del trabajo de diseño, que es justamnente lo que diferencia además a un diseñador de un artista: las necesidades y problemas que atiende el diseño suelen ser -por lo general- ajenas al diseñador. El diseñador no es más que un instrumento comunicativo en esencia.

Nine skills that separate good and great designers

9 habilidades que separan buenos y grandes diseñadores

Vía / Criterion

Consejos para evitar crear malas aplicaciones web

ByLuis

Una lista con consejos para evitar realizar aplicaciones web que no tengan una buena calidad. Lo malo de las listas es que normalmente se basan en la experiencia del autor, por lo que a veces no se está de acuerdo totalmente con ellas. En este caso yo estoy bastante de acuerdo con la mayoría.

  • Pon los estilos y los javascript en ficheros independientes: complica la lectura, el debug y dificulta que varios desarrolladores modifiquen el mismo archivo.
  • Comprime: comprime la salida para ahorrar ancho de banda. Con esto no estoy del todo de acuerdo, ya lo hemos comentado antes en Sentido Web, hay que pensar que el comprimir la salida en el servidor requiere tiempo de ejecución en la máquina, no me imagino a Technorati, que a veces tarda un poco en darte la respuesta, despilfarrando tiempo de ejecución.
  • Valida: valida según el DOCTYPE que hayas especificado.
  • Cuidado con los mensajes de error: los mensajes de error deben estar enfocados en el usuario, no en el desarrollador para luego saber qué ha fallado. Además, mostrar mensajes de error de la aplicación específicos para los desarrolladores puede proporcionar información sensible a terceras personas.
  • No uses tablas: a parte de ser más fácil de mantener, y más claro de leer, ahorras ancho de banda al escribir menos código debido a la ausencia de TDs y TRs. Luego está, lógicamente, todas las otras razones que todos conocemos para no usar tablas.
  • Desarrolla para todos los navegadores modernos: no te centres solo en IE, existen otros, y aunque se usen menos, cada vez se usan más. Imagínate que una tienda por internet solo funciona para IE, ya que solo el 15% de los usuarios usa Firefox (por ejemplo), es bastante posible que la mayoría de ese 15% no entre en esa tienda online y busque una alternativa. Ese 15% de usuarios de Firefox quizás pueda representar un 15% de ventas.
  • Comprueba los requerimientos: si tu página necesita Javascript, cookies, flash o un plugin, comprueba que el navegador del usuario lo admite, si no es así hazlo saber.
  • Prueba la usabilidad con usuarios reales: a veces algunos sitios son difíciles de usar debido a que quienes lo usan no son quienes lo diseñan.
  • Usa una base de datos real: no uses Access u otro tipo de base de datos de ese estilo, si no puedes pagar Oracle usa MySQL.
  • Que sea multiplataforma: no uses ActiveX o cosas que sean específicas de una plataforma.
  • Piensa en el ancho de banda: no todo el mundo debe tener una línea con un ancho de banda grande, si la página tarda en cargarse es posible que el usuario huya de ella.
  • Ten en cuenta la internacionalización: si desarrollas algo para todo el mundo y solo lo realizas en inglés, es posible que no logres lo que buscas.
  • Testea: esto es lo de siempre, los test es lo más aburrido pero lo más necesario. Que los desarrolladores hagan sus pruebas primarias, pero que los verdaderos tests los hagan personas ajenas al desarrollo.

Ways to Avoid Building Web Applications That Suck

Vía / dzone

|

Qooxdoo: framework AJAX

ByLuis

qooxdoo.pngQooxdoo es un framework para crear aplicaciones AJAX de forma sencilla, permitiendo crear aplicaciones web estilo escritorio.
qooxdoo2.png
Entre las características que nos ofrece nos encontramos con: detección de cliente, abstraerse del navegador que se use, sintaxis sencilla, debugging, manejar propiedades, eventos y foco con facilidad, una API completa para coockies y Drag&Drop.
Qooxdoo
Demo
Vía / Ajaxian