Gem@ BLOG

Wallpapers veraniegos

2012-05-22T20:18:00.011+02:00

Aquí, en España ya tenemos a la vuelta de la esquina el verano. Para alegrarte la vista y dar vidilla a esos días que faltan estos fondos de pantalla alegres y fresquitos son ideales.

Editor online HTML Instant.

2012-05-21T18:24:00.004+02:00

Seguro que alguna vez pensaste que algo extraño estaba pasando porque al escribir una entrada en el editor y luego darle salida todo se había deformado.

No tengo una explicación que no sea del tipo "son cosas de Blogger" porque aunque Blogger sea maravilloso tiene sus cosillas.

Cuando escribimos en el editor y hacemos pruebas cambiando de Edición de HTML a Redactar no tendremos problemas, pero es muy posible que si lo hacemos al contrario aparezcan etiquetas <br> como si fuera un campo de amapolas.

Lo ideal es no cambiar, o por lo menos comprobar en vista previa.
Y para ir sobre seguro podemos utilizar un editor online como este de HTML Instant.

Medley_Script descarga gratuita

2012-05-16T13:50:00.004+02:00

Descarga – Medley_Script

Iconos Robotic Social Media

2012-05-01T20:32:00.006+02:00

Tamaño: 128x128px.
Formatos: .PNG – .ICO – .PSD – .GIF

Referencia y DESCARGA Nebel Weblog

Borde en imágenes a la carta

2012-04-26T18:00:00.023+02:00

Vamos a quitar o mejor dicho conseguir que el borde que tenemos definido para las imágenes no salga siempre sino cuando nosotros queremos que salga porque a según que imágenes las afean bastante.

Cuando una imagen tiene borde o se lo hemos añadido con algún editor de imágenes va a resultar que al subirla desde una entrada nos mostrará entonces dos bordes, el que viene definido en los estilos y que le añadimos manualmente.

También es posible que la imagen tenga el mismo color de fondo que nuestro blog y si no le añadimos borde dará la impresión de estar más integrada.

La solución es crear una clase que la vamos a llamar "sinborde" y tendrá las propiedades necesarias para no mostrar el borde.

.post img.sinborde {
border:none !important;
padding:0 !important;
}

Esa parte la podemos añadir justo antes de ]]></b:skin> y donde vamos a mostrar la imagen añadimos el HTML

Añadir la url no quiere decir que tengamos que subir la imagen a un servidor externo, sino que la subimos en la misma entrada y una vez nos proporciona el código de la imagen lo desechamos todo menos la url de la imagen que la pegaremos en su lugar correspondiente "url-imagen"

Lo mismo ocurrirá si a una imagen concreta no deseamos añadir el mismo borde que al resto.

Creamos un borde especial como hicimos anteriormente y le damos distinto nombre a los estilos, de esa forma tendremos cualquier tipo de borde a mano porque sólo tendremos que copiar el HTML ya que los estilos se añaden una sola vez.

Fuente gratuita flower1

2012-04-23T14:11:00.004+02:00

Flower1 fuente gratuita que podemos utilizar descargando el zip de la página del autor, extraemos la fuente y la añadimos a la carpeta de fuentes en nuestro PC.

DESCARGA:searchfreefonts

Cutest Paw directorio de fotografías graciosas de animales

2012-04-16T00:07:00.000+02:00

Quien más quien menos hemos pasado un buen rato buscando imágenes para ilustrar nuestras entradas. Nadie dice que sea tarea sencilla porque no se trata de añadir cualquier imagen sino una que sea acorde con el tema que estamos tratando.

Lo que muchos hacemos es acudir a Google ¿no os da la sensación de ver siempre lo mismo o que no sean imágenes de la calidad esperada?

Lo ideal es tener a mano directorios o bancos de imágenes y cuando se trata de imágenes graciosas de animales ahí está Cutest Paw.

En Cutest Paw encontraremos infinidad de imágenes que podemos compartir en Facebook, Twitter y Pinterest.

REFERENCIA:CheckApps

Wallpapers Pascua 2012

