Gem@ BLOG

Títulos bicolor en la sidebar

2009-07-14T16:27:00.000-07:00

Deybi me preguntaba como conseguir que los títulos de la sidebar se muestren en dos colores. Hace tiempo J.Miur explicaba como hacerlo y curiosamente tenía la respuesta delante pero no la veía.

Quien enseña, aprende dos veces así que ahí va mi explicación.

Vimos como añadir estilos a la etiqueta span y entendimos que con esa etiqueta podemos cambiar los estilos de un texto escogiendo una parte en concreto.

Para añadir estilos a un texto con la etiqueta span añadimos algo así:
<span >texto</span>

Si deseamos añadir diferentes estilos dentro de un mismo texto añadimos la etiqueta span con los estilos seleccionados tantas veces como estilos deseamos añadir.

Lorem Ipsum publishing software Lorem Ipsum

Cuando ya entendemos un poco en qué consiste la etiqueta span comenzamos con el tema de la entrada. Siento la sensación que le estoy copiando literalmente el post a J.Miur pero es que no encuentro otra forma de explicarlo.

Cualquier gadget cuando lo editamos tenemos la opción de añadirle un título, podemos omitirlo pero es muy útil cuando buscamos ese gadget en plantilla de diseño o en edición de HTML.
Vamos a hacer la prueba con los gadgets de etiquetas y archivos.

En plantilla Edición de HTML marcamos para expandir la plantilla de artilugios y buscamos

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

Como explica J.Miur la clase class='title' nunca está definida (yo no la he encontrado en ninguno de los blogs que he probado)
La etiqueta <data:title> es la que genera el título, si deseamos suprimir el título bastará con suprimir esa etiqueta.
Si decidimos mostrarlo haciendo uso de la etiqueta span lo que haremos será en el código anterior suprimir lo marcado en rojo por la siguiente línea.

<h2> las <span> etiquetas </span></h2>

Guardamos los cambios y pasamos a los estilos, nos situamos justo antes de <b:skin> para añadir:

.sidebar h2 {
color: #000;
font-size: 30px;
font-weight: normal;
letter-spacing: -1px;
}
.sidebar h2 span {
color: #FFFFFF;
}

Con sidebar h2 estamos añadiendo los estilos de los títulos, si ya los tuviéramos añadidos y queremos conservarlos omitimos esa parte y añadimos sidebar h2 span es el texto que incluimos en la etiqueta span, estos últimos adquieren los mismos estilos que el anterior, si deseamos unos diferentes no hay problema en añadirlos.

Un ejemplo son los títulos de mi sidebar y en el footer de este blog.
Más ejemplos ya saben donde, en Vagabundia.

Obesity Medical Center

2009-07-13T18:17:00.000-07:00

por Zync

Cuando se habla de Obesity Medical Center se está hablando de salud, problemas como la obesidad son tratados de forma personalizada con seguimiento durante toda la vida obteniendo así los mejores resultados.

El lanzamiento de la web de las clínicas Obesity Medical Center es el motivo de este análisis en concreto sobre el diseño de la web.

La sensación al acceder a la web es agradable, los tonos claros proporcionan calidez sin embargo la mayoría de webs sobre esta temática coinciden en la gama de azul y blanco quizás un tercer color le habría dado un aire mas actual sin recordar tanto que se trata una web sobre salud y medicina.

En el header encontramos el teléfono de atención al cliente, mapa del sitio y un buscador que nos ofrece los resultados con una velocidad asombrosa.

Un atractivo formulario de contacto creado con Prototype invita a solicitar esa primera visita gratuita.

Abundan los menús bien organizados sin dar sensación de agobio, un mapa de Google nos informa de los centros repartidos por todo el territorio español.

El logotipo es muy discreto, pienso que se trata de dar importancia al contenido y lo han conseguido.

En el footer se han añadido las noticias de interés con imágenes en miniaturas, me ha extrañado mucho el excesivo uso de tablas y la carencia de estilos en esa zona.

Encuentro las páginas interiores muy didácticas, informando con lujo de detalles en qué consisten los tratamientos de la obesidad, la inclusión de archivos swf hacen más amena la información.

Los testimonios de los pacientes están presentados en vídeos, encuentro que la calidad de imagen es muy buena pero el sonido es un poco deficiente.

Las imágenes está bien representadas y añaden el atributo alt aunque algunas no contienen texto alternativo.

Me ha gustado el apartado de Calcula tu IMC (índice de masa corporal) me parece una herramienta muy actual y completa yo diría que necesaria y de visita obligada.

En definitiva encuentro la página bastante bien, los pequeños detalles comentados son subsanados por la buena organización y navegación.

Publicidad, análisis y otras parrafadas

2009-07-13T05:48:00.000-07:00

Con esta imagen de la izquierda veréis ocasionalmente algún post. Al verla decidimos si seguir leyendo o por el contrario cambiamos de página.

Para que quede claro y no se preste a confusiones debo aclarar que se tratará de un post patrocinado, y como hay mucha polémica con este tipo de post prefiero adelantarme y explicar de qué trata.

El tema es bien sencillo, se recibe dinero por analizar un producto, para eso es necesario informarse y a ser posible probar el producto del que estamos hablando. No se trata de vender algo sino todo lo contrario hay que ser críticos con el producto que se analiza.

He leído muchas opiniones de bloggers sobre este tema, venta de enlaces, banners de pago, pedir que nos inviten a un café o una cervecita, análisis y cualquier otra salida para tener unos incentivos extras gracias al blog.

