Añadir iconos de fechas y burbujas con números de comentarios en los link hacia tus post

3 comentarios CSS, WordPress, Diseño Web

tipscomen.jpg

Date Badges and Comment Bubbles for Your Blog, una atractiva forma para resaltar nuestros últimos artículos, añadiendo icono de fechas y, a continuación, burbujas en el numero de nuestros comentarios. La idea es muy original, y sin duda, ayudara a resaltar aun más el contenido de este tipo de secciones destinadas para este fin.

Ver demo en Yoast - Mas info css-tricks
Nuestro estilo

PLAIN TEXT
CSS:
  1. p.date {
  2.     width: 42px;
  3.     height: 10px;
  4.     padding: 18px 0 14px 0;
  5.     text-align: center;
  6. }
  7.  
  8. p.date span { display: none; }
  9.  
  10.  
  11. /************************************************
  13. *   iconos para cada mes                           *
  15. ************************************************/
  16.  
  17. .month1 { background: url(images/cal_01.gif) no-repeat 0 0; }
  18. .month2 { background: url(images/cal_02.gif) no-repeat 0 0; }
  19. .month3 { background: url(images/cal_03.gif) no-repeat 0 0; }
  20. .month4 { background: url(images/cal_04.gif) no-repeat 0 0; }
  21. .month5 { background: url(images/cal_05.gif) no-repeat 0 0; }
  22. .month6 { background: url(images/cal_06.gif) no-repeat 0 0; }
  23. .month7 { background: url(images/cal_07.gif) no-repeat 0 0; }
  24. .month8 { background: url(images/cal_08.gif) no-repeat 0 0; }
  25. .month9 { background: url(images/cal_09.gif) no-repeat 0 0; }
  26. .month10 { background: url(images/cal_10.gif) no-repeat 0 0; }
  27. .month11 { background: url(images/cal_11.gif) no-repeat 0 0; }
  28. .month12 { background: url(images/cal_12.gif) no-repeat 0 0; }
  29.  
  30.  
  31.  
  32. /************************************************
  34. *   Burbuja con numero de comentarios*
  36. ************************************************/
  37. .shield {
  38.     position: relative;
  39. }
  40. .commentscloud {
  41.     position: absolute;
  42.     text-align: center;
  43.     top: -4px;
  44.     left: 22px;
  45.     width: 30px;
  46.     height: 24px;
  47.     padding: 3px 0;
  48.     background: url(images/bubble.png) no-repeat 0 0;
  49. }

Implementarlo en wordpress

PLAIN TEXT
PHP:
  1. <div class="shield">
  2.     <p class="date month<?php the_time('n'); ?>">
  3.         <span><?php the_time('F'); ?></span>
  4.         <?php the_time('j'); ?>
  5.         <span><?php the_time('S'); ?></span>
  6.     </p>
  7.     <div class="commentscloud">
  8.         <?php comments_number('0', '1', '%'); ?>
  9.     </div>
  10. </div>

Compartelo

Coquette Icons - 50 Iconos PNG by dryicons

2 comentarios Iconos, Recursos Web

coquettte.jpg

Coquette Icons un set de iconos muy atractivos para cualquier proyecto web. Son alrededor de 50 iconos totalmente gratuitos, vienen en diversas resoluciones 16x16px, 32x32px, 48x48px, 64x64px y 128x128px. Y en formato PNG (32-bit transparency).
Descarga paquete en ZIP (opción PNG) o descárgalos de forma individual desde aquí.

Compartelo

Wppal - Wordpress Layout Generator

3 comentarios WordPress, Recursos Web, Generadores, Diseño Web

wplogo.jpg

Para todos aquellos que se les suele dificultar o no se atreven a editar themes wordpress, llega otra buena opción para facilitarles dicho trabajo. wppal.com una herramienta que nos permitirá editar nuestro Themes wordpress de manera online de una forma sumamente simple a medida que vamos observando cada cambio realizado en tiempo real. Podremos editar los tonos de nuestro sidebar, header, fuentes, etc. wppal.com por el momento posee 6 themes que podremos editar completamente, pero si tienen algún theme que les gustaría recomendar, pueden hacerlo tranquilamente desde la opción “Suggest a Theme” y luego esperar que sea incluido al sistema. Quizás para algunos, las opciones puedan parecer mínimas, pero aun siendo mínimas, wppal puede ser un recurso extraordinario para otras que poseen pocos conocimientos. De todas formas, quiero creer que en futuro podremos encontrar otro tipo de personalizaciones, ej ancho de sidebar, columnas, etc que hagan a wppal.com aun mucho más interesante, sin duda estarán trabajando en ello.
Una vez que hemos editado cada una de las secciones a nuestro gusto, basta con dar en la opción SAVE para guardar los cambios y posteriormente pasar a descargar el theme completo en un archivo Zip o bien, tan solo la hoja de estilo generada. Muy simple ¿verdad?

Enlace wppal.com

Compartelo

Pattern Cooler - Generador de Patrones para tus proyectos online

1 Comentario Patterns, Generadores, Diseño Web

cooler.jpg