2012-04-06T19:41:00.005+02:00

REFERENCIA:Wallpaperfx y Youwall

Crear collages online

2012-04-04T18:33:00.013+02:00

Crear un collage como fondo de pantalla era algo que llevaba tiempo deseando hacer, estuve buscando sitios online por aquello de la rapidez y de ver los resultados en las galerías que ofrecen. De todos, estos fueron los que más me han convencido.

Getloupe es una aplicación que nos permite crear collages con formas muy originales, al igual que otros sitios podemos utilizar las imágenes que tenemos en distintas redes sociales.

Me ha gustado que también tiene la opción de añadir imágenes alojadas en un sitio concreto y sólo añadiendo la url del sitio nos muestra una galería de imágenes donde podemos marcar para aceptar las que serán utilizadas en el collage.

Me desilusiona cuando después de utilizar algún generador descubro que en una esquinita aparece impreso el nombre del sitio. Es algo lógico, pero estéticamente le resta encanto al resultado.

Photovisi es el que más me gusta por la gran variedad de plantillas y modelos para escoger.

Al igual que todos nos permite subir imágenes de nuestra red social aceptando el acceso a la aplicación y también podemos subir las imágenes desde nuestro PC.

También he visto que Picture2life un sitio del que hablamos hace tiempo permite crear collages con la forma de nuestro país o los sitios que visitamos.

Las imágenes pueden añadirse dando permiso a la aplicación para que acceda a nuestra red social o registrándose.

Día mundial de concienciación del autismo

2012-04-02T18:33:00.004+02:00

Imagen Confederación Española Autismo

Dia 2 de abril del 2012

Iniciativas, actos y demás enlaces para el Día Mundial del Autismo.

Nuestro 2 de abril en Hamburgo

Apuntes varios sobre novedades de Blogger

2012-03-30T19:06:00.000+02:00

Ú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.

Menú con superposición de capa y jQuery

2012-03-25T05:19:00.001+02:00

Imagen original de Codrops

Un menú puede ser tan práctico y versátil como uno quiera que sea o tan llamativo y elegante como nos propongamos. Un menú puede ser el punto fuerte de un blog o tan triste e insignificante que nadie repare en él.

No hay consejo que valga a la hora de escoger un menú, como ocurre con el diseño siempre digo que eso es a gusto del propio autor.

Si se trata de hacer un menú para otra persona es bueno tener en cuenta el uso que se va a dar a ese menú o la cantidad de enlaces que va a necesitar porque si son muchos quizás sea mejor un menú desplegable. Si el blog es comercial entonces nos podemos permitir un menú dinámico con grandes imágenes y efectos atractivos.

A la hora de escoger un menú el abanico de posibilidades es muy amplio y por suerte tenemos a mano grandes sitios con tutoriales, mi favorito es Codrops y suyo es el original menú del ejemplo.

Trabaja con jQuery y tiene la particularidad que al pasar el ratón sobre las pestañas la pantalla se oscurece creando el efecto típico de las ventanas modales. Al mismo tiempo que la ventana se oscurece se despliega un submenú mostrando contenido extra.

El ancho de este menú es de 560px una medida que se adapta a casi cualquier espacio del blog, si deseamos añadir más pestañas puede hacerse y también personalizar el menú respecto a colores.

¿Seguimos? Para añadir este menú en nuestro blog podemos hacerlo de la siguiente forma: Buscamos ]]></b:skin> y justo antes añadimos los estilos:


