Básicamente en esta entrada vamos a ver algunas fuentes frescas y de gran calidad que obtenemos de ver Smashing Magazine.

Sin más charla, vamos a las fuentes:

Freebooter Script

Esta fuente realmente impresiona por sus curvas. Es una fuente “Tipo Cursiva” que está muy buena para diseños y títulos raros. La misma está diseñada por Graham Meade.

Cora Basic Regular (OpenType)

Una fuente de estilo sans-serif que es bastante gruesa y fuerte, la misma fue diseñada por Veronika Burian y José Scaglione.

Walkway (TrueType)

Walkway es una fuente bastante peculiar, finita y agradable. Parece bastante elegante y modesta, y tiene una gran variedad de formas.

Karabine

Esta fuente creada por Jonathan Paquette es bastante original, sucia y “linda” para hacer diseños al estilo “dirty”. Personalmente es la que más me gusta de todas estas que vimos aquí.

Lo bueno es que en Internet siempre tenemos gente que nos ayuda a solucionar nuestros problemas.

Esta nota tratara en una primera instancia de que tamaño deberíamos utilizar para generar nuestro layout, y luego nos adentraremos en como hacer el layout con CSS puro, para poder optimizar nuestro sitio, haciéndolo de la manera más sencilla posible.

¿Qué tamaño deberá tener el layout de nuestro sitio?

Bueno, esa es una decisión muy personal a la hora de crear un nuevo diseño. Pero basándonos en estadísticas, podríamos decir que podemos encontrar en este sitio, podríamos sacar bastantes conclusiones:

• Por empezar, podemos decir que la gente que usa 640×480 ya es prácticamente despreciable (sin ofender a nadie, claro).
• Otra conclusión que sale a primera vista es que el 80% de la gente podrá visualizar correctamente una pagina diseño preparado para 1024×768 (50% de 1024 + 27% de 1280 + 3% de 1152). Tengamos en cuenta, que cada vez es mayor la cantidad de gente que usa 1024, incluso 1280.
• Si hacemos un diseño pensado para 800×600 seguramente tendremos en cuenta al 99% de la gente.

Aquí le dejo un resumen de las estadísticas esas:

1024×768 (50%)
1280×1024 (27%)
800×600 (10%)
Unknown (8%)
1152×864 (3%)
1600×1200 (0%)
640×480 (0%)

Ahora bien, si decidimos usar 1024, o 800 o la que sea; eso no significa que debamos utilizar esa resolución en nuestro layout. Es muy importante tener en cuenta que el área visible de un explorador no es exactamente la misma que la de nuestra pantalla.

Según este excelente post (en ingles) titulado “size does matter”, que tiene muchas estadísticas y habla sobre cual es la mejor resolución para hablar; aparte de dejarnos estadísticas (aunque mas detalladas) similares a las que vimos arriba, nos dice cuales son las mejores resoluciones para trabajar:

Si usamos una resolución de 1024px de ancho, el tamaño que deberíamos considerar para utilizar es de 994px. En cambio si pensamos usar una resolución de 800px de ancho, deberíamos considerar en que nuestro layout deberá ser de 770px de ancho.

1024px de pantalla: 994px de navegación.
800px de pantalla: 770px de navegación.

Por otra parte, según podemos ver un interesante articulo que se ha posteado en xyberneticos, podemos decidir que si queremos hacer un diseño pensando en una resolución de 1024px, podríamos utilizar un ancho de layout de 960px.

El motivo de elegir 960px seria la posibilidad de dividir este numero por 2, 3, 4, 5 y 6; permitiendo así generar columnas de diferentes tamaños de muy fácil configuración y agradables a la vista, de 160px, 192px, 240px, 320px o 480px.

Con esto creo que ya se puede decidir cual es el ancho de la pantalla que voy a utilizar para mi sitio, ahora lo que se necesita es poner manos a la obra y generar el layout. Como dijimos en un artículo anterior, es bueno que utilicemos CSS y no tablas, entonces vamos a hacerlo con CSS.

¿Cómo hago mi layout con CSS?

Bueno, hacer esto es bastante sencillo con CSS. Lo mas seguro es que el layout de nuestro sitio necesite varias cosas; como un header, un footer, y 2 o 3 columnas en el medio (o quizás 1 sola).

Para no dar muchas vueltas al asunto, lo mas fácil para generar nuestro layout en CSS es obteniéndolo ya generado de alguna manera.

