Publicado el Editor de Plantillas de Blogger

 

Recordemos lo que veíamos en la esta entrada en la que hacíamos uso de una herramienta llamada “Editor de Plantillas” propio de Google (o Blogger en éste caso)

y a la cual podíamos acceder desde el llamado “Blogger in Draft”

 

 

Pues bien, ésta herramienta ya ha sido trasladada y publicada a Blogger, es decir, no es necesario acceder desde el “Blogger in Draft” a ella, sino que ya nos aparecerá por defecto al acceder a la opción “Diseño” de nuestro blog.

Qué es Delicious y porqué has de usarlo

Hace un breve periodo de tiempo que llevo usando Delicious, mas concretamente unos 5 meses. Lo descubrí gracias a los excompañero de trabajo, digo excompañeros porque me quedé sin trabajo en Mayo, 🙁
Un saludo compis!!!

La verdad es que es una herramienta útil y que ayuda muchísimo a cualquier tipo de usuario. Se lo recomendé a un par de amigos, y me dijeron que no lo usan demasiado, debido a que no lo han probado suficientemente. Es por ello que realizo ésta entrada para que se den y os deis cuenta todos los demás, de los usos tan prácticos de ésta herramienta.

Como comento lo descubrí gracias a un compañero de trabajo, el cual además explica ésta misma aplicación en su blog: http://po-zo.com , más concretamente en la entrada: http://po-zo.com/internet/delicious-com/ y el cual hace referencia tambien a otro blog muy interesante: el blog de Berto Pena: http://thinkwasabi.com/ (Visitenlos).

Sin más vamos a ver en que consiste Delicious:

¿Qué es Delicious?

Variando algo la definición de Wikipedia diremos que Delicious es un servicio de gestión de marcadores en web que permite agregar éstos marcadores (antes guardados en los navegadores) y categorizarlos con un sistema de etiquetado (tags). Además de ésto no sólo puede almacenar sitios webs, sino que también permite compartirlos con otros usuarios de Delicious y determinar cuántos tienen un determinado enlace guardado en sus marcadores.

Es decir, básicamente es un sitio en Internet donde guardar tus marcadores, con todas las ventajas de disponibilidad que acarrea. Es decir, poder tener tus marcadores en cualquier ordenador que uses. Además, a la hora de agregar éstos marcadores a Delicious podemos asignarles una serie de tags (o palabras clave que describen el enlace) de forma que el acceso a ellos sea de una forma ordenada y limpia, así como categorizada.

Por ejemplo, yo podría añadir éste mismo blog a mis enlaces en Delicios y asignarle los tags: Ejemplos, Blogger, Aplicaciones, Tutoriales, etc de forma que cuando quiera buscar en otro momento éste enlace, no tendré que navegar entre todos los enlaces que ya tengo agregados, sino que podré filtrar y buscar sólo aquellos enlaces que tengan los tags de búsqueda especificados. Ésto es especialmente útil para acceder de una forma rápida a aquel enlace que guardaste, amén de tener todos tus enlaces organizados.
Además Delicious permite agregar una descripción para cada enlace, por si quisieramos añadir alguna nota o información a recordar.

¿Alguna vez han enviado un email solo para compartir un link con sus amigos?
Otra de las ventajas de Delicious es que ésta aplicación no deja de ser una red social, de forma que puedo tener en mi red a tantos amigos como quiera, pudiendo acceder a aquellos links de éstos usuarios (tambien podremos tener enlaces privados, a los que no tendrán acceso los demás usuarios).
Ésto es una ventaja grandísima. Os pondré de nuevo un ejemplo personal. Si me llegase a interesar el mundo de la fotografía, podría acceder a la cuenta de Delicious de un amigo (el cual se metió hace poco en el mundillo) y en ella ver aquellos enlaces sobre fotografía (tutoriales, trucos, guías de compra, sitios donde guardar imágenes, aplicaciones de editado de imágenes, etc) que él ya tiene guardados, de forma que me ahorraré un gran trabajo de búsqueda de sitios que pudieran valerme.

Ésto hace además que Delicious sea un excelente buscador, tal y como explica Berto en su blog. y que cito: ¿Porqué? Porque el contenido está especialmente elegido, clasificado y etiquetado por los usuarios a mano, de forma expresa y deliberada. En Google está todo. Lo bueno y lo malo. Además, usando Delicious sabremos que:

1. Lo voy a encontrar antes. Y no por la velocidad sino por la menor cantidad de ruido. Hay menos links y son MUY precisos.

