Gem@ BLOG

Biografía en Facebook

2012-01-25T02:18:00.001+01:00

En Facebook Pilar me comentaba sobre la nueva imagen de mi perfil.
Se trata de la Biografía o Timeline un nuevo diseño que como su nombre indica es parecido a una biografía o "nuestra historia" compartida por medio de las cosas que vamos contando ya sea en fotografías, vídeos o escritas.

Imagen de biografía obtenida en Google

Prueba de 7 días

En el siguiente enlace encontraremos información muy interesante pero aún así hay tener algo muy claro y es que NO hay retroceso y por lo tanto una vez pasado ese tiempo de 7 días no se puede volver al antiguo perfil.Durante ese tiempo de prueba podemos curiosear y probar todo y solo lo veremos nosotros.

A los que no les guste o simplemente prefieren quedarse con su perfil de siempre decirles que Facebook prevee que en las próximas semanas todos los perfiles sean sustituidos por el nuevo diseño de "Timeline" o "Biografía".

Si no quieres esperar puedes actualizar a biografía aquí haciendo click en "Consíguelo ahora" o esperar a que salga el anuncio en tu perfil.

Personalmente me gusta el cambio, no lo veo tan frío como el anterior diseño y recuerda mucho la actividad de un blog.

Teddy

2012-01-19T18:10:00.002+01:00

Consejos los justos

2012-01-17T15:04:00.003+01:00

Yo no sé vosotros pero en repetidas ocasiones por no decir muchísimas llego a artículos que hablan sobre largas listas de consejos para ser un buen blogger o conseguir un blog con cierta notoriedad y fíjense que no digo éxito porque es una palabra tan fugaz como confusa.

Y no hablemos de las listas de consejos para ganar dinero que esas si que no tienen desperdicio porque si saben la forma de ganar dinero ¿por qué siguen perdiendo el tiempo escribiendo las mismas tonterías que no se creen ni ellos?

Se pueden seguir ciertas indicaciones para que nuestro sitio esté bien indexado, registrarse en directorios de confianza, tener cierta actividad en las redes sociales y lo más importante que nuestro blog se actualice con frecuencia. Con esas pautas es muy probable que recibamos visitas. Es una forma elegante de darnos a conocer pero eso no garantiza nada, simplemente hará que nuestra actividad en la red será más visible.

Mi ahijado Pizcos dice que hay demasiados blogs que carecen de interés, sitios que se utilizan como el que tiene una libreta de apuntes que a la larga queda en el olvido y digo yo ¿tan malo es eso? ¿sería conveniente que todos esos blogs sin actividad desaparecieran?.

Pienso, que no hay que olvidar que toda la información es contenido compartido pero no deja de ser por ello información.

Con esos argumentos se viene abajo mi creencia que un blog es un sitio para usar a nuestro antojo o mejor dicho para nuestro "uso y disfrute".

"Si necesitas expresarte, alcanzar notoriedad, quieres ganar dinero, ect, usa las redes sociales y no abras un blog" (Pizcos)

Ahora ya sé por qué no soy millonaria, porque desde hace seis años este blog trata sobre la misma temática y tiene la misma dinámica de siempre. Algunos post ni siquiera son una traducción de otros sitios sino la forma de conseguir adaptar algo a nuestro blog explicado ni mejor ni peor simplemente a mi manera.

Es contenido que veo por aquí y por allá que van sumando archivos.Es lo que me gusta, independientemente que sea contenido fresco o no y probablemente quede en una libreta de apuntes. Pero es mi blog

Decorando con franjas de color

2012-01-16T19:02:00.008+01:00

Esa franja de colores en la parte superior del blog que se ve en algunos diseños con tendencia Web 2.0 la podemos crear con algún editor de imágenes, pero hay otra forma muy sencilla de conseguirla porque Dynamic Drive ofrece un generador (Ribbon Rules Generator ) que dicho sea de paso tiene ya un buen tiempo funcionando.

Hay dos opciones de generar la imagen, puede ser de forma aleatoria o colores escogidos por nosotros.

(Esto es una imagen, el generador en la página del autor)

Una vez obtenemos la imagen la añadimos en body (plantilla edición de HTML) de la siguiente forma:

body {
background:#000 url(url-imagen) top left repeat-x;padding-top: 10px;
------
------
------
}