.oe_overlay { /* estilos de la ventana */
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
ul.oe_menu {  /* ubicación y ancho del menú */
    clear: both;
    float: left;
    list-style: none outside none;
    margin: 30px 0 0 30px;
    position: relative;
    width: 560px;
}
ul.oe_menu > li {  /* cada pestaña */
    float: left;
    height: 101px;
    padding-bottom: 2px;
    position: relative;
    width: 112px;
}
ul.oe_menu > li > a { /* color pestañas visibles */
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 80px;
    margin: 1px;
    opacity: 0.8;
    padding: 10px;
    text-decoration: none;
    text-shadow: 0 0 1px #000000;
    width: 90px;
    background: #138C95;
}
ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a { /* color pestañas seleccionada  */
    background: none repeat scroll 0 0 #0B585E;
    color: #000;
    opacity: 1;
}
.oe_wrapper ul.hovered > li > a { /* color pestaña en hover */
    background: none repeat scroll 0 0 #2ED8E9;
    text-shadow: 0 0 1px #ccc;
    color: #000;
}
ul.oe_menu div { /* bloque oculto */
    background: none repeat scroll 0 0 #2ED8E9;
    display: none;
    height: 180px;
    left: 1px;
    padding: 30px;
    position: absolute;
    top: 103px;
    width: 498px;
}
ul.oe_menu div ul li a {
    color: #000;
    display: block;
    font-size: 12px;
    margin: 2px;
    padding: 2px 2px 2px 4px;
    text-decoration: none;
}
ul.oe_menu div ul.oe_full {
    width: 100%;
}
ul.oe_menu div ul li a:hover {
    background: none repeat scroll 0 0 #000000;
    color: #FFF;
}
ul.oe_menu li ul {
    float: left;
    list-style: none outside none;
    margin-right: 10px;
    text-align: left;
    width: 150px;
}
li.oe_heading {  /* borde del bloque ocultor */
    border-bottom: 1px solid #000;
    color: #000;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    text-shadow: 0 0 1px #ccc;
}

Estos estilos son los que tiene mi ejemplo, si preferimos los estilos del autor podemos descargarlos de su página.

A continuación lo que haremos será añadir jQuery justo antes de </head> si ya estamos utilizando la librería entonces omitimos este paso.

Seguimos, y copiamos el contenido de este archivo y lo pegamos a continuación de la librería jQury, es decir antes de </head>

Guardamos los cambios y con la plantilla en Diseño añadimos un gadget de HTML, en su interior pegaremos lo siguiente:


<div class="oe_wrapper">
   <div id="oe_overlay" class="oe_overlay"></div>
   <ul id="oe_menu" class="oe_menu">
    <li><a href="">Collections</a>
     <div>
      <ul>
       <li class="oe_heading">Summer 2011</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Special Events</a></li>
       <li><a href="#">Runway Show</a></li>
       <li><a href="#">Overview</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Winter 2010</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">Behind the scenes</a></li>
       <li><a href="#">Interview</a></li>
       <li><a href="#">Photos</a></li>
       <li><a href="#">Download</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Categories</li>
       <li><a href="#">Casual</a></li>
       <li><a href="#">Business</a></li>
       <li><a href="#">Underwear</a></li>
       <li><a href="#">Nature Pure</a></li>
       <li><a href="#">Swimwear</a></li>
       <li><a href="#">Evening</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Projects</a>
     <div style="left:-111px;"><!-- -112px -->
      <ul>
       <li class="oe_heading">Fashion Shows</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Events</li>
       <li><a href="#">Fashion Party 2011</a></li>
       <li><a href="#">Evening specials</a></li>
       <li><a href="#">Fashion Day Milano</a></li>
       <li><a href="#">Model Workshops</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Media</li>
       <li><a href="#">Wallpapers</a></li>
       <li><a href="#">Downloads</a></li>
       <li><a href="#">Images</a></li>
       <li><a href="#">Contest 2011</a></li>
       <li><a href="#">Fashion Mania</a></li>
       <li><a href="#">Green Earth Day</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Fragrances</a>
     <div style="left:-223px;">
      <ul class="oe_full">
       <li class="oe_heading">Fashion Fragrances</li>
       <li><a href="#">Deálure</a></li>
       <li><a href="#">Violet Woman</a></li>
       <li><a href="#">Deep Blue for Men</a></li>
       <li><a href="#">New York, New York</a></li>
       <li><a href="#">Illusion</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Events</a>
     <div style="left:-335px;">
      <ul>
       <li class="oe_heading">Shows 2010</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Shows 2011</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Special Events</li>
       <li><a href="#">Fashion Party 2011</a></li>
       <li><a href="#">Fashion Countdown Party 2010</a></li>
       <li><a href="#">Fashion Day Milano</a></li>
       <li><a href="#">Model Workshops</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Stores</a>
     <div style="left:-447px;">
      <ul>
       <li class="oe_heading">Europe</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Asia</li>
       <li><a href="#">Hong Kong</a></li>
       <li><a href="#">Tokio</a></li>
       <li><a href="#">New Delhi</a></li>
       <li><a href="#">Beijing</a></li>
      </ul>
      <ul>
       <li class="oe_heading">United States</li>
       <li><a href="#">New York</a></li>
       <li><a href="#">Los Angeles</a></li>
       <li><a href="#">Seattle</a></li>
       <li><a href="#">Miami</a></li>
      </ul>
     </div>
    </li>
   </ul>
  </div>

Ahí debemos tener en cuenta que cada almohadilla # debemos sustituirla por en sitio a enlazar y cada texto-enlace debe ser sustituido por el texto a mostrar.

FB PhotoTheater Killer (fotos de Facebook sin ventana modal)

2012-03-19T17:29:00.009+01:00

Siempre me ha gustado el efecto producido por las imágenes mostradas en ventana modal pero no todas las ventanas son iguales ni el efecto final resulta agradable a la vista.

Con Blogger tuvimos la suerte que podemos decidir si mostrar la ventana o no mostrarla desde configuración y digo con suerte porque en Facebook no tenemos esa opción de escoger y las imágenes las visualizamos en una ventana modal algo triste y poco agradable visualmente, claro que es mi opinión personal y seguramente habrá quien le guste y no tendrá problema.

Para los que como yo, sean usuarios de Firefox y prefieran visualizar las imágenes al viejo estilo existe un add-on de Firefox que anula el sistema de ventana modal y que podemos instalar en un par de pasos.

Visto en:Techtástico

Globos para decorar

2012-03-14T12:37:00.009+01:00

Un globo, dos globos, tres globos,
la luna es un globo que se me escapó,
un globo, dos globos, tres globos,
la tierra es el globo donde vivo yo.

Pues ahí van 10 globos individuales para soltar por el blog dando un aire festivo que nos servirá para vestir cualquier celebración.

Tienen distinto tamaño que podemos modificar con algún editor o con HTML según la necesidad y el lugar donde serán añadidos.

DESCARGA

Background Labs fondos para tus diseños

2012-03-10T13:18:00.011+01:00

Background Labs es un sitio donde encontrar fondos para nuestros diseños, podemos buscar entre los fondos por etiquetas y por color.

Encontraremos también fondos para Twitter que podemos instalar automáticamente dando permiso a la aplicación o haciendo click en la imagen para descargar el fondo e instalarlo nosotros mismos.

Visto en Vagabundia

Algunas fuentes para tus diseños

2012-03-09T16:34:00.009+01:00

Descarga – Demento

Descarga – Ordinatum

Descarga – Moonlight-Shadow

Descarga – Chocolate-Dealer

10 ejemplos de texto con sombra

2012-03-03T02:59:00.003+01:00

Diez ejemplos de texto con sombra que podemos conseguir de forma muy fácil, hacemos click sobre cada ejemplo y nos mostrará los estilos que añadiremos en plantilla edición de HTML justo antes de ]]></b:skin>