2. Los enlaces —las páginas— que voy a encontrar allí tienen más “calidad”. Personas como tú y como yo un día decidieron que ese artículo o página merecía la pena por su contenido y su redacción y la guardaron.

3. El indicador con el número de personas que han guardado esa página me ayuda a identificar, dentro de los resultados, “lo mejor de lo mejor”.

4. Las etiquetas que han colocado usuarios como yo me ayudan todavía más a encontrar lo que busco, ya que al introducir una búsqueda, luego puedo filtrar los resultados por etiquetas.


5. Visualmente la página de resultados de delicious me resulta más cómoda. Es más limpia, concisa y directa que la de Google.

Evidentemente para el resto de búsquedas Google seguirá siendo mejor, pero para cierto tipo de contenido deberíamos optar por Delicious como buscador.

Utilizando Delicious:

Una vez que hemos probado Delicious y hemos dedicido darle una oportunidad y seguir usándolo, veremos que existen aplicaciones o complementos para nuestro navegadores, que hacen que trabajar con Delicious sea más fácil y rápido.

Por ejemplo, personalemente uso Firefox como navegador y uso un complemento llamado “Delicious Bookmarks“. Ésta extensión para Firefox hace que mi navegador posea 3 botones:

El primero de ellos por la izquierda será un enlace a mi cuenta de Delicious, de forma que al pulsarlo me llevará directamente.
El segundo, hará que mi navegador muestre una barra lateral con mis marcadores en Delicious , pudiendo ver los tags asociados a los enlaces y realizar la búsqueda de enlaces.

Y el tercero será aquel botón que pulsaré cuando quiera agregar un nuevo enlace a Delicious. Al pulsarle el navegador me ofrecerá una nueva ventana donde podré añadir los tags y descripción a mi enlace, así como marcarlo como “Privado” si fuera el caso.En el ejemplo de agregación de éste propio blog que puse antes sería como muestra la imagen:

Este complemento además es personalizable, de forma que podemos indicar que acate los comandos del navegador que antes se usaban para agregar enlaces, Ctrl + D por ejemplo o que acate otros.
Además podremos agregar enlaces a nuestro navegador tal y como haciamos antes de éste complemento, pudiendole indicar que tambien los guarde en Delicios y otras opciones.


Disponeis de otro tipo de complementos para Firefox que hacen éstas y otras funciones comentadas:
https://addons.mozilla.org/es-ES/firefox/addon/1532/
https://addons.mozilla.org/es-ES/firefox/addon/4688/ 
Y otros muchos…

Así como complementos para otros navegadores, como Chrome:
https://chrome.google.com/extensions/detail/lnejbeiilmbliffhdepeobjemekgdnok
https://chrome.google.com/extensions/detail/gclkcflnjahgejhappicbhcpllkpakej

O para Opera u otros.

En fin, usen Delicious, seguro que le sacan un buen uso.


Entradas y enlaces relacionados:
http://po-zo.com/internet/delicious-com/
http://thinkwasabi.com/2010/01/razones-buscar-delicious/
http://es.wikipedia.org/wiki/Delicious
http://www.maestrosdelweb.com/editorial/delicious/

Personalizando el blogger #6 – Añadir "Leer Más" y Resumen de la entrada

 

Una de las cosas que siempre he querido incluir es la posibilidad de reducir la visualización del texto de las entradas de forma que con un simple enlace “Leer más” se acceda a todo el contenido de dicha entrada. Ésto hace que el usuario no tenga que ver todo el contenido de la entrada si no le interesa, y poder ver enseguida el siguiente comentario.

 

Existen varios métodos para llegar a conseguir ésto. Yo voy a seguir los pasos que podeis encontrar en “http://chicablogger.com/distintas-maneras-de-poner-excerpts-leer-mas-en-blogger/” para la primera de éstas formas. De ésta manera, el enlace “Leer más” sólo se añadirá a aquellas entradas que queramos nosotros, y no a todas.

Vamos a ver cómo hacerlo:

1 – Lo primero, será descargar y posteriormente subirlo a otro hosting(tal y como hemos visto en entradas anteriores) éste Script.

2 – Iremos a “Personalizar” – “Diseño” – “Edición de HTML” para modificar e incluir algunas de las líneas de nuestra plantilla.

3 – Expandimos Artilugios.

4 – Localizamos la etiqueta </head> y añadiremos antes de ésta el siguiente código:

<script type='text/javascript'
src='URL-de-nuestro-archivo-hackosphere.js' />


5 – Una vez añadido el código anterior, localizamos la línea:

<div class='post hentry uncustomized-post-template'>

situada antes de: post-header-line-1