(Todo el fondo de body que no es cubierto por la imagen quedará del color que añadimos anterior a la imagen, en este ejemplo #000 que es negro)

Si la parte central de la imagen queda oculta podemos dejar más espacio entre el blog y la imagen para que sea más visible en:

#outer-wrapper {
margin:30px 0 0 40px;
------
------
------
}

Las nuevas plantillas añaden Reply (sistema de respuesta en comentarios)

2012-01-12T16:16:00.008+01:00

Si hay una palabra indicada esa sería "práctico" y si fueran dos, añadiría también lo de "funcional". Así es como definiría la nueva mejora de Blogger para las nuevas plantillas.

Se trata de la implementación del sistema de respuesta en los comentarios conocido por todos como Reply y que ahora, ya no se tiene que añadir manualmente como hicimos hace unos meses.

Así me lo hizo saber Jorge Angel y así lo he comprobado que la opción Reply se puede usar en "Responder" y eliminar el comentario con el enlace "Suprimir".

El sistema es muy cómodo cuando se trata de respuestas individuales.
Aunque no soy fans de las nuevas plantillas es bueno que tengas mejoras y que sigan así.

Compartir entradas de Blogger en Google+

2012-01-07T23:57:00.020+01:00

De todas las novedades de Blogger la última es la que peor he digerido y no es por capricho sino porque no termina de convencerme el cambio igual luego una se va acostumbrando como suele pasar con casi todo.

Con el cambio me refiero a ese cambio de perfil de Blogger a Google+ pero más concretamente
Cuando Google+ cordialmente nos invitó a algunos a no utilizar el nombre de autor en Blogger y nos sugirió usar el nombre propio, entonces no pensaba yo que tendría relación a la hora de cambiar de un perfil a otro.

No sé si estaba escrito en alguna parte y yo no lo leí o lo leí sin llegar a entenderlo, o ni lo uno ni lo otro sino que no lo explicaron en ninguna parte que con el tiempo cualquier usuario que quisiera publicar sus entradas en Google+ tendría que olvidarse de su nombre de autor de toda la vida.
Que quieren que les diga, una tiene su corazoncito y hay cosas de las que cuesta desprenderse.

Igual no me explico y simplemente pienso en voz alta pero lo cierto es que por enésima vez he cambiando el perfil y seguramente lo seguiré cambiando, mientras tanto ahí van los pasos a seguir por si le sirven a alguien.

A tener en cuenta

Desde el momento que se conecta el blog a Google+ el nombre que dimos en Google+ será el que sustituya nuestro añorado nombre en Blogger y cuando digo Blogger digo comentarios y perfil del blog y en el formulario de comentarios claro está.

Hacemos de tripas corazón pensando que si los de Blogger dicen que el cambio es bueno por algo será que ellos entienden un rato.

Conectar nuestro blog con Google+

Para compartir las entradas de Blogger en Google+ necesitamos tener un perfil público y luego ya podemos hacer el cambio.
Primero hay que "conectar el blog a Google+" podemos hacerlo desde el siguiente enlace o con unos sencillos pasos que veremos a continuación.

Nos situamos en escritorio y hacemos click sobre el blog que vamos a conectar con Google+

En la esquina superior derecha veremos nuestra imagen en Blogger con la flecha del desplegable que nos lleva al perfil y la configuración de la cuenta. Justo después en el icono de la rueda dentada veremos otro desplegable y ahí en "Conectar a Google+" hacemos click con fuerza y decisión.

Otra forma de conectar el blog a Google+ es desde Escritorio/Configuración:

Inmediatamente nos muestra el antes y después de nuestro perfil, es decir, que si en Blogger yo soy Gem@ en Google+ aparece mi nombre y apellido, o supuestamente el que uno diga que es su nombre. Un poco después nos informan del funcionamiento y da unas pautas:

"Cuando hagas el cambio al perfil de Google+, tendrás 30 días para restablecer tu perfil de Blogger si quieres. Una vez finalizado este plazo, se eliminarán los datos que incluya.
La información de tu perfil de Blogger no se transferirá a tu perfil de Google+. Por tanto, debes copiar la información de tu perfil de Blogger a tu perfil de Google+ antes de hacer el cambio."

"He leído la información indicada anteriormente y comprendo perfectamente que, a partir de este momento, mi perfil público de Google+ se asociará a todos mis blogs. Estoy listo para cambiar al perfil de Google+ en Blogger."+

