davidcostales blog

Fuentes Gratuitas para Diseñadores #2

David Costales — Mon, 19 Jul 2010 11:30:00 +0000

Fuentes Gratuitas para Diseñadores es una recopilación de los cinco fuentes gratuitas más atractivas que me he encontrado mientras navegaba o buscaba tipografías. En la recopilación de esta semana tenemos las fuentes de Gentium, Pigiarniq, Delicious, Tallys y Kaffeesatz.

GentiumDescargar fuente

PigiarniqDescargar fuente

DeliciousDescargar fuente

TallysDescargar fuente

KaffeesatzDescargar fuente

Mis Sitios de la Semana #3

David Costales — Fri, 16 Jul 2010 11:30:55 +0000

Mis Sitios de la Semana es una recopilación semanal de los cinco mejores diseños que me he encontrado mientras navegaba o buscaba inspiración. En la recopilación de esta semana tenemos los diseños de MailChimp 5.2, Mobily, Neuromodule Design, Pepperminted y Wonderbra .

MailChimp 5.2Visitiar sitio

MobilyVisitiar sitio

Neuromodule DesignVisitiar sitio

PeppermintedVisitiar sitio

WonderbraVisitiar sitio

Niceforms, mejora tus formularios en segundos

David Costales — Thu, 15 Jul 2010 12:01:10 +0000

Todo el mundo está familiarizado con los formularios web. Cada día tenemos que rellenar determinada información en alguno, realizar una compra o registrarnos en algún sitio web. A través de ellos almacenamos o introducimos datos en la web y por ello han de ser vistosos y accesibles.

Niceforms es una librería en JavaScript que se encarga de mejorar la apariencia de nuestros formularios. El funcionamiento es bastante sencillo; recoge todos los formularios de la página una vez cargada y posteriormente aisla cada elemento con el fin de dotarlo unos estilos propios.

Lo único que tenemos que hacer para que empiece a “funcionar la magia” es incluir las siguientes líneas entre las etiquetas … de nuestro sitio web:

A la hora de modificar el aspecto de estos formularios lo único que tenemos que hacer es remplazar las imagenes que se incluyen en la carpeta /img por las que deseemos. También podemos modificar el archivo CSS a nuestro antojo siempre que mantengamos las directivas marcadas.

Uno de los puntos fuertes de esta librería es que no estamos comprometiendo la accesibilidad de nuestro sitio web, ya que en caso de ocurrir algún problema de carga con el script el formulario se mostraría directamente sin estilos.

Enlace: Niceforms v2

Los 10 mandamientos de un buen logotipo

David Costales — Wed, 14 Jul 2010 11:00:54 +0000

Un logotipo es un concepto, símbolo o elemento gráfico que representa la función principal o la orientación de una determinada compañía, sitio o producto. En otras palabras podríamos decir que un logotipo es el elemento que proporciona retroalimentación a un cliente potencial.

El propósito de un logotipo es hacer que la gente se fije en él y lo reconozca de inmediato. Un buen logotipo es aquel con el que la gente “conecta” desde un primer momento. A continuación os doy unas pequeñas pautas para que estas situaciones puedan ser reales.

Limpieza

Muchos de los logotipos mas conocidos por todo el mundo son muy sencillos. No hace falta dotar a un símbolo con muchos colores, formas o símbolos, cuanto más claro y directo sea mejor. A veces menos es más y en la práctica esto se cumple.

Pegadizo

Necesitas un logotipo que se quede impresionado en la cabeza de la gente desde la primera vez que lo vea. Tiene que llamar la atención pero a la vez no ser demasiado extravagante, ser agresivo pero a la vez sutil…

Sin fecha de caducidad

Las nuevas generaciones van y vienen, pero un logotipo tiene que prevalecer en el tiempo atendiendo a la moda que venga.

Por ejemplo, el logotipo de Coca-Cola fue creado en 1885, de eso hace 125 años. A la hora de rediseñar un logotipo hay que ser cuidadosos, si se altera completamente su diseño a la gente le podría costar volver a identificar nuestro logotipo. ¿Y si lo hubiese hecho Coca-Cola?

Memorable

