31 marzo 2012

2 Excelentes Packs de Iconos en Formato de Fuente (OTF)

Estos son más de 100 iconos en formato OpenType (OTF) que indiscutiblemente te serán muy útiles. Te será muy fácil poner/cambiar el color, tamaño, o darles el estilo que quieras, desde un editor de imágenes como Photoshop, ¡tienes que probarlos!


1. Pictogramas Modernos en formato OTF (70+ iconos)

iconos web en formato otf



2. Paquete de Iconos Sociales en formato OTF (74 iconos)

Iconos sociales formato OTF



28 marzo 2012

15+ Inspiradores Ejemplos de Sitios Web con Navegación Fija

Tal vez estés trabajando en crear un menú de navegación para tu blog, pensando en que esto le permitirá a tus usuarios navegar cómodamente de página en página, y así facilitarles la tarea de acceder al contenido de tu sitio. ¡Bien hecho!, un menú de navegación es un elemento clave para cualquier sitio web, por las razones que anteriormente citaba, no importa que sea vertical u horizontal, lo importante es que éste sea visible de preferencia, y que permita explorar tu contenido fácilmente.

Estos son más de 15 ejemplos de sitios web que utilizan navegación fija (algunos en la parte superior de la página, otros en la columna lateral, algunos con el logo también fijo), para que te inspiren, si es que tienes pensado usar un menú fijo. Aunque en muchos de estos sitios, el contenido está compuesto por lo que muestran en la lista de enlaces de las páginas del menú, un menú fijo puede resultar estratégico en blogs que pretendan destacar algunas páginas puesto que éste siempre estará a la vista.

Si no sabes cómo crear un menú horizontal fijo, en este post, puedes ver como crear una sección fija para agregar ahí dos gadgets y poner por ejemplo un gadget de lista de enlaces o bien la lista de páginas de tu blog para crear el menú; también, en la otra sección puedes colocar otro elemento crítico, que permita ser usado oportunamente ;)


1. More than Twenty

Ejemplo Menu fijo


2. StudioChirpy

Ejemplo Header fijo

Ir a: StudioChirpy



3. Designbyface

Ejemplo Menu fijo

Ir a: Designbyface


4. Looks Like Good Design.com

Ejemplo Header fijo




5. Bloom London

Ejemplo Header Fijo
Ir a: Bloom London


6. Bloom Blog

Header Fijo

Ir a:  Bloom Blog


7. HappyCog

Ejemplo menu fijo
Ir a: HappyCog


8. Rodesk

Header fijo

Ir a Rodesk



9. Blog Academy




10. Studio Nudge



11. Lounge

Ejemplo Menu Fijo

Ir a Lounge

12. GO Media

Navegacion Fija lateral

Ir a: GO media

13.Theehan+Lax

Navegación fija lateral

Ir a: Teehan+Lax

14. Struck

Ejemplo Header fijo

Ir a: Struck



15. Make Better Apps

Header Fijo




16. Black Estate

Menu Fijo lateral

Ir a: blackestate


17. DKNG Studios

Header fijo




Fuentes:
Design Bombs
webdesignledger
The Best Designs

27 marzo 2012

Crear bordes que simulan estar hundidos o levantados (con relieve) en Base64

Estaba habilitando los comentario anidados para la plantilla círculos, y quería poner un borde que simulara estar hundido debajo de cada comentario.

Pensaba poner una pequeña imagen que se repitiera, pero se me ocurrió hacerla usando Pantternify, el generador de patterns en Base64 que ya te había mencionado antes.

Es muy simple lograrlo, puesto que un borde que simula el efecto de estar hundido o levantado, se crea poniendo dos lineas juntas, una debajo de la otra, y el orden de  éstas dependerá del efecto que se quiere conseguir, tomando en cuenta también el color del fondo donde se quiera poner. Ahora puedes ver el resultado en los comentarios de la plantilla Círculos, en la siguiente imagen:

Bordes en Base64


Te dejo la dirección web del pattern que usé, para que veas cómo crearlo, al verlo te darás cuenta de lo fácil que resulta hacerlo.

Si por ejemplo hubiera querido el efecto contrario, es decir, un borde que simule tener relieve o estar levantado, simplemente se invierte la posición de los dos colores que son gris y blanco...

Para usarlo en algún elemento, usarías algo así :

.elemento{
background:url(Base64) repeat-x;
}

Donde dice Base64, se pone el código generado, y listo nos ahorramos otra imagen ;)

Recuerda que la clave para crear estos efectos radica en los colores que uses para las dos lineas, y el color de fondo donde se va a poner (los tres son importantes), así pues si vas poner un borde que simule estar hundido sobre un fondo gris claro, la linea de arriba deberá ser también gris pero más obscura, y la de abajo, más clara dentro del mismo orden de colores, y el blanco queda muy bien, puesto que el fondo es gris claro.