Si estamos conformes aceptamos marcando en la casilla correspondiente y aparecerá un botón naranja para cambiar.

La página que nos muestra a continuación es para confirmar que somos nosotros, accedemos con nuestra cuenta y contraseña y nos mostrará un listado con todos los blogs que tengamos hasta ese momento.

Marcaremos las casillas de los blogs que deseamos mostrar en nuestro perfil de Google+ y con eso termina el proceso de cambio.

Lo bueno que tiene es que podemos restablecer nuestro perfil de Blogger en cualquier momento pero todos los cambios que hagamos en nuestro perfil de Google+ no serán transferidos a Blogger.

Ver más información detallada.

Compartir las entradas en Google+

Cada vez que escribimos una entrada y le damos salida veremos que en la parte de abajo de esa entrada tenemos la opción de "Compartir" marcamos la casilla, hacemos click en Compartir y listo, nuestra entrada estará en muestro perfil de Google+.

Noche de ilusiones

2012-01-06T00:36:00.004+01:00

Slideshow para fondo del blog CSS3

2012-01-02T17:51:00.017+01:00

Con la entrada del nuevo año algunos aún están reponiendo las energías consumidas por los excesos y otros ya están pensando en cambiar el diseño del blog sin tener las ideas demasiado claras todavía.

En CODROPS si que tienen las ideas muy claras y nos presentan este fantástico tutorial para añadir un Slideshow de imágenes que ocupa todo el fondo de pantalla.

Como es costumbre ofrece varias opciones a escoger para las transiciones de imágenes y para mi ejemplo he tomado como referencia la demo nº2 que está funcionando en este blog de pruebas.

Si seguimos el tutorial ofrecido en CODROPS conseguiremos que funcione perfectamente pero el contenido del blog pasará desapercibido debido a la transparencia así que lo que haremos será añadir en outer-wrapper opacity:0.9 de esa forma la transparencia será menor y nos quedaría algo así:

#outer-wrapper {
background:#000;
width:800px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
opacity:0.9;
}

Ahora nos situamos justo antes de ]]></b:skin> y añadimos los estilos necesarios para la demo nº2 si deseáramos el efecto de otra demo podemos descargar de la página del autor un archivo comprimido con todos los ejemplos y lo necesario para ponerlos en práctica.



/* Fondo- slideshow
----------------------------------------------- */
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://1.bp.blogspot.com/-oIUwg-kYYww/TwHcFJNdpbI/AAAAAAAASUM/Xajrx6UuZ4A/s1600/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(http://2.bp.blogspot.com/-fOSyxMAloOw/TwHcBLK6DhI/AAAAAAAASUA/3z2xC1yzraI/s1600/6.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(http://2.bp.blogspot.com/-W3lBoii0PeA/TwHb8mwcqVI/AAAAAAAAST0/J1xoKKSSptE/s1600/5.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(http://1.bp.blogspot.com/-CONisBR6XsI/TwHb8DONorI/AAAAAAAASTo/xwwE-zAoB7o/s1600/4.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(http://2.bp.blogspot.com/-Kr3e9kyS6vI/TwHb7-hrgFI/AAAAAAAASTc/-d33scTTpcU/s1600/3.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(http://4.bp.blogspot.com/-f_4dgBuVYQQ/TwHb7WA_mFI/AAAAAAAASTQ/_GYK7TA_wEA/s1600/2.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(http://2.bp.blogspot.com/-DcPbXRerZiA/TwHb7cRpZDI/AAAAAAAASTE/iH5VFoIPbWE/s1600/1.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
   opacity: 0;
   -webkit-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -webkit-transform: scale(1.05);
   -webkit-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -webkit-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
   opacity: 0;
   -moz-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -moz-transform: scale(1.05);
   -moz-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -moz-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
   opacity: 0;
   -o-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -o-transform: scale(1.05);
   -o-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -o-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
   opacity: 0;
   -ms-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -ms-transform: scale(1.05);
   -ms-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -ms-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
   opacity: 0;
   animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   transform: scale(1.05);
   animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
   opacity: 0;
   -webkit-transform: translateX(200px);
}
8% {
   opacity: 1;
   -webkit-transform: translateX(0px);
}
17% {
   opacity: 1;
   -webkit-transform: translateX(0px);
}
19% {
   opacity: 0;
   -webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
   opacity: 0;
   -moz-transform: translateX(200px);
}
8% {
   opacity: 1;
   -moz-transform: translateX(0px);
}
17% {
   opacity: 1;
   -moz-transform: translateX(0px);
}
19% {
   opacity: 0;
   -moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
   opacity: 0;
   -o-transform: translateX(200px);
}
8% {
   opacity: 1;
   -o-transform: translateX(0px);
}
17% {
   opacity: 1;
   -o-transform: translateX(0px);
}
19% {
   opacity: 0;
   -o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
   opacity: 0;
   -ms-transform: translateX(200px);
}
8% {
   opacity: 1;
   -ms-transform: translateX(0px);
}
17% {
   opacity: 1;
   -ms-transform: translateX(0px);
}
19% {
   opacity: 0;
   -ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
   opacity: 0;
   transform: translateX(200px);
}
8% {
   opacity: 1;
   transform: translateX(0px);
}
17% {
   opacity: 1;
   transform: translateX(0px);
}
19% {
   opacity: 0;
   transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}

