Una referencia rápida para distintos tipos de patrones de diseño de dos páginas. Puedes descargártela de McDonaldLand.info.

A partir de la impresionante lista que hizo Smashing Magazine sobre fotografías en HDR (High Dynamic Range) he visto en varios sitios hablar sobre HDR. He de reconocer que hasta el artículo de SM (íncreibles estos chicos, como siempre) no había escuchado nunca el término HDR. Según la wikipedia:

HDR son las siglas de “High Dynamic Range” (Alto Rango Dinámico), aunque el nombre completo de esta tecnología es “High Dynamic Range Rendering” o HDRR (Renderizado de Alto Rango Dinámico). Esta tecnología de renderizado imita el funcionamiento del iris en el ojo humano. El ojo humano se adapta de forma continua y con gran eficacia a las diferentes luminosidades de una misma escena abriendo o cerrando el iris mientras se va integrando toda la información captada en el cerebro. De esta forma este órgano es capaz de ver de forma clara una escena con zonas con diferente iluminación. Las máquinas fotográficas no tienen esa capacidad de adaptación y lo que hacen por medio del fotómetro (medidor de luz) es tomar una media de las diferentes zonas y realizar la fotografía con esta de forma que algunas zonas pueden quedar bien iluminadas pero a costa de que otras queden oscuras y otras demasiado blancas. Mediante las técnicas de HDR se intenta subsanar este defecto de la fotografía consiguiendo iluminar correctamente todas sus zonas anuque contengan “cantidades de luz” muy diferentes.

Bueno, este pequeño rollo ha sido para enseñarte una galería de fotos HDR de grafittis. Por cierto, si te gustaría hacer alguna imagen de éstas tienes un tutorial para hacerlo con Photoshop.

El otro día estuve hablando un poco sobre qué son los patrones de diseño. Vimos que nos podían ayudar resolviéndo algunos problemas que se nos pueden presentar durante el desarrollo de nuestros proyectos. Pues bien, dependiendo del problema al que nos enfrentemos, podemos agrupar los patrones en tres grandes grupos:

• Patrones de creación. Estos patrones se utilizan cuando debemos crear objetos pero debemos tomar decisiones dinámicamente en el proceso de creación. Para ésto lo que hacemos es abstraer el proceso de creación de los objetos para realizar la decisión de qué objetos crear o cómo crearlos para el momento en que se tenga que hacer. Patrones de creación son: Abstract Factory, Builder, Factory Method, Object Pool, Prototype y Singleton.
• Patrones estructurales. Nos describen como utilizar estructuras de datos complejas a partir de elementos más simples. Sirven para crear las interconexiones entre los distintos objetos y que estas relaciones no se vean afectadas por cambios en los requisitos del programa. Algunos ejemplos de patrones estructurales son: Adapter, Bridge, Decorator, Facade, Flyweight y Proxy.
• Patrones de comportamiento. Fundamentalmente especifican el comportamiento entre objetos de nuestro programa. Hay varios: Chain of Responsability, Command, Interpreter, Iterator, Mediator, Memento (o Snapshot), Observer, State, Strategy, Template Method y Visitor.

Me he encontrado con este artículo con unas 50 buenas prácticas en CSS:

A evitar

1. CSS in-line.
2. Tamaños de fuente absolutos.
3. Marcar con comillas simples las rutas de las imágenes.
4. CSS hacks.
5. Redeclarar valores heredados.
6. Aplicar paddings/borders y un ancho fijo a un elemento.
7. !important y position: absolute.
8. Nombrar clases/IDs según su apariencia.

Buen estilo

9. Declaraciones CSS una por línea.
10. Comentar el código.
11. Organizar el fichero CSS.
12. Indentar tanto como sea necesario.
13. Hacer el código fácil de leer.
14. Usar un sistema común de nombrado.
15. Declaraciones cortas alfabéticamente.
16. Un “;” no es necesario en la última declaración.
17. Si declaras una unidad de 0 px/em/%/… puedes omitir la unidad.
18. Mantener contenedores, propiedades, selectores y CSS Hacks al mínimo.
19. Selectores de grupo te permiten seleccionar varios elementos de una vez.
20. Acortar la notación de colores en hexadecimal.
21. Definir las pseudoclases para enlaces en el orden LoVe/HAte.
22. Definir los márgenes, paddings y bordes de los elementos en el orden TRouBLed.
23. Puedes utilizar selectores hijos.
24. Hacer uso de diferentes tipos de medios.
25. Nombrar a las clases/IDs según su función, no su apariencia.
26. Aprender a explotar la cascada natural de CSS. CSS tiene sofisticadas reglas para la herencia de reglas.
27. Puedes usar selectores de atributos. Los selectores de atributos hacen juego con elementos basados en la presencia o valor de atributos.
28. Cambiar la capitalización con CSS.
29. Ordenar todos los elementos pertenecientes a la cabecera, contenido principal, pie de página… juntos para tener una mejor visión general.
30. Echa un vistazo a las guías de estilo de las grandes compañías.
31. Busca inspiración en los gurús del diseño.
32. Echa un vistazo a BluePrint, un framework de CSS, un montón de grandes ideas se encuentran integradas y documentadas.