Sinceramente no veo diferencia en la publicidad de Google y los banners de pago, los dos generan ganancias y son enlaces. La única diferencia es que con los banners se obtiene un pago fijo decidido por nosotros y un trato directo con los anunciantes.

Por supuesto nadie contrata un espacio pensando en hacer una obra de caridad, anunciantes y bloggers salen beneficiados y puedo decir que me han pasado cosas verdaderamente curiosas y simpáticas con algunos anunciantes pero naturalmente esas anécdotas quedarán en mi bandeja de correo.

No voy a entrar en detalles de si es ético o no hacer esta clase de post porque lo que es ético para unos puede no serlo para otros pero está claro que me importa vuestra opinión porque al fin y al cabo vosotros sois mis lectores y parte de este blog.

Y aprovechando la conversación sobre el tema publicidad quiero agradecer a todos los SPONSOR la confianza que depositaron en Gem@ BLOG, es algo que tenía en mente pero por una cosa u otra se ha ido pasando.

Thumbalizr capturas de pantalla

2009-07-12T14:36:00.000-07:00

Ante la necesidad de tomar capturas de pantalla buscamos siempre un sitio que nos ofrezca un servicio rápido y la posibilidad de varias opciones respecto a tamaño.
Thumbalizr reúne esas cualidades, es una aplicación online bastante rápida y podemos escoger el tamaño de la captura.
El sistema es el mismo que solemos usar en cualquier página de capturas, ingresamos la url de la página y hacemos click en Screen para capturar la parte superior de la web, con Page capturamos toda la página principal.
Podemos obtener una medida distinta a la que nos proporciona simplemente añadiendo el ancho deseado para la captura.

Embedit.in muestra documentos en tu blog

2009-07-08T16:08:00.000-07:00

Josep me ha informado sobre un servicio muy interesante, se llama Embedit.in nos permite subir archivos proporcionado un código para mostrarlos en un reproductor flash sin vernos en la necesidad de descargarlos para visualizarlos.
Podemos subir archivos de hasta 20 MB, los formatos permitidos son:

Documentos: Word (DOC/DOCX), Excel (XLS/XLSX), PowerPoint (PPT/PPTX), WPD, ODT, ODP, ODS, PDF

Imágenes: GIF, JPEG, PNG, TIFF, BMP, PSD

Vector Graphics: API, EPS, PS

Texto: TXT, RTF, CSV

Código: HTML, SQL, JS

Web: Añadir URL

Me ha sorprendido la sencillez y rapidez de uso además que no es necesario registro. Las opciones son muy básicas una vez tenemos los archivos subidos y accedemos por primera vez nos pide que identifiquemos nuestro proveedor.

Seguidamente se genera el código de nuestro documento y nos ofrece un panel donde podemos escoger color de fondo y adaptar el reproductor al tamaño deseado.

Hay otras opciones como añadir iconos que permitirán a nuestras visitas imprimir, descargar, o visualizar a pantalla completa así como decidir si nuestro documento es público privado.

Tenemos tres formas de mostrar a nuestras visitas un documento.

Thumb miniaturas que se abren en ventana modal.

Embed Visualizar el documento a modo de presentación.

Link En enlace de texto que se abre en ventana modal.

El código que nos proporciona en teoría está incompleto, si deseamos que pueda visualizarse debemos cerrar la etiqueta embed.

Post-it Love

2009-07-07T18:38:00.000-07:00

Visto en: Punto Geek

Adicción a Internet

2009-07-05T16:05:00.000-07:00

Recién llego de pasar el fin de semana en la playa, estaba un poco impaciente por llegar porque sabía que a mi regreso encontraría mi bandeja de correo saturada. Pero viene muy bien un descanso de vez en cuando para reponer fuerzas y desconectar un poco, aunque confieso sin vergüenza alguna que extraño una barbaridad conectarme a Internet o mejor dicho al blog.

Estos días aproveché para leer y disfrutar del mar cosa que se agradece mucho con estas temperaturas que estamos teniendo en España.

Entre lectura y baño también pensaba (no se extrañen, suelo pensar de vez en cuando) y me preguntaba si a esta digamos... impaciencia mía se le podía también llamar adicción.

Pienso que no, porque puedo resistir la tentación de buscar un ciber que lo hay pero como decimos aquí .... la procesión va por dentro.

Recuerdo un articulo que leí en terra sobre la adicción a Internet, decía que adición no es únicamente sentir la necesidad imperiosa de conectarse, va acompañado de una serie de cambios en la persona...

"Un adicto a Internet empieza conectándose con normalidad, como lo pueda hacer cualquiera, pero en la red descubre un mundo que le resulta más interesante y que le llena más que el mundo real. Paulatinamente se va enganchando hasta que llega un momento en que abandona otras actividades cotidianas así como los estudios, el trabajo, los amigos o la familia. Y lo van abandonado todo a pesar muchas veces de que se dan cuenta de lo que hacen, pero no son capaces de dejarlo"

Y de ahí vienen mis preguntas...
¿Cómo te sientes cuando no puedes conectarte durante unos días?
¿Has anulado una reunión o cita con cualquier excusa para poder conectarte?
¿Tienes más amigos en Internet que en tu círculo social?

Es mucho más serio de lo que en un principio parece, llegar al extremo de abandonar todo me parece muy fuerte y quizás debemos pensar un poco antes de responder o mejor aún no respondas simplemente piénsalo.

