Un objeto con transparencia de 1.0 sera totalmente opaco (visible) un objeto con transparencia de 0.0 será totalmente invisible. Cualquier valor intermedio determinará que tan transparente será un objeto sobre su fondo.

Cross Browser Incompatibilities (Incompatibilidad entre navegadores)

La declaración rgba funciona mejor en Firefox, Google Chrome y Safari. En el mundialmente famoso Internet Explorer 6 el color de fondo simplemente no se vé, así que hay que asignarle su color de fondo usando una declaración sin el alpha channel. (Algunos tenemos que luchar con el IE6)

Como se usa?

Yo lo uso en el sidebar de este mismo website así:

Y así se vé en Internet Explorer 6 (mejor dicho no se vé)

Para seguir aprendiendo sobre rgba más detalladamente Is CSS3 RGBa ready to rock y Working with RGBA Colour ofrecen una explicación más amplia con ejemplos.

Related posts:

1. Diseñando tablas

Voy a enseñar como usar estas imágenes en los templates, teniendo en cuenta que estas imágenes son una representación del post. La imagen esta directamente relacionada al post.

Como puedo asignarle imágenes a los posts?

Lo primero es que el Theme debe soportar este feature, de otra forma no lo vas a poder usar.

Para usar este feature tienes que estar en la pantalla de edicion de un post, en esta pantalla hay una cajita nueva que dice post thumbnail o page thumbnail para las paginas con un link para asignar la miniatura. al hace click en este link puede usar la herramienta de subir imagenes para asiganrle la imagen a tu post.

Aunque la cajita tiene como titulo post thumbnails aqui se pueden usar cualquiera de los tamaños de imagen por default que trae WordPress

• Thumbnail
• Medium
• Large
• Full (La imagen que subiste)

Como añado soporte para el feature de las imágenes de los post?

Para hacer este feature disponible a los usuarios del theme solo hay que agregarle esta linea a nuestro archivo functions.php

[snippet=25281]

Naturalmente esto no muestra nada en el theme, para eso debemos llamar la imagen en el loop:

[snippet=25282]

O en alguna seccion especial podemos elegir y solo mostrar las imagenes de tamaño mediano:

[snippet=25283]

Con estas pocas líneas podemos añadirle una funcionalidad bien avanzada a nuestros templates.

Related posts:

1. Usando los Shortcodes de WordPress
2. Como utilizar los comentarios de Facebook en WordPress
3. Miniposts en WordPress

Para mezclar lo técnico con lo visual manteniendo el sentido de la estructura y la usabilidad es necesario tener una arquitectura de información.

Que es?

En su forma más básica, la arquitectura de la información es la construccion de una estructura para organizar una serie de información. En la web, La arquitectura de la informacion es la combinación de organizar la información de un website en categorías y crear una interface para mostrar esas categorías.

Mientras se desarrolla la arquitectura de la información se van resolviendo algunas piezas del rompecabeza de como terminar el proyecto. Se debe definir el problema, determinar las necesidades, establecer metas, descubrir y probar conceptos. El proceso de esta investigación en términos más amplios incluye: entrevistas con el cliente, investigación de tecnologías emergentes, analizar estudios de caso, planificación de presupuesto y personal y producir un documento con los requerimientos funcionales.

El resultado de esta investigacion es un documento que especifica los limites del proyecto y cuales problemas son unicos de el.

En el diseño web, una persona que desarrolla programas y que planifica es un arquitecto de información. El arquitecto clasifica la estructura completa del website y organiza la distribución de las páginas en secciones, desarrollando un plan funcional e intuitivo que lleve al usuario de un punto A a un punto B por el camino que ofrezca menor resistencia.

Que crean los arquitectos de información para los clientes?

Aunque cada proyecto es diferente, hay ciertos documentos que son comunes en la mayoría, muchas veces solo cambian en alcance y funcionalidad. La presentación consiste en mostrar la información como es y tambien mostrarla de manera que se adapte al modo de entender las cosas del cliente.

Algunos de esos documentos incluyen:

• Site Maps: reflejan la navegación y los contenedores de información. Usualmente son construidos para que luzcan como un diagrama de flujo y muestran como un usuario puede navegar de una sección a otra.
• Mapas de Contenido: Mapas detallados que muestran que información vá en que página y como el contenido de algunas secciones interactúa con el de otras.
• Wireframes: Dibujos a linea en blanco y negro, o bloques  para entregarlos al diseñador. Los wireframes pueden o pueden no reflejar el layout y son mayormente usados para explicarle al diseñador que links, que espacios promocionales y que información vá en cada página. Los Wireframes tambien sirven para resaltar las prioridades.