Una forma de hacer esto, es utilizando herramientas que encontraremos en Internet tales como: Layout-o-matic.

Otra opción es bajarte ya el código CSS de sitios como Iron Myers, que es un excelente sitio con un montón de opciones para hacer tus layouts; como también utilizar los layouts que proporciona Mollio.

Luego de que tengan el “layout base” de sus sitios, ahí deberán modificarlo un poco para obtener los mejores resultados que ustedes deseen.

La tarea es bastante sencilla una vez que hayan planificado como es que desean hacerlo. La planificación es muy importante en este tipo de cosas.

Los emoticons que encontraremos en esta pagina, como podemos ver a continuación, son bastante raros, nuevos y divertidos.

Instalarlos es muy fácil si alguna vez instalaron este tipo de emoticones, pero si nunca lo hicieron, aquí va una breve descripción de como instalarlos (traducción del autor de los emoticones).

Instrucciones de uso

1. Descarga el paquete de emoticones.
2. Usando FTP, subí y sobrescribí tu carpeta “public_html/wp-includes/images/smilies”.

*Pasos adicionales*

3. Abrí el archivo “functions.php” de la carpeta “public_html/wp-includes”, anda a la línea #1333. Modifica a gusto.
4. Si estas usando WordPress 2.3.3, podes usar las funciones modificadas functions.zip del mismo autor.
   
5. Descargar el plugin WP Grin, para que tus visitantes usen los emoticons en sus comentarios.

Ahora bien, ¿cómo sé efectuar el diseño de las aplicaciones web 2.0?

Bueno, yo creo que los diseños deberían hacerse siempre con CSS por varios motivos. ¿Cuáles? Bueno, lean el post a continuación que creo que va a darnos una idea de cuales son las ventajas de utilizar CSS en nuestros diseños. Obviamente, empezaremos por una introducción al tema.

¿Qué son los CSS?

Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar formato a los documentos escritos en HTML (y en otros lenguajes estructurados, como XML) separando el contenido de las páginas de su apariencia. Para el diseñador, esto significa que la información estará contenida en la página HTML, pero este archivo no debe definir cómo será visualizada esa información. Las indicaciones acerca de la composición visual del documento estarán especificadas en el archivo de la CSS.

¿Cómo Funcionan los CSS?

Las Hoja de Estilo no utilizan el archivo de la página Web para especificar el formato de la página (en realidad, a veces pueden hacerlo, pero no es recomendable hacerlo de esa manera). En su lugar, usan un archivo de texto puro con extensión “.CSS” que luego se vincula a la página.

Este archivo contiene reglas que constan de un selector (en este ejemplo, H1) y una o más declaraciones (en el ejemplo tenemos cuatro declaraciones). Cada declaración tiene dos partes: una propiedad (por ejemplo, FONT SIZE) y un valor (en este caso, 19pt). Estas reglas son las que determinan cómo deberá mostrarse la página.

Nuevamente, si quisiéramos componer los encabezados H1 con tipografía Arial, de 19 puntos, en color azul y alineación central, el archivo CSS debería contener el siguiente texto:

H1 {

   font-family: Arial, Sans-serif;

   font-size: 19pt;

   color: #0000FF;

   text-align: center;

}

Luego, en cada página de nuestro sitio agregamos un link a la Hoja de Estilo:

<LINK REL="stylesheet" href="hoja_de_estilo.css" TYPE="text/css">

El elemento LINK especifica:

• el tipo de vínculo: a una hoja de estilo (”stylesheet”)
• la ubicación de la hoja de estilo a través del atributo “href”
• el tipo de hoja de estilo que se vincula: “text/css”

Ahora, todos los encabezado H1 de las páginas que contienen la referencia al archivo de la CSS tendrán el aspecto que hemos definido.

10 razones (o ventajas) para utilizar CSS

1.- Separación del contenido y presentación.

Las hojas de estilo generalmente se encuentran en archivos separados del código principal (html, por ejemplo). Esto nos va a permitir que en un equipo de trabajo, programador y diseñador puedan realizar sus tareas de forma independiente aunque paralela, sin correr el riesgo de que haya interferencias entre ambos, y ello no alterará el resultado final.

2.- Flexibilidad.

Podríamos comparar las hojas de estilo con la ropa que guardamos en nuestros cajones. Nosotros somos los mismos, pero dependiendo de la temporada variamos nuestra apariencia.