Facilita tu vida

33. Usa un CSS cheat sheet.
34. Construye y prueba tus CSS en los navegadores más avanzados disponibles antes de probarlos en otros, no despues.
35. Cuando dudes, valida.
36. Prueba incrustado (embebido), lanza importado.
37. Mantén una librería de class CSS de ayuda.
38. Prueba un compresor CSS online, algunos de los métodos que emplean estos encogedores de CSS para reducir el tamaño de tu fichero CSS pueden ser empleados de una forma menos extrema para hacer tus CSS más aerodinámicos.
39. Utiliza la web devoloper toolbar de Firefox.
40. Usa un framework CSS como Blueprint.

¿Sabias que…?

41. Puedes asignar varias clases a un elemento dado.
42. Poner valores constantes a través de un documento CSS:
    • La opción más simple es sólo incluir el valor del color en cada regla que quieras y usar Buscar y Reemplazar cuando quieras cambiarlos. Esto es trivial cuando utilizas un buen editor de texto.
    • Desde que un elemento puede tener más de una clase, puedes hacer clases para cada constante o variable que quieras crear y luego asignar esas clases a los elementos (X)HTML que quieras que les afecte. Desde que un elemento puede tener más de una clase, esto no debería interferir con cualquier uso existente de atributos de la clase. Luego, si quieres cambiar el color, todo lo que necesitas es modificar la clase.
    • Usar un lenguaje del lado del servidor para rellenar el CSS.
    • Hay algunos ejemplos de lenguajes server-side de preprocesado de CSS ahora. Aparentan ser los más desarrollados.
43. Puedes añadir estilos CSS a los RSS feeds.
44. Puedes prevenir spam con CSS.
45. Puedes ofrecer diseños “customizables” dinámicamente creando ficheros CSS con PHP.
46. Hay ideas para diseño de patrones en CSS.

El compromiso hacia el usuario y la eficiencia son prioridades de primer orden que no deben sacrificarse por utilizar la última tecnología o por un capricho del interface. No permita que el atractivo de que sea técnicamente posible comprometa los verdaderos objetivos de la aplicación.

Las aplicaciones de entrada de datos corporativas no necesitan ventanas que realicen un fade-in pero pueden beneficiarse de optimizaciones de entrada de datos como rellenado de campos (type-ahead) o validaciones en el lado del cliente (client-side validation).

Las aplicaciones web 2.0 hacen de la sencillez una ventaja estratégica. Por ejemplo, en el pasado, las aplicaciones que se basaban en el audio o vídeo digital, especialmente en los archivos creados por usuarios, luchaban contra una gran cantidad de problemas y complejidades. Los startups como YouTube han simplificado enormemente los procesos complejos anteriores con el vídeo y el audio para la web: está centrado en el navegador, casi elimina los asuntos de compatibilidad de los distintos formatos de archivo, hace la subida y bajada sencilla, y provee facilidad de uso con los componentes de grabación multiplataformas basados en Flash. Observa que esta facilidad de integración de estos componentes ha animado a que los usuarios los usen fácilmente dentro de sus propios sitios webs, blogs, y otras aplicaciones online.

De 5 a 10 segundos, ese es el tiempo máximo que tenemos para captar la atención de los lectores.

Internet proporciona tantas opciones que si algo no es lo suficientemente interesante cuesta poco esfuerzo salir y encontrar algo nuevo para leer. Por eso necesitamos aprovechar cada posibilidad que tengamos. En el diseño web a menudo se pone demasiado énfasis en la imagen y en el estilo pero no se diseña teniendo en mente a una persona.

Seguir leyendo "Diseño web para personas"

Los nuevos sitios que tienen un estilo ‘web 2.0‘ tienen una serie de características comunes (en cuanto a su diseño) que podemos reconocer fácilmente. En este artículo vamos a enumerar unas cuantas. Hay que decir también que no es necesario que todas estas características se encuentren en un mismo sitio porque eso puede producir el efecto contrario de lo deseado: una sobreexplotación de recursos gráficos estilo ‘web 2.0′ paradójicamente puede hacer que nuestra web no se vea atractiva.

Bien, entremos en detalle y veamos esta lista de características:

Seguir leyendo "Guía de estilo Web 2.0"