Todo el que ha visto los efectos de un proyecto sin planificación sabe que es bueno tener todos los detalles del proyecto antes de comenzar a ejecutar. Algunos clientes no entienden la necesidad de esto y quieren evitarlo para reducir costos. Es importante para todas las compañías que hacen arquitectura de la información, darle soporte a su trabajo educando a los clientes sobre su valor.

Que se toma en cuenta para hacer una arquitectura de la información?

Antes de poder evaluar un website nuevo o mejorar uno existente es sumamente importante saber, quienes lo van a usar? quien lo va a hacer? y cuales son las metas. Quizas la parte más difícil de la arquitectura de información es encontrar el enfoque, pero después de ahí todo empieza a encajar y solo hay que combinar la eficiencia con la facilidad de uso. Una buena arquitectura de información siempre ayuda a acercar al usuario con el producto.

Es bueno comenzar a trabajar con todo el contenido y todos los requerimientos listos, pero sabemos que es muy difícil que ese sea el caso, la arquitectura de la información permite que el proyecto cambie ya que no es posible predecir el futuro. Hay que tratar de obtener la mayor cantidad de información desde el principio y hay que asegurarse de que el cliente entiende todo.

Los arquitectos deben tambien tener en cuenta quienes van a usar el website, las metas estratégicas y las metas de negocio, principios básicos de accesibilidad, limitaciones técnicas y necesidades futuras.

no hay entradas relacionadas.

Un detalle muy importante cuando diseñamos interfaces es que cada elemento debe identificar su función a primera vista. Si todos los elementos de nuestros websites son iguales, como sabremos a que darle click para ir a otra página?

Tratando de lograr que el visitante no se confunda buscando los links, surge una nueva característica de un buen link: El link especifica claramente al usuario que va a abandonar el website.

Para lograr esto necesitamos dos cosas; buscar un ícono que identifique a la mayor cantidad de visitantes que el link al clickearlo va a otra página y como adjuntarlo a cada uno de los links externos con CSS.

No hay una convención clara sobre que ícono utilizar, aunque la mayoría usa el de Wikipedia otros usan un ícono parecido (pero en vez de un cajita, con una página). Lo más probable es que se cree una convención cuando esta técnica adquiera más popularidad.

Para aplicarle el estilo usamos

 a[href^="http:"] {
        background: url(/images/external.png) right center no-repeat;
        padding-right: 12px;
}

Usando selectores de CSS3 no tenemos que asignar una clase a los links o ejecutar ningún código en el servidor para seleccionar los links externos.

Esta regla de CSS nos dá algunas pistas sobre como marcar otros tipos de links como los mailto:

Related posts:

1. Programando CSS

Hay dos componentes para generar CSS con un lenguaje como PHP. El primero es poder incorporar la hoja de estilos en la pagina. Para eso usamos el @import de CSS:

@import "backgrounds.php"

No importa si el archivo importado es un CSS estático mientras el MIME type sea text/css. En PHP esto se logra con la funcion header

header("Content-type: text/css");

El resto del archivo puede ser una combinación de bloques de PHP generando CSS o CSS estático, no importa.

Como había mencionado, uno de los usos de esta funcionalidad es cambiar la imagen de fondo en las cabeceras de las paginas, en esta ocasión lo vamos a ver cambiando la imagen de fondo de la pagina completa, para demostrar el uso de un CSS dinámico. Las imágenes van a estar en una carpeta y PHP va a seleccionar una de ellas aleatoriamente y creara las reglas de CSS necesarias para aplicarla al background de la pagina.

La aplicación genera un numero aleatorio entre 0 y el numero total de imágenes. Las imágenes están almacenadas en un Array y la imagen seleccionada es llamada con el numero aleatorio. Un ejemplo

La ventaja de esta técnica es que se pueden guardar las imágenes en una carpeta y dejar que la aplicación se encargue de seleccionar la imagen por ella misma.

Se puede usar esta técnica para seleccionar imágenes, colores, cambiar el tamaño de las fuentes, etc… La única limitante es mantener el CSS pequeño y rápido, no queremos que el CSS este lento y dure mucho cargando.