Ha de seguirse de cerca el principio de simplicidad, el de ser recordado. Para que un diseño sea efectivo ha de ser memorable. Lograremos esto simplemente teniendo un logotipo apropiado. ¿Cómo? eso ya dependerá de cada uno conseguirlo y de la aceptación de la gente.

Apropiado

La forma del logotipo ha de ser apropiada para los fines previstos. Por ejemplo, si se quiere diseñador un logotipo para guardar los juguetes de los niños, sería apropiado utilizar un tipo de letra infantil y esquema de color acorde. Esto no sería tan apropiado para una tienda de electrónica.

Ajustable

A la hora de crear un logotipo tenemos que pensar en el como en un todoterreno, adaptable a cualquier superficie. Que sea reconocible tanto en una página web, como en un periódico (blanco y negro) o en cualquier otro medio.

Significativo

Los logotipos de “alto nivel” siempre tienen algún detalle escondido relacionado con el negocio que representan.

Pensar en el logotipo de FedEx, ¿veis la flecha escondida entre la E y la X? ese elemento no está ahí por casualidad.

Lo subliminal o inconsciente es un recurso habitual en el diseño y la publicidad basado en estudios psicológicos. En este caso se utiliza el principio del cierre de la Gestalt, que defiende que nuestra mente reacciona ante patrones que le son familiares, incluso cuando la información recibida es incompleta.

Universal

Idiomas, tendencias, y otros aspectos que un logotipo incorpora puede cambiar de un lugar a otro. Un logotipo debe tener detalles en él que no varíen, de forma que si se “exporta” a otra cultura se siga identificando como el mismo producto.

Fuente o símbolo

A la hora de diseñar un logotipo podemos utilizar tanto texto como imágenes (símbolos), pero hay que saber combinar estos dos elementos sin que destaque uno más que el otro.

Astucia

Los logotipos más interesantes están diseñados de tal forma que con solo echarle un vistazo a sus elementos ya sabemos de que tipo de empresa se trata.

Mis Sitios de la Semana #2

David Costales — Fri, 09 Jul 2010 14:00:53 +0000

Mis Sitios de la Semana es una recopilación semanal de los cinco mejores diseños que me he encontrado mientras navegaba o buscaba inspiración. En la recopilación de esta semana tenemos los diseños de Forest Edge Music Festival, Amy Herndon, Aaron Hall, Glitch y WPBundle.

Forest Edge Music FestivalVisitiar sitio

Amy HerndonVisitiar sitio

Aaron HallVisitiar sitio

GlitchVisitiar sitio

WPBundleVisitiar sitio

10 Aplicaciones de escritorio para Bloggers

David Costales — Wed, 07 Jul 2010 11:00:29 +0000

He recopilado esta lista con diez aplicaciones que harán más sencilla nuestra vida de blogger. De esta forma no necesitaremos salir de nuestro escritorio de Windows o MacOs para editar, borrar, publicar o moderar los comentarios de nuestras noticias.

Mars Edit 3Visitar sitio

Mars Edit 2 es otra aplicación que nos permite publicar contenido, en nuestros blogs, desde nuestro escritorio. Tiene un interfaz muy buena que se adapta perfectamente al diseño de MacOs. No es gratuita, aunque podemos descargarnos la versión de prueba de 30 días. Solo disponible para MacOs.

EctoVisitar sitio

Poderoso, fácil de usar, popular… así es como describen a Ecto sus propios desarrolladores. Capaz de soportar la inmensa mayoría de sistemas de blogs existentes, realmente es fácil de usar y mejorará mucho nuestro flujo de trabajo a la hora de escribir un post. Es totalmente gratuito y solo está disponible para MacOs.

QumanaVisitar sitio

Qumana es una aplicación que nos permite publicar contenido en un gran número de blogs. Entre sus funciones podemos destacar: gratuita, edición total sin conexión a internet, soporte para varios blogs, inserción de imágenes, corrección ortográfica, multiplataforma y opción de tags para Technorati. Además dispone de una amplia documentación que nos ayudará a resolver cualquier problema.

BlogoVisitar sitio

Blogo es un editor de blogs para Mac. Permite publicar texo, imágenes, videos, y mucho más. Soporta todo tipo de plataformas para blogs: WordPress, Blogger, Typepad, Typo, Drupal, Joomla, y Expression Engine. Es de pago y se puede adquirir por 25$.

