Los widgets o gadgets

Siguiendo con la terminología blogger de uso frecuente, hoy veremos que es un "widget" o "gadget", términos que podríamos usarlos como sinónimos.

Vemoas que es un widget, para ello tomaré la definición que nos proporciona Wikipedia:

En informática, un widget es una pequeña aplicación o programa, usualmente presentado en archivos o ficheros pequeños que son ejecutados por un motor de widgets o Widget Engine. Entre sus objetivos están los de dar fácil acceso a funciones frecuentemente usadas y proveer de información visual. Sin embargo los widgets pueden hacer todo lo que la imaginación desee e interactuar con servicios e información distribuida en Internet; pueden ser vistosos relojes en pantalla, notas, calculadoras, calendarios, agendas, juegos, ventanas con información del tiempo en su ciudad, etcétera.

Los widgets de escritorio también se conocen como gadgets, una nueva categoría de mini aplicaciones, diseñadas para proveer de información o mejorar una aplicación o servicios de un ordenador o computadora, o bien cualquier tipo de interacción a través del World Wide Web, por ejemplo una extensión de alguna aplicación de negocios, que nos provea información en tiempo real del estatus del negocio u organización.

Una característica común a los widgets, es que son de distribución gratuita a través de Internet.

En otras palabras, son las pequeñas aplicaciones (aunque hay excepciones) que generalmente adornan nuestra sidebar o nos sirvan de utilidad, como los calendarios, relojes, etc.

» Ahora, si deseas encontrar gadgets para tu blog, puedes visitar estas etiquetas: Accesorios y Recursos

BloggerThemes.net » plantillas para blogger

Descubro BloggerThemes.net, un sitio web donde encontraremos plantillas muy elegantes y sofisticadas para nuestro blog; aquí, una pequeñísima muestra.



► BloggerThemes.net

Sobre enlaces o links (1): lo básico

Vamos a ver todo lo referido a los enlaces o links; cómo crear un enlace simple, una imagen que sirva de enlace, efectos (hover, visited,etc) y otros...Claro que veremos todo esto poco a poco.

Hoy hablaremos de algunas cosas simples pero muy básicas.

► Para crear un enlace (que podremos usar an algún menú, entrada o en la sidebar) deberemos de usar la etiqueta anchor ( <a> </a> ) y el atributo href; bueno dejándonos de tecnisismos, para crear un enlace deberemos de poner lo siguiente:

<a href="URL">EL-NOMBRE-DEL-ENLACE</a>

Ejemplo: Diversas & Variadas

► Esa es la base, usaremos esta "estructura " cada vez que querramos agregar un enlace...¿Y qué pasa si queremos que en vez de texto sea una imagen la que nos sirva de enlace? Es otra pregunta frecuente que me hacen; parece que debería de haber algún "script especial", pero no es así.
Debemos usar la estructura anterior, pero sustituir el texto por una imagen de esta forma:

<a href="URL"><img src="URL-DE-LA-IMAGEN"></a>

Ejemplo:



► Y si queremos que el enlace se abra en una nueva página? Solo agregaremos a nuestra estructura base el atributo target, no importa si el enlace será con texto o con imagen, de la siguiente forma:

<a href="URL" target="_blank">EL-NOMBRE-DEL-ENLACE</a>

Ejemplos en texto e imagen:

Diversas & Variadas



► También, si queremos podemos usar texto e imagen al mismo tiempo en un enlace...Y ya deben de saber cómo hacerlo, pero de todas formas pongo como quedaría la estructura.

<a href="URL">EL-NOMBRE-DEL-ENLACE<img src="URL-DE-LA-IMAGEN"></a>

Diversas & Variadas

► Creo que éso sería todo por hoy, lo básico, hay todavía mucho que hablar sobre los enlaces y muchas formas de personalizarlos. Pero antes de irme, los dejo con la estructura de un enlace a correo electrónico:

<a href="mailto:aquitucorreo@electrónico">EL-NOMBRE-DEL-ENLACE</a>

Ejemplo:

Contacto

Escucha música según tu humor con YouLicense

Buscando música por internet encontré YouLicense una web muy particular que nos ofrece oír música según nuestro estado de ánimo.
Hay ocho categorías: Happy, Sad, Hypnotic, Romantic, Mysterious, Doubtful, Cool, Angry. Dbdo click en cualquiera de ellas escucharemos música alegre si estamos alegres o podemos escuchar música tristes si nos encontramos tristes. Como dije, una web muy peculiar.

TinyPic » alojar imágenes y videos

TinyPic es una web que nos ofrece alojamiento gratuito para nuestras imágenes y videos.
Es muy sencillo de usar, no requiere registrarse. Otra cosa interesante es que permite redimensionar las imágenes y, en el caso de los videos,nos permite elegir entra Standard definition o High definition.

Además, otro servicio que nos ofrece TinyPic es una galería de imágenes, íconos,fondos, avatares y videos...Es decir, un servicio muy completo.

Aplicar marca de agua con opacidad

Un efecto muy bonito y vistoso, que lo podemos usar para adornar una entrada o usarlo como pullquote o blockquote para resaltar alguna cita textual.
Bueno, para empezar diré que hay muchas formas de crear una marca de agua. En este caso, haremos una marca de agua usando opacidad, para que la imagen se vea como un fondo, como una marca de agua.

Lo único que tenemos que hacer es pegar el siguiente código en algún post o entrada:

<div style="width:300px;height:225px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(AQUÍ-URL-DE-LA-IMAGEN)">
</div>
<p style="width:290px;text-align:justify;position:relative;top:-225px;color:black;">Aquí pones tu texto o algún enlace</p>

♠ No es necesario que la imagen sea ya casi transparente, sólo basta que pongamos la URL de la imagen a "todo color" y el script que les di se encargará del resto.

♠ También es muy importante que adecuemos el ancho y el alto con la imagen que usamos. Por ejemplo , si la imagen que vamos a usar mide 200x300 px, entonces cambiamos los valores width:300px;height:225px; por width:200px;height:300px; claro que deberemos de buscar una imagen no muy grande.

♠ Con top:-225px; podrás centrar el texto que pongas sobre la marca de agua.

Ahora un ejemplo:

» La imagen original:



» La misma imagen que con el script se convertirá en marca de agua:

Este es un ejemplo: aquí
pones tu texto o algún enlace

Efecto pushbutton (botón-pulsar)

Un efecto muy ineteresante que se puede aplicar tanto a imágenes que sirvan de enlace como a simples enaces de texto.

El efecto provoca que el enlace parezca pulsado o como si se "hundiera". Pero, para saber de que trata el efecto pushbutton, aquí les dejo una muestra, pasad el mouse por encima del enlace:



Queréis hacerlo, es bastante sencillo:

♠ Para empezar, vamos a Diseño/ Edición de HTML.
♠ Con ayuda de CTRL+F buscamos ]]></b:skin> y antes de este pegamos:

.pushbutton a:hover{
position: relative;
top: 1px;
left: 1px;}

Luego de esto damos click a guardar plantilla.

♠ Ahora cada vez que querramos agregar un enlace con este efecto deberemos de hacerlo del siguiente modo:

<span class="pushbutton"><a href="AQUÍ-ENLACE-A-PÁGINA"><img src="URL-DEL-BOTÓN"></a></span>

Para agregar un enlace con texto y que tenga el efecto botón-pulsar deberemos de borrar <img src="URL-DEL-BOTÓN"> y en su lugar poner el texto.