12 Patterns Minimalistas de base64. No necesitas alojar ninguna imagen.

A veces buscamos una imagen con un pattern sencillo para ponerlo como fondo en el blog, y usamos una imagen que aunque pudiera ser pequeña, terminan agregando más peso a la página.

Pues bien, esto pudiera resolverse, si usamos imágenes en Base64, de ese modo la imagen no necesita estar almacenada en ningún sitio de almacenamiento de imágenes, ser solicitada desde el blog, y por lo tanto, no repercutir en el tiempo de carga del mismo.

Actualmente Blogger utiliza imágenes codificadas en Base64 en muchos de los elementos de la plantilla, por ejemplo, las flechitas de la opción de "Respuestas" en los comentarios anidados, el icono con el lápiz para destacar el comentario del autor en el sistema de comentarios anidados, etc., lo que demuestra la preocupación de Blogger por no afectar tanto la carga del blog (vamos a pensarlo así).

Pues hoy te tengo listos doce patterns que hice gracias a un generador llamado Patternify, del que ya te había hablado antes, y que son sólo una pequeña muestra del potencial que tiene esta herramienta, que genera patterns en Base64.

Pero, ¿cómo usarlo? Es muy fácil, simplemente pones el código del pattern donde debería ir la URL de la imagen, cuando usamos la propiedad "background", por ejemplo:

#div{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAI3b978zwjjgzjq6uqMYAEYB8RmROaABAACog+PwFUo/gAAAABJRU5ErkJggg==) repeat;
...y si por ejemplo al pattern le quieres agregar un color de fondo, puesto que es pattern que usarás es transparente, simplemente se lo agregas así (color resaltado de rojo)...

#div{background:#f1f1f1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAI3b978zwjjgzjq6uqMYAEYB8RmROaABAACog+PwFUo/gAAAABJRU5ErkJggg==) repeat;

Patterns transparentes 


1. Patern Chevron
Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAN0lEQVQYV2O8dvnafy1dLUYGAgCsgBjFcJMIKUaxEp9iDLfhUkyeQqKsJsozhBSBgpCRGEUghQCQCCgLvDlCewAAAABJRU5ErkJggg==




2. Pattern Cross


Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQYV2N88eLFfwkJCUYGPACkBqwAn2KYHF6TkC0hXyHIKpBJ6O7GcCO6Qhq7kajgITbAAW/5L3lsc4OvAAAAAElFTkSuQmCC




3. Pattern Diagonal

Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQALXLl/7zwjjgzhaulqMYAEYB8RmROaABAD/ew+Dsak1RQAAAABJRU5ErkJggg==


4. Patterns Dotted

Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYV2O8cunKfx09HUYGAoCgApj+UYV4Q5Lo4AEAZqcEC4k4yPQAAAAASUVORK5CYII=




5.Pattern Square


Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAL0lEQVQYV2NkAIKvX7/+5+bmZgSx0QFMjhHEAEniUwiSx2oKNpOHl0KSgoeYAAcAlMYfxwAe1QwAAAAASUVORK5CYII=


6. Pattern Diamond

Pattern en Base64

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATUlEQVQYV2NkQANfv379DxLi5uZmRJZC4YAUwRQgs0Ea4ArRJUCSyGJghdgUwayFyTHiU4SsmHiFRFuN7hbkIMHwDDbFOIMHWTG2AAcAimZHx0CCWIsAAAAASUVORK5CYII=

7. Pattern Circles
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAO0lEQVQYV2NkAILX33/9F+VkYwSx0QFMjhHEEGRnZWBhYsSq8M+////f//zNgFUSm8nDSyFJwUNMgAMA9tclwWfJ3zkAAAAASUVORK5CYII=


8.Pattern Patche


Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAeklEQVQYV42QsQ6AMAhEobEa7eTg/3+gg1M1WtMqJNdUo0aWXsMDDpjOGJctDW3Nor33SV7nnP6RYxF9Y6kyrFqSCCneY0rTGkirUFlCJSw6j5uNfeKoi0FtMDwJCJ/lBAG14x2EefjNIDb96qijfy/zdh4scTnPn4MfVRJrfd32iTAAAAAASUVORK5CYII=


9. Pattern Cadena
Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAeElEQVQYV41QQQ6AIAzbiEiUkwf//0APnpCgBrRLZvBgZBe6rKXrmO5a4l7moWfgEELB672XXmcMMDlLnWHBGGpBfOZS1nSQqFRZk2oy8GO3GUtqX4vHfMga8nWKGykRPYi6CohuGKmdqEl/rZvDfJ1HQ7zO03LwCwXVebFck907AAAAAElFTkSuQmCC

10.Pattern Pointe
Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAg0lEQVQYV5VQywqDMBCclaaigUJBP9JTv6UnP9KCIETRFFcnsOAx5rKz2XkkKzjPsGzaVk8hDiEoq/c+9TYTgnfp8ChEftNX1XWcQ2KP5vWR/646rhFJZUrD12pJiWhOdnkVm3OyXpcZc+FAIkUkMpbPqveIsqqRT8yOzv7MrfXkLPwAPZV9sTkDxYwAAAAASUVORK5CYII=


11. Pattern Irregular
Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWUlEQVQYV2N8/f3Xf1FONkYGJPD169f/3NzccDGQGhQFMLXYNGMoBClCNh1mG4pCbCbBxBhB7vnGxAo3BN29IIVc/34zEG8isnvwWo2sEMQmyjN4g4fYAAcAhaNKnwlPL5EAAAAASUVORK5CYII=

12. Pattern Brick
Pattern en Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAR0lEQVQYV2NkQANfv7z+z80jyogujiKASxFIE1whPkVwhYQUgRUSo4hohSDDwG7EZypMDq9nkA3AGTzotmAELEgByDnogQ4AbZo33vlIgH0AAAAASUVORK5CYII=


Es importante saber que las imágenes recomendadas para ser codificadas en Base64, son aquellas que son pequeñas y simples, de lo contrario, el código generado será muy extenso y por lo tanto se le agregará tamaño al documento donde se use. Si bien hay algunos generadores que permiten convertir imágenes de distintos formatos en Base64, éstos limitan el tamaño del archivo al subirlo. También hay que mencionar que Internet Explorer en su versión 7 no da soporte a este tipo de imágenes, así que en esa versión del navegador no se va a ver la imagen.

Y por supuesto, si no encuentras algún pattern que te guste o se adapte a lo que buscas, puedes crear el propio en Patternify ;)

23 marzo 2012

20 Ejemplos de Diseños Cool de Páginas de Error 404

Probablemente hayas visto que Blogger dispuso una nueva sección con varias opciones que pueden ayudar a mejorar el SEO de tu blog. Si no las has visto, dichas opciones hasta hoy, sólo las encuentras en la nueva interfaz, si vas a Configuración > Preferencias de búsqueda.

Una de estas nuevas opciones te permite agregar un mensaje personalizado para que aparezca en las páginas que no han podido ser encontradas porque no existen, ya sea por que la página fue eliminada, o porque está mal escrita la dirección web. Cuando alguien pone en el navegador la dirección de una página de tu blog erróneamente, o ingresa a través de un enlace con la dirección mal escrita, se genera el conocido error 404.

Hace un momento veía que en Ciudad Blogger, publicaron un tutorial para personalizar dicha página, del modo similar que podemos hacer con una página estática del blog, eliminando los elementos que se tienen en el blog, como columnas, header, menú, etc., hasta lograr una apariencia totalmente diferente.

Pensé que sería bueno que vieras algunos ejemplos de diseños cool para inspirarte a crear la propia. He aquí 20 ejemplos de diseños muy originales de páginas de error 404, algunos ilustrados, otros con animaciones, y otros más sencillos o minimalistas. Echa un vistazo a cada página para que las veas en vivo y a todo color y a veces en acción ;)


Ejemplos de páginas de error 404 Ilustradas



1. henrikhedegaard.com




2. Chrisjennings.com

Eroor 404



3. d20srd.org

Error 404



4. Acromediainc.com

Ejemplo 5 Error 404




5. Twurn.com

Error 404


6. leapanywhere.com

Error 404


7. shelfworthy.com

Error 404

8. agens.no

Error 404

9.springload.co.nz

Error 404

10. creationthing.com

Error 404 pagina



Ejemplos de páginas "Error 404" con animación



11. tinsanity.net

error 404


12. Lookitsme

Error 404


13. robo.to

error 404

14. project-euh.com

Error 404
15.abduzeedo.com





Ejemplos de páginas de "Error 404"  ilustradas o no, más sencillas o minimalistas


16. sfbay.craigslist.org

Error 404


17. .odopod.com

Error 404


18. rareview.com


19. getdropbox.com

20. kidmondo.com



Además de causar un impacto visual positivo con una página de error 404 personalizada, al no mostrar los elementos de tu blog (cabecera, columnas, menu, etc.)  no olvides poner un enlace a la página de inico del blog, por ejemplo, para que el usuario pueda ingresar a tu blog fácilmente ;)

Fuentes:
1stwebdesigner.com
dzineblog.com

Recomendado:
La verdadera historia del Error 404