En los estilos he añadido las imágenes proporcionadas en la descarga del autor, las localizamos en:
cb-slideshow li:nth-child(1 y posteriormente las terminadas en 2 - 3 - 4 - 5 - 6

También encontraremos en cb-slideshow:after la imagen pattern.png. Todas ellas las podemos sustituir por otras teniendo en cuenta que miden 1024x 683 excepto pattern.png.

Una vez añadimos los estilos nos situamos justo después de <body>; y añadimos el HTML

        <ul class="cb-slideshow">
          <li><span>Image 01</span><div><h3>se·ren·i·ty</h3></div></li>
          <li><span>Image 02</span><div><h3>com·po·sure</h3></div></li>
          <li><span>Image 03</span><div><h3>e·qua·nim·i·ty</h3></div></li>
          <li><span>Image 04</span><div><h3>bal·ance</h3></div></li>
          <li><span>Image 05</span><div><h3>qui·e·tude</h3></div></li>
          <li><span>Image 06</span><div><h3>re·lax·a·tion</h3></div></li>
      </ul>

Sustituimos las letras que van apareciendo en la demo por las de nuestra elección (sólo las letras)

A continuación justo antes de </head> pegamos el contenido del siguiente archivo que es el script.

Y por último recordar que las imágenes de este tutorial son de Mark Sebastian.
http://creativecommons.org/licenses/by-sa/2.0/deed.en
Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0

Feliz año nuevo a todos

2011-12-30T19:58:00.004+01:00

Os abrazo, y con mi abrazo me gustaría transmitir mis deseos de PAZ y SALUD para todos.
Ojalá que este año que está a punto de comenzar inunde nuestros corazones de esperanza y nos haga fuertes para soportar todo lo que la vida nos va deparando.
Que no falte nunca el amor en vuestras vidas y ¡que no falte trabajo!

!!Feliz Año a todos, que se cumplan todos vuestros sueños¡¡

Feliz Navidad 2011

2011-12-24T13:27:00.003+01:00

Menú navideño con efecto

2011-12-23T14:08:00.004+01:00

Mobily Blocks es un menú creado con un plugin de jQuery y como podemos ver ademas de su vistosidad tiene una bonita animación que yo he aprovechado sustituyendo las imágenes por unas acordes para estas fechas.

Antes de decidirse por este menú debemos de tener en cuenta el espacio que vamos a necesitar y la utilidad que deseamos darle ya que dependiendo de eso serán las imágenes que le añadiremos.

Buscamos ]]></b:skin> y justo antes añadimos los estilos del menú