Iconos Twitter - Cute Tweeters

2009-06-30T17:30:00.000-07:00

De todos los iconos que he visto sobre Twitter hasta ahora estos son los que encuentro más simpáticos.

El pack de estos lindos pajaritos contiene ocho iconos en formato PNG, disponibles en tamaño 128 × 128 - 256 × 256 y 512 × 512

Licencia: Libre uso
Autor: Mirjami Manninen
Descarga:Smashing Magazine

Todos tuvimos aquella primera vez

2009-06-29T10:38:00.001-07:00

Hace tiempo Francisco de Blog and Web nos proporcionaba una serie de ejemplos de lo que él denomina Principios de blogs exitosos curiosamente hace mención a Gem@ BLOG cosa que le agradecí en su día y vuelvo a hacerlo.

Todo eso está muy bien y es bueno tenerlo en cuenta, pero cuando empezamos nadie lo hace pensando en tener un blog exitoso ¿o si?.

Creo que lo que pensamos es en añadir un contador de visitas que sea mono o un script que muestre a las visitas la banderita de su país, o aquel banner que nos muestra el título de nuestro blog con texto parpadeante aunque luego nos vuelva locos porque no se visualiza en todos los navegadores.

Son cosas que hacemos todos con toda la ilusión del mundo, y son cosas lógicas que se seguirán haciendo.

Siempre digo que el blog es como una segunda casa, o mejor dicho ese rincón de nuestro hogar que nos pertenece en exclusiva y lo decoramos a nuestro antojo, a veces según nuestro estado de ánimo y otras la mayoría de casualidad haciendo cambios aquí y allá.

Cuando me piden mi opinión sobre un blog siempre respondo lo mismo "Sé tu mismo, escribe sobre lo que te gusta y te hace feliz lo que importa es el contenido, lo demás es secundario"

Pero está claro que el diseño y la imagen que podemos dar dice mucho del autor y nos asaltan las dudas sobre lo que falta o sobra en ese espacio tan particular.

Así que, lo siguiente no lo tomen al pié de la letra porque no son consejos, es simplemente mi opinión expuesta aquí como tantas veces la expuse en los comentarios.

Para gustos hicieron los colores pero...
-Se agradece una combinación de colores donde el texto pueda leerse con facilidad.

¿Te gusta la música?
-Ofrece a las visitas la posibilidad de escoger si escuchar música o no.
Añade un reproductor en lugar de música de fondo te lo van a agradecer.

¿Si te llama un amigo por teléfono contestas?
-Entonces sé cordial y contesta los comentarios.

No pidas que te enlacen.
-Saben como hacerlo y si tienen interés te enlazarán.

Las imágenes animadas están bien, pero su abuso puede llegar a ser aburrido y cansino y según que imágenes estresante.
-Vamos a añadir sólo las necesarias.

¿Has pensado que alguien quiera dirigirse a ti de forma más personal?
-Proporciona una forma de contacto.

A veces buscamos algo en concreto pero no lo encontramos.
-Es fácil añadir un buscador interno, evitará que nos vayamos sin localizar aquello que buscamos.

Todos andamos justos de tiempo, personalmente leo los blogs en mi Reader y hay muchas personas que hacen lo mismo que yo.
-¿Qué tal si añadimos información para suscribirse?

¿Dónde están las etiquetas?

Por si aún no lo sabes las etiquetas nos ayudan a una mejor organización del blog, con ellas clasificamos las entradas.

-Etiqueta las entradas como harías por ejemplo con la ropa, camisas a un lado pantalones a otro, o ropa de invierno a un sitio de verano a otro es así de sencillo.

Por último añadiría algo muy importante activa el perfil, si tu blog es privado es muy respetable.
-Pero deja saber al menos que nos estamos dirigiendo a alguien con identidad.

Son cosas que requieren un mínimo de tiempo y nuestro blog saldrá ganando.
Ahora ya sabes mi opinión sobre tu blog.

Adiós a Google Page

2009-06-28T15:56:00.001-07:00

Recién llego de pasar el fin de semana fuera y me encuentro un correo de Google Sites Team, un correo que todos los usuarios de Google Page Creator supongo que habrán recibido.

Como todos sabéis Google Page Creator en Agosto del año pasado ya no permitía nuevas inscripciones notificando que para primeros de año 2.009 cerraría sus puertas y proporcionaba una migración a Google Sites

Pasaron los meses y los archivos alojados en Google Page permanecían activos, las últimas noticias fueron que la migración sería en Junio.

El correo viene en inglés, que por cierto no entiendo por qué Google no se dirige a sus usuarios en el idioma que escogemos cuando hacemos el registro, dice más o menos algo así.

"Como se anunció anteriormente, Google suspenderá pronto el funcionamiento del Google Page Creator. Vamos a migrar sus archivos con el fin que sigan activos sin que usted tenga que hacer el trabajo.
Sin embargo, el nuevo sitio no soporta cualquier formato de archivos y estamos escribiendo para informarle que como parte de esta migración, si no toma ninguna medida para hacer frente a esto es probable que sus archivos dejen de funcionar por lo que le recomendamos buscar otro alojamiento. Gracias por su paciencia durante esta migración"

La recomendación está clara, si tienen archivos en Google Page serán migrados a Google Sites pero los archivos js. no están permitidos y no sólo dejarán de funcionar sino que los perderemos así que descarguen sus archivos al PC y el resto ya saben.. Buscar alojamiento nuevo o alojarlos en la misma plantilla del blog.