En el caso de las hojas de estilo sucede lo mismo: podemos cambiar en cualquier momento alguna parte o la totalidad del diseño de nuestras páginas con sólo modificar nuestra hoja de estilo, sin que ello suponga modificar el contenido.

3.- Unificación del diseño de las páginas del sitio.

Un sitio web, ya sea dinámico o estático, suele estar formado por unas cuantas páginas. Mantener una misma apariencia se puede volver una tarea pesada y tediosa si tenemos que copiar y pegar código cada vez que creemos una página nueva, o que deseemos modificar una misma cosa en todas.

Enlazando a cada una de nuestras páginas nuestras hojas de estilo, agilizamos este proceso y minimizamos el trabajo.

4.- Optimización de los tiempos de carga y de tráfico en el servidor.

Al haber dividido contenido y apariencia obtenemos archivos más ligeros, y esto nos reporta dos beneficios: por un lado, reducimos notablemente los tiempos de carga del sitio en el navegador. A esto debemos unir la capacidad de éste para mantener nuestra hoja de estilo en caché.

Por otro lado, reducimos el volumen de tráfico de nuestro servidor, que siempre es de agradecer, tanto si disfrutamos de servicios gratuitos en que solemos tener cuotas muy reducidas, como si pagamos por tener alojamiento propio.

5.- Precisión o elasticidad.

Desde el momento en que usemos CSS, el tamaño y posicionamiento de los elementos que formen nuestras páginas podrá ser exacto. Podremos indicarle al navegador en qué píxel debe colocar ésta o aquélla imagen, o qué alto y ancho deberá mostrar.

Pero al mismo tiempo, podremos emplear medidas variables o relativas que nos permitan expandir el contenido hasta ocupar la totalidad de la ventana de navegación a nuestro antojo, o contraerla a sólo una parte de la misma, con independencia de la resolución de pantalla del usuario.

6.- Accesibilidad y estructuración.

La combinación de CSS y marcadores descriptivos va a posibilitar que nuestra página se vea correctamente con o sin hoja de estilos, puesto que en cualquier caso, la información se mantendrá estructurada y ordenada.

Esto supone que podrá ser accesible sin ningún tipo de problemas tanto por navegadores antiguos o sin soporte para CSS, como para personas con algún tipo discapacidad.

7.- Limpieza del código fuente.

Si escribimos una hoja de estilo independiente, el código fuente de nuestra web va a resultar menos farragoso y agilizaremos las tareas de localización de las líneas que busquemos.

8.- Compatibilidad y continuidad.

Las reglas establecidas por la especificación CSS-1 fijaron los estándares del diseño, y se mantienen y respetan en la CSS-2. Es de prever que en el nivel 3 sucederá lo mismo con respecto a su predecesor.

Pero lo realmente interesante es que los navegadores que no soporten CSS-3 no tendrán problemas a la hora de asimilar el contenido CSS puesto que siempre les quedará la compatibilidad de CSS-2, o la CSS-1 en su caso. La compatibilidad de las especificaciones CSS anteriores estará siempre garantizada.

9.- Estandarización frente a especificaciones propietarias.

La adopción de estándares por la W3C ofrece la ventaja de la compatibilidad del código entre los diferentes navegadores web. El uso de “soluciones propietarias”, como es el caso de muchas etiquetas o patrones usadas por Microsoft.

En su interpretación de lo que es y no es CSS, dificulta la creación de páginas web, porque supone tener que escribir dos códigos distintos para obtener un mismo resultado, en función del tipo de navegador que use el visitante.

El uso del estándar CSS de la W3C evitará visualizaciones incorrectas de nuestras páginas en distintos navegadores.

10.- Permite la diferenciación de estilos para imprimir / visualizar en pantalla.

El uso de CSS nos va a permitir también maquetar separadamente el contenido de nuestra web para ser mostrado en pantalla o para ser impreso.

Tengamos en cuenta que las necesidades y propiedades de un folio de papel y de un monitor nunca van a ser las mismas, y gracias a CSS podremos determinar cómo queremos que se imprima lo que mostramos en la pantalla, manteniendo siempre una apariencia limpia, ordenada y agradable visualmente.

Espero que estas pequeñas reflexiones hayan servido para animarte a dar el gran salto y vestir a tu web con un bonito traje CSS hecho a medida. Y si aún no te animas a usar CSS en tu sitio, te invitamos a conocer CSS Reinicia, una iniciativa que busca que sitios web en nuestro idioma se reinventen gracias a esta tecnología.