Y la reemplazamos por ésta:

<div class='post' expr:id='"post-" + data:post.id'>

6 – Justo debajo de <div class=’post-header-line-1′/>
Localizamos las líneas:


<div class=’post-body entry-content’>
<data:post.body/>


Y las sustituimos por:


<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p>
<a expr:onclick='"javascript:showFull("post-" +
data:post.id + "");"'
href='javascript:void(0);'>
Leer más...
</a>
</p>
</span>
<span id='hidelink' style='display:none'>
<p>
<a expr:onclick='"javascript:hideFull("post-" +
data:post.id + "");"'
href='javascript:void(0);'>
</a>
</p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>")
</script>
</b:if>


7 – Guardamos los cambios en la plantilla.

8 – Ahora, cada vez que queramos postear una entrada y que se muestre éste “Leer Más” lo haremos de ésta forma:


TEXTO A MOSTRAR
<span id="fullpost">
TEXTO A OCULTAR
</span>

Y ya está, parece algo más complicado de lo que en realidad es y como ven funciona.
Animense a probarlo.


Entradas y enlaces relacionados:
http://chicablogger.com/distintas-maneras-de-poner-excerpts-leer-mas-en-blogger/
http://elescaparatederosa.blogspot.com/2007/04/el-leer-ms-con-resumen.html

Insertar código fuente en una entrada del blog

Algunas veces, para explicarnos o intentar enseñar algo a nuestros lectores, tenemos que escribir código fuente en alguna de nuestras entradas. Yo por ejemplo he tenido que introducirlo en la entrada anterior, donde explicaba qué código había que insertar para cambiar nuestro favicon: Personalizando el blogger #5 – Inclusión de un Favicon

Sin embargo, al intentar hacerlo tal cual, pegando un código HTML por ejemplo, Blogger nos indicará que éste texto no es válido:

Para hacer esto entonces vamos a usar un servicio específico llamado SimpleCode.que presenta una sencilla pantalla.


Para ello, escribiremos en la sección “Enter Markup” el código HTML que queramos insertar en nuestra entrada, hacemos click en “Process” y nos devolverá en el apartado “Cut n´Paste” el código que sí podremos introducir en ésta entrada. Además tambie podemos ver en “Preview” cómo se mostrará el texto.






Entradas y enlaces relacionados: 
Personalizando el blogger #5 – Inclusión de un Favicon
http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process

Personalizando el blogger #5 – Inclusión de un Favicon

¿Qué es un favicon?
Del inglés favorites icon (icono de favoritos), también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular.

Por ejemplo algunos favicons famosos son el de Wikipedia Wikipedia, o el de Yahoo! Yahoo!.

Si nos fijamos, nuestro favicon por defecto es el propio de Blogger:

Blogger también permite que cambiemos nuestro favicon al blog.
Vamos a ver cómo hacerlo de una manera sencilla, quedará de la siguiente forma:

1 – Primero, deberemos de crear ésta imagen que se mostrará para nuestro blog. Ésta imagen debe de ser cuadrada y del tamaño que queramos, ya que luego reduciremos a la hora de hacer el icono. Yo por ejemplo he realizado la mía en tamaño 160×160, es ésta:

2 – Una vez tengamos ésta imagen deberemos de realizar nuestro icono a partir de ella. Éste icono deberá tener formato .ico y un tamaño de 16×16. Refiriendome al formato .ico no tenemos porqué seguir ni hacer este paso de ésta manera, pero ciertos buscadores (Explorer) no admitirán otros formatos (JPG,PNG, etc) que sí admiten el resto de buscadores (Firefox, Opera, Chrome).
Podemos usar distintos servicios Web que nos ayudarán en ésta conversión de tamaño y formato para nuestro favicon.
Yo, para éste ejemplo, usaré: favicon.cc que vemos en la siguiente imagen:

3 – Hacemos click en “Import Image“, seleccionamos nuestra imagen y hacemos click en “Upload“. Se mostrará entonces nuestro favicon en el editor y podremos modificar colores, transparencias, etc. Incluso disponemos de un “Use Animation” en el que podremos incluir más frames de nuestra imagen modificada, haciendo que nuestro favicon parezca que tenga movimiento.
Disponemos tambien de una vista “Preview” de cómo quedará nuestro favicon en una barra de direcciones.

4 – Una vez hayamos hecho los cambios oportunos, si es que queremos hacer alguno, podremos descargar nuestro favicon clickeando en “Download Favicon“. Y ya disponemos de nuestro favicon en formato .ico y tamaño 16×16.