Menú Revolution Elements

2009-06-26T16:33:00.000-07:00

Revolution elements es una plantilla de Wordpress diseñada por Jason Schuller y adaptada a Blogger por Joyful Thiek

Me gustó nada más verla, pero lo que más llamó mi atención fue el menú que sobre fondo oscuro resalta más la elegancia de la plantilla.

Conseguir ese menú no es complicado cuando con anterioridad alguien tuvo la genial idea de crearlo. En plantilla Edición de HTML justo antes de ]]></b:skin> añadimos los estilos.


/* Navigation Menu
------------------------------------------------*/
ul.nav {
list-style:none;
background:url(url-imagen-fondo-menu) top left no-repeat;
float:right;
color:#BDAFA8;
margin:20px 0px 0px 0px;
height:65px;
width:522px;
padding:8px 0px 0px 18px;
}
.nav li{
border-right:1px solid #333333;
float:right;
display:block;
width:100px;
}
.nav li a{
font-family: Helvetica, "Lucida Grande", "Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
outline:none;
color: #eeeeee; /*#62C214;*/
text-decoration:none;
display:block;
padding:5px 0 12px 5px;
width:95px;
text-transform:uppercase;
}
.nav li a span{
font-size:12px;
color:#7f7f7f;
text-transform:lowercase;
}
.nav li a:hover{
background: url(url-imagen-transparencia);
color: white;
width:95px;
}
* html .nav li a:hover{
background:#e6e6e6;
width:99px;
}
.nav li.skip{
border-right: 0px;
margin-right: 23px;
display:block;
width:93px;
}
.nav li.skip a{
width:93px;
}
/*.nav li.skip a:hover, li.top a:hover {
color: #e6e6e6 !important;*/
}
.fix:after{
content:".";display:block;
height:0;
clear:both;
visibility:hidden;
}
.fix{
display:inline-block;
}
* html .fix{height:1%;}
.fix{display:block;}
ul.downnav {
list-style: none;
margin-bottom:20px;
}
li.down-top{float:right;display:block; width:100px;}
li.down-top a{width:100px;}

Guardamos los cambios y en un gadget de HTML que más tarde arrastraremos hasta el lugar indicado incluimos lo siguiente:

<div class="nav">
<ul class="nav fix">
<li class="skip"><a href="url del enlace" title="Descripción">LINK4
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK3
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK2
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK1
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">Home
<span>Descripción </span></a></li>
</ul>
</div>

El resultado sería más o menos así:

El menu contiene dos imágenes, una de fondo que añadimos en los estilos de la plantilla donde dice url-imagen-fondo-menu

La otra imagen es una transparencia para el efecto hover y la añadimos donde dice url-imagen-transparencia.

Naturalmente para añadir las imágenes antes debemos alojarlas en un servidor para conseguir la url, yo siempre recomiendo alojar las imágenes en una entrada de Blogger que más tarde guardaremos en borrador.

Si el fondo de nuestro blog no es oscuro o simplemente deseamos una fuente en color distinto podemos modificar los estilos.

» El texto siempre viene definido en la hoja de estilos con "color" en este caso para el texto superior buscamos ul.nav y sustituimos color:#BDAFA8;

» Si se trata del texto inferior buscaremos nav li a span y modificamos color:#7f7f7f;

» Para el tamaño modificamos según el texto con font-size.

» Hay una barrita vertical apenas perceptible en el fondo oscuro que separa el texto de los enlaces, podemos cambiar su color en nav li donde dice border-right:1px solid #333333;

» Configuramos el menu en el gadget de HTML y añadimos la página a enlazar donde dice url del enlace

» En title donde Descripción es el sitio donde incluimos el texto que aparece al pasar el ratón.

» Sustituimos LINK1- LINK2- LINK3- LINK4- por el texto del enlace que vamos a mostrar.

» Igual haremos con Home podemos sustituirlo o dejarlo así y enlazar con la url de nuestro blog para actualizar la página.

Imagen multiusos

2009-06-24T18:32:00.000-07:00

Las imágenes flotantes se pusieron de moda hace tiempo, al principio fue algo decorativo o sin utilidad alguna que viene a ser lo mismo, más tarde llegaron las imágenes aleatorias la utilidad era la misma pero resultaba más vistoso.

Nos quisimos complicar un poco y nos decantamos por imágenes flotantes que desde el final del blog nos llevaban a inicio, más tarde ese viajecito de ir a inicio lo hicimos con efecto deslizante.

Por si eso fuera poco también añadimos el efecto para que desde inicio nos llevara al final.

Muy divertido, pero no se piensen que con eso termina el juego.

Me pregunta Shadow Sneak la forma de añadir imágenes flotantes-aleatorias-que nos lleven a inicio-con efecto deslizante ¿no es lo más cercano a una imagen multiusos?

Basándonos en las explicaciones de entradas anteriores veamos como conseguir ese efecto.

Lo principal es tener en nuestra plantilla el script de Prototype y Scriptaculous que podemos añadir justo antes de </head> si ya lo añadimos con anterioridad para otro efecto no es necesario añadirlo de nuevo.

RAY CREATIONS » Selección de plantillas

2009-06-23T17:03:00.001-07:00

Blue Bubbles

Blue Spiral

Dark Mistry

Dark Forest

Green Leaves

Notebook

Crystal Blue

Water World

Paradise Valley

Night Sky