.nature {
display:block;
width:150px;
height:150px;
background:url(http://1.bp.blogspot.com/-9dUfdViRtXI/TvRyEoPUchI/AAAAAAAASQM/43V4slSwJKQ/s1600/1--.png) no-repeat;
cursor:pointer;
position:relative;
}
 .nature {
clear:both;
margin:0 auto;
z-index:2;
}
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
ul.reset li {
position:absolute;
}
ul.reset li a {
outline:none;
}
a img {
border:none;
}

Después nos situaremos justo antes de </head> y añadiremos la librería que es la siguiente línea en rojo.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Si ya la estamos utilizando omitimos ese paso y procedemos a copiar el contenido de este archivo para pegarlo justo después de la librería jQuery.Y por último editamos un nuevo gadget de html y en su interior añadimos lo siguiente:

<div class="nature">
<ul class="reset" style="display: block; z-index: 50; opacity: 0;">
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://3.bp.blogspot.com/--uWHnmxtwj8/TvRq5Dr8ZaI/AAAAAAAASNs/Pww-urqkw18/s1600/2-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://1.bp.blogspot.com/-R0O-TVnn6Tc/TvRq5f3JpxI/AAAAAAAASN8/-vCykNp7sWA/s1600/3-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://1.bp.blogspot.com/-jGpH-siqWRI/TvRrbOHitHI/AAAAAAAASPo/qIcoMjTf9p8/s1600/10-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://2.bp.blogspot.com/-Gqp3fLaeJ2g/TvRq6EOHn3I/AAAAAAAASOU/T4VBCbe2DJU/s1600/5-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 50;">
<a href="#">
<img alt="" src="http://3.bp.blogspot.com/-8G5bwU6dS5w/TvRsKbn_rhI/AAAAAAAASQA/rZN7ZP8wqMo/s320/6-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="
http://1.bp.blogspot.com/-rrqq8WFQBqA/TvRq5GmmraI/AAAAAAAASNk/bIzejcJTLwI/s1600/1-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://4.bp.blogspot.com/-NFHTvUeUthQ/TvRrNymuvWI/AAAAAAAASPE/neXCwSp-DwQ/s1600/8-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://4.bp.blogspot.com/-88siA7EtQvI/TvRrbFvpueI/AAAAAAAASPc/iti9TnFS6nA/s1600/9-.png" />
</a>
</li>
</ul>
<a class="trigger" style="display: block; position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%;"></a>
</div>

En ese código estamos añadiendo las imágenes que las podemos sustituir por otras teniendo en cuenta que miden 150x150 y que son en formato png.

Para añadir la url de los enlaces o los sitios que deseamos enlazar debemos sustituir la almohadilla <a href="#"> por la url de cada enlace.

Todo tuyo Manu.

Wallpapers Navidad 2011

2011-12-19T13:05:00.019+01:00

Con about.me nuestros perfiles en un solo lugar

2011-12-15T19:00:00.006+01:00

Cuando compartimos nuestro perfil en las redes sociales añadimos enlaces o iconos en dichas redes o en nuestro blog para ser localizados ya sea para compartir algo, como medio de comunicación o simplemente entretenimiento.

Cuando queremos informar de todos esos sitios entonces nos creamos una "landing page" llamadas también "páginas de aterrizaje" que no es otra cosa que una página única cuya utilidad o finalidad es la de promocionar algo.

http://about.me/gemablog

Cualquiera con unos minutos para dedicarle puede hacer su landing page solo debe acceder a about.me y allí nos damos de alta ingresando tres datos:

Enter an Email Address (añadimos nuestro e-mail)

Create a Password (creamos una contraseña)

Pick an About.me URL ( es el nombre que aparecerá en la url, por ejemplo http://about.me/gemablog)

La personalización es muy intuitiva y la podemos hacer desde la pestaña Edit Profile que nos proporciona un pequeño menú para escoger imagen y color de fondo, añadir una biografía, colores de texto y enlaces, tipos y tamaño de fuente, contacto y servicios en los que estamos.

Para poder añadir esos servicios o redes sociales debemos aceptar ingresando en nuestro sitio para permitir la aplicación. También podemos añadir cualquier url o crear enlaces.

Si ingresamos en la pestaña "Dashboard" comprobaremos las estadísticas de nuestro sitio y sabremos cuantas visitas tuvimos o la cantidad de enlaces a nuestro sitio.

Preparando las tarjetas navideñas

2011-12-14T17:29:00.008+01:00

Llegan las fechas navideñas y con ellas la costumbre de felicitar a familiares y amigos.

Buscamos ideas y entre esas ideas no puede faltar la típica tarjeta de felicitación que podemos personalizar ya sea con nuestra imagen personal o el logotipo de nuestra página.

Este sitio lo he conocido esta misma tarde, puedes escoger y obtener tus mejores felicitaciones de Navidad con Photo Montager

La url del sitio sale impreso en los resultados que nos da pero yo lo retoqué un poquito para ver como quedaba y lógicamente queda a decisión de cada uno si dejarlo o no.

Plantillas para Blogger en azul

2011-12-13T17:39:00.007+01:00

Escoger el color de nuestra plantilla puede ser una tarea que nos lleve tiempo decidirnos o quizás lo tengamos muy claro desde el primer momento.

La temática del sitio influye especialmente en la decisión. Los sitios dedicados a bebés, servicios médicos o tecnología se decantan por tonos azulados y en esta decisión tiene mucho que ver lo que nos trasmiten los colores.

El color azul nos transmite calma y seguridad, nos recuerda el cielo y el mar.

Junto a otros colores como el naranja o el verde se obtienen combinaciones alegres mientras que con el gris o el negro aportan elegancia y austeridad.

Todas estas plantillas y algunas más en reinventaWEB

Iconos Navidad 2011

2011-12-10T12:50:00.009+01:00

Archigraphs Christmas icons

Wallpapers y fondos navideños

2011-12-07T02:11:00.000+01:00

Size: 5,7 mb
Formato: JPG (1600 x 1200 px)
Licencia: Free for personal use.
Descarga: Year Texture

Menú vertical-transform

2011-12-06T23:45:00.010+01:00

No todos los menús deben ser horizontales ni tampoco las etiquetas deben ser una nube, un menú vertical también nos ayuda a mantener ordenado nuestro espacio.

Los enlaces van a gusto y necesidad de cada uno si no tenemos demasiadas etiquetas un menú vertical es una forma vistosa de mostrarlas. Aunque, lo más usual es que nuestro menú sea simplemente una tarjeta de presentación donde irá nuestro mail, perfil, portfolio.

¿Y por qué no? los sitios para localizarnos o dicho de otro modo las ya imprescindibles redes sociales.

Nuestro menú tiene un efecto que se consigue con la propiedad transform ¿quieren saber que es con lujo de detalles? el post "Transformaciones con CSS"de Vagabundia nos lo aclara y muestra lo que podemos llegar conseguir.

Para los que quieren un menú sin efecto simplemente eliminando la propiedad en los estilos de transform li:hover es suficiente.Los colores y tamaño no es problema, ya está marcado el lugar para cambiar si así se desea.

Vamos a simplificar la tarea y para eso incluimos todo lo necesario en un gadget de HTML, al terminar guardamos los cambios y arrastramos el gadget al lugar indicado.

Hay que tener en cuenta que dependiendo de la anchura de nuestra sidebar es el ancho que debemos dar a nuestro menú.

Y este es el contenido del gadget.

<style>#transform ul {
background: none repeat scroll 0 0 transparent;
list-style: none outside none;
}
#transform ul li {
background: url("url-imagen") repeat scroll #B599C1; /* imagen y color de fondo */
border-bottom: 1px solid #fff; /* borde inferior */
color: #ffffff; /* color texto */
text-shadow: 1px 2px 2px #505050; /* sombra del texto */
list-style: none outside none;
padding: 5px; /* separación texto y borde */
width: 230px; /* ancho del menú */
}
#transform li a:link {
color: white; /* color enlace */
}
#transform li:hover {
-moz-transform: scale(1.15); /* efecto hover transform */
background-color: #6F4062; /* color de efecto hover */
}
</style>

