La declaración rgba de CSS3 aplica el color igual que el formato standard RGB pero le añade algo especial, esa a es por el canal alpha lo que significa que podemos definir el nivel de transparencia de un objeto.
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. (más…)
Hace un par de días estamos estrenando WordPress 2.9 y es muy probable que si has oído algo sobre los nuevos features que trae sabrás que a los posts se le pueden asignar imágenes para usarlas como thumbnail. Estas imágenes que podemos asignarles a los posts no son solo thumbnails si no que pueden ser de cualquiera de los tamaños comunes que usa WordPress.
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.
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
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.
Con todos los complejos requerimientos, bases de datos, información instantánea y el tamaño de los websites y redes del día de hoy la arquitectura de la información se ha convertido en un factor crítico en el desarrollo de la mayoría de los proyectos web a gran escala.
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. (más…)
En el post anterior hablaba sobre las caracteristicas de un buen link, siguiendo el tema, creció la necesidad de hablar sobre los diferentes tipos de links.
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:
Uno de los trucos mas interesantes asociados con CSS es la habilidad de generar hojas de estilo utilizando funcionalidad en el lado del servidor. Yo lo he usado para cambiar imágenes de fondo en la cabecera de websites, para generar paletas de colores dependiendo de las preferencias del usuario, y para un montón de cosas mas.
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.
Hace mucho tiempo que ya no usamos tablas para hacer un layout. Nunca debe hacerse un layout en tablas, eso implica mucho código que no significa nada, para eso debemos escribir html estructural y crear nuestros diseño con CSS. Pero, las tablas todavía tienen uso, cuando queremos mostrar data tabular en filas y columnas.
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.
Navegando en internet uno se encuentra con la dificultad de que muchos websites tienen muchas similitudes incómodas, mismos layouts, mismos colores, misma distribución de los elementos … Aunque uno puede decir que esto ayuda a la navegación (Por la estandarización de los layouts), sigue siendo una costumbre incómoda y no hace una conexión positiva con los visitantes. Una forma sencilla de mejorar un diseño es con el color.
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.
Todo el mundo odia las feas paginas de errores “404 File Not Found” cuando una página ha sido borrada de un website, o el usuario escribe la dirección mal.
Así que debemos crear nuestras propias páginas de error para situaciones como esta, hay dos razones principales para hacerlo.
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.