Plantillas para Blogger de libre descarga « RAY CREATIONS »

Z-Graphics

2009-06-23T10:58:00.000-07:00

ΜigueŁ jίмenez™ me comentaba el otro día algo relacionado con el blog, lo visité para hacerme una idea de lo que me comentaba y descubrí que desde mi última visita su blog había dado un gran cambio.

Me sorprendió el editor de comentarios y no me resistí a probarlo. El atractivo no sólo es en apariencia sino también en eficacia. Le sugerí que sería buena idea explicar los pasos a seguir para disponer de un editor igual y no se hizo de esperar, pueden ver las explicaciones del Mini-editor Z-Graphics

En un principio la idea de esta entrada era dar a conocer el editor, pero hay otro motivo y es una nueva plantilla disponible para Blogger que ΜigueŁ a diseñado, se trata de Green Place

La plantilla es una maravilla pero hay un detalle que me ha gustado mucho y es la disponibilidad de ΜigueŁ para ayudar a solventar cualquier problema que se pueda presentar con la plantilla, así como orientar si se desea hacer alguna modificación.Creo son motivos más que suficientes para visitar Z-Graphics

Suerte ΜigueŁ y gracias por compartir

Divertidos emoticones

2009-06-19T15:42:00.000-07:00

Tamaño: 1.8 mb
Formato: eps +ai + png
Licencia: Libre uso
Author: Onur Guvener
Descarga: Dezignus

Twitter Widget ( updates )

2009-06-17T15:38:00.001-07:00

En una visita a TRECARUNGA descubro un widget que muestra nuestros updates en twitter, siguiendo el rastro me lleva a la página donde podemos conseguirlo kadazuro blog

El widget ha sido creado por kada y proporciona un generador donde debemos añadir nuestro nombre de usuario en Twitter y escoger los colores para el widget una vez terminamos copiamos el código, lo añadimos en un gadget de HTML y listo.

Añadiendo una lupa ...

2009-06-14T20:53:00.000-07:00

Hace unos días hablaba sobre Lytebox, los problemas con los scripts y su respectivo alojamiento me hicieron crear una nueva entrada para añadir los archivos a la plantilla.

Ocurre como con todo, cuando empezamos cualquier cosa nos parece un rascacielos, poco a poco no lo vemos tan alto y el rascacielos pasa a ser un adosado. Ahí es cuando pensamos que si conseguimos escalar unos cuantos pisos también podemos subir unos escalones y nos animaos a rizar el rizo.

Me preguntaba Priamo la forma de añadir una lupa a las imágenes que mostramos en la ventana modal de Lytebox con la idea de informar que puede ser ampliada.

Imagino que habrá varias formas de conseguirlo pero voy a explicarlo de dos. Con la lupa al pasar el cursor sobre la imagen y situando la lupa fuera de la imagen.

Si queremos que al pasar el cursor muestre una imagen en este caso una lupa lo primero que haremos será añadir unos estilos a la plantilla.

Nos situamos antes de ]]></b:skin> y añadimos:

#lupa {
text-align: center;
}
#lupa a img {
cursor: url("url-imagen-lupa"), pointer;
margin: 3px 3px 0 3px;
}

La imagen procuraremos que tenga fondo transparente, a ser posible en formato png. En Google si escribimos "lupa" y vamos a la pestaña "imágenes" encontraremos varias y en diferentes tamaños.

Una vez tenemos los estilos con la imagen lo que haremos será añadir el código de Lytebox en el editor de entradas.

<a href="Url-de-la-imagen" rel="lytebox" title="Título">texto o imagen</a>

Añadimos unos estilos al mismo código para escoger el tamaño de la miniatura sin necesidad de retocar la imagen.

<a href="Url-de-la-imagen" rel="lytebox" title="Título"><img width="100" alt="Imagen-lupa" src="url-imagen" height="90"/></a>

Para mostrar la lupa añadimos lo marcado en color verde.

<div id="lupa">
<a href="Url-imagen" rel="lytebox" title="Título"><img width="100" alt="Imagen-lupa" src="url-imagen" height="90"/></a>
</div>

Y centramos la imagen (color naranja)

<center> <div id="lupa">
<a href="Url-imagen" rel="lytebox" title="Título"><img width="100" alt="Imagen-lupa" src="url-imagen" height="90"/></a>
</div> </center>

J.Miur proporcionaba una idea estupenda para añadir estilos a los vídeos y partiendo de esa idea vamos a darle un poco más de vidilla a las imágenes.

A los estilos que añadimos anteriormente añadimos borde, fondo y redondeamos las esquinas.

#lupa {
text-align: center;
}
#lupa a img {cursor: url("url-imagen"), pointer;
-moz-border-radius: 8px;
background-color: #ccc;
border: 1px solid #2e2e2e;
margin: 3px 3px 0 3px;
}

También podemos añadir efecto hover.

#lupa a img:hover {
background:#DDDDDD none repeat scroll 0 0;
border:1px solid #D2D2D2;
}

Si lo que tratamos de añadir es un grupo de imágenes optaríamos por añadir un código a continuación de otro dejando un espacio entre las imágenes y respetando la etiqueta center.

En url-imagen añadimos la url de la imagen, da igual si la imagen es grande para la miniatura porque ya escogemos el tamaño para mostrarla con width y height.

Añadir la lupa fuera de la imagen es otra historia.. necesitamos crear tablas para que cada tabla acoja en su interior las dos imágenes, miniatura y lupa y alteramos el orden del código de forma que la miniatura se muestra como una imagen y el enlace para ampliar la imagen se lo añadimos a la lupa.

