27 sitios para crear Patrones de fondo para paginas web

1.) Pattern 8

2.) Huge Magazine

3.) Bg Patterns

4.) Din Pattern

5.) COLOURlovers

6.) Shizoo Design

7.) PixelDécor

8.) Patterrific

9.) AVA 7

10.) Squid Fingers

11.) Everyday Icons

12.) Hybrid Genesis

13.) Kaliber 1000

14.) Alice Grafix

15.) Pattern Cooler

16.) Patterns of Change

17.) Pattern Head

18.) Portfelia

19.) Milleseicentopercento

20.) Fractured Sanity

21.) Urban Strokes

22.) Citrus Moon

23.) Secret Loft

24.) Pattern Bomb

25.) Appendix Squared

26.) Seamless Tiles

27.) Tartan Generator

Galeria de foto con JQuery, PrettyPhoto es un clon lightbox.

PrettyPhoto
Esta es una galería de fotos creada con Jquery.. muy buena y funciona perfectos y es xhtml y css valida con los estándares.

Link de la Liberia y Demos:
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/

20 jQuery plugins

Listo ocho de estos veinte plugins que me parecen realmente útiles.

01. jQuery – Seek Attention

Si deseas conseguir la atención del usuario a un área específica en el sitio, este plugin lo hace de una manera muy original y práctica.

---

02. jQuery – Agile Carousel

Uno de los más completos plugins para crear slides ó carrusel de contenido con muchísimas opciones de configuración, desde transiciónes hasta elementos para mostrar.

---

03. jQuery – Background Image Animations

Si creían que solo flash podía ofrecer menus animados, Snook nos demuestra el poder de jQuery al hacer este plugin que incluso trae el efecto al pasar el mouse y al quitarlo lo que desde mi punto de vista lo hace más atractivo.

---

04. jQuery – Cross Slide

Este plugin nos ofrece un puñado de opciones para generar slides de imagenes, desde el clásico fade in / fade out, hasta transiciones con animación ó zoom.

---

05. jQuery – Increase the size of click targets

Interesante plugin que “expande” el área para clickear, así es que si tienen bloques de contenido, con este plugin podrán hacer que toda el área pueda ser un vínculo. Muy bueno!.

---

06. jQuery – iPod-style Drilldown Menu

Si te gusta la organización del menú del ipod, este plugin es para ti, muy útil para cuando tienes menús muy grandes con submenus inlcuidos, te ahorrarás mucho espacio.

---

07. jQuery – prettyPhoto

Pretty Photo es un clon del lightbox ó de las “modal windows”, chequen el sitio ya que ofrece otros plugins muy útiles como el pretty checkboxes para darle un diseño alternativo a las casillas de verificación.

---

08. jQuery – Feed menus

Muestra un menú desplegable con opciones para tu feed, algo como lo que tenemos en la barra lateral, pero ya que estás usando jQuery una animación no le vendría nada mal.

---

Fuente: devsnippets

jQuery minimalista: 11 infaltables plugins con menos de 4K

jQuery hace que la vida de todo diseñador y desarrollador sea más sencilla. Pero esta razón muchas veces nos tentamos a utilizarlo todo el tiempo, haciendo más pesada la carga del sitio.

Combinar, comprimir y entregar los scripts al final de nuestra página ayuda mucho al departamento de requests HTTP. Para alivianar el peso puedes probar con estos 11 plugins jQuery de menos de 4k cada uno…

1. idTabs

Tamaño: 2.1K
Lo que hace: Permite realizar interfaces de pestañas simples y flexibles.
Descargar idTabs »

2. jCarousel Lite

Tamaño: 2.1K
Lo que hace: Ofrece un carousel (slider) con múltilples opciones.
Descargar jCarousel Lite »

3. Lazy Loader

Tamaño: 530B
Lo que hace: Plugin de cargador On-demand.
Descargar Lazy Loader »

4. Single Drop-Down Menu