En este articulo, complementando nuestro articulo anterior ¿Qué es RSS y como usarlo?, presentaremos formas de hacer un mejor diseño, usabilidad y colocación de los iconos de RSS en un sitio web; haciendo una recopilación de muchos iconos de RSS que son de libre uso y se encuentran en la web.

Icono estándar de RSS

RSS se usa normalmente en los sitios que se actualizan frecuentemente, así cualquier usuario que este interesado en obtener rápidamente las novedades de ese sitio, puedan obtenerlas. Por lo tanto, es importante que los que visitan un sitio web puedan identificar rápidamente donde están los RSS del sitio. La forma de que un usuario reconozca rápidamente donde están los RSS de un sitio, es reconocer un patrón o una imagen que la identifique fácilmente; ese patrón a reconocer es actualmente el icono estándar de RSS, y por eso este icono es normalmente el mas utilizado para mostrar los mismos.

De todas formas, la web es un lugar ideal para la creatividad y los experimentos, por lo cual vamos a encontrar miles de variaciones y modificaciones al icono estándar que estamos observando. Los diseñadores creativos suelen encontrar soluciones espectaculares para agregar los iconos de RSS a sus diseños, haciendo que estos encajen perfectamente con la estética del sitio.

Ideas para los iconos de RSS

Aquí vamos a poner varias alternativas para los iconos de RSS (y algunas redes sociales), los cuales son bastante interesantes. Si te gusta alguno de estos para tu propio sitio, asegurate de leer las licencias de uso de los mismos antes de agregarlos a tu diseño.

En cambio, si sos diseñador grafico, esto puede ser de gran utilidad para tomar como punto de inspiración a la hora de crear tus propios iconos de RSS. Lo que si hay que tener siempre en cuenta, es que el icono debe ser siempre reconocible mas allá de los experimentos que se tomen a la hora de crear un icono novedoso.

Vallamos a los diferentes modelos de iconos que son poco comunes:

Aquí tenemos un hermoso icono dentro del hermoso sitio de webfruits (valga la redundancia) el cual no es muy común.

Un diseño espectacular para el icono en Dezinerfolio, el cual es atractivo y se encuentra en la parte superior de la pantalla.

En Xyberneticos encontramos un icono de RSS escondido, el cual se entiende muy bien; y gracias a su tamaño y ubicación resulta muy útil.

En Hongkiat podemos ver un icono de RSS azul, el cual se ajusta perfectamente a su diseño.

En Oilman seguimos viendo un icono azul en contraste con el naranja lo cual lo hace mas llamativo.

Aquí, en Bartelme, vemos unos diseños de iconos al estilo notepad.

Un simpático icono con patas en Vikiworks, que si bien esta muy al fondo, cuando llegas a el, es imposible no verlo.

Metalize tiene unos bonitos iconos escondidos que salen a verte cuando los estas seleccionando.

En Comingupforair están estos iconos sostenidos por unos niños. Muy atractivo.

Si bien el ultimo icono es muy grande, se puede ajustar el tamaño del dibujo (como se ve en el mismo blog de Comingupforair) para que no moleste al usuario. Los iconos de RSS deben ser siempre amigables para el usuario, no como el icono más grande del mundo.

¿Dónde incluir tus iconos de RSS?

El diseño mas lindo que puedas encontrar no servirá de mucho si el que visita la página no puede encontrar de forma fácil como suscribirse a tus RSS.

Algunos diseñadores ponen iconos gigantes en el medio de la página, otros ponen sus iconos de RSS en el final de la pagina (haciendo que los usuarios tengan que encontrarlo, y haciéndoles la tarea mas difícil).

La mejor posición para situar tus iconos de RSS es en la pare superior del sitio, lo mas cerca posible del logo de tu pagina. Mientras mas lejos del principio de la pagina este tu icono de RSS, menos suscriptores tendrás en la misma.

Adicionalmente, si los feed están declarados de forma correcta en el código fuente, la mayoría de los navegadores lo reconocerán y le ofrecerán al visitante la opción de agregarse a la suscripción de los RSS. De todas formas, aunque los navegadores puedan encontrar los RSS, agregar iconos visuales no solo sirve para que los visitantes se suscriban; sino que remarcan que la suscripción a los RSS esta disponible.