<center>
<img src="url-imagen" style="height: 83px; width: 110px;" /></center><center><a href="url-imagen" rel="lytebox" title="Ampliar"><img src="url-imagen-lupa" style="margin-top: 5px;" /></a>
</center>

Creamos la tabla.

<center><table border="0"><tbody><tr>
<td><center>Contenido1</center>
</td>
<td><center>Contenido2</center>
</td>
<td><center>Contenido3</center>
</td>
</tr></tbody></table></center>

En Contenido1-2-3- incluimos el código que corresponda para mostrar la imagen, si deseamos más imágenes añadimos tantas líneas como imágenes vamos a añadir.

También podemos añadir estilos al igual que con las imágenes individuales pero los tendríamos que añadir a la imagen y en el código de la tabla en lugar del enlace, de lo contrario los estilos se añaden también a la lupa.
Sería algo así:

<img src="url-imagen" style="height: 83px; width: 110px;-moz-border-radius: 8px;background-color: #ccc; border: 1px solid #2e2e2e;" /><a href="url-imagen" rel="lytebox" title="Ampliar"><img src="url-imagen-lupa" style="margin-top: 5px;" /></a>

"La lupa sobre la imagen y el efecto de esquinas redondeadas no se visualiza con Explorer, en su lugar veremos el cursor de la "mano" y líneas rectas"

Wallpapers » Firefox

2009-06-12T07:31:00.001-07:00

Fuente y descarga « ZUNEO »

Xoo Image ¿Dónde estabas antes?

2009-06-10T15:08:00.000-07:00

Hace unos meses la búsqueda de alojamiento de archivos era el tema principal, siguiendo la recomendación de J.Miur decidí añadir los scripts directamente a la plantilla y bendita sea la idea.

A partir de ahí los problemas dejaron de ser problemas pero hay excepciones, scripts que por lo extenso de su contenido hacen recomendable buscar alojamiento externo.

La semana pasada buscando algo que seguro encontraré cuando el tema esté olvidado descubrí Xoo Image es un alojamiento de archivos que no deja de ser extraño, admite todo tipo de archivos, es rápido, proporciona una url corta, es gratuito, "parece ser" que no hay límite de espacio y no es necesario registro.

Lo mejor de todo... ¡¡Funciona!!

Se lo comenté a J.Miur y coincidimos en la misma opinión "Demasiado bonito para ser cierto" no es que seamos negativos lo que ocurre que a estas alturas hablar de alojamiento es como recordar un cuento de la niñez, suena lindo pero la candidez de entonces ha dejado paso a la incredulidad.

La url que le proporcioné a J.Miur era http://img1.xooimage.com/fr/ su respuesta me dio que pensar porque me dijo que hace tiempo conocía un alojamiento que parecía el mismo, sólo que con otra url http://img7.xooimage.com/fr/

Estuve probando y se accede con las siguientes direcciones:

http://www.xooimage.com/fr/
http://img1.xooimage.com/fr/

A partir de ahí podemos acceder a nueve direcciones más que se diferencian en un número, es decir del 1 al 10

http://img10.xooimage.com/fr/

¿Dónde van los archivos que subimos? no tengo respuesta para eso, ni para la forma de recuperar un archivo alojado con anterioridad tampoco.

Lo único que he podido averiguar buscando en Google es que se trata de un alojamiento de origen francés y ahora mismo tengo scripts alojados allí funcionado.

Aún así hay que usarlo con moderación, quiero decir que la regla de oro sigue siendo añadir los archivos en la plantilla porque es la única forma que no dejarán de funcionar y porque la carga del blog resulta mucho más rápida.

La información sobre este alojamiento es un misterio, si alguien tiene algún dato será bien recibido.

Personalizar la descripción del blog

2009-06-08T15:53:00.000-07:00

La descripción del blog la podemos activar en Configuración / Básico podemos añadir hasta un máximo de 500 caracteres, los estilos de las descripción vienen definimos más o menos así:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Si marcamos para expandir la plantilla de artilugios encontraríamos la descripción de esta forma:

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>

La etiqueta <data:description/> es la que hace posible que se muestre el texto. Para suprimir el texto sería suficiente con eliminar esa etiqueta, aunque es algo que carece de sentido porque si no añadimos texto no se muestra.

A pesar que muchos no utilizamos descripción en el blog hay quien si lo hace y me preguntaban como podemos cambiar el tipo de letra, esto es posible hacerlo desde la herramienta fuentes y colores, si los cambios que deseamos hacer no se muestran en esa opción podemos modificar los estilos de ese texto como a cualquier otro texto del blog, color, tipo, tamaño y estilo de fuente

#header .description {
margin:0 30px 15px;
padding:13px 8px ;
max-width:700px;
letter-spacing:.2em;
line-height: 1.4em;
color:#111;
font-weight: bold;
font-size:12px;
font-family:Verdana,Tahoma,sans-serif;
}

Podemos añadir fondo con la precaución de modificar el ancho del espacio donde se encuentra el texto (max-width:700px;) de lo contrario ocuparía todo el espacio establecido.

background: transparent url(url-de-la-imagen) repeat;

Modificamos max-width:700px; y miramos en vista previa hasta conseguir el ancho deseado...

Borde con el atributo border.

border-bottom: 1px dashed #333;
border-top: 1px dashed #333;