Tamaño: 584B
Lo que hace: Menús de navegación desplegables básicos.
Descargar Single Drop-Down Menu »

5. jQModal

Tamaño: 2.8K
Lo que hace: Ventanas modales, también conocidas como “lightboxes”.
Descargar jQModal »

6. AutoTab

Tamaño: 1.6K
Lo que hace: Filtra las entradas de los formularios y nos lleva a los próximos campos.
Descargar AutoTab »

7. CSS Globe Tooltip

Tamaño: 479B
Lo que hace: Insinuaciones de planeo muertas sencillas.
Descargar CSS Globe Tooltip »

8. jGrowl

Tamaño: 4.1K
Lo que hace: Notificaciones estilo Growl para OS X.
Descargar jGrowl »

9. Cycle Lite

Tamaño: 3.5K
Lo que hace: Rota banners/imágenes.
Descargar Cycle Lite »

10. ToggleVal

Tamaño: 1.1K
Lo que hace: Borrar valores de las pistas de los elementos de los formularios al hacer clic.
Descargar ToggleVal »

11. Pop!

Tamaño: 872B
Lo que hace: Desplegables fáciles y accesibles.
Descargar Pop! »

Fuente: Trif3cta

Las mejores aplicaciones RSS para recibir tus feeds por e-mail o por SMS

Para recibir, por ejemplo, actualizaciones de los comentarios de tu página, siempre tienes la opción de suscribirte a tus feeds de comentarios por medio de RSS y así poder revisarlos en cualquier momento.

Pero existen maneras más sencillas de revisar los comentarios que recibes, sin tener que chequear tus feeds varias veces al día ¿Te interesa saber más? En esta nota te mostramos algunas aplicaciones con estos fines.

1. Feed My Inbox

Feed My Inbox es completamente simple de usar y gratuito. Sólo debes ingresar el website o la URL del feed del cual deseas recibir actualizaciones y casi estás listo.

Luego, debes ir a FeedMyInbox e ingresar tu feed (mencionado anteriormente) y tu dirección de email. Una vez que te hayas suscripto, revisa tu correo y haz clic en el link de confirmación para activar el servicio. Ahora sí ¡Listo!

Pros

* Súper simple de usar, toma segundos.

* Gratuito.

* Funciona en websites y feeds URLs.

* Incluso si el feed se actualiza 20 veces en el día, sólo recibirás un email.

Contras

*Sólo se envían actualizaciones una vez cada 24 horas para reducir el spam.

Haz clic aquí para ingresar a la web de Feed My InBox»

2. RSS 2 Email

RSS 2 email es un software completamente gratuito que te permite integrar feed RSS a tu cliente e-mail de elección. RSS2Email es de código abierto y funciona directamente con tu cliente de correo para permitirte obtener notificaciones y actuar de Puente en la brecha entre tu cliente de e-mail y los feeds RSS.

RSS2Email funciona tanto en sistemas basados en Windows con en UNIX, y puede leer cualquier feed RSS o ATOM.

Pros

* Funciona en Windows y UNIX

* Compatible con servidores POP e IMAP

* Gratuito y de código abierto

* Maneja cualquier formato RSS o ATOM, incluyendo caracteres no ingleses.

Contras

* No es un servicio basado en la web, debes descargar e instalar el software en la computadora y configurarlo con tu cliente de e-mail de elección.

Haz clic aquí para ingresar a la web de RSS 2 Email»

3. Blog Alert

Blog Alert es otra aplicación web de RSS a e-mail muy simple y gratuita. Blog Alert no necesita siquiera ningún tipo de descarga o programación de cuenta, simplemente ingresa el feed y tu e-mail y listo.

Una cosa que hay que notar con Blog Alert es que debes asegurarte de ingresar la URL del feed RSS, no el feed del sitio web. Si bien algunas herramientas están capacitadas para detector el feed, Blog Alert no ofrece esto.

Pros

* Simple, toma sólo segundos comenzar a trabajar.

* Free.

Contras

* Falta información.

Haz clic aquí para ingresar a la web de Blog Alert»