El HTML lo añadimos donde deseamos mostrar el efecto (plantilla, entrada o gadget de HTML). Para conseguir el efecto en título del blog, entradas o sidebar añadimos los estilos en la parte correspondiente al título por ejemplo en header h1 aunque puede cambiar dependiendo de la plantilla que estamos usando.

Para el HTML añadimos lo siguiente cambiando el id por el número del ejemplo que vamos a añadir.

<div id="shadow1">
TEXTO
</div>

Cambiamos el guión por el .com

2012-02-27T13:50:00.006+01:00

Como podéis ver nos dejamos el guión de la url por ahí aparcado en alguna parte y estrenamos por segunda vez el dominio .com

Siempre que me preguntan algo sobre configuración de dominios intento pasar la pregunta a los que de verdad entienden de esos tema, lo que si hago es informar que adquirir un dominio no garantiza disfrutarlo por un tiempo indefinido sino que hay que renovarlo cada cierto tiempo.

Normalmente los sitios que ofrecen dominios se encargan de comunicar a sus clientes el vencimiento de los mismos pero puede ocurrir que por cualquier circunstancia no veamos ese email y al no renovar perdemos el dominio pasando a ser de libre uso hasta que alguien lo adquiere de nuevo.

No es extraño que perdiera el dominio en aquellos momentos porque desconocía todo lo anterior, y también desconocía que la persona que lo adquirió tardaría cinco años en dejarlo libre.