Related posts:

1. Imágenes para los posts en WordPress 2.9

Los ejemplos donde las tablas son recomendadas incluyen calendarios, horarios, resultados de exámenes, resultados médicos, yo para este ejemplo voy a utilizar una tabla de posiciones de los equipos en la división este de la liga americana. La tabla de ejemplo.

Las tablas tienen el codigo HTML mas interesante, asi que los resultados dependerán de que nivel de complejidad sea requerido.

Estructura de las tablas

Utilizo <thead><tfoot> y <tbody> porque estos tags permiten que podamos agrupar las filas de la tabla en grupos de secciones:  header, footer y body.

Aunque con la excepción del thead, no hay diferencia visual entre una tabla que tenga estos elementos y una que no los tenga, pero siempre es bueno incluirlos porque proveen valiosa información extra sobre la estructura de la tabla, que puede ser usada para mostrarla en impresión o en la pantalla.

Diseñando

A esta tabla le añadimos una clase a las filas impares, para aplicarles una imagen de fondo. Este truco se puede lograr con javascript fácilmente, evitándonos aplicarle una clase a cada fila impar.

Con jQuery, seleccionar filas impares o pares es muy directo:

  $("table tbody tr:odd").addClass("impar");

con un poco de color, padding y algunos bordes tenemos una tabla asi.

Para inspiración de diseños de tablas, vale la pena visitar http://icant.co.uk/csstablegallery/, es un website al estilo Zen-Garden donde una misma tabla es rediseñada por hojas de estilos enviadas por los usuarios.

Columnas

el elemento <colwrap> y el elemento <col> permiten aplicar algunos estilos a una columna individual en una tabla. Voy a ponerle un fondo de un color mas oscuro a la columna de juegos ganados. Ejemplo final.

Related posts:

1. Diseñando los errores

Quizás no haya otro elemento que influya tanto en como nos sentimos en relación a un diseño que el color. Aparte de dar pistas acerca de la navegación y la importancia de los elementos y secciones en un website, influye directamente en el estado de animo de la audiencia. Pueden alterarnos, hacernos sentir calmados, ponernos en atención. En el caso del diseño web lo colores encontrados en la naturaleza resultan particularmente útiles. Ya sea una aplicación web o un website tipo brochure, una combinación de colores que fluye naturalmente tiene el potencial de distinguir (Creando un website más memorable), guíar (Haciendo que el usuario se enfoque en la interacción), atraer (Haciendo los layouts mas cómodos y placenteros) e inspirar (Ofreciendo nuevas ideas para el uso del color).

El estilo de un diseñador está formado de multiples factores, y el color juega un papel determinante. Cada quien tiene sus métodos de encontrar una combinación de colores apropiada lo que vá a afectar el resultado.

Aquí hay algunas combinaciones de colores inspiradas en elementos de la naturaleza en República Dominicana.

Color by COLOURlovers

Color by COLOURlovers

Color by COLOURlovers

no hay entradas relacionadas.

Así que debemos crear nuestras propias páginas de error para situaciones como esta, hay dos razones principales para hacerlo.

1. Las feas páginas de error hacen que la gente se vaya. una sugerencia, crea tus propias páginas de error con información y con enlaces a tus páginas principales, o mejor aún, incluye tu sitemap o los enlaces principales de tu sitemap. Cada vez que un usuario llega a un punto sin salida en tu website, te arriesgas a perder un cliente.
2. Es bueno para tu search engine optimization. Las páginas que desaparecen de tu website son borradas del index de los search engines. Cuando el web crawler llega a una pagina de error es como un cuarto oscuro, no tiene adonde ir. Sin embargo cuando creas tus propias páginas de error con links a las secciones principales de tu website, le das unas cuantas opciones para seguir navegando e indexando tu sitio.

También se pueden usar redirecciones 301 para las páginas que no existen para transferir su ranking a otra o para los usuarios que las tienen en favoritos.

Para crear tus propias páginas de error necesitas hacer un archivo .htaccess y poner estas lineas:

[snippet=25430]

Donde /401.php es el nombre del archivo en relacion al root de tu dominio.

Algunos ejemplos de buenas páginas de error.

Related posts:

1. 20 consejos para mejorar tu website … en serio
2. Diseñando tablas