4. NewsGator

NewsGator es un producto Microsoft Outlook específico que integra feeds RSS e e-mails. Si utilizas Outlook a menudo, NewsGator puede ser la mejor opción para ti.

Puedes obtener alertas RSS, actualizaciones y feeds todo desde dentro de Outlook usando NewsGator. Si eres un usuario Outlook, prueba esta servicio que no te vas a arrepentir.

Pros

* Se integra en Outlook, un cliente de e-mail muy popular.

* Se encuentra muy bien pulido.

* Recibe actualizaciones, añade nuevos feeds y lee feeds todo desde el Outlook.

Contras

* Específico para Microsoft/Outlook. No funciona con otros clientes de e-mail.

* No es gratuito, cuesta $29.

Haz clic aquí para ingresar a la web de News Gator»

5. Reblinks

Reblinks es un Puente que manda los RSS al Email, se trata de otro servicio web gratuito que se enfoca en la simplicidad y funcionalidad. Dirígete a la página de inicio e ingresa la URL del feed y el e-mail al que deseas que se manden las actualizaciones, luego haz clic en “Submit”. Sal a pasear un rato y al volver ¡Ya tendrás los feeds en tu casilla de correo!

Reblinks se encuentra todavía en Beta por lo que puede que tenga algunos problemas o bugs, pero nada demasiado malo.

Pros

* Gratuito.

* Simple y fácil.

Contras

* ¿Confiabilidad? Antes de depender completamente en este servicio es necesario tener presente que el mismo se encuentra en etapa Beta.

* Además, falta información en la página. ¿Existen restricciones? ¿Cuán a menudo se mandan las actualizaciones?

Haz clic aquí para ingresar a la web de Reblinks»

RSS a SMS

Hasta el momento hemos visto algunos productos geniales de software y aplicaciones web que permiten enviar las actualizaciones de RSS a tu dirección de correo electrónico. Pero hoy en día no siempre tenemos nuestras computadoras portátiles a mano cuando lo necesitamos. Para la última parte de este artículo nos centraremos en los servicios que te permiten enviar actualizaciones RSS directamente en tu teléfono celular a través de SMS. Imagina ser notificado al instante en tu teléfono cuando estás con tus amigos, y alguien te ha hecho un comentario (esperemos que positivo).

6. PeekFeed

PeekFeed es un servicio de RSS a SMS que luce muy bien. PeekFeed es completamente gratuito y manda cualquier tipo de actualización RSS que hayas programado directo a tu dispositivo móvil.

Para comenzar, sólo dirígete a la página de PeekFeed y crea una cuenta nueva. Una vez que la hayas creado, puedes programar todas las propiedades de usuario y añadir los feeds de los cuales deseas recibir notificaciones. PeekFeed incluso te permite seleccionar cuán a menudo deseas recibir las actualizaciones. Puedes elegir por minuto, hora, día y así.

Pros

* Gratuito.

* Fácil de usar y recibir.

* Propiedades de actualización personalizables (minuto, hora, día etc).

Contras

* Ninguna que se nos ocurra.

Haz clic aquí para ingresar a la web de PeekFeed»

7. Pingie

Por último, pero ciertamente no menos importante, es el servicio RSS a SMS muy popular, Pingie. Pingie te permite introducir su número de teléfono, correo electrónico y la dirección del sitio web para empezar a recibir las actualizaciones al instante.

Pingie se ha conocido como una aplicación RSS a SMS confiable desde hace un tiempo, e incluso te permite comprobar el estado de todos sus servidores en su página de estado. Fuera de las aplicaciones RSS a SMS, Pinige parece ser la que más usa la gente.

Pros

* Gratuito.

* Interface de usuario simple e intuitiva.

* Confiable y abierto, en el sitio hay una gran cantidad de información para leer.

Contras

* Podrá ser que hay que pagar los mensajes de texto que recibimos, pero eso no difiere de cualquier otro servicio que manda SMS.