Podía contratar un .net o un .es pero la verdad no sé si estaban disponibles y casi que me olvidé del asunto. Pero la idea rondaba cada vez que los usuarios de Linux me comentaban que no podían acceder a mi blog debido al guión.

Parece que está predestinado que los dominos lleguen a este blog envueltos en papel de regalo y desde muchos kilómetros de distancia.

Ha sido un detalle precioso que me ha emocionado porque es de esas cosas que no esperas y se reciben no solo por la ilusión del presente sino por el gesto entrañable y generoso.

Mi agradecimiento y cariño para ti amigo.

Banner Rotator

2012-02-23T02:46:00.001+01:00

Este efecto que veremos a continuación no es nada nuevo, sin embargo es un efecto que me gusta porque resulta vistoso y nada cansino ya que se añade a imágenes muy puntuales como por ejemplo la publicidad tal el ejemplo de Tutorialzine

Para ponerlo en práctica necesitamos jQuery. Si ya estamos utilizando la librería no tendremos que añadirla, si por el contrario no la usamos añadiremos justo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

A continuación añadimos el siguiente script:


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

 // Lowering the opacity of all slide in divs
 $('.banner div').css('opacity',0.4);

 // Using the hover method
 $('.banner').hover(function(){

  // Executed on mouseenter
  
  var el = $(this);
  
  // Find all the divs inside the banner div,
  // and animate them with the new size
  
  el.find('div').stop().animate({width:200,height:200},'slow',function(){
   // Show the "Visit Company" text:
   el.find('p').fadeIn('fast');
  });

 },function(){

  // Executed on moseleave

  var el = $(this);
  
  // Hiding the text
  el.find('p').stop(true,true).hide();
  
  // Animating the divs
  el.find('div').stop().animate({width:60,height:60},'fast');

 }).click(function(){
  
  // When clicked, open a tab with the address of the hyperlink
  
  window.open($(this).find('a').attr('href'));
  
 });
});
//]]>
</script>

Los estilos los añadimos como de costumbre justo antes de ]]></b:skin> y veremos que se ha marcado el lugar para poder personalizar a gusto de cada uno respecto a colores:


.bannerHolder {
   background: none repeat scroll 0 0 #ccc; /* color - fondo - bloque */
   border: 1px solid #EEEEEE; /* color de borde del bloque */
   border-radius: 12px 12px 12px 12px;
   float: left;
   height: 310px; /* altura - bloque */
   margin: 20px ;
   padding: 10px 25px;
   width: 270px; /* anchura - bloque */
}
.bannerHolder li {
   display: inline;
   list-style: none outside none;
}
.banner {
   float: left;
   height: 125px;
   margin: 5px;
   overflow: hidden;
   position: relative;
   width: 125px;
   padding:  5px;
}
.banner img {
   border: medium none;
   display: block;
}
.banner div {
   background-color: #000; /* color - efecto */
   border-radius: 100px 100px 100px 100px;
   cursor: pointer;
   height: 60px;
   position: absolute;
   width: 60px;
   z-index: 100;
}
.banner .cornerTL {
   left: -63px;
   top: -63px;
}
.banner .cornerTR {
   right: -63px;
   top: -63px;
}
.banner .cornerBL {
   bottom: -63px;
   left: -63px;
}
.banner .cornerBR {
   bottom: -63px;
   right: -63px;
}
.banner p {
   color: white; /* color del texto */
   text-shadow: 1px 1px 1px #505050; /* sombra - texto */
   cursor: pointer;
   display: none;
   font-family: Tahoma,Arial,Helvetica,sans-serif; /* fuente - texto */
   font-size: 11px; /* tamaño del texto */
   left: 0;
   position: absolute;
   text-align: center;
   top: 57px;
   width: 100%;
   z-index: 200;
}