W.BloggarVisitar sitio

W.Bloggar es una buena opción para los bloggers que trabajen con sistemas operativos de Microsoft. Es totalmente gratuita y tiene soporte para varios idiomas (inglés, brasileño, alemán, español y francés ). Goza de multitud de funciones que nos ayudarán a publicar noticias de forma rápida y eficaz.

BlogDeskVisitar sitio

BlogDesk también necesita plataforma Windows para funcionar. Una sencilla aplicación disponible en varios idiomas y que viene optimizada para sistemas WordPress, MovableType, Drupal, Serendipity y ExpressionEngine. Es totalmente gratuito y libre de cargos.

RavenVisitar sitio

Esta aplicación desarrollada por Zoundry es capaz de publicar en prácticamente todas las plataformas de blogs existentes. Gratuita y disponible solamente para Windows.

FlockVisitar sitio

Flock, el navegador social, nos ayudará en el mantenimiento de nuestros blogs permitiéndonos postear directamente desde el propio navegador. Capaz de integrarse con nuestra cuentas de Delicious, Facebook, Flickr, StumbleUpon, YouTube o Twitter. Gratuito, multiplataforma y traducido a muchos idiomas.

WordPress NotifierVisitar sitio

WordPress Notifier es una pequeña aplicación que se integra con nuestra sistema WordPress, permitiéndonos moderar los comentarios directamente desde el escritorio de Mac. Podemos configurar la frecuencia con la que nos muestra l as notificaciones y si queremos que muestre dichas notificaciones con Growl.

ModeratorVisitar sitio

Fantástica aplicación de escritorio, desarrollada para Adobe Air, que nos permite ver y moderar los comentarios de nuestro blog. Consta de un sistema de notificaciones. Nos permite editar, borrar y marcar como spam los comentarios. Muestra los avatares de Gravatar de quién ha posteado. Es gratuita y multiplataforma.

Fuentes Gratuitas para Diseñadores #1

David Costales — Mon, 05 Jul 2010 11:00:00 +0000

Fuentes Gratuitas para Diseñadores es una recopilación de los cinco fuentes gratuitas más atractivas que me he encontrado mientras navegaba o buscaba tipografías. En la recopilación de esta semana tenemos las fuentes de Brig Maven, Ogirema, Harabara, Libel Suit y Neighbourhood.

Brig MavenDescargar fuente

OgiremaDescargar fuente

HarabaraDescargar fuente

Libel SuitDescargar fuente

NeighbourhoodDescargar fuente

Mis Sitios de la Semana #1

David Costales — Fri, 02 Jul 2010 11:00:31 +0000

Mis Sitios de la Semana es una recopilación semanal de los cinco mejores diseños que me he encontrado mientras navegaba o buscaba inspiración. En la recopilación de esta semana tenemos los diseños de Kaleidoscope, Go Mammoth, Eletrro Luce, Marah Creative y Abbacus.

KaleidoscopeVisitiar sitio

Go MamothVisitiar sitio

Elettro LuceVisitiar sitio

Marah CreativeVisitiar sitio

AbbacusVisitiar sitio

Consideraciones previas a la hora de abrir un blog

David Costales — Thu, 01 Jul 2010 10:00:54 +0000

A este artículo podríamos considerarlo una segunda parte del de presentación del blog. Es algo de lo que se me ocurrió hablar mientras trabajaba en el nuevo diseño de este sitio. No son más que unos cuantos consejos que te ayudarán en la aventura que supone empezar con un blog.

Busca la plataforma adecuada

Lo primero que tenemos que tener en cuenta es a través de qué plataforma queremos comunicarnos. En internet hay multitud de opciones que nos permiten crear nuestro propio blog de manera fácil y efectiva. Depende ya de cada uno escoger la opción que mejor le convenga dentro de sus necesidades.

Si cuentas con un dominio y un alojamiento propio puedes probar alguna de estas opciones:

Si, por el contrario, no cuentas con un alojamiento propio o simplemente no quieres complicarte la vida puedes crear tu página a través de los siguientes servicios:

Decide que temática vas a tratar

Saber que temas vas a tratar en tu blog es muy importante de cara a buscar sobre que escribir. También tendrá que ver mucho con el diseño final que vaya a tener tu blog, no es lo mismo hablar sobre de deportes que sobre cine (en lo que a diseño se refiere). Intenta buscar algo que te defina o te apasione, al fin y al cabo estoy no deja de ser un hobbie.

No te preocupes de si ya hay muchas paginas con tu misma temática, tienes que hablar sobre lo que sabes y te gusta. No te encierres solo en un tema, si algún día quieres escribir sobre algo que no tenga nada que ver con tu blog, hazlo, a tus lectores no les molestará.

Avisa del lanzamiento en tus redes sociales

Hoy en día, las redes sociales son parte integral de un sitio web. No esperes al último momento para registrarse y configurar tus cuentas de Facebook o Twitter.

Esto garantizará que tu nombre de cuenta preferido estará disponible antes del lanzamiento y dotará a tus visitantes de una forma diferente de comunicarse para llegar hasta tu pagina.

Es importante avisar a tus amigos o “conocidos sociales” de que vas a lanzar un nuevo blog. De esta forma estarán enterados del día de apertura y seguramente ganaras algún lector. Cíñete a la fecha marcada y no te desvies de ella, hay que empezar dando buena imagen.

Sindicaliza y analiza el comportamiento de tus usuarios

Una parte fundamental en la vida de un blogger es estudiar y analizar las estadísticas de acceso que tiene su blog. Abarcando tanto visitas ordinarias como suscritos al Feed RSS.

Para esto existen servicios muy buenos que nos ayudarán en esta tarea:

A través de estas utilidades podremos estudiar el comportamiento de nuestros lectores y visitantes: que temas les interesan más, a través de que motores de búsquedas llegan a nuestro blog, palabras claves que ingresan en los buscadores, etc…

Escribe contenido para al menos un mes

Los principios de un blog son muy complicados, como de cualquier cosa en la vida, por lo cual siempre es bueno tener el almacén bien lleno de noticias. Antes de abrir tu blog es importante tener “fondo de armario”, lo más conveniente en estos casos es tener al menos noticias para un mes completo en el momento de lanzar tu pagina. De esta manera no te agobiarás mucho al principio hasta que vayas cogiéndole el truco al mundo del blogging.

También puedes plantearte escribir artículos periódicos, series de artículos semanales que te resultará más sencillo realizar ya que tienes una base sobre la que trabajar. Algunos ejemplos pueden ser:

Páginas favoritas de la semana
Aplicación de la semana
Tweets de la semana

Es un recurso que utilizan muchos blogs influyentes de internet y que puede resultarnos muy útil. Probablemente esto te ayude también a documentar mejor tus artículos lo que a la postre será positivo para tu nuevo blog.

Proporciona a tus lectores formas sencillas de contacto

Después del lanzamiento de tu pagina tienes que proporcionar a los visitantes una forma facil de comunicarse y ponerse en contacto contigo. Tus visitantes iniciales serán los mas importantes, ellos serán los primeros en “testear” tu pagina y te podrán proponer cosas para mejorar tu sitio para los futuros usuarios.

Medios de contacto para tus lectores:

Facebook
Twitter
Correo electrónico
Formulario de contacto convencional

Consejos generales

Se constante.
Escribe contenido original
No te obsesiones. Que el blog no te domine, dominale tu a el.
Calidad mejor que cantidad. No escribas muchas noticias poco elaboradas, escribe pocas y buenas.
Una vez publicado el blog no te olvides de las redes sociales, serán muy importante en el crecimiento de tu página. Ten a tus seguidores y amigos informados en todo momento.

Esto no es una ciencia exacta, a algunos les funcionará y a otros no. Pero seguro que siguiendo estos sencillos consejos te llevarás más de una alegría. Os invito a que compartais vuestras propias experiencias.

7 Galerías de imágenes desarrolladas en jQuery

David Costales — Wed, 30 Jun 2010 10:00:40 +0000

Las galerías de imágenes se han hecho muy populares en Internet a lo largo de los últimos años. Muchos desarrolladores han creado estupendos scripts que comparten de forma gratuita con todo el mundo. En esta recopilación podéis encontrar las siguientes galerías, desarrolladas en jQuery: Galleriffic, Supersized, Galleria, GalleryView, Space Gallery, TinySlideShow y AD Gallery.