Como último comentario, se puede decir que la mejor opción a la ora de colocar estos iconos dependerá siempre del diseño que tengamos. No hay una formula mágica para hacerlos efectivos, y el diseñador tendrá que poner un poco de su imaginación para que estos sean atractivos a los usuarios.

Iconos RSS para descargar gratis

Aquí tendremos una lista de muchos iconos de RSS que se pueden encontrar libremente en la web. Todos estos iconos (tanto como este artículo) fueron elaborados gracias a la influencia de otras páginas de las cuales se pudo obtener mucha información.

• Iconos RSS gratis del tipo cristal.
  Set de iconos RSS en varios colores y con efecto cristal. 213 iconos, 8 tamaños, una gran variedad de formatos: AI(5), EPS (16), SVG(1), PNG (64), JPG (128).

• Feedicons
  34 iconos en 32*32 y 16*16 Pixeles – Formato PNG.

• Iconos RSS 3D
  1 Icono en 3D, en 4 tamaños diferentes. Por Dirceu Veiga.

• Iconos circulares
  4 variaciones circulares, en 4 tamaños.

  

• Iconos RSS gratis
  16 Iconos

• 30 Iconos vectoriales gratis

• Iconos RSS
  Aquí hay un solo icono en 8 tamaños.

• Iconos RSS para bloggers guitarristas
  Estilo de púa de guitarra. En formato PSD o PNG.

• Iconos RSS orbitales
  4 Iconos RSS “orbitales”.

• Iconos RSS
  4 Iconos por Valentina Olini

• Botones RSS estilo Web 2.0

• Iconos RSS
  Iconos en tamaño 256×256, 512×512, formato “.png”.

• Iconos RSS: Variaciones del estándar
  Varios templates de RSS por Dirk Metzmacher.

• Noticias RSS
  2 iconos RSS.

• Set de iconos de favoritos sociales
  12 iconos .png, dentro de los cuales hay un icono RSS.

• Paquete de iconos frescos
  Iconos .png, tamaño 256×256. Dentro del cual hay un icono RSS.

• Iconos con profundidad
  Iconos RSS con otra perspectiva. Paquete de Iconos 3D, dentro del cual hay un icono RSS.

• Favoritos sociales Web 2.0
  12 Iconos gratis del estilo “iphone” de favoritos de redes sociales. Dentro de ellos un icono RSS.

• Iconos Web 2.0
  Incluye iconos de tamaño de 48×48 y 32×32.

• WebFruits

Set 1

Set 2

• FeedIcons
  FeedIcons provee una serie completa de estándares de iconos RSS en casi todos los formatos: AI, EPS, SVG, PSD, PSD, PNG, JPG, GIF.

• Iconos RSS animados
  Iconos animados por Abdussamad.

• Icono RSS “Mis Circulos”

• Icono RSS con reflejo

• RSS Acido

• Iconos estilo sucio
  

• RSS Owl

• Iconos RSS Web 2.0

• Iconos RSS de la esquina
  Tamaños disponibles: 256×256, 128×128, 96×96, 80×80, 72×72, 64×64, 48×48, 32×32, 24×24, 16×16

• 51 RSS Icons for weblog

• Iconos 3D planos
  

• Iconos RSS a color por NewsNiche

• Icono RSS por Hopka

• Iconos RSS por StylishLab

• Iconos RSS alternativos por MouseRunner

• Icons RSS

• Coleccion de iconos RSS

• Iconos RSS de NewsFire

• Mini-Iconos RSS por xeddddyx

• Icono RSS por petemh

• Icono RSS Web 2.0 en PSD

• Paquete de Iconos RSS por graphix

• Iconos RSS navideños

• Iconos RSS de corazones

• Icono RSS Lector

• Iconos RSS por kurumizawa

• Iconos RSS por serega

Fuentes

Esta entrada no habría sido posible sin todos los recursos en los que consulte.
Vale aclarar que la misma es una adaptación (y traducción en ciertas partes) del articulo RSS: Best Design Practices And Icons ~ de Smashing Magazine (en ingles).
Otras de las fuentes que fueron consultadas para lograr este post fueron: RSS: kreative Icons für mehr Leser ~ de Dr. Web Weblog (en alemán), Free RSS Feed Icons, The Ultimate List ~ de Hongkiat (en ingles), Over 35 Different Styles of RSS Icons ~ de Design Bliss, tanto como de deviantART.