Haz clic aquí para ingresar a la web de Pingie»

Fuente: In The Woods

Como crear un sitemap de nuestro sitio web On-Line.

Los mapas de sitios (sitemaps) son uno de los requisitos básicos si queremos tener un buen posicionamiento en buscadores, pues informan a sus “arañas” de todo el contenido de nuestra web, la importancia que damos a cada sección e incluso de la frecuencia con que deben actualizar cada página.

Una buena alternativa para generar un sitemap automáticamente es: xml-sitemaps.com, una herramienta online donde con solo indicar nuestro dominio obtendremos un detallado archivo XML de todo nuestro contenido. El servicio es gratuito hasta un máximo de 500 enlaces, si tenemos una web bastante grande quizás necesitemos contratar la opción de pago.

Otra herramienta interesante es: writemaps.com, que nos permite crear a mano el sitemap de nuestro sitio web pero de forma totalmente visual. Ideal si las herramientas automáticas no hacen un buen trabajo pero tampoco sabemos lo suficiente de XML para hacerlo escribiendo código.

Y por supuesto si somos programadores seguramente no interese hacerlo a mano, en cuyo caso nos será muy útil el siguiente enlace, donde Google nos explica de forma detallada como escribir en XML un mapa de sitio correcto, que también será válido para otros buscadores como Yahoo, Live, etc..

Una vez tengamos nuestro sitemap deberíamos hacer 2 cosas:

-Comprobar que no haya enlaces rotos, muy importante, pues si pasamos un mapa de sitio incorrecto seguramente obtengamos el efecto contrario al que queremos conseguir. Para verificar los enlaces esta herramienta online nos puede servir: dead-links.com

-Decirles a los buscadores donde está el archivo. Lo ideal es hacerlo con las herramientas para webmasters que cada empresa nos proporciona. Aunque si queremos hacerlo por el método rápido, podemos indicarlo en el archivo robots.txt que debe encontrarse en el directorio raíz de nuestra web. Para hacerlo basta con incluir la siguiente línea de código dentro del archivo:

Sitemap: http://www.tudominio.com/sitemap.xml

Espero que estas herramientas y consejos os resulten útiles.

Funte sitio : dglibre.com

15 claves y hacks de CSS para tener siempre en cuenta

1. El posicionamiento absoluto dentro de un elemento posicionado relativamente

Poner un elemento absolutamente posicionado dentro de un elemento en posición relativa se traducirá en la posición calculada sobre su antepasado más cercano posicionado. Esta es una excelente técnica para conseguir que un elemento se pose en un determinado lugar en que lo necesites, por ejemplo, una insignia de cabecera.

2. Z-Index y posicionamiento

Z-index puede ser algo misterioso para los desarrolladores. A menudo, se encuentran a los diseñadores poniendo un valor z-index muy grande en un div o elemento con el fin de tratar de conseguir que se superponga a otro elemento. Lo que tenemos que tener en cuenta, es que z-index sólo se aplica a los elementos a los que se les da un valor de "posición". Si encuentras un elemento que no se adhiere a una norma de z-index que has aplicado, añade "position: relative" o "position: absolute" al div problemático.

3. Auto Margen

Utilizando auto margen en un tema es una fantástica manera de conseguir que un elemento se centre en la pantalla sin preocuparse por el tamaño de la pantalla de los usuarios. Sin embargo, "margin: auto" sólo funciona cuando se declara un ancho para el elemento. Esto también significa que para aplicar margin: auto a los elementos en línea, la primera presentación se debe cambiar a bloque.

4. Utilizar el padding cuidadosa y adecuadamente

Un error que a menudo se hace cuando se empieza con CSS es utilizar el padding sin conocer todos los efectos y el modelo de caja CSS. Tengan en cuenta que, según el modelo de caja, el padding se añade a la anchura total del elemento. Esto puede causar una gran frustración con elementos de cambio fuera de lugar. Por ejemplo:

PLAIN TEXT

1. #div { width:200px; padding: 30px; border:2px solid #000; }

