Día a día quienes nos dedicamos al diseño web tenemos que repetir muchas cosas que hacemos a diario, por eso estoy haciendo una colección con algunas herramientas online que uso para facilitarme el trabajo.
Es seguro que aquí no estén todas las herramientas que hubiese querido poner, pero pienso ir actualizando este post para ir agregando nuevas herramientas.
Tripoli CSS no es un framework de css, sino una serie de reglas genericas de CSS para mostrar HTML. La idea de resetear todos los estilos del browser es común, pero me atrae mucho lo de renderizar diferentes layouts solo con aplicarle una class al body del HTML, incluso podemos ver una demostración del Tripoli Layout plugin.
David Tavarez nos muestra un poco de AJAX con jsHack en su post Simple Ajax Request usando jsHack.
Todos los días Learn something everyday nos muestra un hecho ilustrado de una manera muy peculiar.
Optimizely nos muestra una forma bien interactiva y fácil de implementar mejoras a nuestros website a través de A/B Testing.
Por último, este señor dice cosas para pensarlas en su libro, Program or be programmed, por ejemplo:
“If we don’t know what the software we are using is for, we are not using it but being used by it” - Douglas Rushkoff
Puedes enviarme enlaces a wilbur@retrorock.info o seguirme en Twitter para ayudarme a encontrar las cosas mas interesantes de la web cada semana.
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…)
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.
Este título puede parecer del tipo de post dirigido a amateurs, que es una lista con links a páginas de cliparts y gif animados, pero esto es serio. Esta es una compilación de cosas que pueden ayudar a tu website en diferentes maneras, y son relativamente fáciles de hacer, en poco tiempo cada una.
Añade un Meta-Description dinámico Para que la descripción de cada página sea agradable en los resultados de los search engines.
Utiliza buenos títulos para las páginas. Nunca es demasiado recalcar la importancia y la relevancia de los títulos. Optimiza siempre los títulos de tus páginas principales.
Agrega un title a los links. Principalmente a los links de la navegación principal de tu website. Vá a fortalecer la información de tus enlaces.
Links internos. Desde el copy de tus páginas principales hasta las páginas más profundas en tu navegación.
Crea un Sitemap. Muchas herramientas los pueden generar por ti automáticamente. Puedes aumentar dramáticamente el número de visitas con esto.
Browsers. Observa la funcionalidad principal de tus website en la mayor cantidad posible de navegadores. Asegúrate de que todo esté funcionando bien y toma nota acerca de las inconsistencias.
Cambia las letras a mayusculas con CSS. Si necesitas unas palabras escritas en mayusculas, como un encabezado, en vez de re-escribirlas, deja que CSS haga ese trabajo. El fragmento de abajo convertirá todos los H1 en mayusculas, sin importar el formato:
h1 { text-transform: uppercase; }Dá Direcciones. Dale razones a tus visitantes para navegar el sitio, guíalo por tus páginas (links internos, páginas relacionadas, etc…)
Navegación Consistente. Debes estar seguro de que la navegación de tu website este siempre en el mismo sitio, que refleje los enlaces visitados, para que tus visitantes no se confundan.
Que los links parezcan links. Esto es un trabajo sencillo haciendo que resalten del resto del texto.
Que el texto sea legible. No te preocupes por hacer el texto tan pequeño para que no se salga de tu layout perfecto. Deja que el texto respire, añadiendo line-height y espacio.
Que el logo te lleve a la página principal. Suena simple, pero le va a ahorrar mucho tiempo a tus visitantes.
Re-escribe. Si el primer párrafo no resume la intención del resto de la pagina, re-escríbelo.
Haz que los encabezados tengan un significado importante. Sustituye el texto de cualquier encabezado que no tenga un significado relevante al resto del contenido de tu pagina. Si es posible por uno o dos keywords.
Escribe para las personas, no para los buscadores. Incluye texto que signifique algo, no trates de engañar a los buscadores llenando tu copy con keywords que no significan nada para alguien que viene desde un buscador.
Usa el interés. Si alguien ha visto una página, el detalle de un producto o ha leído un post en tu blog, significa que está interesado, no lo dejes así solamente, hazle sugerencias para que siga navegando por contenido relacionado.
Visibilidad. Verifica que tengas un ranking alto por el nombre de tu compañía o el nombre de tu website, si no lo tienes, verifica tu contenido y añade algunos enlaces con el nombre de tu compañía.
Se amigable. Responde una pregunta en un foro sobre tu área de especialidad. Ganaras un amigo y algo de respeto. Reputación = trafico.
Lee. Mantente leyendo y aprendiendo cosas sobre tu industria, puede servirte de referencia.
Mantente un paso adelante. Mantente investigando sobre las nuevas tecnologías y tendencias. Si puedes usar una nueva tecnología y escribir sobre eso, puedes haber encontrado una buena manera de ganar visitas por medio de los buscadores.
Te sirvieron algunos de estos consejos? Tienes algún consejo interesante? Déjame saber dejando un comentario.
En estos días ha habido mucho interés por parte de los desarrolladores web en el lanzamiento de Google Doctype. Es una enciclopedia y referencia abierta a contribuciones de todo el mundo, su enfoque principal es la documentación (Específicamente, documentar la Web Abierta [The Open Web]).
La documentación está básicamente dividida en dos partes:
Todo el contenido de Google Doctype es 100% abierto, Open Source, y se puede colaborar