<div class="text-align:center;">
<div id="transform">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</div></div>

Configuramos los enlaces de la siguiente forma:
<a href="#">Enlace 1</a>

Sustituimos la almohadilla por la url del sitio a enlazar y el texto Enlace 1-2-3 y 4 por el texto que hace de enlace.

Carrousel automático con las imágenes de las entradas

2011-11-28T19:07:00.008+01:00

Hay una entrada de Pizcos que trata como su título indica sobre un "Carrousel automático con las imágenes de las entradas de tu blog"

Los pasos a seguir son muy sencillos y el resultado es muy vistoso solo hay que ubicar cada código proporcionado en el sitio correspondiente y queda a gusto de cada uno personalizar las imágenes.

Por costumbre modifico la plantilla de arriba hacia abajo, así que lo primero que encuentro son los estilos y es lo que vamos a añadir justo antes de ]]></b:skin>

#carrousel ul{
margin:30px 10px;
padding:10px;
width:550px !important; /* ancho del carrousel */
height:100px !important; /* alto del carrousel */
overflow:hidden; /
}
#carrousel li{
margin:10px;
list-style:none;
position:relative;
float:left;
}
#carrousel img{
width: 80px !important; /* ancho de la imagen */
height: 80px !important;
border: 1px solid #ECA475; /* color del borde */
background: #BB2B17; /* color de fondo */
padding:5px; /* espacio entre la imagen y el borde */
cursor: pointer;
display: inline-block;
position: relative;
-moz-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
-webkit-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
-o-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
transition: opacity .3s linear;  /* efecto opacidad de la imagen */
}
#carrousel img:hover {
background-color: #0FF; /* color de fondo al pasar el cursor */
opacity: .5;
filter:alpha(opacity=50);
}