PatternCooler, una aplicación online que nos permitirá crear patrones de la forma más sencilla posible. Posee una amplia variedad de alternativas a las cuales luego podremos editarlos añadiendo nuestros propios tonos o cambiando resoluciones. Cada nuevo diseño que deseemos crear, luego podremos compartirlos con los demás usuarios de la misma forma que nosotros podremos descargar los diseños creados por ellos. Una buena forma de compartir ideas y obtener recursos para diseños futuros.

Enlace PatternCooler

Compartelo

10 Handwritten fonts

8 comentarios Fuentes

fonther.jpg

Una selección de 10 fuentes Handwritten muy atractivas para sus proyectos web. Podrán descargar de forma individual cada una de ellas y utilizar como prefieran. De todos los diversos estilos de fuentes que podemos llegar a conocer, en mi caso particular, admitió que soy un fanático de las Handwritten (mano alzada), aunque claro está, más allá de mis gustos, vale recalcar que una buena selección de tipografías siempre es aquella que va en armonía con el diseño y es capaz de interpretar lo que intentamos transmitir con nuestro diseño.

Enlace 10 Handwritten fonts you can't miss by Woork

Compartelo

Tabs usando jQuery by nettuts

2 comentarios WordPress, Recursos Web, Tutoriales, Diseño Web

tabsj.jpg

Para aquellos que deseaban crear TABS para sus blogs con efectos realmente llamativos gracias a la utilización de bibliotecas como jQuery en ellos, nettuts ha preparado un extraordinario tutorial muy simple de seguir, y con el cual aprenderan a montarlo y conocer como diseñarlos desde cero. También podrán descargar los archivos correspondientes al demo que podremos ver funcionando. No tengo dudas, que les agradara.

Ver Demo - Descarga - Mas info Create A Tabbed Interface Using jQuery

Compartelo

Pattern Tap - Buscar inspiración para cada una de las secciones de tu web

5 comentarios Inspiracion, Recursos Web, Diseño Web

patterinpiracion.jpg

Pattern Tap, un sitio pensado para ser fuente de inspiración para cada una de las secciones o elementos que hacen al diseño de nuestra web. Lo genial es lo siguiente, en vez de ser una galería de inspiración tradicional en la cual se presenta el diseño completo de una web, Pattern Tap nos permite buscar inspiración haciendo hincapié sobre ciertas secciones especificas, sean estas formularios de contacto, footer, navegación, slideshows, tabla, Etc. Todo lo que puedes imaginar para encontrar la inspiración que necesitas, para terminar cada una de las secciones que conforman tu web.

Enlace Pattern Tap

Compartelo

Brushking - Colección de Brushes Photoshop

2 comentarios Patterns, Photoshop, Recursos Web

brush.jpg

Brushking un sitio que comenzara a recopilar una amplia colección de Brushes Photoshop que podremos descargar de forma totalmente gratuita, para luego utilizar en cualquier diseño web en el cual nos encontremos trabajando. Si constantemente buscas este tipo de recursos, creo que deberás agregar a tu lector de feed, este sitio que puede prometer bastante en el futuro y al cual sabrás sacarle provecho.

Enlace  Brushking

Via CssMania

Compartelo

Aplicaciones Adobe Air para desarrolladores

9 comentarios Software, Recursos Web, Diseño, Diseño Web, Webmaster

Desde el surgimiento de Adobe AIR han aparecido aplicaciones de escritorio realmente muy funcionales y prácticas de las cuales podremos sacar provecho en todo momento. Desde reproductores de video, hasta organizadores muy completos, pasando inclusive, por aplicaciones pensadas exclusivamente para diseñadores y desarrolladores web.
Algunas de las que me encuentro utilizando y recomiendo.

Klok

klour.jpg

Klok: Interesante aplicación que nos permite llevar detalladamente el tiempo que nos demanda un proyecto. La cantidad de horas que hemos dedicado a dicho proyecto por día, semanas y una vez finalizado. Sin duda, la mejor forma de calcular la cantidad de horas invertidas en cada trabajo que estemos pensando comenzar de forma individual o en equipo.

ColorBrowser

colorborwn.jpg

ColorBrowser: Una práctica aplicación que nos permite ir creando y guardando cantidad de paletas de colores que pensemos usar en el futuro en nuestros proyectos. Podemos editarlas las veces que deseemos, y lo mejor, exportarlas para no perderlas jamás, en caso de tener que formatear nuestro disco.

Doominow

Doominow: Para anotar las tareas pendientes que aún nos quedan por realizar en nuestro trabajo, proyecto u hogar.

Si aun están con ganas de seguir conociendo aplicaciones útiles para desarrolladores y diseñadores web, les dejo este estupendo post de Alma en webmasterlibre y esta recomendacion de Diego en wwwhatsnew

Compartelo

Unit PNG Fix - Para seguir solucionando transparencias en IE

5 comentarios Javascript, Scripts, Diseño Web

Unit PNG Fix, otro compacto javascript de tan solo 1kb que nos permitirá seguir solucionando los tradicionales errores producidos por IE6. Transparencias, corrección de atributos de filtros, etc.

Descarga - Mas Info Unit PNG Fix

PLAIN TEXT
JavaScript:
  1. <!--[if lt IE 7]>
  2.         <script type="text/javascript" src="unitpngfix.js"></script>
  3. <![endif]-->

Compartelo