Podemos seguir probando otros cambios.

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>

Si añadimos una imagen a ambos lados de la etiqueta <data:description/>

<img src="url-imagen" /><data:description/><img src="url-imagen" />

Se mostraría así.

Aprovechar la etiqueta span y añadir ahí los estilos, incluso diferentes estilos a un mismo texto.

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span style=" font-weight:bold;font-size:14px;color:#ccc;">TEXTO </span><span style=" font-weight:bold;font-size:14px;color:#000;">TEXTO...</span>
</p>
</div>
</b:includable>

Twitter Analyzer

2009-06-06T15:52:00.000-07:00

El otro día hablaba de Twitter Mood Reader es un pasatiempo que aparentemente nos muestra nuestro estado de ánimo partiendo de nuestros tweets.

Hoy vamos más lejos, tenemos un espía en Twitter que se llama Twitter Analyzer , nos permite saber datos sobre nuestra cuenta en Twitter que no habríamos imaginado.

Por ejemplo sexo y ubicación de nuestros seguidores.

Las veces que nos hacen RT y quién es esa persona que mayor número de RT nos hace.

También podemos saber que profesionales nos siguen.

Qué palabras repetimos con más frecuencia.

Nuestra popularidad en Twitter.
La antigüedad de nuestros seguidores (no teman, con antigüedad no me refiero a la edad)

El número de seguidores que se encuentran online.

Estadísticas de nuestra actividad en Twitter.

Aún hay más...

Visto en: wwwhat´s new

Vistaicons - iconos para Windows Vista

2009-06-05T17:33:00.000-07:00

Fantástica colección de iconos para Windows Vista.

Formato: png y ico
Licencia: Libre uso
Referencia y Descarga: VISTAICONS
Tamaño: Información del tamaño en cada pack.

Gadgets de imágenes para enlaces.

2009-06-03T17:14:00.000-07:00

Ariane de Templates Novo Blogger tiene un gusto exquisito para diseñar plantillas, por si eso fuera poco también tiene la amabilidad de explicar como podemos conseguir los mismos trucos o efectos que ella aplica en sus plantillas.

Hace unos días nos mostraba la forma de usar gadgets de imágenes para enlazar entradas del blog, aunque también podemos crear enlaces externos consiguiendo un atractivo y funcional menú. Ejemplo de Ariane.

Para los ejemplos se ha utilizado la plantilla Minima de Blogger si nuestra plantilla es distinta se recomienda hacer la prueba en otro blog para evitar posibles errores.

Lo primero que haremos será habilitar el croscoll para añadir nuevos gadgets, buscamos en plantilla Edición de HTML.

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
» Donde dice no lo sustituimos por yes

Luego buscamos #outer-wrapper y sustituimos el ancho (width) por 900px.
#outer-wrapper {
width: 900px;

Una vez dimos la anchura suficiente nos situamos justo antes de ]]></b:skin> para añadir los estilos de los nuevos gadgets de imágenes.

#crosscol-wrapper{

margin: 0 auto;

padding: 15px;

float:left;

border:1px solid #2e2e2e; /* color y grosor del borde que rodea el contenido del gadget */

background: #111; /* color de fondo del contenido del gadget*/

}

.crosscol h2{

margin: 0px;

padding: 0px 0px 0px;

text-align:left; /* alineación del título */

height: 25px; /*altura del espacio título */

color: #ccc; /* color de fuente del título */

font-size: 18px; /*tamaño de fuente del título */

font-weight:bold;

text-transform:uppercase;

letter-spacing:-1px;

}

.crosscol .widget{

margin: 0px 2px 0px; /*separación entre los gadgets  */

padding: 5px;

width: 200px; /*ancho de cada gadget */

height:220px; /* alto de cada gadget */

float:left; /* flotación a la izquierda (importante)*/

border: 1px solid #2e2e2e; /*color borde de cada gadget*/

background: #212121; /* color fondo de cada gadget */

}

.crosscol .widget img {

margin: 0px;

padding: 0px;

width: 200px; /* ancho de la imagen */

height:160px; /* alto de la imagen */

float:left;

border:1px solid #2e2e2e; /* color borde de imágenes */

}

.crosscol .widget img:hover{

border:1px solid #fa01e6; /* color borde en estado hover */

}

.crosscol .widget-content{

margin: 0px;

padding:3px 0 0; /* distancia entre el texto y la imagen */

color:#ccc; /* color de fuente del texto */

font-size: 97%; /* tamaño fuente del texto*/

text-align:justify; /* alineación del texto */

}

body#layout #crosscol{

margin: 0 auto;

padding: 0 0 0;

width: 900px;

float:left;

}

El siguiente paso será editar un nuevo gadget en el espacio que habilitamos para el crosscol, escogeremos para añadir imagen.

» Donde Título añadiremos el título de nuestro gadget.
» En Pie de foto es el sitio donde añadiremos texto o breve descripción.
» El espacio de Enlace lo utilizaremos para añadir la url del sitio donde seremos dirigidos al clicar sobre la imagen, puede ser una entrada en concreto o cualquier sitio externo.
» El mismo proceso lo repetimos hasta añadir cuatro imágenes.

Guardamos los cambios para no perderlos y esta vez si vamos a marcar para expandir la plantilla de artilugios y buscamos:

<b:section class='crosscol' id='crosscol' showaddelement='yes'>

"A continuación encontraremos 4 veces el siguiente código"