Añadimos el html justo en el lugar que deseamos mostrar las imágenes con el efecto.

Tenemos un bloque contenedor que es "bannerHolder" y dentro de ese bloque tenemos las imágenes.

<ul class="bannerHolder">

Imágenes

</ul>

Si queremos añadir este mismo ejemplo sin el bloque de fondo simplemente no añadimos bannerHolder ni su respectiva etiqueta de cierre.

<ul class="bannerHolder">
       <li>
  <div class="banner">
  <a href="url-enlace">
 <img src="url-imagen" alt="imagen" width="125" height="125" /></a>

  <p class="companyInfo">Ejemplo-1</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
   </div></li><li>

</ul>

En "Ejemplo-1" es el lugar para añadir un pequeño texto tipo título.

El anterior código es suficiente para una imagen, si deseamos añadir más imágenes añadiremos ese mismo código tantas veces como imágenes deseamos añadir teniendo en cuenta que en caso de añadir el bloque de bannerHolder siempre termina cerrándose con la etiqueta </ul> al final.

Visto en:Tutorialzine

Gema-abuela

2012-02-15T18:05:00.006+01:00

En noviembre llegó la primera y en febrero la segunda.

Son mis princesas, o mejor dicho ¡Mis reinas! son mis nietas.

El nacimiento de la menor es el motivo de ausencia estos días, pido disculpas a todos los que mandaron algún email o dejaron comentarios sin obtener respuesta.
En breve estoy de regreso con muchas ganas y una sorpresa que os va a gustar.

Wallpapers LOVE

2012-02-01T01:12:00.013+01:00

Imagen que aparece con efecto deslizante

2012-01-28T20:11:00.001+01:00

En Dinamic Drive nos muestran una animación de fotogramas con CSS3.

El efecto muestra el deslizamiento de una imagen que permanece oculta y se sitúa sobre la imagen que visualizamos. En IE8 y IE9 también funciona, aunque no queda tan conseguido el efecto deslizante.

Como son efectos que la mayoría de veces los añadimos esporadicamente lo que haremos para probarlo es incluir todo el código necesario justo donde deseamos mostrar el efecto, ya sea una entrada o un gadget de HTML.

Primero añadimos el código para las imágenes, y ahí mismo especificamos el tamaño de la primera imagen.

(No es necesario añadir los dos ejemplos, son como referencia para añadir el tamaño de la que será la primera imagen)

A continuación de las imágenes copiamos y pegamos los estilos:


<style>
.pulloutimage{
position: relative;
}

.pulloutimage img{
position: absolute; /* absolute position and stack images inside container */
left: 0;
/* aquí estilos para el borde de la primera imagen */
}

.pulloutimage img.ondemand{ /*CSS for image shown on demand */
opacity: 0;
visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}

.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}

@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
0%{ /* Start of animation */
z-index: -1;
opacity: 0;
}
50%{ /* Half way point, move image to right edge of container */
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{ /* 51% point, stack animating image on top of original image */
z-index: 2;
}
100%{ /* Final point, move animating image back so it's on top of original */
left: 0;
box-shadow: 8px 8px 15px gray;
}
}

@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
-webkit-animation-name:revealfromright; /* specify animation keyframe */
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;

-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;

-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;

animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;

visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;/* esto es la sombra */
z-index:2;
/* aquí estilos para el borde de la segunda imagen */
}

.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
opacity:0.5;
}

</style>

- En los estilos está marcado el lugar que podemos modificar si deseamos añadir algún tipo de borde a las imágenes.

- La sombra que muestra la segunda imagen la podemos quitar eliminando la línea con la propiedad box-shadow.

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