(Es importante que el ancho del carrousel no sea mayor que el espacio disponible en nuestro blog)
Si queremos prescindir del efecto producido por la opacidad omitimos los estilos marcados en color rojo. El resto de estilos que podemos modificar ya tiene indicado a que parte corresponde.

A continuación y si no estamos usando jQuery con anterioridad añadimos la librería justo antes de </head>

Justo después añadimos directamente a la plantilla el plugin y un pequeño script que podemos copiar desde el siguiente archivo de texto. De esa forma evitamos alojamientos externos y los consiguientes problemas que ocasionan.

Guardamos los cambios y nos dirigimos a Diseño para editar un nuevo gadget de HTML, en su interior añadimos el contenido de este archivo de texto.

Encontraremos al final de ese archivo AQUÍ-URL-DEL-BLOG es necesario sustituir esa parte por la url de nuestro blog.

Y eso es todo ver ejemplo en el footer de este blog

Premios 20Blogs inscripción

2011-11-25T17:06:00.007+01:00

Con bastante retraso pero a tiempo para recordar que la fase de inscripción para participar en los Premios 20Blogs en su VI Edición es hasta el próximo 9 de diciembre.

No olvidéis que hay que dar de alta el blog y que es requisito imprescindible participar si queremos tener la posibilidad de votar.

El año pasado los que participamos no tuvimos oportunidad de optar por el premio a Mejor Diseño de blog cosa que este año si será posible, se tendrá en cuenta la originalidad y lo artístico y es un premio que está dotado con 3.000 euros y una estatuilla.
Ver más información sobre premios y bases.

Eventos onMouseOver y onMouseOut

2011-11-22T18:20:00.005+01:00

Para hacer esto que pregunta Abraham utilizamos el evento onMouseOver que se ejecuta cuando pasamos la flecha del mouse sobre un objeto en este caso un enlace y el evento onMouseOut cuando la flecha lo abandona.

Iconos redes sociales dibujo

2011-11-21T16:37:00.003+01:00

REFERENCIA:
mazu-mazu ikonki

Original efecto hover

2011-11-14T17:18:00.002+01:00

En Codrops nos tiene acostumbrados a estupendos efectos que invitan a ponerlos en práctica, uno de los últimos trata de una selección de efectos hover para añadir a imágenes y formar así una vistosa galería. En el menú superior de la demo podemos observar el resultado.

La falta de tiempo me impide probar los 10 efectos distintos pero no he podido remediar ver el resultado del ejemplo 3 y tocando un poquito aquí y allá los estilos ha quedado como la muestra con borde en las imágenes, sombra en el texto y cambiando el color de fondo.

Para conseguir un efecto igual nos situamos antes de ]]></b:skin> y añadimos los estilos, es ahí en los estilos dónde veremos las partes que podemos variar como por ejemplo color de texto y fondo para que sea acorde con el sitio.


.view {
    background-color:#FFFFFF;  /* fondo borde */  
    border: 10px solid #FFFFFF;  /* color borde */  
    box-shadow: 2px 3px 5px #696969;  /* sombra borde */ 
    cursor: default;
    float: left;
    height: 200px; /* alto de la imagen */ 
   margin: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 250px; /* ancho de la imagen */ 
}
.view .mask, .view .content {
    height: 200px; /* alto del contenido es el mismo que el de la imagen */ 
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 250px; /* ancho del contenido es el mismo que de la imagen */ 
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 17px;
    margin: 20px 0 0;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}
.view p {
    color: #FFFFFF;
    font-family: Georgia,serif;
    font-size: 12px;
    font-style: italic;
    padding: 10px 20px 20px;
    position: relative;
    text-align: center;
}
.view a.info {
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    text-transform: uppercase;
}