Es igual a un ancho total de 264px (200 + 30 + 30 + 2 + 2). Además, recuerde que el padding, a diferencia de los márgenes, no puede contener valores negativos.

5. Ocultar texto con text-indent

Digamos que tienes una imagen que estás utilizando para el logo de tu web. Esta imagen estará dentro de una etiqueta H1, que es bueno para el SEO, sin embargo, también queremos tener nuestro título del texto escrito en la etiqueta H1 para que los motores de búsqueda puedan leerlo fácilmente. Algunos pueden sentirse tentados a usar "display: none" en un elemento. Por desgracia, habría que separar la imagen del logo de la etiqueta H1 si se utiliza esta técnica. Usando text-indent y los valores negativos, podemos pasar esto:

PLAIN TEXT

1. h1 { text-indent:-9999px;/*Hide Text, keep for SEO*/ margin:0 auto; width:948px; background:transparent url("images/header.jpg") no-repeat scroll; }

Esto asegurará que todo el texto no es visible en cualquier resolución, mientras que lo que le permite es permanecer en el interior del elemento h1 que contiene el logotipo. Esto tampoco va a esconder el texto de los lectores de pantalla como "display none" lo hará.

6. Bugs de IE Double Float Margin

Estoy seguro que todos hemos tratado con éste, ya que este es uno de los "hacks" que más que tenemos que utilizar. Si no has visto este error antes, básicamente, un elemento flotante con un margen determinado que de repente se ha duplicado el margen en IE 6 y ¡Ha caído de su posición! Afortunadamente, la solución es súper simple. Sólo cambiamos la visualización de los elementos que flotaban a "inline" como se ve a continuación.

PLAIN TEXT

1. .yourClass { float: left; width: 350px; margin: 20px 0 15px 100px; display: inline; }

Este cambio no tendrá efecto en ningún navegador dado que es un element float, pero por alguna razón en IE soluciona el problema del margen doble.

7. Usando CSS para combatir el Spam

Esto es algo que podrías añadir para darle saber a la descripción de tu tema. Una forma es ésta:

PLAIN TEXT

1. for="Name">Name: "text" name="name" /> class="captcha" for="captcha">Answer? "text" name="captcha" id="captcha" />

Para el captcha ID, se utiliza una imagen de fondo vía CSS. Esto requeriría que los scripts spam encontrarán el elemento HTML, escanearán tu css, compararán los selectores, encontrarán el selector determinado y la imagen de fondo, y luego leerán la imagen de fondo. Es bastante seguro decir que la mayoría no será capaz de hacer esto. La desventaja es que si alguien no está navegando con CSS activo, no sabrá qué hacer.

8. PNG en Correcciones de IE 6

Estoy seguro de que todos estamos de acuerdo que tratar con PNG transparentes en IE 6 es un verdadero dolor de cabeza. Las correcciones van desde complejas técnicas Javascript a sólo usar un filtro propietario de Microsoft, hasta el uso de comentarios condicionales para intercambiarlos por un jpg. Tengan en cuenta que todos estos, a excepción de los comentarios condicionales se basan en el AlphaImageLoader de Microsoft.

PLAIN TEXT

1. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

9.Transparencia CSS a través de distintos navegadores

Lo creas o no, es bastante simple obtener una decente transparencia a través dediversos navegadores usando CSS, Podemos cubrir IE, Firefox, Safari, Opera, y los navegadores antiguos, como Netscape. Chris Coyier recientemente vino a nuestro rescate demostrando una vez más estas técnicas.

PLAIN TEXT

1. .yourClass { filter:alpha(opacity=50);/*Needed for IE*/ -moz-opacity:0.5;/*Older mozilla broswers like NN*/ -khtml-opacity: 0.5;/*Old versions of Safari and "KHTML" browser engines*/ opacity: 0.5;/*FF, Safari, and Opera*/ }

10. Uso de imágenes CSS Sprites