5 – Ya realizado el favicon deberemos alojarlo (subirlo) a algún servicio de hosting. Yo por ejemplo lo subiré a mi cuenta de DropBox.

6 – Por último, editaremos nuestra plantilla de la misma forma que hacíamos en otras entradas. Iremos a “Diseño” – “Edición de HTML” y en nuestra plantilla buscaremos el texto: e insertaremos antes de él lo siguiente:

<link href='URL-de-tu-favicon' rel='shortcut icon'

type=’image/x-icon’/>

Modificando y cambiando el texto URL-de-tu-favicon por la dirección de nuestro favicon.Y listo, ya tendremos nuestro favicon para nuestro blog.

Entradas y enlaces relacionados:
http://es.wikipedia.org/wiki/Favicon
http://granisla.blogspot.com/2006/07/cmo-usar-un-favicon-en-blogger.html
http://www.favicon.cc/

Imágenes para tus Directorios #2 Pack2

 

 

Del estilo a la anterior entrada:

 

 

Aquí os traigo el otro Pack que realicé. Algunas de éstas carátulas:

 

Descarga:
Podeis descargarlas aquí:
http://www.megaupload.com/?d=YNBJG9C6
pass:CeTTa

Voy incluyendo algunas carátulas a petición de usuarios mediante actualizaciones así que si quieres alguna no dudes en pedirmela…

Imágenes para tus Directorios #1 Pack1

Hace tiempo que realicé unas carátulas para distintos tipos de directorios, para que su visualización fuera más amena desde cualquier medio de reproducción, ya fuera PC como otro, por ejemplo mi WD HD TV.
Me decidí a crearlas ya que no encontré que existiera nada por el estilo, al menos cuando busqué en su día. Las subí a algunos de los foros de los que hago uso y tuvieron y todavía tienen gran aceptación; así que he pensado en trasladarlo aquí tambien para intentar hacerlo llegar a más gente.

Hasta el momento he realizado dos packs distintos de éstas imágenes o carátulas para directorios, las cuales podeis encontrar en varios tamaños (360×540) (240×360) (120×180) (162×230) y otros.

Aquí os dejo el primero de éstos packs.

Algunas de éstas carátulas:

Descarga:
Podeis descargarlas aquí:
http://www.megaupload.com/?d=2YB3K4U0
pass:CeTTa

Agrega un chat a cualquier sitio web fácil y rápidamente

Un amigo me comentó ayer sobre esta aplicación que hoy he tenido el gusto de probar.
Ésta aplicación, llamada “Nurph“, realiza justo lo que adelanta el título de la entrada:

Agrega un chat a cualquier sitio web fácil y rápidamente.

Gracias a Nurph podremos compartir cualquier sitio web que queramos añadiendole un chat en la zona inferior de la pantalla con el cual podremos chatear con todas la personas que hayan seguido nuestro enlace y se encuentren logueadas.

Una de las ventajas de este servicio (que para otros supone una desventaja) es que podremos usarlo gracias a nuestra cuenta de Twitter. Y digo que puede ser una desventaja ya que sólo usuarios de Twitter y logeados de Nurph (en fase beta y con registros cerrados) pueden usar éste servicio.

Aunque existen en la red multitud de programas que ya realizan ésta acción de agregar una sala de chat al sitio web que queramos (tanto herramientas gratuitas como de pago) Nurph me ha gustado porque es capaz de realizarlo de una manera muy sencilla y rápida, haciendo que cualquier usuario sea capaz de realizar ésta acción.

Podemos ver un vídeo de su funcionamiento:

Vamos a ver cómo usarlo:

1 – Deberemos disponer de un sitio web donde queramos añadir la sala de chat. Por ejemplo, un artículo que queramos compartir y hablar sobre él en ese momento con alguien, un vídeo, etc. Yo lo haré precisamente con un vídeo de explicación del funcionamiento de Nurph (en inglés): http://www.youtube.com/watch?v=V4noUIRRtm8

2 – Acudimos a la web de Nurph. Aquí disponemos de una sencilla página de inicio donde ingresaremos la URL del sitio donde queramos incluir la sala de chat; tal y como se ve en la imagen:

3 – Una vez ingresada la URL haremos clic en “Go” y se nos redirigirá al sitio web que le indicamos, pero con la sala de chat agregada.