.view-third img {
   box-shadow: 0 0 1px #000000;
-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
}
.view-third .mask {
   background-color: rgba(0,0,0,0.6);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: translate(460px, -100px) rotate(180deg);
   -moz-transform: translate(460px, -100px) rotate(180deg);
   -o-transform: translate(460px, -100px) rotate(180deg);
   -ms-transform: translate(460px, -100px) rotate(180deg);
   transform: translate(460px, -100px) rotate(180deg);
   -webkit-transition: all 0.2s 0.4s ease-in-out;
   -moz-transition: all 0.2s 0.4s ease-in-out;
   -o-transition: all 0.2s 0.4s ease-in-out;
   -ms-transition: all 0.2s 0.4s ease-in-out;
   transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2 { 
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third p {
   -webkit-transform: translateX(300px) rotate(90deg);
   -moz-transform: translateX(300px) rotate(90deg);
   -o-transform: translateX(300px) rotate(90deg);
   -ms-transform: translateX(300px) rotate(90deg);
   transform: translateX(300px) rotate(90deg);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third a.info {
 -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-transform: translate(0px, 0px);
   -moz-transform: translate(0px, 0px);
   -o-transform: translate(0px, 0px);
   -ms-transform: translate(0px, 0px);
   transform: translate(0px, 0px);
}
.view-third:hover h2 {
 background: none repeat scroll 0 0 #9C1813; /* Título */ 
  border-top: 1px solid #000;  /* color borde top título */ 
  border-bottom: 1px solid #000;  /* color borde bottom título */ 
  text-shadow: 0px 1px 1px #111; /* sombra título */ 
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}
.view-third:hover p {
   -webkit-transform: translateX(0px) rotate(0deg);
   -moz-transform: translateX(0px) rotate(0deg);
   -o-transform: translateX(0px) rotate(0deg);
   -ms-transform: translateX(0px) rotate(0deg);
   transform: translateX(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-third:hover a.info {
 background: none repeat scroll 0 0 #9C1813; /* color de fondo enlace leer más */ 
border: 1px solid #000;  /* color borde enlace leer más */    
    color:#FFFFFF; /* color enlace leer más */ 
    text-shadow: 0px 1px 1px #111; /* sombra enlace leer más */
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
}

En un gadget de HTML añadimos lo siguiente:


<div class="view view-third">
<img src="Url-imagen" />
<div class="mask">
<h2>Título</h2>
<p>Cualquier descripción</p>
<a class="info" href="Url-enlace">Leer más</a>
</div>
</div>

En Url-imagen es el lugar para añadir la url de nuestra imagen y en Url-enlace pondremos la url del sitio a enlazar.

Caricaturas digitales en Blogs Made in SPAIN

2011-11-13T16:29:00.001+01:00

Ayer me entero que Blogs Made in SPAIN vuelve a la carga, después de un tiempo en standby regresa ofreciendo los servicios que nos tiene acostumbrados y con novedades.
La novedad que nos trae es el servicio de realización de caricaturas digitales, llamado DIGIcaturas.

El autor A. Zambrana nos explica que son caricaturas digitales personalizadas ideales para imprimir en alta resolución y enmarcar para sobremesa o pared, regalos, invitaciones de boda, tarjetas, cumpleaños, felicitaciones, camisetas, etc...
¿Os imagináis unas invitaciones de boda con la caricatura de los novios? Por 26 euros y mandando la fotografía en menos de 48 horas podemos tener nuestra caricatura. Sin esperas, sin gastos de envío.

Código QR

2011-11-07T13:19:00.011+01:00

Todos vimos ya esa especie de código de barras llamado código QR (Quick Response Barcode) que viene a ser algo así como un sistema para almacenar información.

Para poder leer un código QR es necesario un teléfono móvil, algunas marcas como I Phone, BlackBerry y Nokia ya traen lectores incorporados con los que podremos leer esa información almacenada en el código.

Cuando queremos ver la información guardada solo tenemos que apuntar con la cámara hacia el código QR y nos mostrará en pantalla la información para poder utilizarla.

En Vagabundia encontraremos información si deseamos añadir nuestro código QR en cada entrada del blog.

Los usuarios de Firefox tienen a su disposición un Plugin llamado Mobile Barcoder nos permite crear un código QR seleccionando un texto.

Encontraremos algunos sitios para generar la imagen de nuestro código y conforme pasa el tiempo esos sitios nos van ofreciendo novedades como este de QRhaker.com donde le podemos añadir una imagen o cambiar de color.

Otros sitios generadores de código QR.

uqr.me/
zxing.org
patrick-wied
patrick-wied.at/static
qrcode.kaywa.com