Blog and Web

En esta ocasión he creado un pequeño tutorial para realizar un banner con estilo grunge, la idea es repasar lo que hemos aprendido sobre contraste y legibilidad. Empecemos por descargar el archivo “texturas banerBW.zip” donde tendrás el archivo para poder trabajar este tutorial.

Para hacer este banner usaremos Adobe Photoshop y Adobe Illustrator CS4, pero las funciones que utilizaremos pueden usarse desde la versión CS de estos programas así que si no tienes las versiones actuales no hay problema.

Texturas de papel

En este paso usaremos tres texturas de papel , abre el archivo Texturas bannerBW.psd. Hay un sin fin de lugares donde puedes encontrar texturas de este tipo, pero si tienes al oportunidad de escanear o tomar fotos también es muy bueno, la idea es jugar con las texturas, con las posibilidades que el modo de capa nos da, como lo es ” multiply”, “hard ligth” y demás tipos, las opacidades también pueden servir.

En este caso use 4 texturas, como lo puedes ver en el archivo y veras como jugué con los tipos de capa y sus opacidad para lograr la textura que busco .No hay limite de posibilidades, pero lo ideal es no excederse con el numero de layers que al final eso hará que tu RAM se sobrecargue).

Una vez concluida tu experimentación con las texturas te recomiendo unir las capas, da click en el de la parte izquierda de la ventana de Layer→Merge Visble.

Poniendo tipografía

Ahora ponemos tipografía, damos doble click en la ventana de color y agregamos nuestro texto elige el color #4b2617; en este caso use la Defused que pues descargar de dafont.com con un estilo muy destroy, luego en el Menú Layer→ Layer Style.

Ponemos los siguientes valores en la las opciones Drop Shadow.

Ahora toca poner el subtitulo o descripción del sitio, para esta tipografía puedes usar alguna que sea serif y haga un buen contraste,usando el color #4b2617 y ponemos los siguientes valores para Drop Shadow ( Menú Layer→Layer Style).

Continuar leyendo →

Bold Life es un diseño originalmente creado para WordPress por Get a custom design, y portado a Blogger por BTemplates y Blog and Web. Tiene dos columna, soporte para página estáticas, configuración de colores desde el panel, incluye archivo PSD y un excelente uso de la tipografía.

Descargar

Download: Bold Life para Blogger | Demo | Archivo PSD

WordPress: Download

Instalación

Para instalarla consulta el videotutorial y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

Menú

Para agregar enlaces al menú basta con crear página estáticas desde el panel.

Fecha

Cambia el formato de cabecera de fecha (Inicio → Configuración → Formato → Formato de cabecera de fecha) por la penúltima opción.

Licencia

Licenciado bajo GPL Puedes usar, traducir, convertir, modificar o distribuir una copia de esta plantilla, dejando intactos los créditos (sin quitar o agregar enlaces en ellos).

El RSS es excelente herramienta de distribución de contenidos. Es flexible, pero no hay tantas herramientas para su administración. Una tarea relativamente común con los feed’s es unir dos o más en uno solo. Por ejemplo, cuando un mismo sitio tiene dos instalaciones de WordPress, cuando tenemos más de un blog o bien, para unir el feed de todos los servicios sociales en uso.

Existen servicios externos que hacen la función, pero varios han quedado offline y otros más no funcionan tan bien como se quisiera. Además, queda el riesgo de que también desaparezcan por ser servicios "pequeños".

Hasta ahora el método más sencillo y estable que encontré es el de Yahoo! Pipes.

Unir feeds con Yahoo! Pipes

1. Entra en Yahoo! Pipes y crea un nuevo pipe (Create a pipe).

2. En la barra lateral veras todos los módulos disponibles. Arrastra uno del tipo "Fetch feed" (Sources → Fetch feed).

3. Agrega la URL de todos feeds que deseas unir.

4. Agrega un operador "Sort" (Operators → Sort), para ordenarlos por fecha de publicación (item.pubDate → descending). Ahora conecta la salida del módulo Fetch feed con el modulo Sort y la salida del módulo Sort con la salida del Pipe (Pise Output). La imagen de arriba lo ejemplifica.

5. Guarda los cambios (Save) y corre el pipe (Run pipe …). Ahora, en esta nueva página tendrás un previo del resultado y un enlace del nuevo Feed compuesto.

La URL resultante es algo como:

http://pipes.yahoo.com/pipes/pipe.run?_id=7bb5377e17a2091d2cc8cd22b000a95a&_render=rss

Por lo que conviene usar Feedburner y de este modo tener una URL más amigable y la información estadísticas y ventajas correspondientes.

Uno de los inconvenientes de este método es que Yahoo! Pipes borra el autor de cada artículo, en parte obvio, pues al ser feeds distintos podrían ser autores distintos.

Aunque puede parecer complicado si nunca has usado Yahoo! Pipes, en realidad es bastante intuitivo y fácil de seguir.

Notepad es un diseño originalmente creado para WordPress por N.Design, y portado a Blogger por BTemplates y Blog and Web. Es un diseño sencillo pero bastante legible y bien diseñado. Tiene dos columna, espacio para servicios sociales, soporte para página estáticas y configuración de fuentes y colores desde el panel.

Descargar

Blogger: Download Notepad | Demo

WordPress: Download Notepad | Demo

Instalación

Para instalarla consulta el videotutorial y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

Menú

Para agregar enlaces al menú basta con crear página estáticas desde el panel.

Servicios sociales

En el código (Inicio → Diseño → Edición de HTML) de tu plantilla busca:

<!-- Twitter -->
<a href='http://twitter.com/btemplates'><img alt='Twitter' src='http://1.bp.blogspot.com/_Zuzii37VUO4/S3e-sm7lwqI/AAAAAAAAEew/t-vJQW8WlPY/s1600/twitter.png'/>Twitter</a>

<!-- Facebook -->
<a href='http://www.facebook.com/bloggertemplates'><img alt='Facebook' src='http://4.bp.blogspot.com/_Zuzii37VUO4/S3e-sgbsENI/AAAAAAAAEe0/Q3jlgSzzDTg/s1600/facebook.png'/>Facebook</a>

<!-- Flickr -->
<a href='http://www.flickr.com/photos/fcovicente'><img alt='Flickr' src='http://4.bp.blogspot.com/_Zuzii37VUO4/S3e-sQixx3I/AAAAAAAAEes/YCWP9uP-ad0/s1600/flickr.png'/>Flickr</a>

<!-- RSS -->
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img alt='RSS' src='http://3.bp.blogspot.com/_Zuzii37VUO4/S3e-sRr0FNI/AAAAAAAAEeo/NKEKZC-vGDQ/s1600/rss.png'/>RSS</a>
</p>

Cambio todos los enlaces href, por los tuyos.

Fecha

Cambia el formato de cabecera de fecha (Inicio → Configuración → Formato → Formato de cabecera de fecha) por la penúltima opción.

Licencia

Licenciado bajo GPL Puedes usar, traducir, convertir, modificar o distribuir una copia de plantilla, dejando intactos los créditos (sin quitar o agregar enlaces de los créditos).

Llegó Google Buzz, un nuevo intento de Google por tener parte de las interacciones en tiempo real y vincular sus servicios entre si. Seguramente en estos momentos no hay tantos usuarios en Google Buzz como en las redes social por excelencia, pero desde ya, puedes ofrecer un botón para compartir tus artículos en Google Buzz.

Para WordPress

En los archivos donde quieras mostrar el botón (por ejemplo single.php) agrega el siguiente código:

<a href="http://www.google.com/reader/link?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" rel="bookmark">Buzz!</a>

Puedes incluirlo en todos los archivos donde muestras los servicios para marcación de favoritos, la única condición es que quede dentro del Loop.

Para Blogger

Si ya haz agregado otros servicios de marcadores sociales, el proceso es similar, e igual al botón de compartir en Twitter.

En el código de tu plantilla (Inicio → Diseño → Edición de HTML → Expandir plantillas de artilugios) busca:

<p class='post-footer-line post-footer-line-3'>

Justo abajo agrega el siguiente código:

<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&amp;title=" + data:post.title'>Buzz!</a>

Cuida que todas las etiquetas se abran y cierren correctamente.

Anotaciones

Si agregas este código a una lista de marcadores existentes, adáptalo a su formato; suele ser listas no numeradas, así que es posible tengas que las etiquetas <li> y </li>.

Como tal, el código en este post es solo un enlace, si quieres mostrarlo como un botón, en lugar de vincular al texto "Buzz!", vincula una imagen como la propuesta por savedelete:

O mashable:

Quizá es un poco temprano para saber si Google será una herramienta atractiva de promoción, al menos tan atractiva como para regalarle un espacio en cada artículo; Ya Goolge Bookmarks demostró que no porque sea Google, será popular. Por lo pronto, blogs como Mashable ya lo integraron.

Tú qué opinas ¿Google Buzz se volverá una herramienta popular?