<b:widget id='Image4' locked='false' title='Ejemplo 4' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != ""'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

» Los cuatro códigos pertenecen a los cuatro gadgets añadidos, uno por cada imagen.
» En lugar de title='Ejemplo 4' pondría title='título de tu gadget'

Modificaremos cada una de esas cuatro partes de forma que eliminamos lo marcado en color rojo y añadimos lo marcado en color verde.

<b:widget id='Image4' locked='false'title='título de tu gadget' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<a expr:href='data:link'>
<h2><data:title/></h2>
</a>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != ""'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != ""'>
<a expr:href='data:link'>
<span class='caption'><data:caption/></span>
</a>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

El resultado de seguir estos pasos podéis verlo haciendo click en la imagen.

Twitter y los sentimientos

2009-06-01T14:03:00.000-07:00

Twitter Mood Reader se encarga de leer los sentimientos de nuestros tweets, dicho de otra forma un poco más convincente refleja con una expresión aquello que decimos en Twitter.

Según Juanguis de Punto Geek son ese tipo de cosas que no tienen casi utilidad (pero le encantan) yo creo que ese gusto es compartido por muchos.

Veamos quien se resiste.

Lytebox otra forma...

2009-05-30T16:46:00.000-07:00

Hace días en la entrada "Añadiendo vídeos con Lytebox" surgieron algunas preguntas que trataban sobre la forma de añadir los archivos en la plantilla. Todo está explicado aquí y pensaba actualizar la entrada pero, para no crear confusión he pensado que mejor sería explicarlo en lugar aparte.

Vamos a añadir los archivos directamente a la plantilla y en un gadget, de esta forma prescindimos de alojamiento externo y de los problemas que suelen ocasionar.

1º Copiamos el contenido de este archivo y lo pegamos en el interior de un gadget HTML/Javascript guardamos los cambios y arrastramos el gadget sobre las entradas. Lo que hicimos fue añadir el script en formato txt.

Si preferimos añadirlo directamente a la plantilla podemos copiar este otro y añadirlo justo antes de </head> en realidad es el mismo script con la diferencia que añadimos <![CDATA[ "CDATA" porque hay caracteres que no son permitidos.

2º En plantilla Edición de HTML nos situamos justo antes de </head> y pegamos el contenido de este otro archivo que son los estilos de la ventana modal.

En los estilos debemos añadir las imágenes para las funciones de la ventana modal que podéis conseguir botón derecho sobre la imagen, guardar como...

Las añadimos en los estilos teniendo en cuenta que cada imagen tienen un nombre y al mismo tiempo un color.
Por ejemplo.. donde dice:
#lbClose.grey { background: url(images/close_grey.png) no-repeat; }

Copiamos la url de la imagen y la añadimos donde dice images/close_grey.png

Sería algo así:
#lbClose.grey { background: url(url-imagen-close_grey.png ) no-repeat; }

Como entiendo que puede parecer confuso incluir las imágenes quise aligerar un poco el trabajo, añadí las imágenes en color gris (grey) y eliminé código que no era necesario. El resultado lo podéis copiar de este archivo de texto y añadirlo justo antes de </head>

3º El resto sigue siendo lo mismo, para añadir un enlace utilizamos la etiqueta rel="lytebox"

<a href="Url-de-la-imagen" rel="lytebox" title="Título">texto o imagen</a>

¿Cómo añadimos una imagen en lugar de texto?
Sustituyendo texto o imagen por <img src="url-imagen">

Por lógica si lo que vamos a mostrar es una miniatura la imagen tendría que ser de menor tamaño que la original que mostramos en la ventana modal, para obtener la miniatura y no vernos obligados a reducir la imagen lo que podemos hacer es "obligarla" a mostrarse en un tamaño determinado.

<img style="width:150px;height:200px;"src="url-imagen"/>

Con width le damos anchura y con height altura.

En grupos de imágenes añadiendo la etiqueta rel="lytebox[gema]"
Sustituyendo gema por el nombre adjudicado al grupo de imágenes ejemplo: paisajes, flores...

<a href="Url-de-la-imagen" rel="lytebox[gema]" title="Título">texto o imagen 1</a><a href="Url-de-la-imagen" rel="lytebox[gema]" title="Título">texto o imagen 2</a><a href="Url-de-la-imagen" rel="lytebox[gema]" title="Título">texto o imagen 3</a>

Crear un Slideshow añadiendo la etiqueta rel="lyteshow[gema]"
(Sustituir gema por el nombre adjudicado al grupo de imágenes) ejemplo: viajes, vacaciones...

<a href="Url-de-la-imagen" rel="lyteshow[gema]" title="Título">texto o imagen 1</a><a href="Url-de-la-imagen" rel="lyteshow[gema]" title="Título">texto o imagen 2</a><a href="Url-de-la-imagen" rel="lyteshow[gema]" title="Título">texto o imagen 3</a>

Añadir un iframe con la etiqueta rel="lyteframe"

<a href="iframe-único" rel="lyteframe" title="Título">texto o imagen</a>

Al usar lyteframe podemos añadir barra de scroll y escoger tamaño, lo haremos con la etiqueta rev

<a href="Url-de-la-pagina" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">texto o imagen</a>

Y por último añadimos un vídeo

"Con Explorer los vídeos no se cargan en las páginas individuales"

<a href="http://www.youtube.com/v/wRKPcx9Cpe8" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">texto o imagen</a>

En negrita lo sustituimos por la url de nuestro vídeo.