4 – Una vez que estemos en ésta dirección nos fijaremos en que la URL ha cambiado. Ahora ya NO estamos en la URL que introdujimos (en mi caso era http://www.youtube.com/watch?v=V4noUIRRtm8) sino en una URL del tipo nur.ph. Por ejemplo, en éste caso concreto la URL es:

Ésta dirección es la que pasaremos a aquellos usuarios que queramos que entren en nuestra recien estrenada sala de chat.

5 –  El siguiente paso es loguearnos (Ésto comentabamos que puede ser una desventaja, ya que al estar en fase beta, ésta aplicación sólo permite el logueo desde una cuenta Twitter o con contraseña de la beta de la aplicación, algo que no tenemos claro). Yo lo probaré con mi cuenta de Twitter, haciendo click en:

6 – Después de conceder permisos para que ésta aplicación pueda usar Twitter (sólo la primera vez), ya estoy logueado en la sala de chat con mi cuenta de Twitter, ahora sólo queda esperar a que entren aquellos usuarios a los que he facilitado la URL.

7 – Una vez conectados los usuarios ya podremos chatear entre nosotros, aunque como veiamos en la imagen anterior, yo ya podía escribir aún estando sólo en la sala de chat.

Como veis es una herramienta muy fácil de usar y rápida, que podemos usar en cualquier sitio web y además podremos enlazar con Twitter y compartir (“Share This”) la creación de la sala mediante Twitter, e-mail o Facebook:

Otro ejemplo de creación de una sala de chat, ésta vez directamente sobre mi blog. Habré tardado cosa de 20 segundos en crear la sala e invitar a alguien:

Evidentemente, éste servicio tiene tambien sus desventajas. Las que yo creo mayores a día de hoy son la no posibilidad de loguearnos con otra cuenta que no sea Twitter, la no posibilidad de salas de chat privadas así como que los usuarios no logueados puedan ver el contenido del chat. Es decir, podemos estar manteniendo una conversación de dos personas pero la cual están viendo otras dos de las que no tenemos constancia.

Esperemos que ésta aplicación avance en su funcionalidad, al menos eso se espera de una aplicación en estado beta, y mejore en éstos y otros aspectos.

Podeis encontrar más información, trucos y cuestiones sobre Nurph junto a Twitter en: http://nur.ph/twitter_tips

Entradas y enlaces relacionados:
http://www.adictosalared.com/nurph-agrega-facil-y-rapidamente-un-chat-a-cualquier-sitio-web/
http://www.genbeta.com/web/nurph-acorta-urls-mientras-chateas-con-los-visitantes-de-la-web
http://xinijos.com/2010/05/02/nurph-comparte-cualquier-sitio-web-anadiendo-un-chat-y-twitteando/

Creación de una UserBar Personalizada #2 UserBar con movimiento

 

Tal y como veiamos en la anterior entrada de éste estilo: Creación de una UserBar Personalizada y como adelantábamos en ésta, con la misma aplicación podíamos crear UserBar con movimiento, como estas que poníamos de ejemplo:

 

Vamos a ver cómo, con prácticamente los mismos pasos que ya realizabamos, podremos construir una de éstas UserBars con movimiento.

Para ello acudimos a la página en cuestión: “Designer User Bars

Seguiremos prácticamente los mismos pasos que seguiamos en la anterior entrada, exceptuando uno de ellos:

Ya no deberemos importar la imagen como haciamos en el paso 1 con la opción de “Selected Logo Layer Editor” sino que ahora cargaremos la imagen a través de la sección “Scroller Layer” y seleccionando “Add/Edit“.

Vemos que con “Scroller Layer” la ventana es prácticamente idéntica a cuando usabamos la otra opción:

Sólo que ahora disponemos de 2 barras en lugar de una, tendremos una barra de comienzo y otra barra de fin. La imagen por lo tanto partirá desde la barra de comienzo y recorrerá la imagen hasta llegar a la barra de fin. Modificamos dichas barras, así como la imagen para que se ajusten a lo que queremos mostrar y una vez esté realizado, pulsamos sobre el botón “Update Scroll Layer” o “Ponga al día la capa de Scrollbar” según el idioma en el que nos encontremos.
Una vez importado, podremos obtener una previsualización de nuestra barra con “Generate Preview” y modificar en el apartado “Scroller Layer” la velocidad de barrido de la imagen por ejemplo, con “Delay Between Frames (seconds/100)

Por ejemplo, yo tras realizar ésta acción obtengo los códigos de mi nueva barra:

Y eso es todo, podremos claro está, profundizar en el manejo de éste programa importando capas para que el movimiento dentro de ésta no se limite a este barrido; pero eso ya lo dejo en sus manos para que vayan experimentando.
Además y una vez manejada la aplicación, veremos que su manejo es sencillísimo y que tardaremos cosa de segundos en crear multitud de barras: