1. Pictogramas Modernos en formato OTF (70+ iconos)
2. Paquete de Iconos Sociales en formato OTF (74 iconos)
sábado, 31 de marzo de 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, puesto que funcionan como fuentes, ¡tienes que probarlos!
1. Pictogramas Modernos en formato OTF (70+ iconos)
2. Paquete de Iconos Sociales en formato OTF (74 iconos)
1. Pictogramas Modernos en formato OTF (70+ iconos)
2. Paquete de Iconos Sociales en formato OTF (74 iconos)
Consejos para mantenerte a salvo en redes sociales
El uso de las redes sociales hace que los usuarios estén expuestos a diferentes ataques que pueden dañar nuestros equipos e incluso nuestra economía, Veracode nos lo explica en esta infografía y nos da algunos consejos para intentar minimizar estos riesgos.
Nos aconsejan:
.- Ser precavidos a la hora de seguir a alguien.
.- No autorices aplicaciones de terceros.
.- No des por hecho que Twitter y Facebook escanean sus centros de datos en busca de virus.
.- Comprueba las urls acortadas de Bit.ly
.- Mantén siempre actualizado tu navegador y tu sistema operativo.
.- No pienses que por usar un MAC estas libre de riesgos.
.- Ten cuidado con los correos y DMs que recibes desde redes sociales.
viernes, 30 de marzo de 2012
Tim Cook CEO de Apple ya esta en lo alto del escalafón de CEOs
Tim Cook, CEO de Apple tras la muerte de Steve Jobs, ha tardado menos de un año en ocupar la primera posición que ofrece Glassdoor según las opiniones de los empleados de cada sitio.
La lista de TOP 25 CEOs se basa exclusivamente en la retroalimentación de los empleados a quienes se les hizo una sencilla pregunta ¿Aprueba usted la forma en que su consejero delegado lleva la compañía? Más de 280.000 empleados calificaron a su director general en Glassdoor.
Si os fijáis en la lista podréis comprobar que incluso supera a la última calificación de Steve Jobs, antes de dejar su cargo, en dos puntos. “I think leadership is doing an amazing job. We have the best management team anywhere.” son algunas de las palabras que le dirigen algunos de sus empleados.
La lista también nos refleja la perdida de 2 puntos del nuevo CEO de Google, Larry Page, frente a su antecesor Eric Schmidt, los cambios que se están produciendo en Google parecen pasarle factura a Page. También llama la atención no ver a Mark Zuckerberg entre esta lista de los mejores 25 CEOs, ni siquiera en los 10 primeros de los CEOs de empresas tech.
Social Photos. Copia tus fotos entre Facebook, Google + y Flickr
Social Photos es una muy interesante aplicación que te permite copiar tus fotos, simplemente arrastrándolas, entre Facebook, Google Plus y Flickr. Esto te ahorra el trabajo de subirlas independientemente a las tres plataformas, solo debes autorizar la aplicación e ir arrastrando las fotos de un recipiente a otro para subirlas.
Apuntes varios sobre novedades de Blogger
Últimamente voy con el tiempo justo para todo incluido el blog, eso quiere decir que las últimas novedades y sorpresas de Blogger pasaron por aquí casi sin hacer ruido.
Por ese motivo hay ausencia de entradas sobre temas como los comentarios anidados y las nuevas opciones para configurar Blogger.
Es una ventaja por mucho que algunos se empeñen en decir lo contrario que todos los blogs se repitan sobre un mismo tema cuando hay novedades. Y lo es, porque no sólo es más fácil llegar a todos sino porque lo que no descubre uno lo descubre otro y siempre ven más una docena de ojos que dos.
Para los que aún no se enteraron y en mi caso para tener como archivo particular ahí van unos enlaces sobre las novedades de Blogger.
Nuevas opciones SEO en Blogger
Las opciones de las etiquetas META description
Nueva etiqueta META para descripción en plantillas modificadas
Página de error 404 de Vagabundia.
Página de error 404 de Ciudad Blogger.
Página de error 404 de Emilio Cobos
Página de error 404 de Oloman
Redirección de dominios
Comentarios anidados.
Comentarios anidados "personalización 1"
Comentarios anidados "personalización 2"
Y no olviden que Abril es el mes que Blogger hará oficial el cambio de la antigua interfaz a la nueva.
La linea del tiempo de la música de Spotify en Facebook
Spotify acaba de anunciar su línea del tiempo de la música en Facebook, aprovechando el nuevo diseño del timeline han creado esta línea del tiempo que arranca desde el siglo X en adelante.
En su línea del tiempo podemos comprobar momentos claves en la historia de la música con enlaces hacia canciones en Spotify, prometen ir ampliando este timeline a diario.
También anunciaron hace un par de días que ahora la limitación que había para escuchar música, cuando llevabas usando la opción freemium mas de seis meses, queda mejorada pudiendo escuchar cuantas veces quieras cualquier canción con un único limite de 10 horas al mes.
En su línea del tiempo podemos comprobar momentos claves en la historia de la música con enlaces hacia canciones en Spotify, prometen ir ampliando este timeline a diario.
También anunciaron hace un par de días que ahora la limitación que había para escuchar música, cuando llevabas usando la opción freemium mas de seis meses, queda mejorada pudiendo escuchar cuantas veces quieras cualquier canción con un único limite de 10 horas al mes.
jueves, 29 de marzo de 2012
Gadgets de cuenta regresiva para Londres 2012
Los XXX Juegos Olímpicos están cada vez más cerca y muchos, sobre todo los que gustan del deporte, están esperando con ansias este acontecimiento que se celebra cada cuatro años.
Así que para todos aquellos que quieran estar al pendiente de los juegos, he hecho un gadget de cuenta regresiva para las Olimpiadas de Londres 2012 en tres colores.
Para poner uno de estos tres contadores entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código del contador que más te guste.
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0D1FZ5cCj-FLREbSwdTm0kVtD8lOxc0XXfEoi0lfV-EbGubH00cvsJ_wcehENtCTdG-J-RHBAeWtC_Mj3xhNHjrjuyYWyMRaCDDXWRBzpZ5iho0Bb8EPBDOVYGfMkX8XUgd79PXi7G7s/s0/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#da0080"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPqKDqtDpNMMuYNScps_XcH9xzWVjzs0pkRYs2bqFcOrSklunpoG_GpnykC-umJM0t0xewOs9Cz6nobvSA1p98190H4QxDp6kV7NdmaYEXWRDiAKRTkp_20I6_8LpzVOIDxs4JXDRmirA/s0/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#009cde"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvL9CxDyMo0g3MAjZqHIE8bmGMn4wwIvt1sEg94RDRvzNwCDwZhyw3yvZ-Z8yAV0LOeC5OaGq-JtBsm_cbYOZ6h0V_NqCBuy4q1CFKu_K0UF-1bJBCmDFF5bbHas820YIo6W2ycY0dqnE/s0/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#ee8600"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>
Y con eso podrás llevarte a tu blog este gadget que contará los días que faltan para los juegos olímpicos. Espero que les gusten :)
TattooSet. com. Red Social de Tatuajes
TattooSet.com fue fundada en Octubre de 2011 por los argentinos Nicolás Benitez y Patricio Cristal. La definen como la nueva red social de tatuajes, que agrupa tanto a tatuadores profesionales como también a los interesados en los tattoos.
El sitio crece un 134% cada mes, y apuesta a ser la mejor página web de tatuajes en el mundo. Por el momento está en cinco idiomas: Español, inglés, francés, italiano y portugués. Entran de más de 90 países a diario para visitar el sitio y sacar ideas para su próximo tatuaje o contactar con tatuadores.
¿Qué es TattooSet?
Es una Red Social de Tatuajes. Con un diseño simple y dinámico, en donde se pueden ver las fotos de los tatuajes que suben los usuarios registrados del sitio, y los set de tattoos que tienen los tatuadores.
En tattooset.com puedes moverte por los tatuajes que son de tu interés por medio de las imágenes relacionadas o tags. Podemos escoger por color de tatuajes y hasta también por ubicación del cuerpo. Por ejemplo, si queremos buscar tatuajes de Estrellas, podemos buscarlo además solo estrellas en rojo y ubicadas en el tobillo, o en la parte del cuerpo que queramos.
¿Para qué sirve?
La función principal es agrupar todos los tatuajes de Internet más los que suben los usuarios del mundo y en todos los idiomas para obtener mejores ideas a la hora de hacernos un tatuaje.
Un detalle muy importante es que hay muchos tatuajes con excelente calidad de trabajo, y si esa foto la viste desde un usuario que es tatuador, podremos obtener la información de su estudio para contactarse con dicha persona.
Además de poder hacer una búsqueda constante de imágenes, podemos hacernos amigos de los usuarios y compartir los mismos intereses. Comentar imágenes y guardar en favoritos los tatuajes de los demás usuarios. También podremos tener seguidores y seguir a otras personas, para cuando suban un tatuaje nuevo, en la parte de “amigos” de nuestro perfil, se listen todos los tatuajes que subieron los usuarios a los cuales estamos siguiendo.
Por que esta red puede ser una buena opción para los usuarios?
Por que existen miles de sitios que cobran una cuota mensual para que puedas logearte y ver miles de fotos e ideas de tatuajes para que puedas imprimirlo y llevárselo a tu tatuador, caso totalmente contrario pasa en tattooset.com, ya que los usuarios son los que comparten los tatuajes para que otras personas puedan sacar ideas o gustos totalmente gratis. El registro es gratis, rápido y fácil, y puedes subir tantas fotos sean necesarias.
Ellas dominan el rubro
Del 60 al 70% de los usuarios registrados son mujeres, dominan el rubro y también las búsquedas (ej. Tatuajes para mujeres, love quotes, tatuajes de corazones, tatuajes de estrellas, etc). Y los usuarios de tattooset.com rondan entre los 24 y 37 años de edad.
*Post de apoyo a jóvenes emprendedores realizados de manera gratuita
Google Actividad. Estadísticas de tu cuenta de Google
Google ha puesto a nuestra disposición, Google Actividad, una nueva herramienta que monitoriza todos los movimientos de nuestra cuenta de Gmail. El informa de actividad nos muestra los correos recibidos en esa cuenta, los enviados, visualizaciones de nuestra pagina de YouTube, también datos como nuestra localización, navegador utilizado, sistema operativo, nuestro historial web, etc.
En definitiva toda la actividad que realizamos cuando estamos logueados con nuestra cuenta de Google. Debes acceder al enlace, estar logueado y solicitar el informe que recibiras, pasados unos minutos en tu cuenat de correo de Gmail.
En definitiva toda la actividad que realizamos cuando estamos logueados con nuestra cuenta de Google. Debes acceder al enlace, estar logueado y solicitar el informe que recibiras, pasados unos minutos en tu cuenat de correo de Gmail.
Por qué se produce engagement entre usuarios de Facebook
Un nuevo estudio realizado por Chadwick Martin Bailey y Constant Contact viene a mostrar que las razones por las que los usuarios pulsan el botón Me gusta son muy similares a las que tienen para suscribirse a una lista de correo. El estudio se basa en una muestra de 1.481 consumidores de Estados Unidos mayores de 18 años.
El estudio indica que:
.- A pesar del uso generalizado de dispositivos móviles, la mayoría de la gente accede al correo electrónico desde sus ordenadores.
.- Mientras que el 30% de los consumidores acceden a Facebook desde un dispositivo móvil, la mayoría siguen prefiriendo sus equipos para acceder.
.- Las relaciones con una organización y generar contenido interesante es clave para obtener relaciones a través del mail.
.- Los usuarios se suscriben a la listas de correo electrónico principalmente para obtener descuentos, promociones y contenidos exclusivos.
.- El exceso de correo electrónico y contenido irrelevante son las principales razones para darse de baja.
Esta infografía recoge todos estos datos surgidos del estudio
También puedes ver las conclusiones en esta presentación:
vía || ZDNet
Twimfeed. Twitter estilo Pinterest
Twimfeed es una nueva aplicación que te muestra las imágenes que cuelgan tus seguidos en tu stream de Twitter. Solo debes autorizar la aplicación y te mostrara esa imágenes a lo que ya todos llamamos estilo Pinterest.
miércoles, 28 de marzo de 2012
Mejora para compartir entradas en Google+
Así como hay una manera de mejorar la forma de compartir las entradas en Facebook, podría ser que hubiera otra para hacer lo mismo en Google+. Al igual que la anterior, es una parte no demasiado documentada del API sobre la cual hay muchos foros que intentan poner algo de luz En este caso, el código es menos engorroso ya que no tiene opciones (o nadie ha descubierto si las hay); sólo se trata de una dirección URL a la cual se le adosa la dirección de la entrada a compartir, lo que daría como resultado algo como esto:
Al carecer de alternativas extras, tanto el resumen como la imagen, dependerán de Blogger ya que de poco sirve usar etiquetas META OpenGraph que es lo que leen los distintos servicios ya que no podemos modificarlas para cada entrada; aunque ahora la etiqueta META description puede ser personalizada, no ocurre lo mismo con la imagen. De todas maneras, esto es mejor que nada. La URL básica es:
https://plus.google.com/share?url=direccion_a_compartir
Así que esto, permitiría abrir la ventana del ejemplo:
https://plus.google.com/share?url=http://vagabundia.blogspot.com/2012/03/las-opciones-de-las-etiquetas-meta.html
Y para incluirlo en al plantilla, deberíamos colocar una URL dinámica, es decir, una etiqueta de Blogger que indique la dirección de la entrada: data:post.url Por lo tanto, colocando lo siguiente en alguna parte del footer de las entradas, tendríamos un botón para compartir en Google+
https://plus.google.com/share?url=http://vagabundia.blogspot.com/2012/03/las-opciones-de-las-etiquetas-meta.html
Y para incluirlo en al plantilla, deberíamos colocar una URL dinámica, es decir, una etiqueta de Blogger que indique la dirección de la entrada: data:post.url Por lo tanto, colocando lo siguiente en alguna parte del footer de las entradas, tendríamos un botón para compartir en Google+
<a expr:onclick='"window.open(\"https://plus.google.com/share?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='compartir en Google+'> texto o image </a>
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
Ir a: More than twenty
2. StudioChirpy
Ir a: StudioChirpy
3. Designbyface
Ir a: Designbyface
4. Looks Like Good Design.com
Ir a: Looks like good design
5. Bloom London
Ir a: Bloom London
6. Bloom Blog
7. HappyCog
Ir a: HappyCog
8. Rodesk
Ir a Rodesk
9. Blog Academy
10. Studio Nudge
11. Lounge
Ir a Lounge
12. GO Media
Ir a: GO media
13.Theehan+Lax
Ir a: Teehan+Lax
14. Struck
Ir a: Struck
15. Make Better Apps
Ir a: Make Better Apps
16. Black Estate
Ir a: blackestate
17. DKNG Studios
Ir a:DKNG Studios
Fuentes:
Design Bombs
webdesignledger
The Best Designs
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
Ir a: More than twenty
2. StudioChirpy
Ir a: StudioChirpy
3. Designbyface
Ir a: Designbyface
4. Looks Like Good Design.com
Ir a: Looks like good design
5. Bloom London
Ir a: Bloom London
6. Bloom Blog
7. HappyCog
Ir a: HappyCog
8. Rodesk
Ir a Rodesk
9. Blog Academy
10. Studio Nudge
11. Lounge
Ir a Lounge
12. GO Media
Ir a: GO media
13.Theehan+Lax
Ir a: Teehan+Lax
14. Struck
Ir a: Struck
15. Make Better Apps
Ir a: Make Better Apps
16. Black Estate
Ir a: blackestate
17. DKNG Studios
Ir a:DKNG Studios
Fuentes:
Design Bombs
webdesignledger
The Best Designs
martes, 27 de marzo de 2012
Fame. Gana seguidores en Twitter jugando
Fame es como un juego que te permite ganar seguidores, solo debes introducir tu nombre de usuario y tendras la posibilidad de participar en el sorteo diario de seguidores, si resultas ganador automaticamente te seguiran todos los que han participado en el sorteo.
Al acceder al sorteo te proporcionan un enlace que te permitira obtener mas 5 papeletas mas por cada persona que se apunte siguiendo ese enlace.
La explosión del Inbound Marketing
GPlus.com ha realizado esta infografía que nos muestra como se esta usando el inbound marketing para atraer la atención de posibles clientes y como esta creciendo su uso a lo largo de este año.
Dos problemas, dos soluciones
1Al parecer, algunos usuarios de Blogger tienen problemas para acceder a las entradas marcadas como Borradores" cuando usan la nueva interfaz; no se ve la opción en el menú.
Según The Real Blogger Status, el problema se soluciona con facilidad aunque, obviamente, es un error del sistema que imagino que alguien tendrá que resolver.
Para intentarlo, hay que editar cualquier entrada ya publicada y guardarla como Borrador. Luego, volver a editar esa misma entrada y publicarla otra vez.
Aparentemente, eso hará que vuelva a aparecer la lista en el menú pero ... temporalmente; la próxima vez que se entre a Blogger, a menos que ellos hayan arreglado el fallo, la lista de borradores volverá a "desaparecer" y habrá que hacer otra vez lo mismo.
Según The Real Blogger Status, el problema se soluciona con facilidad aunque, obviamente, es un error del sistema que imagino que alguien tendrá que resolver.
Para intentarlo, hay que editar cualquier entrada ya publicada y guardarla como Borrador. Luego, volver a editar esa misma entrada y publicarla otra vez.
Aparentemente, eso hará que vuelva a aparecer la lista en el menú pero ... temporalmente; la próxima vez que se entre a Blogger, a menos que ellos hayan arreglado el fallo, la lista de borradores volverá a "desaparecer" y habrá que hacer otra vez lo mismo.
2Para quienes usen el gadget de Seguidores y este se vea en blanco, pueden intentar la solución que muestra Ciudad Blogger que también es sencilla.
Lo que debe hacerse es cambiar el nombre del blog la primera pantalla de Configuración de Blogger. Guardar el cambio y volverlo a cambiar por el original. Hecho eso, el gadget debería volver a tener contenido.
Lo mismo ocurre si en lugar de cambiar el nombre del blog, se cambia la dirección url pero, el nombre es un proceso menos traumático.
Lo que debe hacerse es cambiar el nombre del blog la primera pantalla de Configuración de Blogger. Guardar el cambio y volverlo a cambiar por el original. Hecho eso, el gadget debería volver a tener contenido.
Lo mismo ocurre si en lugar de cambiar el nombre del blog, se cambia la dirección url pero, el nombre es un proceso menos traumático.
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:
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.
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:
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.
Nivo Slider » slideshow con varios efectos
Hoy les traigo un slideshow de imágenes muy vistoso, bonito y fácil de instalar en nuestro blog.
El slider se llama Nivo y a continuación les enseñaré cómo instalarlo:
1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.
2.§ Lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente. Si no la tenemos, entonces haremos lo siguiente: buscamos la etiqueta </head> y antes de éste, pegamos el siguiente código:
1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.
2.§ Lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente. Si no la tenemos, entonces haremos lo siguiente: buscamos la etiqueta </head> y antes de éste, pegamos el siguiente código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
3.§ Debajo del código anterior, pegaremos el siguiente script de Nivo Slider o si gustan pueden guardalo en un documento y subirlo en algún alojamiento:
4.§ Para agregar los estilos CSS, buscamos ]]></b:skin> y encima de éste pegaremos el siguiente código:
#slider-container {
width: 940px;
height: 380px;
background: #FFF;
margin-bottom: 15px;}
.nivoSlider {
position:relative;}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;}
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;}
.nivo-caption {
position:absolute;
right:0px;
top:250px;
background: #ffffff; /*color del rectángulo transparente*/
color:#DF7BDA;
opacity:0.8;
width: 100%;
z-index:89;
display: inline;}
.nivo-caption p {
padding:3px;
margin:0;
font-size: 20px;
color: #DF7BDA; /*para modificar color del texto*/
text-align: right;
font-family: 'PT Sans', Helvetica, Arial;
}
.nivo-caption a {
display:inline !important;
color: #DF7BDA;}
.nivo-html-caption {
display:none;}
.nivo-directionNav a {
display:none;
position:absolute;
top:45%;
z-index:99;
cursor:pointer;}
.nivo-prevNav {
left:0px;}
.nivo-nextNav {
right:0px;}
.nivo-controlNav a {
position:
relative;
z-index:99;
cursor:pointer;}
.nivo-controlNav a.active {
font-weight:bold;}
#slider {
float: left;
position:relative;
width:600px;
height:300px;
background: #000 url(http://img833.imageshack.us/img833/4175/loadingpy.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:230px;
bottom:-40px;
}
.nivo-controlNav a {
width:22px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZvA2GqAI9MZuqqig89mQS07KcD_LFrw71ClVL8_KuSjGHlE-d5Mzc_i6rVKWeFbNdhaWMovQJ3ztIvlT4EF3XrJojpzcoPRuYVgZWT4M0DQ0WtLzBCU4JypR18SFU4GG3O5w3t69Fd_u/s0/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:7px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:none;
height:0px;
background:url no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position: -30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
}
.nivo-caption a {
color:#000;
text-decoration:underline;
}
5.§ Finalmente, para agregar las imágenes del slide, armaremos el siguiente HTML en el lugar donde queramos agregarlo (debajo de la cabecera, antes del footer, etc) :
<div id='slider'>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
</div>
6.§ Vamos a vista previa y si todo está bien le damos a Guardar. Ahora pueden modificarlo a su gusto. En la página web del slide podrán ver todos los efectos que pueden agregarse.
Video tutorial
También les dejo el tutorial en forma de video:
Nivo Slider
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:
...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)...
1. Patern Chevron
2. Pattern Cross
3. Pattern Diagonal
4. Patterns Dotted
5.Pattern Square
6. Pattern Diamond
7. Pattern Circles
8.Pattern Patche
9. Pattern Cadena
10.Pattern Pointe
11. Pattern Irregular
12. Pattern Brick
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 ;)
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
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAN0lEQVQYV2O8dvnafy1dLUYGAgCsgBjFcJMIKUaxEp9iDLfhUkyeQqKsJsozhBSBgpCRGEUghQCQCCgLvDlCewAAAABJRU5ErkJggg==
2. Pattern Cross
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQYV2N88eLFfwkJCUYGPACkBqwAn2KYHF6TkC0hXyHIKpBJ6O7GcCO6Qhq7kajgITbAAW/5L3lsc4OvAAAAAElFTkSuQmCC
3. Pattern Diagonal
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQALXLl/7zwjjgzhaulqMYAEYB8RmROaABAD/ew+Dsak1RQAAAABJRU5ErkJggg==
4. Patterns Dotted
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYV2O8cunKfx09HUYGAoCgApj+UYV4Q5Lo4AEAZqcEC4k4yPQAAAAASUVORK5CYII=
5.Pattern Square
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAL0lEQVQYV2NkAIKvX7/+5+bmZgSx0QFMjhHEAEniUwiSx2oKNpOHl0KSgoeYAAcAlMYfxwAe1QwAAAAASUVORK5CYII=
6. Pattern Diamond
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATUlEQVQYV2NkQANfv379DxLi5uZmRJZC4YAUwRQgs0Ea4ArRJUCSyGJghdgUwayFyTHiU4SsmHiFRFuN7hbkIMHwDDbFOIMHWTG2AAcAimZHx0CCWIsAAAAASUVORK5CYII=
7. Pattern Circles
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAO0lEQVQYV2NkAILX33/9F+VkYwSx0QFMjhHEEGRnZWBhYsSq8M+////f//zNgFUSm8nDSyFJwUNMgAMA9tclwWfJ3zkAAAAASUVORK5CYII=
8.Pattern Patche
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAeklEQVQYV42QsQ6AMAhEobEa7eTg/3+gg1M1WtMqJNdUo0aWXsMDDpjOGJctDW3Nor33SV7nnP6RYxF9Y6kyrFqSCCneY0rTGkirUFlCJSw6j5uNfeKoi0FtMDwJCJ/lBAG14x2EefjNIDb96qijfy/zdh4scTnPn4MfVRJrfd32iTAAAAAASUVORK5CYII=
9. Pattern Cadena
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAeElEQVQYV41QQQ6AIAzbiEiUkwf//0APnpCgBrRLZvBgZBe6rKXrmO5a4l7moWfgEELB672XXmcMMDlLnWHBGGpBfOZS1nSQqFRZk2oy8GO3GUtqX4vHfMga8nWKGykRPYi6CohuGKmdqEl/rZvDfJ1HQ7zO03LwCwXVebFck907AAAAAElFTkSuQmCC
10.Pattern Pointe
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAg0lEQVQYV5VQywqDMBCclaaigUJBP9JTv6UnP9KCIETRFFcnsOAx5rKz2XkkKzjPsGzaVk8hDiEoq/c+9TYTgnfp8ChEftNX1XWcQ2KP5vWR/646rhFJZUrD12pJiWhOdnkVm3OyXpcZc+FAIkUkMpbPqveIsqqRT8yOzv7MrfXkLPwAPZV9sTkDxYwAAAAASUVORK5CYII=
11. Pattern Irregular
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWUlEQVQYV2N8/f3Xf1FONkYGJPD169f/3NzccDGQGhQFMLXYNGMoBClCNh1mG4pCbCbBxBhB7vnGxAo3BN29IIVc/34zEG8isnvwWo2sEMQmyjN4g4fYAAcAhaNKnwlPL5EAAAAASUVORK5CYII=
12. Pattern Brick
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 ;)
Suscribirse a:
Entradas (Atom)