Los Sprites CSS son una fantástica manera de cargar muchas imágenes CSS a la vez, además de reducir las peticiones HTTP y el tamaño del archivo de tu tema. Además, no tendrás que hacer frente a las imágenes que "parpadean" en estado hover. Los Sprites CSS se consiguen poniendo muchos de los elementos de tu imagen de todos en una sola imagen. A continuación, se utiliza el CSS para ajustar la posición de fondo, el ancho y la altura para conseguir la imagen que queremos.

11. Usa los comentarios condicionales para soportar IE 6

Con demasiada frecuencia, los desarrolladores web se ven obligados a introducir nuevas reglas CSS y declaraciones que sólo se aplican a determinadas versiones de IE. Si no están familiarizados con un comentario condicional, el código de abajo sólo linkeará a una hoja de estilo, si el navegador del usuario es menor o igual a IE 7:

Este código podría ir en la sección de cabecera de tu archivo HTML. Si el CSS no parece estar teniendo lugar en el IE después de haberse vinculado a su hoja de estilo específica, prueba volverte más específico con tus selecciones CSS para reemplazar los estilos predeterminados.

12. Especificidad CSS

Como se mencionó anteriormente, los estilos CSS siguen un orden de especificidad y valores de punto para determinar cuándo los estilos se anulan unos a otros o tienen prioridad. Nettuts recientemente ha tenido un buen artículo en el que se explican los valores de punto para CSS. Los mismos son:

* Elementos - 1 points

* Clases - 10 points

* Identificadores - 100 points

* Estilo dentro del código (inline) - 1000 points

En caso de duda, se más específico con tus declaraciones de estilo. También puedes utilizar la declaración !important para propósitos de depuración si fuera necesario.

13.Logrando una altura mínima en todos los navegadores.

En el desarrollo, a menudo nos damos cuenta de que necesitamos que un elemento tenga por lo menos una cierta altura, y luego se extiendan para dar cabida a más contenido, si es necesario. Desafortunadamente, IE no reconoce la propiedad min-height correctamente. Para ello, tenemos lo que se conoce como el "Min-height fast Hack", que va así:

PLAIN TEXT

1. #yourId { min-height:300px; height:auto !important; height:300px;/*Needs to match the min height pixels above*/ }

Simple, eficaz, y se valida perfectamente. Este es también uno de los pocos casos en que la propiedad !important se vuelve muy útil.

14. El * HTML hack

Si necesitas o deseas evitar hacer link a hojas de estilo IE específicas, se puede utilizar el * HTML hack. En un mundo perfecto, el elemento HTML siempre será el elemento raíz, por lo que cualquier * antes de HTML no se aplicaría. Sin embargo, IE trata esto como una declaración perfectamente legítima. Así que si necesitábamos hacer target a un cierto elemento en IE, podríamos hacer esto:

PLAIN TEXT

1. * html body div#sideBar { display:inline; }

15. Técnica Sliding Doors

Un problema importante con el uso de imágenes para los botones de navegación, es que se corre el riesgo de que el texto de los clientes sea demasiado largo y se extienda más allá del botón, o se corte. Usando dos imágenes y la técnica CSS de las puertas corredizas, podemos crear botones que se ampliarán para ajustar el texto dentro. La idea detrás de esta técnica, es utilizar dos imágenes para cada botón, y la aplicación de las imágenes a través de una declaración de fondo en CSS. Por ejemplo:

PLAIN TEXT

1. HTML Markup: Your Title CSS: a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Image height */ margin-right: 6px; padding-right: 20px;/*Image Width*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Image Height */ padding: /*Change to how you see fit*/ }

Y ahí lo tienes, una lista de 15 técnicas CSS para ayudarte a la hora de desarrollar un tema. CSS es ideal para diseñadores gráficos, ya que nos permite ser creativos con el código y utilizar nuestras propias técnicas para llevar a cabo un trabajo. Dicho esto, ¿Cuáles son algunas de las técnicas de los desarrolladores qué añadirías a la lista?

Fuente: Woods