GallerifficVisitar sitio

SupersizedVisitiar sitio

GalleriaVisitiar sitio

GalleryViewVisitiar sitio

Space GalleryVisitiar sitio

TinySlideShowVisitiar sitio

AD GalleryVisitiar sitio

Toma el control de tus Feeds en WordPress

David Costales — Tue, 29 Jun 2010 12:00:23 +0000

Las opciones que trae por defecto WordPress sobre los Feeds están bien a nivel de usuario medio, pero hay veces que necesitamos modificar algo para personalizarlo a nuestro gusto. Por ello me he tomado la libertad de realizar este artículo, en el que tomaremos el control de los Feeds de WordPress de forma sencilla.

En este artículo vamos a trabajar con el archivo functions.php de nuestra plantilla y el fichero .htaccess de nuestro servidor local o remoto.

Deshabilita todos los Feeds

A veces queremos hacer pruebas con nuestro WordPress y no queremos que estas se muestren en nuestro Feed, o simplemente el CMS con otros fines que no incluyen noticias. Para estos casos, y otros muchos más, hay una forma de inutilizar el Feed.


function fb_disable_feed() {
	wp_die( __('Actualmente el Feed está desactivado!') );
}
add_action('do_feed', 'fb_disable_feed', 1);
add_action('do_feed_rdf', 'fb_disable_feed', 1);
add_action('do_feed_rss', 'fb_disable_feed', 1);
add_action('do_feed_rss2', 'fb_disable_feed', 1);
add_action('do_feed_atom', 'fb_disable_feed', 1););

Controla cuando quieres que tus artículos sean visibles en el Feed

Cuando publicamos un artículo este se muestra inmediatamente en nuestro Feed. Esto es un problema si después de ser publicado queremos modificar alguna cosa, pues en el Feed aparecerá el original y no el modificado.


function publish_later_on_feed($where) {
	global $wpdb;
	if ( is_feed() ) {
		$now = gmdate('Y-m-d H:i:s');
		$wait = '5';
		$device = 'MINUTE'; // MINUTE, HOUR, DAY, WEEK, MONTH, YEAR
		$where .= "AND TIMESTAMPDIFF($device, $wpdb->posts.post_date_gmt, '$now') >$wait";
	}
	return $where;
}
add_filter('posts_where', 'publish_later_on_feed');

Por defecto, retrasa la visibilidad de los artículos en el feed cinco minutos, pero podemos modificarlo a nuestro gusto cambiando el valor de la variable $wait, teniendo en cuenta también la variable $device, por si queremos usar otra medida de tiempo.

Excluye una categoría del Feed

Este hack es válido si por ejemplo hacemos uso de Minipost y no queremos que estos se muestren directamente en el Feed, o simplemente una categoría menor que no queramos mostrar directamente en el Feed a nuestros lectores.


function exclude_cat_feed($query) {
    if ($query->is_feed) {
        $query->set('cat','-5'); // ID de la categoria
    }
return $query;
}
add_filter('pre_get_posts','exclude_cat_feed');

Lo único que tendremos que hacer es averiguar el ID de la categoría que queramos excluir. Lo haremos a través del panel de administración, Entradas > Categorías y editaremos la categoría deseada. En la barra de dirección de nuestro navegador aparecerá algo similar a …/categories.php?action=edit&cat_ID=45, siendo 45 el ID de dicha categoría. Ahora solo hará falta modificar el valor $query->set(‘cat’,'-5′); por $query->set(‘cat’,'-45′); en este caso.

Redireccionando nuestro Feed a FeedBurner

Existen Plugins para WordPress que cumplen esta función, pero hay veces que nos gusta hacer las cosas nosotros sin ayuda externa. La forma de hacerlo es editando el fichero .htaccess de nuestro servidor. Lo primero que haremos será hacer una copia de seguridad del mismo, por si tocamos algo que no debemos. Después añadiremos las siguientes líneas, modificando previamente TU_BLOG por lo que deseemos.


# temp redirect wordpress content feeds to feedburner

 RewriteEngine on
 RewriteCond %{HTTP_USER_AGENT} !FeedBurner    [NC]
 RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
 RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds.feedburner.com/TU_BLOG [R=302,NC,L]

Otra opción mas sencilla es utilizar un plugin, como puede ser FD FeedBurner Plugin y hacerlo todo desde nuestro Dashboard.

Añade contenido adicional a tu Feed

Puede llegar el momento en el que queremos añadir publicidad, un mensaje o cualquier otra cosa en nuestro Feed, pero que a la vez no se muestre en el artículo original del blog. Tan solo habrá que modificar la variable $content e incluir el contenido que deseemos.


function insert_anything($content) {
    $content = $content.'¿Has visitado davidcostales blog hoy?';
    return $content;
}
add_filter('the_excerpt_rss', 'insert_anything');
add_filter('the_content_rss', 'insert_anything');

Mostrar el número de lectores de Feedburner en texto plano

No a todos nos gustan los contadores de suscritos que nos ofrece FeedBurner y queremos mostrarlos a nuestro gusto. Para este fin haremos uso del siguiente código:


function feedburner() {
	$fburl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=TU_BLOG";
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_URL, $fburl);
	$stored = curl_exec($ch);
	curl_close($ch);
	$grid = new SimpleXMLElement($stored);
	$rsscount = $grid->feed->entry['circulation']
	$rsscount = number_format($rsscount);
	$rsscount = str_replace(",",".",$rsscount);
	echo $rsscount;
}

Lo primero que debemos hacer es modificar TU_BLOG por lo que deseemos y guardar los cambios en nuestro archivo functions.php. Para mostrar el resultado pegaremos < ?php feedburner();?> en nuestra plantilla.

Lavado de cara y mejoras en el blog

David Costales — Mon, 28 Jun 2010 16:30:10 +0000

Como ya habéis podido comprobar el diseño del blog ha cambiado. Era una tarea que tenía pendiente y que al final la he podido completar. Llevo casi tres meses trabajando en este nuevo diseño, haciendo un poco cada día, tomándome mi tiempo y sin apurarme para terminarlo. El resultado es este, espero que os guste.

Rediseño completo

Lo primero que debía hacer era renovar por completo el diseño, era más fácil empezar de cero que trabajar sobre lo que ya había. Hice una lista con los blogs que más me inspiraban y me puse a trabajar con Photoshop.

Este proceso ha sido largo, cada día pensaba en nuevas ideas y modificaba algo en el diseño. Lo mismo ha pasado a la hora de maquetar la página, he modificado muchas veces el diseño original hasta llegar a lo que estáis viendo ahora.

Me decante por tonos grises y blancos ya que me resultaban muy relajantes a la hora de presentar los artículos (también pensé en trabajar con tonos marrones, aunque terminé desechando la idea). Noté una falta de color en el diseño, lo que me llevó a dotar con tonos rojos tanto el logotipo como los enlaces de las entradas.

Nueva estructura

También quería modificar por completo la antigua estructura y como estaban organizados los posts, además, quería incluir la opción de filtrar por temas (tags). Una vez más me fijé en los principales blogs de diseño y en como tenían estructurada su página.

El resultado fue separar el blog en cinco secciones principales:

Artículos
Inspiración
Recursos
Tutoriales
Archivo

Pequeñas mejoras

Cuando terminé con el proceso de diseño y maquetación me propuse mejorar el resultado final, añadiendo pequeñas mejoras y nuevas funcionalidades.

Intenté optimizar lo máximo posible el proceso de carga del blog, añadí la función de Twitter Anywhere a los comentarios, hice uso de Thumbnails para presentar las entradas y le di el último retoque al diseño para hacerlo lo más atractivo posible.

Publicaciones semanales

En principio, y si el tiempo me lo permite, tengo pensado publicar una serie de posts semanales:

Mis Sitios de la Semana
Fuentes gratuitas para diseñadores
Artículo, Recurso o Tutorial

Todo esto dependerá, como ya he dicho, de como evolucione cada semana y del tiempo libre que me quede para poder publicar nuevos artículos.

NOTA: El blog todavía esta un poco en “fase beta” por lo que si encontrais cualquier error podéis reportármelo en un comentario.